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

到此插件制作就完成了