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，不能直接在構造函數的原型上進行擴展。