在ASP.NET MVC项目中使用RequireJS库的用法示例

2024-09-30 18:44:39

RequireJS 是一个前端模块化开发的流行工具，本身是一个Javascript的库文件，即require.js 。
RequireJs的主要功能：

（1）实现js文件的异步加载，避免网页失去响应；

（2）管理模块之间的依赖性，便于代码的编写和维护。

前端模块化开发现在有好多的工具，大体上分为两类，一类是像dojo之类的高大全，dojo v1.8之后已经内置了模块化开发组件；另一类是像require.js，sea.js 这种专心做模块化开发的工具。

从模块化划分的规则来区分，主要分为AMD、CMD两类，dojo、require.js 遵从前者，而sea.js 依循CMD规范。

require在单页面应用中能够如鱼得水，然而对于传统的多页面应用，使用require多少会有些困惑和不方便。

本文讲解如何在ASP.NET MVC的结构中应用require，并且给出了压缩脚本，实现半自动化压缩。

将js代码分离
一般而言ASP.NET MVC的一个路由对应一个视图，视图的文件结构可能如下：

Views
 |--Shared
 |--_layout.cshtml
 |--Home
 |--Index.cshtml
 |--Blog
 |--Create.cshtml
 |--Edit.cshtml
 |--Detail.cshtml
 |--Index.cshtml

这里假设_layout.cshtml是所有页面共享的。一般情况下，我们会在_layout中引用公共的js类库，比如jQuery，bootstrap等，这样的话其他的页面就不需要对这些类库再引用一遍，提高了编码的效率。然而，不同的页面终究会依赖不同的js，尤其是实现页面本身功能的自定义的js，这样我们不得不在其他页面中再引用特殊的js，甚至将js直接写在页面中，例如下面的代码经常会出现在View中：

<script type="text/javascript">
 $(function(){...});
</script>

这样会导致页面比较混乱，而且页面<script>标签中代码不能被浏览器缓存，增加了页面代码的长度。更为重要的缺陷是，诸如jQuery之类的类库会在加载到页面后执行匿名函数，这需要一些时间，而如果有些页面根本不需要jQuery的话，只要页面把_layout作为布局页面，那么jQuery的初始化代码将不可避免的执行，这是一种浪费。事实上，javascript的模块化加载的思想就是为了解决这些问题的。

接下来我们来用require规划我们的js，构建诸如下面结构的js目录

js
|--app
 |--home.index.js
 |--blog.create.js
 |--blog.edit.js
 |--blog.detail.js
 |--blog.index.js
|--jquery.js
|--bootstrap.js
|--underscore.js
|--jquery.ui.js
|--jquery.customplugin.js
|--config.js
|--require.js

把公共的类库级别的js模块直接放在js目录下，而把页面级别的js放在一个app的子目录下。注意，在app中，每个页面一个js文件，这意味着我们需要把页面各自的js提取出来，虽然这样增加了结构复杂度，但是避免了在页面中随手写<script>标签的陋习。另外，在js目录下的公共库，除了第三方的库，还包括自己开发的库，还有一个叫config.js的文件，这个文件很关键，稍后会说到。

然后，我们可以删除_layout中所有的js引用，并使用@RenderSection的命令要求子页面提供js引用，_layout.cshtml:

<head>
...
@RenderSection("require_js_module", false)
...
</head>

这样对js的需求就下放到每个view页面中了，根据require的用法，我们需要在各个子View中引用require.js，并指定主模块，而这些主模块就是上面app目录下的一个个js

@section require_js_module{
 <script src="@Url.Content("~/js/require.js")" data-main="@Url.Content("~/js/app/home.index.js")" ></script>
}

所有的js代码都将写到app下的js中，这样规范了js，使得页面更干净，更为重要的是这些js还可以经过压缩，以及被浏览器缓存等，进一步提高执行效率

公共的config
我们知道主模块除了使用require方法外，经常需要通过require.config来配置其他模块的路径，甚至需要shim，例如下面的代码经常会出现在主模块的开头：

require.config({
 paths: {
 "jquery": "lib/jquery.min",
 "underscore": "lib/underscore.min",
 "backbone": "lib/backbone.min"
 },
 shim: {
 'underscore':{
  exports: '_'
 },
 'backbone': {
  deps: ['underscore', 'jquery'],
  exports: 'Backbone'
 }
 }
});

