一个合格的插件必须满足以下要求:
1.拥有独立作用域与用户作用域隔离，插件内的私有变量不可影响用户定义的变量
2.拥有默认参数
3.提供配置方法让用户可改变参数
4.提供监听接口，以监听页面操作
5.支持链式调用
接下来是一个改变文本颜色的简单插件
<!DOCTYPE html><html> ???<head> ???????<meta charset="UTF-8"> ???????<title></title> ???</head> ???<body> ???????<p class="a">11</p> ???????<input type="button" class="clickIt"/> ???</body> ???<script> ???????//自执行函数内变量拥有独立作用域并与外界隔离 ???????(function(){ ???????????//默认参数写在最前面 ???????????var obj = ‘‘ ???????????//参数方法API ???????????var api = { ???????????????//配置方法改变参数 ???????????????config: function (opt) { ???????????????????obj= document.querySelector(opt) ???????????????????//返回this对象，其指向调用此方法的对象，故可以链式调用 ???????????????????return this ???????????????}, ???????????????//监听页面操作 ???????????????listen: function listen(elem) { ???????????????????document.querySelector(elem).onclick= ()=> { ???????????????????????this.fun1(obj) ???????????????????} ???????????????????return this ???????????????}, ???????????????fun1: function(obj) { ???????????????????obj.style.color= "red" ???????????????????return this ???????????????} ???????????} ???????????//this为window对象，simplePlugin为插件名称 ???????????this.simplePlugin= api ???????})() ???</script> ???<script> ???????simplePlugin.config(‘.a‘).listen(".clickIt") ???</script></html>另一种格式是通过构造函数创建实例:
<!DOCTYPE html><html> ???<head> ???????<meta charset="UTF-8"> ???????<title></title> ???</head> ???<body> ???????<p class="a">11</p> ???????<input type="button" class="clickIt"/> ???</body> ???<script> ???????//自执行函数内变量拥有独立作用域并与外界隔离 ???????(function(){ ???????????function api(){ ???????????????this.obj= ‘‘ ???????????????this.config= (opt)=> { ???????????????????obj= document.querySelector(opt) ???????????????????//返回this对象，其指向调用此方法的对象，故可以链式调用 ???????????????????return this ???????????????} ???????????????//监听页面操作 ???????????????this.listen= (elem)=> { ???????????????????document.querySelector(elem).onclick= ()=> { ???????????????????????this.fun1(obj) ???????????????????} ???????????????????return this ???????????????} ???????????????this.fun1= (obj)=> { ???????????????????obj.style.color= "red" ???????????????????return this ???????????????} ???????????} ???????????//this为window对象，simplePlugin为插件名称 ???????????this.simplePlugin= api ???????})() ???</script> ???<script> ???????var sp= new simplePlugin() ???????sp.config(‘.a‘).listen(".clickIt") ???</script></html>js原生插件格式解析
原文地址：http://www.cnblogs.com/yanze/p/7459008.html