差數據，主要和普通腳本加載

Question

當使用RequireJS之間，什麼是包括

<script data-main="scripts/main" src="scripts/require.js"></script> 

和

腳本之間的差異

<script src="scripts/require.js"></script> 

即什麼是data-main屬性變化有關加載在腳本？我有read through the docs on this，不同的是我不完全清楚。

您通常會使用數據主腳本來設置配置選項，然後加載第一個應用程序模塊。注意：腳本標記require.js爲您的數據生成 - 主模塊包含async屬性。這意味着您不能假定數據主腳本的加載和執行將在稍後在同一頁面中引用的其他腳本之前完成。

說明文檔中提到你會通常使用的數據主要腳本來設置配置選項和加載第一應用程序模塊 - 但你不能也做到這一點通過一個普通的老script標籤？使用data-main屬性進行配置加載應用程序模塊有什麼好處嗎？

是與data-main異步加載唯一不同嗎？或者還有更多？

Answer 1

data-main只是執行應用程序初始調用require的另一種方式。爲了說明......這：

<script data-main="scripts/main" src="scripts/require.js"></script> 

是相同的：

<script src="scripts/require.js"></script> 
<script>require(["scripts/main"])</script> 

這兩種形式都是異步的。這真的就是這一切。關於您擁有多少入口點或RequireJS配置將在何處定位的考慮與使用data-main完全正交。換句話說，這些考慮因素在您使用data-main時發揮作用的程度與您在使用require(["scripts/main"])時發揮作用的程度完全相同。

你引述提的是，裝載有data-main該腳本創建與async屬性設置head元素的script元素只是模糊的東西文檔的一部分，因爲這不是從通過RequireJS加載任何腳本不同。 RequireJS加載的每個腳本都將爲其創建一個script元素，其中head和async屬性已設置。

對於只有一個入口點的應用程序使用data-main，並且將RequireJS的配置放入data-main中指定的模塊中是常見的，但這並不是必需的。舉例來說，這是一個完全有效的使用：

<script> 
    require = { 
     // RequireJS config here... 
    }; 
</script> 
<script data-main="scripts/main" src="scripts/require.js"></script> 
<script> 
    require(["foo"], function (foo) { 
     foo.something(); 
    }); 
</script> 

配置由裝載RequireJS之前，在全局空間設置require給RequireJS。 （如果在加載RequireJS之前定義了require，則需要使用require的值作爲其配置。）除了通過加載scripts/main來啓動應用程序之外，此代碼還會加載foo並在其上調用一個方法：兩個入口點。

Answer 2

data-main是require.js將處理的腳本。正如文檔所述，通常在該腳本中設置配置選項。但還有其他方法可以做到這一點。在許多情況下，它是最簡單和最有效的地方。但不總是。

data-main指向的腳本還將列出文件定義的代碼的依賴關係。依賴關係是肉的地方。這是典型的，但不是必需的，讓這個第一個模塊加載並執行最終的實際應用程序。

補遺響應評論：

有一些你需要知道的，這將有助於使這種方法的意義上的概念。

首先是沒有一個（或幾個，甚至幾個）腳本。這種類型的加載程序旨在處理大量非常小的腳本。每個都有一個非常具體的，往往（最好）單一的目的。調用這些腳本模塊（或單元）。

任何給定的模塊可能依賴於任何數量的其他模塊才能正常工作。 AMD模式允許將每個模塊的依賴關係列入該模塊的定義中。

RequireJS會清楚誰需要什麼以及按什麼順序，並且不會讓腳本執行，直到他們所依賴的所有模塊都已加載並準備就緒。

所以，這完全不同於我們在成長過程中在頁面中放置腳本鏈接（或多個鏈接）。這是一個非常不同的JavaScript開發方法。一旦你瞭解了它，並弄清楚如何將代碼分解爲謹慎的功能單元，它確實很光滑。

Answer 3

data-main適用於您希望將單一入口點應用於您的應用程序。該單一腳本行將加載RequireJS以及scripts/main.js並啓動您的應用程序。

的

<script data-main="scripts/main" src="scripts/require.js"></script> 

結果是<script async src="scripts/main.js"></script>被附加到在運行時文件;這是將包含您的require.config()塊的腳本並提取您的第一個應用程序腳本。如果你沒有指定data-main，那麼你只加載了Require和你的應用程序腳本，除非你明確地加載了一個配置文件和第一個模塊。

您認爲如果您不告訴它加載任何東西，需要加載嗎？

---

如果你不使用data-main，必須經過裝載需要提供一個切入點（這是我一直做它，比其他沒有很好的理由就是我學會了。）閱讀關於configuration options，看看你會如何做到這一點。

我在開發中使用this pattern：

<script src="js/lib/require.js"></script> 
<script src="js/config.js"></script> 
<script> 
    // same as data-main 
    require.config({baseUrl : 'js'}); 
    require(['js/main']); 
</script> 

作爲一個單一入口點，中config.js內容和後續require(['js/main'])調用將在哪個腳本爲data-main引用。

---

如果您使用靜態優化器構建生產捆綁包，則這些都不重要，因爲您只需加載捆綁包。