最近一直在学习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"//隐藏按钮
});

到此插件制作就完成了

javaScrpit插件学习制作的更多相关文章

  1. emmet插件学习,练习中遇到一些问题

    emmet插件学习:帮助提高敲代码效率的插件 参考文献:Emmet(Zen coding)HTML代码使用技巧七则http://www.wzsky.net/html/Website/htmlcss/1 ...

  2. JQuery实用技巧--学会你也是大神(1)——插件的制作技巧

      前  言 JRedu 学习之前,首先我们需要知道什么是JQuery? JQuery是一个优秀的javascript框架. JQuery是继Prototype之后又一个优秀的Javascript框架 ...

  3. uexQQ插件学习心得

    uexQQ插件学习心得 uexQQ插件的作用:通过qq可以分享图文,音乐,应用到相应的qq空间.支持手机客户端分享和手机webQQ分享.下面我们就来看一看他的一些方法. 我们先说一下分享的步骤,这个步 ...

  4. bootstrap插件学习

    转自http://v3.bootcss.com/javascript/ bootstrap javascript插件学习 模态框 打开模态框 <button type="button& ...

  5. Jquery插件学习

    前端开发也工作了一段时间,Jquery代码页写了很多,但是都是些的很零散的,不是很好用,网上看了很多人写的Jquery 很好用,而且到每个项目中都可以使用, 本人就感觉很好奇他们是怎么做到的呢,于是自 ...

  6. bootstrap插件学习-bootstrap.dropdown.js

    bootstrap插件学习-bootstrap.dropdown.js 先看bootstrap.dropdown.js的结构 var toggle = '[data-toggle="drop ...

  7. bootstrap插件学习-bootstrap.modal.js

    bootstrap插件学习-bootstrap.modal.js 先从bootstrap.modal.js的结构看起. function($){ var Modal = function(){} // ...

  8. DTCMS插件的制作实例电子资源管理(四)URL重写

    总目录 插件目录结构(一) Admin后台页面编写(二) 前台模板页编写(三) URL重写(四) 本实例旨在以一个实际的项目中的例子来介绍如何在dtcms中制作插件,本系列文章非入门教程,部分逻辑实现 ...

  9. 40款非常棒的 jQuery 插件和制作教程(系列一)

    jQuery 在现在的 Web 开发项目中扮演着重要角色,jQuery 让网站有更好的可用性和用户体验,让访问者对网站留下非常好的印象.jQuery以其插件众多.独特.轻量以及支持大规模的网站开发闻名 ...

随机推荐

  1. 微信小程序,预览在开发工具上显示正常,手机预览二维码报request->fail错误,打开手机的调试功能又正常。

    这里错误很明显是属于网址错误,开发工具和手机调试都能走request->success: 唯独常规模式下无法显示. 最开始调试过很多方法,没找出原因.最后到小程序开发设置才发现,自己未配置服务器 ...

  2. 仿优酷项目—orm

    仿优酷项目 一.ORM介绍 对象关系映射,把数据库中的表数据(表名.表记录.字段)全部映射到python中. ​ mysql: python: ​ 表名 ---->类名 ​ 记录 ----> ...

  3. Mysql-Sqlalchemy-ORM框架

    import sqlalchemy from sqlalchemy import create_engine from sqlalchemy.ext.declarative import declar ...

  4. ajax调用,action返回的中文为乱码的解决方案

    原文:ajax调用,action返回的中文为乱码的解决方案 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.c ...

  5. O017、部署DevStack

    参考https://www.cnblogs.com/CloudMan6/p/5357273.html   本节按照以下步骤部署 DevStack 实验环境,包括控制节点和计算节点.详细的部署和配置可以 ...

  6. hive报错java.sql.SQLException: null, message from server: "Host '192.168.126.100' is not allowed to connect to this MySQL server"

  7. python time,calendar,datetime

    time sleep:休眠指定的秒数(可以是小数) localtime:将一个时间戳转换为time.struct_time类型的对象(类似于元组) # 将一个时间戳转换为一个类似于元组的对象,不指定时 ...

  8. MySQL5.7修改数据库目录!

    MySQL5.7默认安装,修改之前,停止MySQL服务. 数据库目录:C:\ProgramData\MySQL\MySQL Server 5.7\Data 配置文件:C:\ProgramData\My ...

  9. 使用Mybatis Generator自动生成代码

    MyBatis Generator(MBG)是MyBatis MyBatis 和iBATIS的代码生成器.它将为所有版本的MyBatis以及版本2.2.0之后的iBATIS版本生成代码.它将内省数据库 ...

  10. PAT Basic 1093 字符串A+B (20 分)

    给定两个字符串 A 和 B,本题要求你输出 A+B,即两个字符串的并集.要求先输出 A,再输出 B,但重复的字符必须被剔除. 输入格式: 输入在两行中分别给出 A 和 B,均为长度不超过 1的.由可见 ...