对于单页面应用来说，主模块往往只有一个，所以上面的代码写一遍也就OK了。但是，在多页面的情况下，主模块有多个，每个主模块都要包含这样的代码，岂不是很不科学？于是，希望有一个统一配置的地方，但是应该如何来写呢？我们想到，将这些配置作为一个模块config.js，让其他的主模块对这个模块产生依赖就可以了，例如下面的config.js：

requirejs.config({
 paths: {
 "jquery": "/js/jquery.min",
 "bootstrap": "/js/bootstrap"
 },
 shim: {
 'bootstrap': {
  deps: ['jquery'],
  exports: "jQuery.fn.popover"
 }
 }
});

config.js的写法没有什么特别的，接下来只要在home.index.js中引用

require(['../config','jquery', 'bootstrap'], function () {
 //main module code here

});

不过这样写还是不对的，因为，被主模块依赖的模块(这里的config,jquery,bootstrap)，在加载的时候，加载顺序是不确定的，但是又需要config模块在其他模块之前加载，怎么办呢？一个折衷的方案是修改home.index.js，成为如下代码：

require(['../config'], function () {
 require(['home.index2']);
})
, define("home.index2", ['jquery', 'bootstrap'], function () {
 //main module code here
})

使用一个命名的模块home.index2作为过渡，在主模块中手动require，这样可以保证config在主模块执行之前加载，也就使得home.index2在加载的时候已经加载了config了。

压缩
require提供一个压缩工具，用于压缩和合并js，详情请移步至http://requirejs.org/docs/optimization.html。简单的说，require提供一个叫r.js的文件，通过本地的node程序（Node.js），执行这个r.js并传入一些参数，即可自动分析模块互相之间的依赖，以达到合并和压缩的目的。同样的，这对于单页面应用来说是容易的，因为主模块只有一个，但是对于多页面又如何做呢？好在这个压缩工具支持用一个配置文件来指导压缩，这样的话，我们可以编写下面的配置脚本build.js：

var build = {
 appDir: '../js',
 baseUrl: '.',
 dir: '../js-built',
 mainConfigFile: '../js/config.js',
 modules: [
 //First set up the common build layer.
 {
  //module names are relative to baseUrl
  name: 'config',
  //List common dependencies here. Only need to list
  //top level dependencies, "include" will find
  //nested dependencies.
  include: ["bootstrap", "config","jquery"]
 },
 //Now set up a build layer for each page, but exclude
 //the common one. "exclude" will exclude nested
 //the nested, built dependencies from "common". Any
 //"exclude" that includes built modules should be
 //listed before the build layer that wants to exclude it.
 //"include" the appropriate "app/main*" module since by default
 //it will not get added to the build since it is loaded by a nested
 //require in the page*.js files.
 {
 name:"app/home.index",
 exclude:["config"]
 },
 {
 name:"app/blog.create",
 exclude:["config"]
 },
 ...
 ]
}

通过这个命令来执行压缩，压缩的结果将被保存到js-build目录：

node.exe r.js -o build.js

build.js脚本实际上是一个js对象，我们将config加入公共模块，而在各个主模块中将其排除。这样，所有的公共库包括config将压缩成一个js，而主模块又不会包含多余的config。这样可想而知，每个页面在加载时最多只会下载两个js，而且公共模块的代码会“按需执行”。

执行上面的脚本压缩，需要安装有node。可以在从这里下载。

自动脚本
但是，随着主模块的增加，需要随时跟踪和修改这个build文件，这也是很麻烦的。于是，笔者基于node.js开发了一个叫build-build.js的脚本，用来根据目录结构自动生成build.js：

fs = require('fs');
var target_build = process.argv[2];
//console.log(__filename);
var pwd = __dirname;
var js_path = pwd.substring(0,pwd.lastIndexOf('\\')) + '\\js';
console.log('js path : ' + js_path);
var app_path = js_path + '\\app';
console.log('js app path : ' +app_path);

var app_modules = [];
var global_modules = [];

