# Lesson-11
---
新增width,height,extend
事件部分講完了后,我們最后實現3個方法.
```javascript
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方法也是如此.我就直接給出代碼了
```javascript
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非常強大)
```javascript
Kodo.prototype.extend = Kodo.extend = function() {
var options = arguments[0];
for( var i in options) {
this[i] = options[i];
}
};
```
這個方法我們不僅要能拓展靜態方法,也要能拓展實例方法.
所以 `Kodo.prototype.extend = Kodo.extend =` 直接這樣寫了.
里面內容過于簡陋就不過多講解了 :)
然后我們就能這樣拓展我們的插件了
```javascript
f.prototype.extend({ //實例方法
alert : function(msg) {
alert(msg)
}
});
f.extend({ //靜態方法
alert : function(msg) {
alert(msg)
}
});
f.alert('123');//調用
f("div").alert('123');//調用
```
其實jQuery還有很多別的部分,比如隊列,動畫,異步.都是一些非常值得自己去實踐嘗試的.
但至此,我們的小輪子基本也就完結了
另外的手勢番外篇,本想直接集成在這里面.如果有大眾所需,我就繼續更下去
您連11節的課程都有耐心看完,何必不順手點下右上角的star呢? >.<
