标签：mvc4 bundles 模块化 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 放在所有模块定义脚本之前即可。
Demo下载（VS2013，MVC4，NuGet）（还在等待审批）
本文出自 “边城客栈 学海无涯” 博客，请务必保留此出处http://jamesfancy.blog.51cto.com/2516291/1598533
ASP.NET MVC4 捆绑(Bundle)技术下的 JavaScript
标签：mvc4 bundles 模块化 javascript
原文地址：http://jamesfancy.blog.51cto.com/2516291/1598533