//build json object
var build = {
 appDir: '../js',
 baseUrl: '.',
 dir: '../js-built',
 modules: [
 //First set up the common build layer.
 {
  //module names are relative to baseUrl
  name: 'config',
  //List common dependencies here. Only need to list
  //top level dependencies, "include" will find
  //nested dependencies.
  include: []
 }
 ]
}

fs.readdir(app_path,function (err,files) {
 // body...
 if (err) throw err;
 for(var i in files){
 //put module in app_modules
 var dotindex = files[i].lastIndexOf('.');
 if(dotindex >= 0){
  var extension = files[i].substring(dotindex+1,files[i].length);
  if(extension == 'js'){
  app_modules.push({
   name: 'app/' + files[i].substring(0,dotindex),
   exclude: ['config']
  });
  }
 }
 }

 for(var j in app_modules){
 build.modules.push(app_modules[j]);
 }

 fs.readdir(js_path,function (err,files){
 if (err) throw err;
 for(var i in files){
  //put module in app_modules
  var dotindex = files[i].lastIndexOf('.');
  if(dotindex >= 0){
  var extension = files[i].substring(dotindex+1,files[i].length);
  if(extension == 'js'){
   global_modules.push(files[i].substring(0,dotindex));
  }
  }
 }

 build.modules[0].include = global_modules;
 //console.log(build);
 var t = pwd + '\\' + target_build;
 console.log(t);
 var fd = fs.openSync(t, 'w');
 fs.closeSync(fd);
 var json = JSON.stringify(build);
 fs.writeFileSync(t, json);
 });
});

这里的代码并不复杂，主要是遍历目录，生成对象，最后将对象序列化为build.js。读者可以自行阅读并修改。最后，编写一个bat，完成一键压缩功能，build.bat：

@echo off
set PWD=%~p0
set PWD=%PWD:\=/%
cd "D:\node"
node.exe %PWD%build-build.js build.js
node.exe %PWD%r.js -o %PWD%build.js
cd %~dp0

这样，我们就简单实现了一个方便的多页面require方案，最后项目目录可能是这样的：

Views
 |--Shared
 |--_layout.cshtml
 |--Home
 |--Index.cshtml
 |--Blog
 |--Create.cshtml
 |--Edit.cshtml
 |--Detail.cshtml
 |--Index.cshtml

build
|--build.js
|--r.js
|--build-build.js
|--build.bat

js
|--app
 |--home.index.js
 |--blog.create.js
 |--blog.edit.js
 |--blog.detail.js
 |--blog.index.js
|--jquery.js
|--bootstrap.js
|--underscore.js
|--jquery.ui.js
|--jquery.customplugin.js
|--config.js
|--require.js

详解RequireJs官方使用教程

§ 1.使用 § 1.1 加载 JavaScript 文件 RequireJS的目标是鼓励代码的模块化,它使用了不同于传统<script>标签的脚本加载步骤.可以用它来加速.优化代码,但其主要目的还是为了代码的模块化. RequireJS以一个相对于baseUrl的地址来加载所有的代码. 页面顶层<script>标签含有一个特殊的属性data-main,require.js使用它来启动脚本加载过程,而baseUrl一般设置到与该属性相一致的目录. baseUrl亦可通过Requir
在JavaScript应用中使用RequireJS来实现延迟加载

无论简单还是复杂的Web应用,都由一些HTML.JavaScript.CSS文件组成.通常开发者会通过JQuery.Knockout.Underscore等等这样的第三方JavaScript框架来提高开发速度.由于这些JavaScript框架都针对特定的用途开发而且已经得到了"验证",所以直接使用它们就比自己从头实现所需要的功能显得更为合适.然而,伴随着应用的复杂度不断上升,写出干净.低耦合.可维护的代码变得越来越重要.在这篇文章里,我将解释 RequireJS框架如何帮助应用开发者写
使用RequireJS库加载JavaScript模块的实例教程

js通过script标签的默认加载方式是同步的,即第一个script标签内的js加载完成后,才开始加载第二个,以此类推,直至js文件全部加载完毕.且js的依赖关系必须通过script的顺序才能确保:而在js加载期间,浏览器将停止响应,这大大影响了用户体验,基于此,很多解决js以来和加载的方案出现,require js就是其中之一. requirejs加载的模块,一般为符合AMD标准的模块,即用define定义,用ruturn返回暴露方法.变量的模块:requirejs也可以加载飞AMD标准的模块
在Html中使用Requirejs进行模块化开发实例详解

