JavaScript文件加載順序和依賴管理

Question

只是想知道這個...

我有幾個獨立的JavaScript文件，所有包含基於模塊模式的代碼。一些模塊具有一些其他的依賴關係。如果我知道在加載頁面之前HTML中不會調用任何代碼，那麼文件加載的順序仍然很重要？

事實上，模塊代碼位於一個即時函數內足以觸發其他模塊已被加載的要求？

如果需要的話，我準備好查看RequireJS庫，但只是想知道我要去哪裏先行。

Answer 1

如果可能，請設置您的依賴關係，以便在加載JavaScript文件（即使用自執行函數）時加載和設置所有模塊。

然後在.ready塊中的所有模塊上調用.init或同等功能。這樣，您可以在加載所有文件後顯式調用需要依賴項的任何功能。

一個例子：

foo.js 
(function() { 
    function initFoo() { ... } 
    ... 
    window.namespace.foo = { 
     init: initFoo 
    } 
}()); 

bar.js 
(function() { 
    function initBar() { ... } 
    ... 
    window.namespace.bar = { 
     bar: initBar 
    } 
}()); 

main.js 
(function() { 
    $.ready(function() { 
      window.namespace.foo.init(); 
      window.namespace.bar.bar(); // dependancies on foo 
    }); 

}()); 

，這並不有依賴關係可以在foo.js & bar.js封鎖和任何相關的代碼被執行一次就可以的所有文件都裝上.ready通過您init函數調用的任何代碼。

Answer 2

如果所有文件在執行開始時已經加載，加載順序並不重要。

它可能有可能是一些JavaScript引擎開始，儘快爲他們下載腳本編譯，所以這可能影響。但腳本仍然會運行！