原型

2020-03-08  本文已影响0人  颜色不一样的烟火_ac0f

jQuery和zepto中的简单使用


通过选择器构建不同的实例,但是都可以使用.css()、.html()等方法可以看出来这些方法都是定义在原型上面的。还有es6中的class来定义构造函数,里面的constructor方法来定义函数体内容就是通过原型实现的。

zepto如何使用原型


var zepto={};

zepto.init=function(selector){

var slice=Array.prototype.slice;

var dom=slice.call(document.querySelectorAll(selector));

return zepto.Z(dom,selector)

}

var $=function(selector){

return zepto.init(selector);

}

zepto.Z=function(dom,selector){

return new Z(dom,selector)

}

function Z(dom,selector){

var i,len=dom?dom.length:0;

for(var i=0;i<len;i++) this[i]=dom[i];

thi.length=len;

this.selector=selector:'';

}

$.fn={

constructor:zepto.z,

css:function(key,value){},

html:function(value){}

}

zepto.Z.prototype=Z.prototype=$.fn;

jquery中原型的使用


var jquery=function(selector){

    return new jquery.fn.init(selector);

}

var init=jquery.fn.init=function(selector){

    var slice=Array.prototype.slce;

    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.prototype={

    constructor:jquery,

    css:function(key,value){},

    html:function(value){}

    }

init.prototype=jquery.fn;

window.jquery=jquery;

上一篇 下一篇

猜你喜欢

热点阅读