js原生插件格式解析
一个合格的插件必须满足以下要求:
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>
