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;
网友评论