javaScrpit插件学习制作
最近一直在学习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插件学习制作的更多相关文章
- emmet插件学习,练习中遇到一些问题
emmet插件学习:帮助提高敲代码效率的插件 参考文献:Emmet(Zen coding)HTML代码使用技巧七则http://www.wzsky.net/html/Website/htmlcss/1 ...
- JQuery实用技巧--学会你也是大神(1)——插件的制作技巧
前 言 JRedu 学习之前,首先我们需要知道什么是JQuery? JQuery是一个优秀的javascript框架. JQuery是继Prototype之后又一个优秀的Javascript框架 ...
- uexQQ插件学习心得
uexQQ插件学习心得 uexQQ插件的作用:通过qq可以分享图文,音乐,应用到相应的qq空间.支持手机客户端分享和手机webQQ分享.下面我们就来看一看他的一些方法. 我们先说一下分享的步骤,这个步 ...
- bootstrap插件学习
转自http://v3.bootcss.com/javascript/ bootstrap javascript插件学习 模态框 打开模态框 <button type="button& ...
- Jquery插件学习
前端开发也工作了一段时间,Jquery代码页写了很多,但是都是些的很零散的,不是很好用,网上看了很多人写的Jquery 很好用,而且到每个项目中都可以使用, 本人就感觉很好奇他们是怎么做到的呢,于是自 ...
- bootstrap插件学习-bootstrap.dropdown.js
bootstrap插件学习-bootstrap.dropdown.js 先看bootstrap.dropdown.js的结构 var toggle = '[data-toggle="drop ...
- bootstrap插件学习-bootstrap.modal.js
bootstrap插件学习-bootstrap.modal.js 先从bootstrap.modal.js的结构看起. function($){ var Modal = function(){} // ...
- DTCMS插件的制作实例电子资源管理(四)URL重写
总目录 插件目录结构(一) Admin后台页面编写(二) 前台模板页编写(三) URL重写(四) 本实例旨在以一个实际的项目中的例子来介绍如何在dtcms中制作插件,本系列文章非入门教程,部分逻辑实现 ...
- 40款非常棒的 jQuery 插件和制作教程(系列一)
jQuery 在现在的 Web 开发项目中扮演着重要角色,jQuery 让网站有更好的可用性和用户体验,让访问者对网站留下非常好的印象.jQuery以其插件众多.独特.轻量以及支持大规模的网站开发闻名 ...
随机推荐
- 第二大矩阵面积--(stack)牛客多校第二场-- Second Large Rectangle
题意: 给你一幅图,问你第二大矩形面积是多少. 思路: 直接一行行跑stack求最大矩阵面积的经典算法,不断更新第二大矩形面积,注意第二大矩形可能在第一大矩形里面. #define IOS ios_b ...
- 版本控制器之SVN(一)
通常软件开发由多人协作开发,如果对代码文件.配置文件.文档等没有进行版本控制,将会出现很多问题: 备份多个版本,占用磁盘空间大 解决代码冲突困难 容易引发BUG 难于追溯问题代码的修改人和修改时间 难 ...
- jQuery可拖拽旋转的3D图片墙
在线演示 本地下载
- 如何用纯 CSS 创作一个菜单反色填充特效
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览.https://codepen.io/comehope/pen/qYMoPo 可交互视频教程 ...
- Codeforces 1194D. 1-2-K Game
传送门 先考虑只能走 $1,2$ 步的情况,设 $p[i]$ 表示当 $n=i$ 时先手是否必胜 自己手玩一下发现 $p$ 就是 $011011011...011$ 这样循环(下标从 $0$ 开始,其 ...
- window10提交代码到码云
1.创建项目文件夹,例如创建一个"爬虫项目码云仓库" 2.进入项目文件夹,在地址栏输入cmd然后回车,这样就在该文件夹打开了终端 3.终端输入git init初始化项目仓库,此时会 ...
- centos安装配置php
PHP的安装同样需要经过环境检查.编译和安装3个步骤. 1.首先用百度搜索 “PHP:Downloads”, 点击第一个网页: 选择5.5.37版本,选择 .tar.gz 格式的文件: 来到镜像列表网 ...
- 外网访问VMware(Centos7.0,NAT模式)搭建的web服务器应用
首先参考 https://www.cnblogs.com/studyhard-cq/p/11551755.html 设置好NAT模式,能访问公网. 1.打开VMware,点击左上角编辑 ...
- xorm:golang的orm(只写了一小部分)
xorm xorm是一个简单而强大的Go语言ORM库. 通过它可以使数据库操作非常简便.这个库是国人开发的,是基于原版 xorm:https://github.com/go-xorm/xorm 的定制 ...
- Qt5.12.0交叉编译
Qt5.12.0 交叉编译 源码配置 修改 qtbase/mkspecs/linux-arm-gnueabi-g++/qmake.conf 文件 MAKEFILE_GENERATOR = UNIX C ...