javaScrpit插件學習製做

最近一直在學習javaScrpit插件製做,前幾天學習製做了一個插件但存在嚴重缺陷.

javaScrpit插件寫法多種多樣經過這幾天的學習終於找到了適合本身的方法.前幾天的缺陷也獲得瞭解決.下面咱們用最簡單的個彈窗來講一下插件製做方法的思想

JS

首先

一  把代碼放到匿名函數中避免與全局變量發生混合.

!(function(window) { function Mask(options) {  }  window.Mask = Mask;//把插件掛載到window上方便外面調用 })(window)

二  在構造函數裏面設置一個對象用來管理傳入的參數以及設置默認值

!(function(window) { function Mask(options) { this.options = { id: "", showBtn: "", closeBtn: "" } //判斷傳入的參數是不是對象是的話循環此參數微this.options賦值,不是的話對this.options.id賦值 

                if(options instanceof Object) { for(var i in options) { //根據傳入的參數，修改默認參數值
                        this.options[i] = options[i]; } } else { this.options.id = options; } } window.Mask = Mask; })(window)

 

 

三 在原型上添加全部實例的公有方法,這樣能夠減小資源浪費

!(function(window) { function Mask(options) { this.options = { id: "", showBtn: "", closeBtn: "" } this.show();//調用原型上設置的方法 this.hide(); } Mask.prototype = { /**版本號**/ version: '1.0.0', show: function() { var maskId = document.getElementById(this.options.id); var showBtn = document.getElementById(this.options.showBtn); showBtn.onclick = function() { maskId.style.display = "block" } }, hide: function() { var maskId = document.getElementById(this.options.id); var closeBtn = document.getElementById(this.options.closeBtn); closeBtn.onclick = function() { maskId.style.display = "none" } } } window.Mask = Mask; })(window)

 

完整代碼（第三步優化後）

!(function(window) { function Mask(options) { this.options = { id: "", showBtn: "", closeBtn: "" } //判斷傳入的參數是不是對象是的話循環此參數微this.options賦值,不是的話對this.options.id賦值 
                    if(options instanceof Object) { for(var i in options) { //根據傳入的參數，修改默認參數值
                            this.options[i] = options[i]; } } else { this.options.id = options; } var maskId = document.getElementById(this.options.id);//彈出框id
                    var showBtn = document.getElementById(this.options.showBtn);//顯示按鈕
                    var closeBtn = document.getElementById(this.options.closeBtn);;//關閉按鈕
                    this.show(maskId, showBtn); this.hide(maskId, closeBtn); } Mask.prototype = { /**版本號**/ version: '1.0.0', show: function(maskId,showBtn) { showBtn.onclick = function() { maskId.style.display = "block" } }, hide: function(maskId,closeBtn) { closeBtn.onclick = function() { maskId.style.display = "none" } } } window.Mask = Mask; })(window)

 

調用

new Mask({ id: "warp",//彈出框ID showBtn: "showBtn",//顯示按鈕 closeBtn: "closeBtn"//隱藏按鈕 });

到此插件製做就完成了