如何開發JavaScript外掛
阿新 • • 發佈:2018-11-16
1、自身作用域獨立,私有變數不影響外部變數(閉包,延長外掛內部變數的生命週期)
2.、預設引數設定
3、基本功能+API,API可修改預設引數,支援自定義
4、監聽入口,針對指定元素進行監聽
5、避免命名衝突和全域性汙染,用全域性物件包裝,定義js物件接收工具函式
6、每個功能之間相互依賴必須明確,嚴格按照依賴順序進行合併或載入
7、每個子功能分別是一個閉包,且公共介面暴露到共享域(被主函式暴露的公共物件)
8、所有功能寫在一個立即執行的函式中
;(function(global,undefined){ var plugin={ add:function(n1,n2){...} ... } //將外掛物件暴露給全域性物件 'plugin' in global &&global.plugin=plugin; })(window); /* *1、定義外掛前加分號,解決js合併時可能會產生錯誤的問題 *2、undefined在低版本瀏覽器不支援,直接使用會報錯,增加形參undefined,即便外部重新定義undefined * 也不會影響 *3、windows物件作為引數傳入,避免函式執行時到外部去查詢 */
當外掛用於非瀏覽器端時,直接取當前全域性的this物件作為頂級物件,解決外掛對環境的依賴性
;(function(global,undefined){ 'use strict' var _global; var plugin={ add:function(n1,n2){...} ... } _global=(function(){ return this||(0,eval)('this');//等價於執行eval('this') }()); !('plugin' in _global) && (_global.plugin=plugin); }());
判斷是否存在載入器,若存在就使用載入器,否則使用頂級作用域
if(typeof module !== "undefined" && module.exports){
module.exports=plugin;
}else if(typeof define ==="function" && define.amd){
define(function(){return plugin;});
}else{
_global.plugin=plugin;
}
完整外掛
;(function(undefined){ 'use strict' var _global; var plugin={ add:function(){ return result(arguments,function(pre,cur){ return pre+cur; }); }, sub:function(){ return result(arguments,function(pre,cur){ return pre-cur; }); }, mul:function(){ return result(arguments,function(pre,cur){ return pre*cur; }); }, div:function(){ return result(arguments,function(pre,cur){ return pre/cur; }); },//判斷除數是否為0 sur:function(){ return result(arguments,function(pre,cur){ return pre%cur; }); } } function result(args,fn){ var argsArr=Array.prototype.slice.call(args); if(argsArr.length>0){ return argsArr.reduce(fn); }else{ return 0; } } _global=(function(){return this||(0,eval)('this');}());//相容低版本ie不允許使用eval的問題 if(typeof module !== "undefined" && module.exports){ module.exports=plugin; }else if(typeof define ==="function" && define.amd){ define(function(){return plugin;}); }else{ _global.plugin=plugin; } }())
原生js外掛
1.工廠模式
2、自執行函式
3、面向物件,prototype原型模式
jQuery擴充外掛
1、JQ自身擴充套件
2、對HTML標記或頁面元素進行擴充套件
3、對HTML標記或頁面元素進行擴充套件
外掛外包裝
閉包