序

之前公司设计的网站比较混乱，很多地方不统一，其中一个就是弹出层。原因是公司的UI是几个人改的，每个人做的东西不一样。最近公司开始整改这个问题。对于这个统一的东西，当然是做一个模块或者插件，我打算做一个插件。写这篇文章的原因是写了这个插件之后，发现有很多想法，我想总结一下这些想法，虽然这个插件并不复杂。

如何构造？

很少接触建筑的概念。据我理解，建筑是为了解决未来可能发生的事情。

有些插件之前已经封装过了，但是后端觉得我封装太难了，所以我分析了一下原因，发现之前写的插件暴露的接口不存在，一些不需要传输的参数需要改为传输。暴露出来的接口是没有的，因为我没有按照未来的思路去写插件，而且往往这样写出来的插件变成了一次性产品。

所以在这段时间里，我们在编写插件之前，一定要提前想清楚，这个插件需要哪些参数，哪些必须传输，哪些是可选的，哪些功能以后可能会用到，哪些是可以更改的，这些都是必须要考虑的，否则编写出来的插件肯定会有很多问题。

基本雏形

；(函数(窗口、文档){ var MaskShare=function(){ }；maskshare . prototype={ }；窗户。MaskShare=MaskShare}(窗口、文档))；把要写的代码封装成一个自执行函数，防止变量冲突，然后把这个构造函数暴露给window对象，方便我们从外部访问这个构造函数。

效果需要如下：

想想需要什么参数

这个功能是点击一个元素弹出一个蒙版图层，点击蒙版图层去掉蒙版图层。

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

；（函数（窗口，文档){ var masks hare=function(TargetDom，选项){ //判断是用函数创建的还是用新的创建的。这样我们就可以通过MaskShare('dom ')或新MaskShare('dom ')来使用这个插件了if(！(MaskShare的这个实例))返回新的MaskShare(targetDom，options)；//参数合并this.options=this.extend({ //这个参数以后可能会更改所以暴露出去' imgSrc: './static/img/优惠券-mask_1.png' }，选项);//判断传进来的是数字正射影像图还是字符串if((TargetDom的类型)=' string '){ this。TargetDom=文档。query selector(TargetDom)；} else { this。TargetDoM=TargetDoM} var BoxDom=document。create element(' div ')；var imgDom=文档。创建元素(' img ')；//设置默认样式注意将z指数值设置大一些，防止其他元素层级比遮罩层高boxdom。风格。CSSCText=' display : none绝对位置：左： 0；top : 0；宽度： 100%;高度：100%;背景-color: rgba(0，0，0，0.8)；z-index :9999'；imgdom。风格。CSS text=' margin-top :20 px；宽度： 100%;";//追加或重设其样式如果(这个。选项。BoxDomstyle){这个。setstyle(BoxDom，这个。选项。BoxDomstyle)；}如果(这个。选项。imgdomstyle){ this。setstyle(imgDom，这个。选项。imgdomstyle)；} imgdom。src=这个。选项。imgsrcboxdom。append child(IMgdom)；this.boxDom=boxDom//初始化这个。init()；};maskshare。prototype={ init : function(){ this。event()；}，extend:function(obj，obj 2){ for(obj 2中的var k){ obj[k]=obj 2[k]；}返回obj}，setStyle:function(dom，Objstyle){ for(Objstyle中的var k){ DOM。style[k]=Objstyle[k]；} }，事件： function(){ var _ this=this；这个。TargetDom。AddEventListener(' click ')，function(){ document。尸体。appendchild(_ this。BoxDoM)；_这个。BoxDom。风格。display=' block//打开遮罩层的回调_这个。选项。打开这个。选项。open()；}，false)；这个。BoxDom。AddEventListener(' click '，function(){ this。风格。显示='无'；//关闭遮罩层的回调_这个。选项。关闭这个。选项。close()；}，false)；} };//暴露方法窗户MaskShare=MaskShare}(窗口、文档));使用示例：

MaskShare ' .立即，{ imgSrc: './static/img/loading_icon.gif '、boxmodestyle : { opa city 3360。9 ' }、imgdomstyle : { opa city 3360。8 ' }、打开：功能(){控制台。日志(' show ')；}，关闭：函数(){ console。日志(“关闭”)；}});本次总结

此时再分析一遍，发现其还是有很多局限性，比如，如果不使用图片用到的是一段文字呢，又该怎么办？这些都是很大的问题，要写出一个实用的插件，不仅仅技术需要过关，思考还得全面性。所以这篇文章还只是刚刚开始，路还远着呢。

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！