JavaScript如何封裝插件
阿新 • • 發佈：2017-11-20
是你 ble 傳參 為什麽 title 默認 避免 syn 需要
什麽是封裝呢？
我的理解就是 把一個功能單獨做成一個組件，就像做餃子，以前做餃子必須自己先用面粉做餃子皮，再做餃子餡，然後再手工包餃子，但是現在人們發明了自動包餃子機器，雖然機器裏面的每一步驟和你自己包餃子是一樣的，但是實際上你現在需要做的就只有一件事，就是放原料。這邊機器就是封裝好的插件，而原料就是你要傳的參數
為什麽要把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>
就是這樣了。一個超級簡單的封裝
JavaScript如何封裝插件