在前端模块化的时候,不仅仅是js需要进行模块化管理,html有时候也需要模块化管理.这里就介绍下如何通过requirejs,实现html代码的模块化开发. 如何使用requirejs加载html Reuqirejs有一个text的插件,它可以读取指定文件的内容,读取到的内容就是文本. 如何下载text插件第一种方法,可以通过npm下载: npm install requirejs/text 第二种方法,也可以直接去官方github上面直接下载. 直接拷贝内容到text.js中即可. 如何安装t
RequireJS使用注意细节

RequireJS介绍 RequireJS由James Burke创建,他也是AMD规范的创始人. RequireJS会让你以不同于往常的方式去写JavaScript.你将不再使用script标签在HTML中引入JS文件,以及不用通过script标签顺序去管理依赖关系. RequireJS是一个非常小巧的JavaScript模块载入框架,是AMD规范最好的实现者之一.最新版本的RequireJS压缩后只有14K,堪称非常轻量.它还同时可以和其他的框架协同工作,使用RequireJS必将使您的前端
RequireJs的使用详解

一.为什么使用RequireJS? <script src="a.js"></script> <script src="b.js"></script> <script src="c.js"></script> 上述多个js文件加载的时候,浏览器会停止网页渲染(JS阻塞浏览器渲染),加载文件越多,网页失去响应的时间就会越长:另外各文件的依赖关系很难管理. RequireJs的作
使用RequireJS优化JavaScript引用代码的方法

