原型

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;

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容