zepto源码分析·整体架构

代码数量

1.2.0版本代码量为1650行，去掉注释大概1500左右

代码模块

默认版本只包括核心模块，事件模块，ajax模块，form模块和ie模块，其它模块需要自行拓展加入，其中form模块只包含序列化操作和submit提交事件实现，ie模块只包括一点兼容性处理，两者码量极少，因此不做分析

执行结构

典型的即时函数，保证封装性

    (function (global, factory) {
        // amd,cmd的模块化检测
    })(this, function(window) {
        // zepto初始化代码
    })

模块结构

    (function (global, factory) {
        // amd,cmd的模块化检测
    })(this, function(window) {
        // 核心模块
        var Zepto = (function () {

        }();
        
        // 事件模块
        ;(function (){

        })(Zepto)

        // ajax模块
        ;(function (){

        })(Zepto)

        // form模块
        ;(function (){

        })(Zepto)

        // ie模块
        ;(function (){

        })()
    })

架构原理

    (function (global, factory) {
        // amd,cmd的模块化检测
    })(this, function(window) {
        // 核心模块
        var Zepto = (function () {
            var $, zepto = {};

            // 第四步
            function Z(dom, selector) {
                // zepto对象创建，返回this
            }

            // 第三步
            zepto.Z = function(dom, selector) {
                return new Z(dom, selector)
            }

            // 是否为zepto.Z实例
            zepto.isZ = function(object) {
                return object instanceof zepto.Z
            }
            
            // 第二步
            zepto.init = function(selector, context) {
                // 选择器解析，获得dom元素集合
                return zepto.Z(dom, selector);
            }
            // 第一步
            $ = function (selector, context) {
                return zepto.init(selector, context)
            }

            // 定义代表原型对象的fn属性
            $.fn = {
                constructor: zepto.Z,
                length: 0
            }

            // 串通原型链
            zepto.Z.prototype = Z.prototype = $.fn;

            // 赋值zepto引用给$
            $.zepto = zepto;
        
            return $
        }();

        // window上注册Zepto
        window.Zepto = Zepto
        window.$ === undefined && (window.$ = Zepto)

        // 其它模块省略...
    })

1.库的架构方面，先是定义了2个变量，未声明的$和zepto对象；将$赋值为函数，定义fn属性来作为库本身的原型对象，对zepto对象定义一些操作方法

2.通过$方法实现选择器初始化操作，通过zepto.init实现dom集合生成，通过zepto.Z和Z函数生成一个Zepto对象，也就是如上注释的1,2,3,4步

3.其中Z.prototype = $.fn是为new Z实例定义原型，zepto.Z.prototype = Z.prototype则只是用于zepto.isZ函数操作，以便判断是否传入的内容为zepto.Z实例

4.个人感觉zepto.isZ函数实现略微麻烦，改成如下形式会更简洁

// 核心模块
var Zepto = (function () {
    var $, zepto = {};

    zepto.isZ = function(object) {
        // zepto.Z改成Z
        return object instanceof Z
    }

    // zepto.Z改成Z
    $.fn = {
        constructor: Z,
        length: 0
    }

    // zepto.Z.prototype = Z.prototype去掉
    Z.prototype = $.fn;

    return $
}();

对比jquery架构

    var jQuery = function( selector, context ) {
        // 避免this instanceof jQuery判断
        // 避免new jQuery的死循环
        // 初始化方法采用原型上的init方法
        return new jQuery.fn.init( selector, context );
    }

    // 定义fn属性指向jQuery原型
    jQuery.fn = jQuery.prototype = {
        constructor: jQuery
    }

    // 通过将init方法的原型指向jquery原型解决this问题
    jQuery.fn.init.prototype = jQuery.fn;

    // 通过this的力量共享extend拓展方法，实现根据调用对象进行对应拓展
    jQuery.extend = jQuery.fn.extend = function() {

    }

jQuery的原型链构建和extend实现真是精妙绝伦，jQuer的架构实现比Zepto更简洁，作用上更清晰，Zepto的实现相对繁琐