數據主腳本加載與常規腳本加載之間的區別

Question

使用RequireJS時，將腳本與

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

和

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

即， data-main屬性對腳本加載有什么變化？ 我已經閱讀了有關此文檔，但對我來說，不同之處尚不完全清楚。

通常，您將使用數據主腳本來設置配置選項，然后加載第一個應用程序模塊。 注意：為您的數據主模塊生成的腳本標簽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加載的script在設置了async屬性集的head元素中創建一個script元素來掩蓋事物，因為這與通過RequireJS加載任何腳本沒有什么不同 。 由RequireJS加載的每個腳本都將在head為其創建一個script元素，並設置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提供配置。 （如果require在加載RequireJS之前定義，它將以require的值作為配置。）除了通過加載scripts/main啟動應用程序之外，此代碼還加載foo並在其上調用一個方法：兩個入口點。

Answer 2

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()塊並require.config()第一個應用程序腳本的腳本。 如果您未指定data-main ，那么除非您顯式加載配置文件和第一個模塊，否則您僅加載Require且不加載任何應用程序腳本。

如果您不告訴Require加載任何東西，您認為Require會加載什么？

---

如果您不使用data-main ，則必須在加載Require 之后提供一個入口點（這是我一直以來所做的事情，除了我學習它的原因外，沒有其他充分的理由。）閱讀配置選項以了解您如何會做到這一點。

我在開發中使用了這種模式 ：

<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任何腳本中。

---

如果使用靜態優化器來構建生產捆綁包，那么這都不重要，因為您只是加載了捆綁包。

Answer 3

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

data-main指向的腳本還將列出文件定義的代碼的依賴性。 依賴關系就是肉在哪里。 通常，盡管不是必需的，但要加載第一個模塊並執行最終的實際應用程序。

回應評論的附錄：

您需要了解一些概念，這些概念將有助於理解這種方法。

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

任何給定的模塊可能要依靠任何數量的其他模塊才能起作用。 AMD模式允許在該模塊的定義內列出每個模塊的依賴性。

RequireJS將整理出誰需要什么，以什么順序，並且直到腳本所依賴的所有模塊都已加載並准備就緒后，腳本才能執行。

因此，這根本不像我們長大后所做的那樣在頁面中放置一個腳本鏈接（或多個鏈接）。 這是用於JavaScript開發的非常不同的方法。 一旦掌握了它，並弄清楚了如何將代碼分解為謹慎的功能單元，它確實很不錯。

Answer 4

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

src將首先加載“ scripts / vendor / requirejs / require.js”。 然后data-main屬性將執行“ scripts / main.js”。