什么是封裝呢？
我的理解就是 把一個功能單獨做成一個組件，就像做餃子，以前做餃子必須自己先用面粉做餃子皮，再做餃子餡，然后再手工包餃子，但是現在人們發明了自動包餃子機器，雖然機器里面的每一步驟和你自己包餃子是一樣的，但是實際上你現在需要做的就只有一件事，就是放原料。這邊機器就是封裝好的插件，而原料就是你要傳的參數
為什么要把js功能封裝成插件呢？我覺得有以下幾點吧
1、便於代碼復用
2、避免各個相同功能組件的干擾，可能會有作用域的一些問題
3、便於維護，同時利於項目積累
4、不覺得一直復制粘貼很low么.......
我在網上看到的封裝好像有兩種，一種是js的原生封裝，一種是jquery的封裝。這邊我先講一下原生封裝吧。
我們在封裝的時候會把js代碼放到一個自執行函數里面，這樣可以防止變量沖突。
|
1
2
3
4
|
(function(){
......
......
}()}
|
然后再創建一個構造函數
|
1
2
3
4
5
|
(function(){
var
demo = function(options){
......
}
}())
|
把這個函數暴露給外部，以便全局調用
(function(){
var demo = function(options){
......
}
window.demo = demo;
}())
其實現在你可以直接調用了，封裝好了，雖然沒實現什么功能
var ss = new demo({
x:1,
y:2
})；
或者
new demo({
x:2,
y:3
})；
然后傳參怎么搞呢，我們一個插件一般有一些必選參數或者可選參數，在我看來可選參數不過就是在插件里面給了默認值罷了。我們傳的參數會覆蓋插件中的默認參數，可以用$.extend({})覆蓋
|
1
2
3
4
5
6
7
8
9
10
|
(function(){
var
demo = function(options){
this
.options = $.extend({
"x"
: 1,
"y"
: 2,
"z"
: 3
},options)
}
window.demo = demo;
}())
|
然后你可以在在初始化構造函數的時候執行一些操作
(function(){
var demo = function(options){
this.options = $.extend({
"x" : "1",
"y" : "2",
"z" : "3"
},options);
this.init();
};
demo.prototype.init = function(){
alert("x是"+this.options.x+" y是"+this.options.y+" z是"+this.options.z);
};
window.demo = demo;
}());
new demo({
"x" :"5",
"y" :"4"
});
</script>
就是這樣了。一個超級簡單的封裝
我這邊有個疑問，extend只是jquery有嗎，js對象有什么代替方法嗎？晚點在看看.............
還有需要提的是封裝js的時候我們要考慮周全，比如它的擴展性和兼容性，還有性能怎么樣，還有沒必要的就不需要封裝了......要有選擇性。
現在網上已經完成的插件數不勝數，而且功能又十分強大，但是恰恰是這點，有的時候一個很大的插件我們只用到很小的一部分，那么就需要我們自己修改成適合我們自己的了，而且有些項目的風格和現在的插件風格也不同，所以關鍵是要適合自己的項目。
隔日不上
看了下jquery封裝
感覺就是把window對象換成了jquery對象？
(function($){
$.fn.demo = function(options){
var options = $.extend({
....
})
};
})(jQuery);
調用的時候
$("#xx").demo();