zeptojs库解读1之整体框架

首先看的是整体框架,

// 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。