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
       }
       // ......
   }

   AI代码助手复制代码

   模块名称唯一性由人来控制，但是应提供检查机制，所以如果出现重复定义的情况，抛出异常。由是在一个项目中，命名冲突这种情况应该不是主要矛盾。如果不幸命名冲突成为了主要矛盾，基本上也可以通过定义命名空间来解决。最简单的命名空间就是在模块名中加入命名空间部分，比如 "app.core.codec.hexcode"。

2. 按需加载，使用 require 函数

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

   AI代码助手复制代码

3. 执行模块的入口。虽然可以用 require 作为入口，但是 require 需要一个模块名称作为参数，不能用于匿名模块作为入口的情况。假想如下应用场景：

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

   AI代码助手复制代码

   要实现这种应用场景，就需要 define 返回一个对象，该对象拥有 use 方法，可以通过 use 方法一次性调用当前模块的 factory 函数。比较简单直接的方式就是在内部定义一个 Module 类来装载模块配置，在 define 的时候生成 Module 对象，并返回出来。

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

   AI代码助手复制代码

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()
   }

   AI代码助手复制代码

在最终实现的时候，还需要处理容错，以及若干细节问题。最终代码命名为 js-modular.js，在附件中可以下载。在使用的时候只需要注意一点，页面上加载脚本的时候，记得把 js-modular.js 放在所有模块定义脚本之前即可。

目前已经建立了开源项目 jNs，基于命名空间的模块管理工具，是在 js-modular.js 的基础之上发展而来的。如果有兴趣的话，请关注一下这个项目。

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

• 附件下载（仅 js-modular.js），得好好找找

• 51CTO下载

• 百度网盘下载

亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>