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,不能直接在构造函数的原型上进行扩展。

我来评几句
登录后评论

已发表评论数()

相关站点

热门文章