2016-01-19 59 views
14

我注意到很多圖書館都使用下面這種風格來定義他們的圖書館。我還注意到,第一個自我調用函數與Require.js或AMD系統有關,他們總是以工廠作爲參數,我會更多地關注Require.js,一直進入Browserify。建立一個JavaScript庫,爲什麼使用IIFE這種方式?

爲什麼主代碼傳遞到括號內的第一個自調用函數的末尾,這是一個閉包,或者只是被認爲是一個匿名函數,我會深入研究兩者。這有什麼好處?它看起來像封閉作者通過string,thiscallback

請問這會給我的圖書館一個乾淨安全的方式來全球化主要對象在這個例子下面Please

(function(globalName, root, factory) { 
    if (typeof define === 'function' && define.amd) { 
     define([], factory); 
    } 
    else if (typeof exports === 'object') { 
     module.exports = factory(); 
    } 
    else{ 
     root[globalName] = factory(); 
    } 
}('Please', this, function(){ 

我想真正深入挖掘JavaScript和創建自己的小MVC架構,我不想聽我傻或其做過的事情,我想挑戰自己,學習。

如果有任何用於創建JavaScript庫或甚至更好的MVC庫的優秀資源,我很想知道。

回答

10

該代碼模式被稱爲Universal Module Definition(UMD)。它使您可以在不同的環境中使用JavaScript庫。它提供了定義模塊中的三種方式:

  1. Asynchronous Module Definition(AMD),通過RequireJSDojo Toolkit實現。

    define([], factory);

  2. CommonJS —的NodeJS模塊。

    module.exports = factory();

  3. 分配模塊全局對象,例如在window瀏覽器。

    root[globalName] = factory();

的IIFE有三個參數:globalNamerootfactory

  • globalName是您的模塊的名稱。它僅適用於定義模塊的第三種方式,即將模塊對象分配給全局變量。例如,如果您將此參數設置爲"myAwesomeModule"並在瀏覽器中使用代碼(無AMD),則可以使用myAwesomeModule變量訪問您的模塊。
  • root是全局對象的名稱。顯然,它也僅適用於定義模塊的第三種方式。通常this作爲此參數傳遞,因爲this是在瀏覽器中對window的引用。但是,這doesn't work in strict mode。如果您希望代碼在嚴格模式下工作,則可以用typeof window !== "undefined" ? window : undefined替換this
  • 最後,factory是一個匿名函數,它應該將模塊作爲對象返回。

參見:

10

這是Universal Module Definition(UMD)的例子。這是做一個JS模塊的三個流行的JS模塊規格兼容的技術:

  1. Asynchronous Module Definition(AMD,由Require.js使用)

    define('name', [ /* dependencies */ ], factory); 
    
  2. CommonJS(Node.js的生態系統)

    module.exports = object; 
    
  3. 全球出口(例如,在瀏覽器window

    global['name'] = object; 
    

UMD包裝一個工廠功能負責創建對象要導出,並將其作爲一個參數傳遞給一個立即調用函數表達式(IIFE),如在要粘貼的片段。 IIFE負責檢測模塊環境,並以適當的方式導出工廠創建的對象。模式如下:

(function (name, root, factory) { 
    // detect the module environment and 
    // export the result of factory() 
})('name', this, function() { 
    // module code 
    // return the object to be exported 
}); 

許多轉換器和構建工具自動生成此包裝。

相關問題