原生Javaｓｃｒｉｐｔ插件的开发实践

前言

以前，公司设计的网站比较混乱，很多地方都不统一。其中一个是弹出层，导致事实上公司的UI改变了几个人，和他们每个人都不一样。该公司最近开始纠正问题，当然这是一个模块，或一个插件为统一的事情，我要写这篇文章的plug-in.the原因是整理这个插件后，有很多的想法，我想总结一下，虽然这个插件不复杂。

我们该怎么做

很少有人接触到体系结构的概念，我理解架构是解决未来可能发生的问题的方法。

我以前也封装过一些插件，但是后端太难封装了，所以对原因进行了分析。结果发现，以前编写的插件没有暴露的接口，而且一些不需要传递的参数被传输。

所以这一次，超前思维显然会在插件之前写，插件应该是哪些参数，哪些是必须传递的，哪些是可选的，哪些功能可以使用，哪些是可以更改的，这些都是必须考虑的，否则写插件会有很多问题。

基本雏形
（函数（窗口，文档）{）
无功maskshare =函数（）{（）
}；
maskshare.prototype = { }；
window.maskshare = maskshare；
}（窗口、文档）；
要编写的代码包含在一个自执行函数中，以防止变量冲突。然后我们将这个构造函数公开到窗口对象，这允许我们外部访问构造函数。

效果如下：
需要考虑哪些参数

这个功能是点击一个元素，弹出一个遮罩层，然后点击遮罩移除遮罩层。

因此，我们可以分析至少一个参数，也就是说，我们需要知道谁点击弹出层，我们需要配置一些默认参数。
（函数（窗口，文档）{）
无功maskshare =功能（targetdom，选项）{
用函数来创建一个判断 / /或创建新的。这使我们能够使用这个插件通过maskshare（DOM）或新的maskshare（DOM）
如果（！（这是maskshare））返回新maskshare（targetdom，选项）；
合并参数
this.options = this.extend（{
这个参数可以在曝光后改变。
imgsrc：， / / / coupon-mask_1静态图片。png
}，选项）；
判断通过了DOM或字符串
如果（（typeof targetdom）=字符串）{
this.targetdom = document.queryselector（targetdom）；
其他{ }
this.targetdom = targetdom；
}
无功boxdom = document.createelement（div）；
无功imgdom = document.createelement（IMG）；
/ /设置默认风格注重z-index值设置为大于元水平，防止其他面膜层
boxdom.style.csstext =显示：无；位置：绝对；左：0；最高：0；宽度：100%；高度：100%；背景颜色：RGBA（0,0,0,0.8）；；；；
imgdom.style.csstext =边距：20px；宽度：100%；；
添加或重置样式
如果（这个选项。boxdomstyle）{
this.setstyle（boxdom，这个选项。boxdomstyle）；
}
如果（这个选项。imgdomstyle）{
this.setstyle（imgdom，这个选项。imgdomstyle）；
}
imgdom.src = this.options.imgsrc；
boxdom.appendchild（imgdom）；
this.boxdom = boxdom；
初始化
This.init（）；
}；
maskshare.prototype = { {
init：函数（）{
This.event ();
}，
扩展功能（obj，obj2）{
对于（VaR K在obj2）{
obj { } { } = obj2 K K；
}
返回对象；
}，
setStyle：功能（DOM，objstyle）{
对于（VaR K objstyle）{
Dom。风格{ } = { } objstyle K K；
}
}，
事件：函数（）{
无功_this =这；
This.targetDom.addEventListener（单击
document.body.appendchild（_this。boxdom）；
_this.boxdom.style.display =块；
打开掩码层回调
_this.options.open_this.options.open（）；
}，假）；
This.boxDom.addEventListener（单击
this.style.display =没有；
关闭图层蒙版回调
_this.options.close_this.options.close（）；
}，假）；
}
}；
曝光方法
window.maskshare = maskshare；
}（窗口、文档）；
使用的例子：
maskshare（。立即
imgsrc：， / / / loading_icon IMG静态GIF 。
boxdomstyle：{
不透明性：9
}，
imgdomstyle：{
不透明性：8
}，
打开：函数（）{
Console.log (show);
}，
关闭：函数（）{
console.log（关闭）；
}
}）；
本综述

在这个时候，再次发现，有许多限制，例如，如果你不使用图片使用文字，怎么办这些都是非常大的问题，要写一个实用的插件，不仅要技术过关，思路也要全面。所以本文才刚刚开始，路还很远。

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