首先看的是整体框架,
// zepto骨骼,这个函数的作用使得Zepto(slector, context)使用很多$.fn里面的方法
var Zepto = (function(){
// zepto是一个命名空间
var $, zepto = {} // 这是一个工厂方法,返回一个数组
zepto.Z = function(dom, selector) {
dom = dom || []
// 不知道__proto__和prototype的区别了吧,一个是对象的,另一个是方法的。new出来的对象的__proto__和构造函数的prototype一致
dom.__proto__ = $.fn //通过给dom设置__proto__属性指向$.fn来达到继承$.fn上所有方法的目的
dom.selector = selector || ''
return dom
} // zepto.init方法也只是zepto.Z的一个马甲
zepto.init = function(selector, context){
var dom
return zepto.Z(dom, selector)
} // $是一个方法,是zepto.init方法的马甲
$ = function(selector, context) {
return zepto.init(selector, context)
} // $.fn包含了一大堆方法
$.fn = {} // zepto.Z方法new出来的对象继承了$.fn里面的一大堆方法。从前面看到zepto.Z方法里面有dom.__proto__ = $.fn,这就意味着zepto.Z工厂函数造出来的对象 instanceOf zepto.Z为true
zepto.Z.prototype = $.fn $.zepto = zepto return $
})() window.Zepto = Zepto
'$' in window || (window.$ = Zepto) // 事件处理
;(function($){ })(Zepto) // Ajax处理
;(function($){ })(Zepto) // CSS3动画
;(function($, undefined){ })(Zepto)
基本上这类DOM库的骨骼构造思想是,分隔初始化构造器函数,与原型对象的作用域,又能够在返回实例中访问原型对象。
在这里,zeptojs和jquery的做法有点不同,zeptojs是运用工厂模式生成带一大堆方法的对象来搞,jquery则是构造函数更改原形链来搞。
var $ =jQuery = function(){
return new jQuery.fn.init();
}
jQuery.fn = jQuery.prototype = {
init : function(){
this.length = 0;
this.test = function(){
return this.length;
}
return this;
},
jquery: "1.3.2",
length: 1,
size: function() {
return this.length;
}
}
jQuery.fn.init.prototype = jQuery.fn; //使用jQuery的原型对象覆盖init的原型对象
alert( $().jquery ); //返回"1.3.2"
alert( $().test() ); //返回0
alert( $().size() ); //返回0
这两种方式,谁优谁劣呢,私以为zeptojs。