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

成都創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),臨澤企業(yè)網(wǎng)站建設(shè),臨澤品牌網(wǎng)站建設(shè),網(wǎng)站定制,臨澤網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,臨澤網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學習、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。

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

1. 在開發(fā)環(huán)境，加載原文件，便于定位和 Debug；

2. 在生產(chǎn)環(huán)境，按配置將所有資源分類打包壓縮，優(yōu)化瀏覽器對資源加載。

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

1. 模塊化開發(fā)

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

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

分析目標，歸整一下，大概有如下要點需要實現(xiàn)

1. 由于 Bundle 之后模塊不能以文件為單位，所以需要重用的模塊都應(yīng)該是命名模塊?？紤]到具體頁面自己的模塊不需要重用，所以這種情況下可以定義為匿名模塊。所以模塊定義函數(shù)要像這樣：

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

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

2. 按需加載，使用 require 函數(shù)

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

3. 執(zhí)行模塊的入口。雖然可以用 require 作為入口，但是 require 需要一個模塊名稱作為參數(shù)，不能用于匿名模塊作為入口的情況。假想如下應(yīng)用場景：

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

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

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

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

   經(jīng)過參考、推敲和實驗，得出了如下的一個代碼框架

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

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

---

目前已經(jīng)建立了開源項目 jNs，基于命名空間的模塊管理工具，是在 js-modular.js 的基礎(chǔ)之上發(fā)展而來的。如果有興趣的話，請關(guān)注一下這個項目。

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

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

• 51CTO下載

• 百度網(wǎng)盤下載

網(wǎng)頁標題：ASP.NETMVC4捆綁(Bundle)技術(shù)下的JavaScript
本文地址：http://aaarwkj.com/article44/pjcdee.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、全網(wǎng)營銷推廣、定制開發(fā)、建站公司、品牌網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)