原文地址：https://github.com/lianxiaozhuang/blog

轉載請註明出處

js 寫外掛教程深入

1.介紹具有安全作用域的建構函式

function Fn(name){
   this.a = name;
}
Fn.prototype = {
    constructor:Fn,
    getF:function(){
        console.log(1);
    }
}
new Fn();
//new 出來的Fn就是一個建構函式
//倘若有人忘記寫new，直接呼叫Fn();此時var p = Fn();可見例項p沒有getF的方法；
//為了解決這種問題；引入了安全作用域的建構函式概念

function Fn(name){
  if(!(this instanceof Fn)){
      //只要不是new的，用Fn()直接呼叫的，這裡的this絕對不指向Fn；讓它從
      //新new一下；直到下一次程式碼走else裡的內容，故把this.a 放到了else裡
      return new Fn(name)
  }else{
      this.a = name;
  }
}
Fn.prototype = {
    constructor:Fn,
    getF:function(){
        console.log(1);
    }
}
 

2.預設引數

 //我們用過一些外掛，是可以傳一些配置引數的，當然如果你不傳的話它有預設的值，
 function Fn(params){
    var defaults = {
        width:100,
        color:"#000"
    };
    var params = params||{}; 
    for (var x in defaults) {
        if (typeof params[x] === 'undefined') {
            params[x] = defaults[x];
            //對於使用時，沒有設定的引數；用預設引數代替
        }  
    }
    this.params= params;//得到的this.params,在方法中呼叫；
   
 }
 Fn.prototype = {

 }
 

3.方法到底寫到this裡還是prototype 裡

//舉個例子
//①
function Fn(){
    this.getC = function(){
        //...
    }
}
//or...
//②
function Fn(){}
Fn.prototype.getC = function(){}
//大家可能都會有這樣的糾結，getC到底寫到this裡還是原型裡
//這要從記憶體說起；寫到原型上，每執行一個例項，getC不需要開闢新的記憶體
//故，可以把一些純計算的方法，寫原型上，如果方法和例項本身有關，應該寫道this中

4.方法名防止衝突處理

//如果在引入你的外掛之前，window下已經有Fn的變數；怎麼辦,你如果這麼搞； 豈不是把別人寫的Fn搞掉了
//此時應該把Fn的控制權交出，自己用Fn2輸出
(function(){
    var Fn=function(){
            console.log(000)
        }
        Fn.prototype =  {
            
        }
        /**
這裡暫時沒寫好；
*/
        if(window.Fn){
           // throw Error("Fn已經存在，請使用Fn2")
            window.Fn2 = Fn ;
           
        }else{
                window.Fn2 = Fn ;
        }
}())
 

5.對外輸出的規範化exprot 、amd 完整寫法

;(function(global) {
 
    //開啟嚴格模式，規範程式碼，提高瀏覽器執行效率
    "use strict";
 
    //定義一個類，通常首字母大寫
    var MyPlugin = function(options) {

        this.name  = name;
        this.init();
 
    };
 
    //覆寫原型鏈，給繼承者提供方法
    MyPlugin.prototype = {
        constructor:MyPlugin,
        init: function() {
 
        }
    };
 
    //相容CommonJs規範
    if (typeof module !== 'undefined' && module.exports) module.exports = MyPlugin;
 
    //相容AMD/CMD規範
    if (typeof define === 'function') define(function() { return MyPlugin; });
 
    //註冊全域性變數，相容直接使用script標籤引入該外掛
    global.MyPlugin = MyPlugin;
 
//this，在瀏覽器環境指window，在nodejs環境指global
//使用this而不直接用window/global是為了相容瀏覽器端和服務端
//將this傳進函式體，使全域性變數變為區域性變數，可縮短函式訪問全域性變數的時間
})(this);