javaScrpit插件学习制作-CSDN博客

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

javaScrpit插件写法多种多样通过这几天的学习终于找到了适合自己的方法.前几天的缺陷也得到了解决.下面我们用最简单的个弹窗来说一下插件制作方法的思想

首先

一把代码放到匿名函数中避免与全局变量发生混合.

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

到此插件制作就完成了

转载于:https://www.cnblogs.com/zimengxiyu/p/9814889.html