jNs 在 ASP.NET MVC 项目中的应用
最近做项目用到 ASP.NET Web Optimizatoin Framework,发现 Sea.js 的依赖加载在 Release 版本下不能很好的工作了——因为 Web.Optimizatoin 合并了所有脚本。同时由于写惯了 Java
程序和 C# 程序,对于没有命名空间概念的 Sea.js
和 RequireJS
也感觉不爽。考虑了下,觉得模块管理其实并不复杂,所以将之前在《ASP.NET MVC4 捆绑(Bundle)技术下的 JavaScript》 中提到的 js-modular
的基础上进行了改进,最终产生了 jNs。
jNs 是一个具有命名空间概念的 JavaScript 模块管理工具。与 Sea.js 和 ReqireJS 等模块管理工具不同,jNs 只管理模块的定义和使用,而不负责加载,非常适合发布合并 JavaScript 代码的 Web 项目,比如使用了 ASP.NET Web Optimization Framework 提供的 Script Bundle 功能的 ASP.NET 项目,以及使用 UglifyJS 压缩合并脚本的项目等。
jNs 托管在 git.oschina.net 上,其 README 中已经有详情的示例,所以这里就不废话了。这里主要说说在 ASP.NET MVC 项目里怎么使用。
第一,定义合理的脚本结构
下面展示了一个来自某个实际项目的脚本目录(有所精简),也许不是最好的结构,但我个人觉得很清晰(用方括号 []
括起来的是目录)。
[Scripts]│ - jNs-1.0.0.js│ - jNs-1.0.0.min.js│ - jquery-2.1.3.js│ - jquery-2.1.3.min.js├─[core]│ └─[co]│ │ - app.js│ │ - compatible.js│ │ - util.js│ ├─[app]│ │ │ - ajax.js│ │ │ - dialog.js│ │ │ - page.js│ │ └ - ui.js│ └─[util]│ │ - case.js│ │ - debug.js│ └ - format.js└─[page]├─[home]│ └ - index.js└─[user]└ - index.js
其中有两个比较关键的主目录,一个是 core
,一个是 page
。
core
是整个项目中需要使用到的模块,在 bunles
中配置成一个名为 ~/bundle/core
的 ScriptBundle
。Release 版本下会被打包成一个合并的脚本文件。大部分的页面只需要引用 ~/bundles/core
就可以了,因为大部分的公用逻辑都在这里了。
但是仍然会有一部分页面比较特殊,需要有自己的脚本。那么这些脚本就按一定的路径保存在 page
目录下。
core
中的目录结构与模块的结构对应,这样查找脚本文件的时候就比较方便,比如示例中的结构对应的模块全称(含命名空间)就是:
co.app co.app.ajax co.app.dialog co.app.page co.app.ui co.compatible co.util co.util.case co.util.debug co.util.format
这个结构看起来就像 Java 一样。不过与 Java 不同,目录不必与命名空间(或包)对应,文件名也不必与模块名相同——这似乎更像 C#。
还有一点需要注意的是,在同一个命名空间下,子级命名空间和模块名是可以相同的,这也算是 jNs 的特点之一吧。
有了合理的结构,还需要解决下面这个问题。
第二,保证 jNs.js 在模块定义之前加载
虽然一般认为在 ScriptBunlde
中 Include
的脚本会顺序加载,或者说在 Release 版本下按顺序合并,所以认为可以这样写配置:
// BundleConfig.cs // 注意:这是错误的示例 public static void RegisterBundles(BundleCollection bundles) {bunles.Add(new ScriptBundle("~/bundles/core").Include("~/scripts/jNs-{version}.js")..IncludeDirectory("~/scripts/core/", "*.js", true)); }
可惜事实不是。我阅读了它的源码,发现它使用了一个 Dictionary
来进行中间过程的处理,所以最终输出的顺序完全是不确定的。所以 jNs 有可能在某个模块文件之后加载,那么模块文件中的 jNs(...)
就会出错——因为还没定义。
不过很幸运,Web.Optimization 提供了 IBundleOrderer
接口来处理顺序的问题。我比较懒,所以不想直接去实现IBundleOrderer
接口,而是从 DefaultBundleOrderer
继承了个子类来处理顺序——不管 DefaultBundleOrderer
是怎么处理的,我只需要在它处理之后按输入的顺序重新排列一下就好了
public class AsIsBundleOrderer : DefaultBundleOrderer {public override IEnumerable<BundleFile> OrderFiles(BundleContext context,IEnumerable<BundleFile> files){var originalList = files.ToList();IEnumerable<BundleFile> orderFiles = base.OrderFiles(context, originalList);return orderFiles.OrderBy(f => originalList.IndexOf(f));} }
在有 AsIsBundleOrderer
之后,再来看看正确的 Bundle 配置
public static void RegisterBundles(BundleCollection bundles) {var bundle = new ScriptBundle("~/bundles/core").Include("~/Scripts/jNs-{version}.js").IncludeDirectory("~/Scripts/core/", "*.js", true);bundle.Orderer = new AsIsBundleOrder();bundles.Add(bundle); }
jNs 在 ASP.NET MVC 项目中的应用相关推荐
- ajax调用fastreport,使用Ajax更新ASP.Net MVC项目中的报表对象
Ajax技术显著加快了Web应用程序的速度.另外,视觉效果方面也有提升.大家都同意,每次点击按钮时整个页面都会被刷新这一点不太友好.如果你的网速不是很快,那么这个过程会很烦人,因为所有的元素都会先消失 ...
- 在已有的Asp.net MVC项目中引入Taurus.MVC
Taurus.MVC是一个优秀的框架,如果要应用到已有的Asp.net MVC项目中,需要修改一下. 1.前提约定: 走Taurus.MVC必须指定后缀.如.api 2.原项目修改如下: web.co ...
- asp.net mvc项目中遇到的古怪的问题,(项目中有frame框架)
大致是这样的,整个项目分上,左,右三个框架, 左侧是导航栏,根据部门id不同在右框架显示不同的部门人员信息 问题来了, 由于左侧是ajax无刷新树导航,所以按照mvc的原则,添加一个新路由大致为 ro ...
- AngularJS2 + ASP.NET MVC项目
环境:VS2015, NodeJS:v 6.5, npm: v3.10, AngularJs 2 通过将ASP.NET MVC项目与Angualr 2官网上的quick start整合的过程中遇到些问 ...
- 【初学者指南】在ASP.NET MVC 5中创建GridView
介绍 在这篇文章中,我们将会学习如何在 ASP.NET MVC 中创建一个 gridview,就像 ASP.NET Web 表单中的 gridview 一样.服务器端和客户端有许多可用的第三方库,这些 ...
- 在ASP.NET MVC 模型中 选择最好的方法将多个model(数据模型)传递到视图
在ASP.NET MVC 模型中 选择最好的方法将多个model(数据模型)传递到视图 前提介绍 这个文章我们要讨论,在ASP.NET MVC模型的项目中,怎么选择一个最有效的方式来将多个数据模型(m ...
- ASP.net mvc开发中使用纯html如何创建FCKeditor编辑器的使用
http://www.cnblogs.com/esshs/archive/2008/12/03/1346326.html FCKeditor下载路径: http://sourceforge.net/p ...
- 在 ASP.NET Core 项目中使用 AutoMapper 进行实体映射
一.前言 在实际项目开发过程中,我们使用到的各种 ORM 组件都可以很便捷的将我们获取到的数据绑定到对应的 List<T> 集合中,因为我们最终想要在页面上展示的数据与数据库实体类之间可能 ...
- C# 6 与 .NET Core 1.0 高级编程 - 41 ASP.NET MVC(中)
译文,个人原创,转载请注明出处(C# 6 与 .NET Core 1.0 高级编程 - 41 ASP.NET MVC(中)),不对的地方欢迎指出与交流. 章节出自<Professional C# ...
最新文章
- php 请求拦截,解决拦截器对ajax请求的拦截实例详解
- python库--tensorflow--RNN(循环神经网络相关)
- 单片机 架构 程序 经验总结_单片机“死机”了怎么办?看看一个资深工程师的经验总结...
- idea install 失败_idea maven install 卡住,无报错排查。
- 联动椰树花式营销 完成债务重组的瑞幸又“站”了起来
- Dart基础-变量与类型
- 第八集:魔法阵 NTT求循环卷积
- postman工具 如何传递当前时间戳和MD5加密
- C语言运算符优先级列表(超详细)
- 高效管理之团队梯度建设
- c语言中文件指针概念,C语言文件的概念和文件指针
- Windows 自带的 UTF8 字符 颜文字表情符号
- uniapp选择图片压缩并上传
- 第三届算法设计与编程挑战赛(冬季赛)G题
- [三星6818]gpio模拟spi信号编写门禁卡识别模块驱动
- 钓鱼比赛(百度笔试)
- MySQL中rank函数的使用
- 华师计算机考研英语过线,华师大学长:考研英语我是如何考到77分的!
- java-php-python-ssm职工工资管理系统计算机毕业设计
- 优美库图片小程序	Version1.0