最近答应一朋友用业余时间做一个VC和创业者之间的撮合平台，设计和产品定位有别人负责，我只负责实现。虽然我觉得像angelcrunch.com这个的项目已经做的足够到位并且被人家先入为主了，但鉴于实现成本不高，还是答应把它做出来。
当时考虑到今后项目维护的便捷性，决定使用php，所以这两天又拿出php手册翻，边翻边用codeigniter实现项目的基础功能。在这个过程中我再一次深刻体会到php是多么让人说不出的难受。从4到5.1，5.2，5.3每个版本都有些说大不大说小不小的“改进”，用好听的话讲是每天都在向“面向对象”靠拢。这个纠结的过程外行人还以为是好事情，php进步了？实则……额。建议参考一下python3k的做法，该放手的不放，不会成为什么浪漫的“剪不断理还乱”，只会成为一陀大便而已。

自己这些年也算玩了好几个语言，本来自认为对这些问题已看开了，很多自己不喜欢的但拥有强大市场影响力的语言如java，php我都能够接受。但可能年纪越大，时间越宝贵，也可能是有了一定资本做做选择题。所以最近对自己不认可的语言越来越排斥了。我得这不是坏事，说明我正在越来越接近追求自己内心真正想要的东西。

相比较而言，前段时间尝试的coffescript给我的感觉过于嚣张啦~~在好多没必要的地方过份包装，不符合我最看重的kissy原则（只做最需要去做的事情），完全把javascript扔到了脑后，让使用者找不到写js的感觉了，可能是作者太喜欢ruby了吧。

我觉得coffescript应该秉承一条核心使命，它并需要把js来一个彻底的华丽转身，因为js社区的基础已经非常雄厚，很多人的相关编码经验没必要抛弃。coffescript的使命应该只有一条最简单的：减少javascript的代码行数！
从今年开始，node.js社区的发力，seajs的出世，coffescript、sass项目的成熟标志着前端开发在这一年进入了新的加速期。如果这些好项目都今后能够健康发展，未来我们可以称今年为二次元年吗？

最后，放一个我用scss实现的一个kissy框架双飞翼布局中的代码生成功能。以前生成双飞翼布局的代码都要跑这个页面去，非常不coder，现在用scss即能够亲松实现代码生成：

/*#region Grids */
body{text-align:center;}
.wapper{margin:0 auto;width:960px;position:relative;text-align:left;}
.col-main {float: left;width: 100%; min-height: 1px;}
.col-sub, .col-extra {float: left;}
.layout:after, .main-wrap:after, .col-sub:after, .col-extra:after {content: '\20';display: block;height: 0;clear: both;}
.layout, .main-wrap, .col-sub, .col-extra {zoom: 1;}

@mixin grid-sxm0($scol) {
.main-wrap { margin-left: $scol*40px; }
.col-sub { width: $scol*40 - 10px; margin-left: -100%; }
}
.grid-s4m0{@include grid-sxm0(4);}
.grid-s5m0{@include grid-sxm0(5);}
.grid-s6m0{@include grid-sxm0(6);}
.grid-s7m0{@include grid-sxm0(7);}

@mixin grid-m0sx($scol) {
.main-wrap { margin-right: $scol*40px; }
.col-sub { width: $scol*40 - 10px; margin-left: $scol*40 - 10px; }
}
.grid-m0s6{@include grid-m0sx(6);}
.grid-m0s7{@include grid-m0sx(7);}
.grid-m0s8{@include grid-m0sx(8);}
.grid-m0s9{@include grid-m0sx(9);}
.grid-m0s10{@include grid-m0sx(10);}

@mixin grid-exm0sx($ecol, $scol) {
.main-wrap { margin: 0 $scol*40 0 $ecol*40; }
.col-sub { width: $scol*40 - 10px; margin-left: -($scol*40 - 10px); }
.col-extra { width: $ecol*40 - 10px; margin-left: -100%; }
}
.grid-e6m0s5{@include grid-exm0sx(6,5);}

@mixin grid-m0sxx($xx) {
.main-wrap { margin-right: $xx + 10px; }
.col-sub { width: $xx; margin-left: -$xx; }
}
.grid-m0s220{@include grid-m0sxx(220);}
/*#endregion Grids */

