相比较而言，前段时间尝试的coffescript给我的感觉过于嚣张啦~~ 在好多没必要的地方过份包装，不符合我最看重的kissy原则（只做最需要去做的事情），完全把javascript扔到了脑后，让使用者找不到写js的感觉了，可能是作者太喜欢ruby了吧。我觉得coffescript应该秉承一条核心使命，它并需要把js来一个彻底的华丽转身，因为js社区的基础已经非常雄厚，很多人的相关编码经验没必要抛弃。coffescript的使命应该只有一条最简单的：减少javascript的代码行数！从今年开始，node.js社区的发力，seajs的出世，coffescript、sass项目的成熟标志着前端开发在这一年进入了新的加速期。如果这些好项目都今后能够健康发展，未来我们可以称今年为二次元年吗？/*#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:民主与共和的相互劫持坐庄是目前人类所能探索到的最平整的前进道路……
抽空读了读jquery代码，确实颇有收获。首先放上整体代码结构：
(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中有模块化的源码
看过《javasctipt权威指南》应该能更好的理解new语法到底为何物，也就自然能理解为何在jquery中new $()与执行$()结果一模一样
重点：
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的成员：
平常的 $("#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 ) {
// 同样扔数组中， 顺便把 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中。
这两天完成了前端MVC的完整构建demo，算是一个小里程碑吧。
backbone.js确实是好东西，但还有些别扭的约定，比如el对象的不可控造成设定el的特殊属性比较麻烦。但一切皆权衡，没有完美，总体而言是非常优秀的架构。
模块管理引用了还在pre期间的seajs，非常cool，几乎是我一直以来梦寐以求的架构。相信能借此规避掉很多很多不必要的麻烦。
今天看了完整的underscore.js源码，代码质量相当高。在backbone.js模型中M层个C层都不应该使用jquery，只有在V层才需要它。但js在工具型类库方法上的薄弱还是会很让人头痛，underscore.js是js最好的“tux”，而绝不应该是jquery。
压缩引擎使用closure-compiler，并且使用了IKVM项目在.NET环境中执行，这样可以自动化部署在TFS的team building环节中。
CssGaga功能很强，非常强，但工具的易用性有待加强，至今提交的一个无解bug依然没有回复，不过相信我最终会用好它的，因为它实在太“可爱”了。
