標籤:back var 顏色 通過 this listen script 接下來 建構函式
一個合格的外掛程式必須滿足以下要求:
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原生外掛程式格式解析