最近一直在学习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. Django中ajax发送post请求,报403错误CSRF验证失败解决办法

    今天学习Django框架,用ajax向后台发送post请求,直接报了403错误,说CSRF验证失败:先前用模板的话都是在里面加一个 {% csrf_token %} 就直接搞定了CSRF的问题了:很显 ...

  2. 最大两队竞争值(暴力dfs)--牛客多校第二场

    题意: 给你2n个人,两两有对立竞争值,问你分成两队最大的竞争值是多少. 思路: 直接暴力dfs,稍微有点卡,3800ms. #include<iostream> #include< ...

  3. CSP 字符串匹配(201409-3)

    问题描述 给出一个字符串和多行文字,在这些文字中找到字符串出现的那些行.你的程序还需支持大小写敏感选项:当选项打开时,表示同一个字母的大写和小写看作不同的字符:当选项关闭时,表示同一个字母的大写和小写 ...

  4. Python之模块IO

    目录 Python之模块IO io概叙 io类层次结构 io模块的类图 io模块的3种I/O 原始I/O,即RawIOBase及其子类 文本I/O,即TextIOBase及其子类 字节I/O(缓存I/ ...

  5. 在CentOS 7系统下升级 Jenkins版本

    使用yum方式安装的war文件路径:/usr/lib/jenkins/jenkins.war 查看war包所在的目录 find / -name jenkins.war 停止Jenkins 服务 sys ...

  6. 百度的echarts报表数据直接显示

    最近在使用百度的echarts开发,在使用过程中,遇到点需求,就是希望显示的数据直接在图标上显示,而不是鼠标滑动以后才显示,于是百度搜了下相关的文章正好找到了,然后使用了这个方法是可以用的,所以这里记 ...

  7. laravel相关备忘

    此次笔记采用的是laravel5.1版本 1.从gitcheckout下来后,首先在env修改数据库相关 2.默认laravel没有model目录,默认有一个model文件User.php放在app里 ...

  8. 使用Pechkin与CPechkin生成PDF

    1. Pechkin     从NuGet程序管理器中获得Pechkin,代码示例如下:             GlobalConfig config = new GlobalConfig();   ...

  9. JavaScript入门学习之一——初级语法

    JavaScript是前端编辑的一种编程语言(不同于html,html是一种标记语言),所以和其他的编程语言一样,我们将会从下面几点学习 基础语法 数据类型 函数 面向对象 JavaScript的组成 ...

  10. Mysql配置查询

    查看mysql数据库的线程数: show global status like 'Thread%'; 如果我们在MySQL服务器配置文件中设置了thread_cache_size,当客户端断开之后,服 ...