公元前399年，哲学家苏格拉底被判死刑。死于全体雅典公民之手，雅典公民民主投票的结果是：280：221。
当年的古希腊是号称民主的起源地，通俗的讲就是纯粹的民主，纯粹的人民意志。
很好听的词儿是吧？其实这里还有个完全相等的词儿：人民暴政。
即等于纯粹的民主。

随着时代的发展与变迁，特别是经历了法国大革命的洗礼，人们终于逐渐学会了，民主是需要控制的（想学学如何控制？推荐这篇贱文：民主共和宪政和黑手党政治），并且越小的集体越容易出现民主暴政，简单的讲就是多数人欺负少数人。如果只有三个人投票，1.8米以上身高的人多争收100%的个税，那三人中另外两个1.8米以下的人会放过这个议案吗？
在人数少的时候，负面道德压力变得更小，而正面道德压力永远都是差不多大，因为，那几乎只是你一个人的内心。
《狗镇》这部电影用最为纯粹、血淋淋的故事，警告了我们一定要看清人性。

其实，当年的鲁迅真的洞悉人性，，，只不过太多的中国人读鲁迅的书只当吃了碗泡面，还自夸自己吃过中国最牛的泡面。人性之恶已经让我们无数个伟大的思想家，艺术家，政治家吃了鳖。

《狗镇》就像一片刺眼的烈日，虽然说不出的难受，但是，它确实照亮了我们身前身后的道路，虽然这两道风景都是鲜血淋漓。所有对这个世界抱着天真幻想的人都应该去看看，接受它的洗礼。那些教会过我们什么叫做恨的人，让我们终于摆脱了愚蠢的傲慢和瞎眼的善良。它让我们知道自己是如何活下来，又将如何活下去。

PS:民主与共和的相互劫持坐庄是目前人类所能探索到的最平整的前进道路……

(function (window, undefined) {

var document = window.document;

var jQuery = (function() {

var jQuery =  function( selector, context ) {

return new jQuery.fn.init( selector, context, rootjQuery );

};

jQuery.fn = jQuery.prototype = {

constructor: jQuery,

init: function (selector, context, rootjQuery) {

// …

if (selector.nodeType) {

this.context = this[0] = selector;

this.length = 1;

return this;

}

// …

},

// …

};

jQuery.fn.init.prototype = jQuery.fn;

jQuery.extend = jQuery.fn.extend = function() {

     // …

};

jQuery.extend({

noConflict:function(){},

Ready:function(){},

// …

});

// …

return jQuery;

})();

jQuery.extend({

});

// …

window.jQuery = window.$ = jQuery

})(window);

首先为何会有两层(function…)()自执行函数的疑问我觉得应该解释为为了更好的模块化开发，在github中有模块化的源码

重点：

jQuery.prototype

=== jQuery.fn

=== jQuery.fn.init.prototype

逻辑上此处有矛盾，fn与fn.init.prototype形成了循环包含，但这也正体现了js为值对象语言的特征，一切皆为值拷贝（jQuery.fn.init.prototype = jQuery.fn）

PS：$.extend使用深度copy突破了值拷贝障碍，下节分析，目前$.extend的可读性并不好，充斥着魔鬼数字。

jquery.fn的成员：

• init – 初始化
• constructor – 手动指定构造函数，因为默认是 jQuery.fn.init
• length – 让这个对象更接近一个原生的数组
• size – 返回 length
• toArray – 通过 Array.prototype slice 实现生成数组
• get – 即 this[ num ] 参数索引的处理。
• pushStack – 加入一个元素
• ready – DOM文档加载后执行
• end – 返回保存的 prevObject 对象
• each – 循环执行

