本文分享原生JavaScript插件的开发实践，重点阐述如何通过自执行函数隔离变量，并将构造函数暴露给window对象。文章详细解析了插件架构中参数设计的核心思路，包括必填与可选参数的区分、默认值合并策略以及回调函数的预留，旨在提升插件的复用性与可维护性。
前言与背景
前言
此前公司网站设计存在混乱现象，各模块风格不统一，其中弹出层组件尤为突出。造成这一问题的主要原因是UI设计师频繁更换，不同设计师产出的效果差异较大。近期公司着手规范此类统一组件，决定将其封装为独立模块或插件。笔者计划开发一个弹出层插件，并在此过程中总结相关开发理念。尽管该插件逻辑并不复杂，但其中蕴含的设计思想值得记录与分享。
插件架构设计思路
该怎样架构？
架构概念接触较少，笔者理解架构旨在解决未来可能发生的扩展与维护问题。
以往封装插件时，后端开发人员反馈易用性不足。经分析，问题在于该暴露的接口未暴露，而不必要的参数却要求传递。接口缺失的原因在于缺乏面向未来的设计思维，导致插件沦为一次性使用品。
因此，在编写插件前需预先思考：插件需要哪些参数？哪些是必填项？哪些是可选项？哪些功能未来可能被调用？哪些配置可能变更？这些考量至关重要，否则插件必然存在诸多缺陷。
基础代码结构与参数配置
基本雏形
;(function(window,document){
var MaskShare = function(){
};
MaskShare.prototype = {};
window.MaskShare = MaskShare;
}(window,document));
将代码封闭在自执行函数中，防止变量冲突，并将构造函数暴露给window对象，以便外部访问。
期望实现的效果如下：
思考需要哪些参数
该功能要求点击特定元素时弹出遮罩层，点击遮罩层时关闭它。
分析可知，至少需要一个参数，即指定触发弹出层的元素。此外，还需配置一些默认参数。
;(function(window,document){
var MaskShare = function(targetDom,options){
// 判断是用函数创建的还是用new创建的。这样我们就可以通过MaskShare("dom") 或 new MaskShare("dom")来使用这个插件了
if(!(this instanceof MaskShare))return new MaskShare(targetDom,options);
// 参数合并
this.options = this.extend({
// 这个参数以后可能会更改所以暴露出去
imgSrc:"../static/img/coupon-mask_1.png"
},options);
// 判断传进来的是DOM还是字符串
if((typeof targetDom)==="string"){
this.targetDom = document.querySelector(targetDom);
}else{
this.targetDom = targetDom;
}
var boxDom = document.createElement("div");
var imgDom = document.createElement("img");
// 设置默认样式 注意将z-index值设置大一些，防止其他元素层级比遮罩层高
boxDom.style.cssText = "display: none;position: absolute;left: 0;top: 0;width: 100%;height:100%;background-color: rgba(0,0,0,0.8);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(var k in obj2){
obj[k] = obj2[k];
}
return obj;
},
setStyle:function(dom,objStyle){
for(var k in objStyle){
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");
}
});局限性与总结
本次总结
再次分析发现，该方案仍有局限性。例如，若不使用图片而是使用文字，该如何处理？这些都是实用插件必须解决的大问题。写出一个实用的插件，不仅技术要求过关，思考还需全面。因此，本文仅是开始，前路尚远。
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持本站！