如何將模塊引入傳統JavaScript項目？

Question

我是一個非常大型的，多頁面的web應用程序的開發人員。我們正在努力改進我們的JavaScript的理智，所以我想介紹一個模塊加載器。目前，所有事情都是以一種老式的方式，將一堆腳本標籤放在頁面上並希望獲得最佳效果。一些限制是：

• 我們的html頁面是模板化，繼承和組成，使得發送到客戶端的最終頁面彙集了來自許多不同源HTML文件的片段。這些給定文件中的任何一個都可能依賴於鏈上較高的JavaScript資源。
• 這一定是零碎的。代碼庫大到可以一次轉換所有內容，所以我正在尋找新頁面的良好解決方案，並根據需要在現有頁面上進行遷移。
• 此解決方案需要與現有的非模塊JavaScript共存於同一頁面上。有些東西（如菜單和分析）存在於每個頁面上，例如，我無法刪除全局jquery，因爲它遍佈整個地方。

基本上我想要一種方法來創建使用模塊和現代依賴管理的安全空間。我讀過的大多數教程和文章都針對新項目。

Requirejs看起來像一個不錯的選擇，我已經玩了一下。儘管它的完全異步性質在某些情況下是阻礙 - 我想使用requirejs打包全局資源，但如果我無法控制執行順序，我不能這樣做。此外，它吸引了一個頁面的主要功能（比如渲染表格）在分析調用等次要事情之後發生。

有什麼建議嗎？

Answer 1

這是很多要求。 :-)所以這裏是我對此的想法：

通常，當你加載一個網頁 - 所有顯示的內容都會被擦掉，這樣新的傳入信息就不會干擾已經存在的內容，所以你真的只有一些選項（我知道的）可以將所有內容保存在瀏覽器中，然後根據需要加載新頁面。

第一個（也是最簡單的）方法是使用FRAMES。這些已經不再用於我所看到的了，但是每個FRAME都允許您顯示不同的網頁。所以你要做的是使一個框架使用100％，第二個使用「*」，這樣就不會看到。然後，您可以使用未看到的框架來控制100％框架中發生的情況。

第二種方法是使用Javascript來控制一切。在這種情況下，您將創建一個名稱空間區域，然後在您需要時使用jQuery的getscript（）函數加載每個頁面。我通過生成HTML，通過bin2hex（）將其轉換爲十六進制，然後將其作爲一個javascript函數發回，然後在瀏覽器中將其解開並將其應用於網頁來完成。如果要完全替換您所做的網頁，並且如果它是對網頁的更新，您只需將其插入網頁上的HTML中。任何新的JavaScript函數總是附加到命名空間。如果一個函數不再需要，它可以從命名空間中移除以釋放內存。

爲什麼要將HTML轉換爲十六進制然後發送它？因爲那樣你就可以使用你想要的任何字符（比如單引號和雙引號），它根本不影響Javascript。在GitHub上有相當快的十六進制例程（參見我的toHex和fromHex例程）。

使用getScript（）的額外好處之一是，它有時也會使任何人都看不到您的代碼。getScript（）如何工作的記錄。