平常的 $(“#id”) 就是  new jQuery.fn.init(“#id”);

init函数中，返回值this附加上context、length等参数后再附带上jQuery.fn.init.prototype（即jQuery.fn）返回给调用者

以下为init函数注释代码：

init: function( selector, context, rootjQuery ) {

     // 参数:  selector  选择器

     //        context       //        rootjQuery 父节点

 

     // 处理 $(“”)、 $(null) 和 $(undefined)

     if ( !selector ) {

return this;

     }

 

     // 处理 $(DOMElement)

     if ( selector.nodeType ) {

         // 直接扔数组中， 就搞定了。

     this.context = this[0] = selector;

     this.length = 1;

     return this;

     }

 

     // 处理 $(“body”)   body 元素只存在一次，单独找它

      if ( selector === “body” && !context && document.body ) {

        &nbsp
;   // 同样扔数组中， 顺便把 selector 更新更新。

        this.context = document;

        this[0] = document.body;

        this.selector = “body”;

        this.length = 1;

       return this;

     }

 

     // 处理 $(HTML 代码 或者是 css 选择器) 

     if ( typeof selector === “string” ) {

        

match = quickExpr.exec( selector );

// 检查是否正确匹配

if ( match && (match[1] || !context) ) {

// 处理: $(html) -> $(array)

if ( match[1] ) {

      

// 获取正文，默认 document

context = context instanceof jQuery ? context[0] : context;

doc = (context ? context.ownerDocument || context : document);

 

// 如果传入简单的  “<标签>”，   ( /^<(w+)s*/?>(?:</1>)?$/)

ret = rsingleTag.exec( selector );

 

               // 返回 createElement(“tag”)

               return jQuery.merge( this, selector );

 

               // 处理: $(“#id”)

               } else {

                    elem = document.getElementById( match[2] );

                    // 因为有的浏览器 getElementById 不只返回 id匹配的，所以做检查。

                    return this;

                }

 

            // 处理 $(“标签“)

            } else if ( !context && !rnonword.test( selector ) ) {

                this.selector = selector;

                this.context = document;

                selector = document.getElementsByTagName( selector );

                return jQuery.merge( this, selector );

            //处理: $(选择器, $(…))

            } else if ( !context || context.jquery ) {

                return (context || rootjQuery).find( selector );

            // 处理: $(选择器,  上下文)

            // (相当于: $(上下文).find(选择器)

            } else {

                return this.constructor( context ).find( selector );

            }

     } else if ( jQuery.isFunction( selector ) ) {

       //如果是函数，则执行$(document).ready,这样$(document).ready(func)简为$(func)

       return rootjQuery.ready( selector );

     }

  

   // 略。

 

   // 如果传入的是一个 Dom列表 ( getElementsByTagName 结果 ) 则转为 jQuery 数组。

   return jQuery.makeArray( selector, this );

}

---

$.extend({
    mm: function () { alert(‘mm’); }
});

$.mm();

$.fn.mm = function () {
    alert(this.text());
}

$.fn.extend({
    mm: function () { alert(this.text()); }
});

$(‘h2′).mm();

2与3方案一模一样，1与3方案为同一个extend函数，1方案执行宿主会被extend自动判断为不带context的$对象

var opts = $.extend({
val: false
}, options);

返回俩参数合并后的对象，后者覆盖前者 // 可见extend函数有多复杂

贴一下$.extend函数代码：

jQuery.extend = jQuery.fn.extend = function() {

var target = arguments[0] || {}, // 第一个参数是目标

i = 1, length = arguments.length, deep = false, options;

if (target.constructor == Boolean) {// 第一个参数是bool型的

deep = target;// 深度copy

target = arguments[1] || {};// target指向第二个参数

i = 2;

}

// target 是string 型的或？

if (typeof target != “object” && typeof target != “function”)

target = {};

if (length == i) {// 只有一个参数？或deep copy 时，两个参数

target = this;// 目标为this

–i;

}

for (;i < length; i++)

if ((options = arguments[i]) != null)

for (var name in options) {

var src = target[name], copy = options[name];

if (target === copy)// 防止死循环

continue;

// 深度copy处理，最深为元素

if (deep && copy && typeof copy == “object” && !copy.nodeType)

target[name] = jQuery.extend(deep, src

|| (copy.length != null ? [] : {}), copy);

else if (copy !== undefined)// 直接copy

target[name] = copy;

}

return target;

};

extend不但支持深度clone，还能支持多个参数的对象clone到一个指定对象，而不是jquery中。

Filed under: Web ]]>