1.虽然说市面上有许多讲解jQuery源码或者是也有类似如何搭建一个属于自己的javascript库的文章。
2.但毕竟更多数人的水平并没有达到单纯看源码解析就能读懂jQuery
3.如果你既不能通过书籍视频和他人文章的源码解析明白jQuery，也想自己实现一个jQuery的。
4.本系列就是以一些不同的方法手段，简单的代码，实现了一套与jQuery一样的API
5.最后在每篇文章的最后会留下github源码地址，希望能得到大家star的认可与支持，谢谢。
图片描述
Lesson-11
新增width,height,extend
事件部分讲完了后,我们最后实现3个方法.
width : function(w) {
if(arguments.length == 1) {
for (var i = 0; i < this.length; i++) {
this[i].style.width = w + 'px';
}
} else {
if (this[0].document === doc ) {
return this[0].innerWidth;
} else if (this[0].nodeType === 9 ){
return document.documentElement.clientWidth;
} else {
return parseInt(getComputedStyle(this[0],null)['width']);
}
}
},
关于width(),height()就常用的就2种,一个是取值,一个是赋值.
我们通过判断arguments的个数,是取值还是赋值.
赋值很容易,我们就用最简单的办法,直接设置.
如果是取值,那我们就要做个判断,因为window,和document的取法是不一样的.
还有一种可能性是,当dom元素的display为none的时候,直接取是取不到的.在这我就不做处理了.大家思考一下可以自己尝试.
思路是把dom设置为position:absolute;visible:hidden;然后取,在设置回去.
同理height方法也是如此.我就直接给出代码了
height : function(h) {
if(arguments.length == 1) {
for (var i = 0; i < this.length; i++) {
this[i].style.height = h + 'px';
}
} else {
if(this[0].document === doc ) {
return this[0].innerHeight;
} else if (this[0].nodeType === 9 ){
return document.documentElement.clientHeight;
} else {
return parseInt(getComputedStyle(this[0],null)['height']);
}
}
}
两者几乎相同只是改了API,其实完全可以封装为一个方法复用.
jQuery之所以那么广受大众所爱,还一个非常重要的就是他的extend方法.如果没有了他,将不会有现在那么多jQuery插件的诞生
在此,我们就实现一个非常简单的浅拷贝.(然而jQuery的extend非常强大)
Kodo.prototype.extend = Kodo.extend = function() {
var options = arguments[0];
for( var i in options) {
this[i] = options[i];
}
};
这个方法我们不仅要能拓展静态方法,也要能拓展实例方法.
所以 Kodo.prototype.extend = Kodo.extend = 直接这样写了.
里面内容过于简陋就不过多讲解了 :)
然后我们就能这样拓展我们的插件了
f.prototype.extend({ //实例方法
alert : function(msg) {
alert(msg)
}
});
f.extend({ //静态方法
alert : function(msg) {
alert(msg)
}
});
f.alert('123');//调用
f("div").alert('123');//调用
其实jQuery还有很多别的部分,比如队列,动画,异步.都是一些非常值得自己去实践尝试的.
但至此,我们的小轮子基本也就完结了
如果您觉得本文的内容对您的学习有所帮助：
关键字：
jQuery