js原生插件格式解析
阿新 • • 發佈：2017-08-31
utf imp color 構造函數 onclick span charset 原生 kit
一個合格的插件必須滿足以下要求:
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原生插件格式解析