ASP.NET MVC4 捆綁(Bundle)技術下的 JavaScript

說到 Web 應用中 JavaScript 的模塊化，很容易想到 RequireJS、SeaJS 和 ECMAScript 6。ES6 要全面應用還得有段時間，RequireJS 和 SeaJS 的模塊化在實際應用中又有兩個分支：一是通過按需加載的方式加載並創建模塊，二是通過工具打包成單一文件，一次性加載，按需創建模塊。ASP.NET MVC4 的捆綁（Bundle）技術類似後者。

MVC4 Bundle 主要用於優化 JavaScript 和 CSS 資源的加載。關於這個技術的介紹，可以參考《ASP.NET Mvc4 Bunlde 捆綁壓縮技術》，或者《CSS編程：捆綁和縮小》。其特點很鮮明，主要有兩點：

1. 在開發環境，加載原文件，便於定位和 Debug；

2. 在生產環境，按配置將所有資源分類打包壓縮，優化瀏覽器對資源加載。

也正是由於它的這兩個特點，如果要使用 Bundle 技術，就很難使用現有的 JavaScript 模塊化工具來進行開發。翻了下百度和 Google，沒找到合適的解決方案，於是決定自己寫個簡單的模塊加載器，主要實現如下目標：

1. 模塊化開發

2. 大部分 JavaScript 文件由 MVC4 一次性加載，但模塊按需創建

3. 部分頁面的腳本，可以按頁面需要單獨加載，但同樣是模塊化的

分析目標，歸整一下，大概有如下要點需要實現

1. 由於 Bundle 之後模塊不能以文件爲單位，所以需要重用的模塊都應該是命名模塊。考慮到具體頁面自己的模塊不需要重用，所以這種情況下可以定義爲匿名模塊。所以模塊定義函數要像這樣：

   funciton define(name, factory) {
       if (isFunction(name)) {
           factory = name
           name = undefined
       }
       // ......
   }

   模塊名稱唯一性由人來控制，但是應提供檢查機制，所以如果出現重複定義的情況，拋出異常。由是在一個項目中，命名衝突這種情況應該不是主要矛盾。如果不幸命名衝突成爲了主要矛盾，基本上也可以通過定義命名空間來解決。最簡單的命名空間就是在模塊名中加入命名空間部分，比如 "app.core.codec.hexcode"。

   
   

2. 按需加載，使用 require 函數

   function require(moduleName) {
       // ......
   }

   
   

3. 執行模塊的入口。雖然可以用 require 作爲入口，但是 require 需要一個模塊名稱作爲參數，不能用於匿名模塊作爲入口的情況。假想如下應用場景：

   define(function() {
       // ......
   }).use()

   要實現這種應用場景，就需要 define 返回一個對象，該對象擁有 use 方法，可以通過 use 方法一次性調用當前模塊的 factory 函數。比較簡單直接的方式就是在內部定義一個 Module 類來裝載模塊配置，在 define 的時候生成 Module 對象，並返回出來。

   function define(name, factory) {
       // ......
       var module = new Module(factory)
       // ......
       return module
   }

   
   

4. 內部模塊管理。通過一個 map<name, module> 來管理所有模塊定義，這在實現上就是一個普通的 JavaScript 對象。匿名模塊因爲是立即使用，所以不需要進行管理。模塊管理的核心其實是 Module 類，需要通過它完成創建模塊、緩存導出對象和提供導出對象等。而且除了 use 方法需要暴露出來之後，其它方法都應該隱藏起來。

   經過參考、推敲和實驗，得出瞭如下的一個代碼框架

   // 這是所有命名模塊保存的地方
   var modules = {}
   
   function Module(name, factory) {
       // 創建模塊對象，保存 factory 函數
   }
   
   Module.prototype.use = function() {
       // 執行 factory 函數
       // 處理 exports 和 isExported 等狀態
       return exports
   }
   
   function define(name, factory) {
       // 定義並保存模塊
       modules[name] = new Module(name, factory)
   }
   
   function require(name) {
       // 按名稱找到模塊，並執行之
       return modules[name].use()
   }

在最終實現的時候，還需要處理容錯，以及若干細節問題。最終代碼命名爲 js-modular.js，在附件中可以下載。在使用的時候只需要注意一點，頁面上加載腳本的時候，記得把 js-modular.js 放在所有模塊定義腳本之前即可。

---

目前已經建立了開源項目 jNs，基於命名空間的模塊管理工具，是在 js-modular.js 的基礎之上發展而來的。如果有興趣的話，請關注一下這個項目。

js-modular.js 及 Demo（VS2013 + MVC4 + NuGet）下載

• 附件下載（僅 js-modular.js），得好好找找

• 51CTO下載

• 百度網盤下載