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

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

成都創新互聯是一家集網站建設,臨澤企業網站建設,臨澤品牌網站建設,網站定制,臨澤網站建設報價,網絡營銷,網絡優化,臨澤網站推廣為一體的創新建站企業，幫助傳統企業提升企業形象加強企業競爭力。可充分滿足這一群體相比中小企業更為豐富、高端、多元的互聯網需求。同時我們時刻保持專業、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學習、思考、沉淀、凈化自己，讓我們為更多的企業打造出實用型網站。

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

在開發環境，加載原文件，便于定位和 Debug；
在生產環境，按配置將所有資源分類打包壓縮，優化瀏覽器對資源加載。

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

模塊化開發
大部分 JavaScript 文件由 MVC4 一次性加載，但模塊按需創建
部分頁面的腳本，可以按頁面需要單獨加載，但同樣是模塊化的

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

由于 Bundle 之后模塊不能以文件為單位，所以需要重用的模塊都應該是命名模塊。考慮到具體頁面自己的模塊不需要重用，所以這種情況下可以定義為匿名模塊。所以模塊定義函數要像這樣：
```
funciton define(name, factory) {
    if (isFunction(name)) {
        factory = name
        name = undefined
    }
    // ......
}
```
模塊名稱唯一性由人來控制，但是應提供檢查機制，所以如果出現重復定義的情況，拋出異常。由是在一個項目中，命名沖突這種情況應該不是主要矛盾。如果不幸命名沖突成為了主要矛盾，基本上也可以通過定義命名空間來解決。最簡單的命名空間就是在模塊名中加入命名空間部分，比如 "app.core.codec.hexcode"。

按需加載，使用 require 函數

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

執行模塊的入口。雖然可以用 require 作為入口，但是 require 需要一個模塊名稱作為參數，不能用于匿名模塊作為入口的情況。假想如下應用場景：
```
define(function() {
    // ......
}).use()
```
要實現這種應用場景，就需要 define 返回一個對象，該對象擁有 use 方法，可以通過 use 方法一次性調用當前模塊的 factory 函數。比較簡單直接的方式就是在內部定義一個 Module 類來裝載模塊配置，在 define 的時候生成 Module 對象，并返回出來。
```
function define(name, factory) {
    // ......
    var module = new Module(factory)
    // ......
    return module
}
```

內部模塊管理。通過一個 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）下載