做个弹出层遮罩效果

在写插件之前都会事先思考清楚，这个插件都需要哪些参数，而哪些又是必须传的，哪些是可选的，哪些功能以后可能会用到，哪些是可以会更改的，这些都是必须考虑的，不然写出来的插件肯定会有很多的问题。

基本雏形

;(function(window,document){

 varMaskShare =function(){

 };

 MaskShare.prototype = {};

 window.MaskShare = MaskShare;

}(window,document));

把要写的代码，封闭到一个自执行函数里面，防止变量冲突，然后将这个构造函数暴露给window对象，方便我们在外部去访问这个构造函数。

效果需要做成如下的：

思考需要哪些参数

这个功能就是点击某个元素，弹出一个遮罩层，点击遮罩层将遮罩层去掉。

因此可以分析出，至少需要一个参数，也就是我们需要知道点击谁弹出弹出层，另外我们还需要配置一些默认参数。

;(function(window,document){

 varMaskShare =function(targetDom,options){

  // 判断是用函数创建的还是用new创建的。这样我们就可以通过MaskShare("dom") 或 new MaskShare("dom")来使用这个插件了

  if(!(thisinstanceofMaskShare))returnnewMaskShare(targetDom,options);

  // 参数合并

  this.options =this.extend({

      // 这个参数以后可能会更改所以暴露出去

   imgSrc:"../static/img/coupon-mask_1.png"

  },options);

  // 判断传进来的是DOM还是字符串

  if((typeoftargetDom)==="string"){

   this.targetDom = document.querySelector(targetDom);

  }else{

   this.targetDom = targetDom;

  }

  varboxDom = document.createElement("div");

  varimgDom = document.createElement("img");

  // 设置默认样式 注意将z-index值设置大一些，防止其他元素层级比遮罩层高

  boxDom.style.cssText ="display: none;position: absolute;left: 0;top: 0;width: 100%;height:100%;z-index:9999;";

  imgDom.style.cssText ="margin-top:20px;width: 100%;";

  // 追加或重设其样式

  if(this.options.boxDomStyle){

   this.setStyle(boxDom,this.options.boxDomStyle);

  }

  if(this.options.imgDomStyle){

   this.setStyle(imgDom,this.options.imgDomStyle);

  }

  imgDom.src =this.options.imgSrc;

  boxDom.appendChild(imgDom);

  this.boxDom = boxDom;

  // 初始化

  this.init();

 };

 MaskShare.prototype = {

  init:function(){

   this.event();

  },

  extend:function(obj,obj2){

   for(varkinobj2){

    obj[k] = obj2[k];

   }

   returnobj;

  },

  setStyle:function(dom,objStyle){

   for(varkinobjStyle){

    dom.style[k] = objStyle[k];

   }

  },

  event:function(){

   var_this =this;

   this.targetDom.addEventListener("click",function(){

    document.body.appendChild(_this.boxDom);

    _this.boxDom.style.display ="block";

        // 打开遮罩层的回调

    _this.options.open&&_this.options.open();

   },false);

   this.boxDom.addEventListener("click",function(){

    this.style.display ="none";

        // 关闭遮罩层的回调

    _this.options.close&&_this.options.close();

   },false);

  }

 };

 // 暴露方法

 window.MaskShare = MaskShare;

}(window,document));

使用示例：

MaskShare(".immediately",{

 imgSrc:"../static/img/loading_icon.gif",

 boxDomStyle:{

  opacity:".9"

 },

 imgDomStyle:{

  opacity:".8"

 },

 open:function(){

  console.log("show");

 },

 close:function(){

  console.log("close");

 }

});