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"//隐藏按钮 });

到此插件制做就完成了