简易JS插件开发，本文效果是一个简单的弹出层，意在记录插件的封装Demo。
完整源码压缩包：demo.rar
效果图（如下）：
插件脚本：
/**
* 节点配置属性方式配置参数：专业的做法是配置到，每一个需要初始化为插件的那个html标签的属性上面(这个属性的value必须是标准的json字符串)，
* 这样做的好处是，当存在多个需要初始化为插件的标签时，可以配置各自想要的参数
* 例如：<div data-setting="{'param1':1,'param2':2}"></div>
* Created by TonyZeng on 2016/7/6.
*/
/**前面的这个分号，用于避免其他插件没有分号闭合导致在压缩代码后导致语法的错误。*/
;(function ($) {
/**这里相当于一个构造函数，当new Demo(demo)时，就会传递参数过来
* 不过，我们没有采用new的方式来初始化插件，我们定义了一个init方法来初始化，在init方法中，我们用的其实也就是这个
* 构造函数来初始化，init里面用each来循环初始化，将div节点对象（this）指针作为参数传入构造函数的参数列表
*/
var Demo = function (demo) {
var self = this;
//保存节点对象，（获取自定义配置）getSetting方法会用它来获取节点里面的属性，比如自定义配置属性
this.demo = demo;
//默认配置
this.setting = {"maskDivId": "xxx", "showDivId": "xxx", "closeButtonId": "xxx"};
//用自定义配置merge默认配置
$.extend(this.setting, this.getSetting());
//事件绑定
$(".demo").bind("click", function (e) {
self.showdiv();
//阻止事件冒泡出现(冒泡事件)
e.stopPropagation();
});
$("#" + this.setting.closeButtonId).bind("click", function (e) {
self.hidediv();
//阻止事件冒泡出现(冒泡事件)
e.stopPropagation();
}
);
};
Demo.prototype = {
//获取自定义配置
getSetting: function () {
var setting = this.demo.attr("data-setting");
//如果这个节点属性存在，并且不为空的话就转成json对象传出去
if (setting && setting != null) {
return $.parseJSON(setting);
} else {
return {};
}
},
showdiv: function () {
document.getElementById(this.setting.showDivId).style.display = "block";
document.getElementById(this.setting.maskDivId).style.display = "block";
},
hidediv: function () {
document.getElementById(this.setting.showDivId).style.display = 'none';
document.getElementById(this.setting.maskDivId).style.display = 'none';
}
};
//（当页面有多个地方需要初始化成插件时）为了避免用new的方式来初始化插件的繁琐，我们用一个init方法来专门处理初始化
Demo.init = function (list) {
//这个this指向Demo插件对象
var _this_ = this;
//用each循环初始化传入的元素为插件
list.each(function () {
//这个this指向each循环里面的元素对象
new _this_($(this));
});
};
//全局注册
window["Demo"] = Demo;
})(jQuery);
$(function () {
Demo.init($(".demo"));
});
HTML：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DIV CSS遮罩层</title>
<link type="text/css" rel="stylesheet" href="demo.css"/>
</head>
<body>
<input id="btnshow" class="demo" type="button" value="Show"
data-setting='{"maskDivId":"mask","showDivId":"show","closeButtonId":"btnclose"}'/>
<div id="mask">遮罩层</div>
<div id="show">
<input id="btnclose" type="button" value="Close"/>
</div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="demo.js"></script>
</body>
</html>
Css：
#mask {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:;
-moz-opacity: 0.7;
opacity: .70;
filter: alpha(opacity=70);
}
#show {
display: none;
position: absolute;
top: 25%;
left: 22%;
width: 53%;
height: 49%;
padding: 8px;
border: 8px solid #E8E9F7;
background-color: white;
z-index:;
overflow: auto;
}