javaScrpit插件学习制作
2024-10-07 03:17:06
最近一直在学习javaScrpit插件制作,前几天学习制作了一个插件但存在严重缺陷.
javaScrpit插件写法多种多样通过这几天的学习终于找到了适合自己的方法.前几天的缺陷也得到了解决.下面我们用最简单的个弹窗来说一下插件制作方法的思想
JS
首先
一 把代码放到匿名函数中避免与全局变量发生混合.
!(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"//隐藏按钮
});
到此插件制作就完成了
最新文章
- AppleScript的字典怎么看怎么用
- FastFourierTransform (FFT)
- NoClassDefFoundError: org/apache/commons/pool/impl/GenericObjectPool
- Static Const
- Xamarin.Android 入门之：Xamarin快速入门
- oracle中的数据读取与查找
- Perl中的特殊内置变量详解
- WifiDog and OpenWrt
- linux下面配置安装nodejs+npm
- undefined is not an object (evaluating 'RNFetchBlob.DocumentDir')
- ADC/DAC设计常见40问
- UITableViewStyleGrouped模式下多余间距
- Tiny4412之蜂鸣器驱动与led灯驱动
- C语言数据结构基础学习笔记——B树
- 2019.03.11 COGS2652 秘术（天文密葬法）（分数规划+长链剖分）
- HDU - 5952 Counting Cliques(DFS)
- SQL的多种JOIN
- H5-移动端实现滑屏翻页-原生js/jquery
- MDX Cookbook 12 - 计算 SMA 简单移动平均 LastPeriods() 函数的使用
- 如何在CentOS 7.2上创建NFS的Share，然后让Client可以访问