简易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" rel="external nofollow" /></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;}
