ASP.NET MVC4 捆绑(Bundle)技术下的 JavaScript 推荐
2015-01-02 20:27
190 查看
说到 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 之后模块不能以文件为单位,所以需要重用的模块都应该是命名模块。考虑到具体页面自己的模块不需要重用,所以这种情况下可以定义为匿名模块。所以模块定义函数要像这样:
按需加载,使用
执行模块的入口。虽然可以用
内部模块管理。通过一个
经过参考、推敲和实验,得出了如下的一个代码框架
在最终实现的时候,还需要处理容错,以及若干细节问题。最终代码命名为
目前已经建立了开源项目 jNs,基于命名空间的模块管理工具,是在 js-modular.js 的基础之上发展而来的。如果有兴趣的话,请关注一下这个项目。
js-modular.js 及 Demo(VS2013 + MVC4 + NuGet)下载
附件下载(仅 js-modular.js),得好好找找
51CTO下载
百度网盘下载
附件:http://down.51cto.com/data/2365258
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)下载
附件下载(仅 js-modular.js),得好好找找
51CTO下载
百度网盘下载
附件:http://down.51cto.com/data/2365258
相关文章推荐
- 基于Asp.Net MVC4 Bundle捆绑压缩技术的介绍
- 基于Asp.Net MVC4 Bundle捆绑压缩技术的介绍
- Asp.Net MVC4 Bundle捆绑压缩技术
- Asp.Net MVC4 Bundle捆绑压缩技术
- Asp.Net MVC4 Bundle捆绑压缩技术
- asp.net mvc 应用Bundle(捆绑和微小)压缩技术 启用 BundleConfig 配置web.config
- MVC4商城项目四:应用Bundle捆绑压缩技术
- MVC(BundleConfig) 压缩捆绑技术,减少页面请求,优化客户体验。
- MVC4商城项目四:应用Bundle捆绑压缩技术
- ASP.NET MVC 4 BundleTable的捆绑技术
- AspNet MVC4 教学-19:Asp.Net MVC4 利用Linq技术的搜索应用快速Demo
- [ASP.NET MVC 小牛之路]17 - 捆绑(Bundle)
- 使用asp.net MVC4中的Bundle遇到的问题及解决办法分享
- Asp.Net MVC4 BundleTable 之 Javascript和css 打包压缩
- [ASP.NET MVC 小牛之路]17 - 捆绑(Bundle)
- 捆绑(Bundle)
- AspNet MVC4 教学-13:Asp.Net MVC4 过滤器等技术快速Demo
- AspNet MVC4 教学-14:Asp.Net MVC4 ViewBag等数据传输技术快速比较Demo
- 【Unity3D技术文档翻译】第1.6篇 使用 AssetBundle Manager
- MVC中的使用捆绑和缩小(BundleConfig.RegisterBundles)