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標記或頁面元素進行擴充套件

外掛外包裝

閉包