RequireJS是一个提高你的javascript代码速度和质量的有效方法,同时它还让你的代码更容易阅读和维护. 在本文中,我会为你介绍RequireJS和应该如何使用它.我们讨论引入文件和定义模块,甚至还会接触优化方面的知识. 简单的说,require.js是一个脚本载入程序,允许你把你的javascript代码独立成文件和模块,同时管理每个模块间的依赖关系. 引入文件在开始使用RequireJS前,我们需要先下载它的库和Asynchronous Module Definition(AMD
在ASP.NET MVC项目中使用RequireJS库的用法示例

RequireJS 是一个前端模块化开发的流行工具,本身是一个Javascript的库文件,即require.js . RequireJs的主要功能: (1)实现js文件的异步加载,避免网页失去响应: (2)管理模块之间的依赖性,便于代码的编写和维护. 前端模块化开发现在有好多的工具,大体上分为两类,一类是像dojo之类的高大全,dojo v1.8之后已经内置了模块化开发组件:另一类是像require.js,sea.js 这种专心做模块化开发的工具. 从模块化划分的规则来区分,主要分为AMD.C
使用Ajax更新ASP.Net MVC项目中的报表对象方法

Ajax技术显著加快了Web应用程序的速度.另外,视觉效果方面也有提升.大家都同意,每次点击按钮时整个页面都会被刷新这一点不太友好.如果你的网速不是很快,那么这个过程会很烦人,因为所有的元素都会先消失,再慢慢重新出现.如果只刷新一部分页面,那就美滋滋了.而这正是Ajax所提供的.该脚本向服务器发送一个请求,以更新所需的部分信息.然后,脚本将更新的数据插入页面上的正确位置. 在这个页面中,我想用一个简单的方法通过Ajax更新ASP .Net MVC项目中的信息.这种方法被称为"unobtrusiv
把ASP.NET MVC项目部署到本地IIS上的完整步骤

前言默认情况下,在VisualStudio中开发网站,会运行在IISExpress中,如果想把网站部署到本地的IIS服务器上该怎么办呢? 配置IIS的几个关键点: 1.URL重写模块,这个以前是ISAPI筛选器的功能,后来好像就改版了,都成模块化设计了. 2.ASP.NET MVC项目有路由机制,所以不需要用到IIS中默认文档功能以及目录浏览功能. 3.记得检查应用程序池的 .NET Framework版本,配置成v4.0版本. 4.身份验证上一般不用管,IIS默认使用的是"匿名身份验证&qu
ASP.NET MVC项目部署方式介绍

目录一.直接用源代码部署 1.新建网站 2.配置添加网站 3.浏览二.使用发布文件部署 1.发布文件 2.部署 ASP.NET MVC编写的程序需要部署到IIS上面才能进行访问,部署方式分为两种. 一.直接用源代码部署第一种方式可以直接使用源代码进行部署.部署步骤: 1.新建网站在IIS里面选择网站,然后右键选择“添加网站” 然后打开“添加网站”对话框: 2.配置添加网站界面配置如下: 然后点击确定,这时在左侧的网站列表中就可以看到新添加的网站. 3.浏览在左侧列表选中要浏览的网站,
ASP.NET MVC模式中应用程序结构详解

目录一.App_Data 二.App_Start 三.Content 四.Controllers 五.font 六.Models 七.Scripts 八.Views 九.Web.config 1.根目录下面的Web.config文件 2.Views文件夹下面的Web.config 十.Global.asax 在上一篇文章中,讲解了一些MVC的概念,并且创建了第一个ASP.NET MVC项目,这篇文章将讲解ASP.NET MVC程序中的代码解构,新创建的MVC应用程序解构如下图所示: 一.App
JSP开发中在spring mvc项目中实现登录账号单浏览器登录

JSP开发中在spring mvc项目中实现登录账号单浏览器登录在很多web产品中都需要实现在同一时刻,只能允许一个账号同时只能在一个浏览器当中登录.通俗点讲就是当A账号在浏览器1当中登录了,此时在浏览器2中登录A账号.那么在浏览器1中的A账号将会被挤出去,当用户操作浏览器1的页面,页面会跳到登录页面,需要重新登录.那么我们怎么实现这样的功能呢?下面将给大家进行详细的介绍: 原理用户A使用账号a在浏览器当中登录,然后用户B在另外一台电脑上的浏览器登录账号a,当用户B登录验证成功时,将会触
asp.net core项目中如何使用html文件

前言大家应该都知道,在asp.net core 项目中,使用html文件一般通过使用中间件来提供服务: 打开 NuGet程序管理控制台输入install-package Microsoft.aspnetcore.staticfiles 进行添加 ASP.NET Core static files middleware. Includes middleware for serving static files, directory browsing, and default files. 在S
Spring MVC项目中的异常处理详解

目录前言 1. 基于配置的简单异常处理 2. 基于注解的全局异常处理总结前言我们在项目的开发中,难免会遇到各种可预知的.不可预知的异常需要处理.每个过程都单独处理异常,系统的代码耦合度高,工作量大且不好统一,维护的工作量也很大. 那么,能不能将所有类型的异常处理从各处理过程解耦出来,这样既保证了相关处理过程的功能较单一,也实现了异常信息的统一处理和维护?答案是肯定的.下面将介绍Spring MVC是如何处理异常的. 1. 基于配置的简单异常处理在SpringMVC中拥有一套非常强大的
ASP.NET MVC项目实现三级联动无刷新

本篇实现有关客户.订单和产品的无刷新三级联动,先看最终效果: 没有选择时,后2个Select状态为禁用: 当选择第1个Select,第2个Select可供选择,第3个Select依旧禁用: 当选择第2个Select,第3个Select可供选择: 当选择第3个Select,界面出现"显示产品信息"按钮: 当点击"显示产品信息"按钮,显示产品信息: 当点击"清空"按钮,恢复到初始状态: View Models Model之间的关系为: using S
vue项目中使用bpmn-自定义platter的示例代码

内容概述本系列"vue项目中使用bpmn-xxxx"分为七篇,均为自己使用过程中用到的实例,手工原创,目前陆续更新中.主要包括vue项目中bpmn使用实例.应用技巧.基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下.如果转载或通过爬虫直接爬的,格式特别丑,请来原创看:我是作者原文前情提要经过前四篇的学习,我们能够实现bpmn基本绘图.预览.为节点加事件加颜色等效果,这一篇我们来说,如何自定义左侧工具栏(platter),首先看一下自定义前后效果图对比: 我

在ASP.NET MVC项目中使用RequireJS库的用法示例

相关推荐

随机推荐