Jquery和zepto中的原型应用及插件机制

zepto实现

var Zepto = (function(){
    var zepto = {}
    // 构造函数
    function Z(dom, selector){
        var i, len = dom ? dom.length : 0
        for(i = 0; i < len; i++) this[i] = dom[i]
        this.length = len
        this.selector = selector || ''
    }
    zepto.Z = function(){
        return new Z(dom, selector)
    }
    
    //init 函数，判断传入的selector，并分情况对dom赋值：
    zepto.init = function(selector, context){
        var dom
        // 如果是字符串，返回dom节点对象的数组
        var slice = Array.prototype.slice;
        dom = slice.call(document.querySelectorAll(selector))
        return zepto.Z(dom, selector)
    }
    
    // 入口，定义$操作符，$('div')
    var $
    // ...
    $ = function(selector, context){
        return zepto.init(selector, context)
    }
    // ...省略N行代码...
    $.fn = {
        constructor: zepto.Z,
        css: function (key, value) {
            // ...
        },
        html: function (value) {
            // ...
    }
    zepto.Z.prototype =  Z.prototype = $.fn
    //构造函数Z的原型的方法，是在$.fn定义完了之后，又赋值给Z.prototype的
    return $
})()

window.Zepto = Zepto
window.$ === undefined && (window.$ = Zepto)

zepto中，通过'$()'入口函数，返回init函数，init函数对'selector'进行判断，然后根据情况给dom变量赋值；最后到构造函数Z中，返回一个对象数组（可以模拟进行数组操作的对象），每一项定义为dom数组中的节点对象。构造函数的原型赋值给Z.prototype。

Jquery原型实现

(function(window){
    var JQuery = function(selector){
        return new JQuery.fn.init(selector)
    }
    JQuery.fn = {}
    // 定义构造函数
    var init = JQuery.fn.init = function (selector) {
        // ...
        var slice = Array.prototype.slice
        var dom = slice.call(document.querySelectorAll(selector))

        var i, len = dom ? dom.length : 0
        for (i = 0; i < len; i++) this[i] = dom[i]
        this.length = len
        this.selector = selector || ''
    }
    // 初始化 JQuery.fn
    JQuery.fn = JQuery.prototype = {
        constructor: JQuery,

        // 其他函数...
        css: function (key, value) {
            // ...
        },
        html: function (value) {
            // ...
        }
    }
    // 定义原型
    init.prototype = JQuery.fn;
    
    window.$ = JQuery
})(window)

jQuery中，构造函数在定义为JQuery.fn.init，其原型先定义为JQuery.fn对象，然后再进行赋值。最后通过入口函数JQuery返回对象。
通过JQuery.fn扩展插件，只有JQuery暴露在全局变量中，不能通过init.prototype直接扩展，且将插件扩展统一到JQuery.fn.extend接口，方便使用。

无论zepto还是jQuery，都只暴露一个方法（zepto或者jQuery方法）在全局变量中，所以扩展插件只能通过$.fn，不能直接在构造函数的原型上进行扩展。