javaScrpit插件学习制作-弹窗

最近一直在学习javaScrpit插件制作,前几天学习制作了一个插件但存在严重缺陷.

javaScrpit插件写法多种多样通过这几天的学习终于找到了适合自己的方法.前几天的缺陷也得到了解决.下面代码是一个弹窗插件

JS

首先

一  把代码放到闭包中避免与全局变量发生混合.

    !(function(window) {
                function Mask(options) {
                  
                }

                window.Mask = Mask;//把插件挂载到window上方便外面调用
      })(window)

二  在构造函数里面设置一个对象用来管理传入的参数以及设置默认值

!(function(window) {
                function Mask(options) {
                   //用来管理参数以及设置默认值我这里不需要默认值就没有设置
                    this.options = {
                        id: "",
                        showBtn: "",
                        closeBtn: ""
                    }                   
                }  
           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)

四 对传入的参数进行处理

//判断传入的参数是否是对象是的话循环此参数微this.options赋值,不是的话对this.options.id赋值    
//判断方法 使用的有 instanceof constructor toString
//网上说最好用toString判断,目前这个原理整在研究学习中...
if(options instanceof Object) {
   for(var i in options) { //根据传入的参数，修改默认参数值
        this.options[i] = options[i];
    }
} else {
        this.options.id = options;
 }

完整代码

!(function(window) {
                function Mask(options) {

                    this.options = {
                        id: "",
                        showBtn: "",
                        closeBtn: ""
                    }
                    //判断传入的参数是否是对象是的话循环此参数微this.options赋值,不是的话对this.options.id赋值    
                    //判断方法 使用的有 instanceof constructor toString
                    //网上说最好用toString判断,目前这个原理整在研究学习中...
                    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"//隐藏按钮
    });

到此插件制作就完成了