>

MVC项目中央银行使RequireJS库的用法示例

- 编辑:正版管家婆马报彩图 -

MVC项目中央银行使RequireJS库的用法示例

RequireJS 是多少个前端模块化开荒的风行工具,本身是一个Javascript的库文件,即require.js 。
RequireJs的显要功用:

在ASP.NET MVC项目中选择RequireJS库的用法示例,mvcrequirejs

RequireJS 是三个前端模块化开采的盛行工具,本身是二个Javascript的库文件,即require.js 。
RequireJs的首要性意义:

(1)实现js文件的异步加载,制止网页失去响应;

(2)管理模块之间的依赖性,便于代码的编辑和珍重。

前端模块化开荒将来有数不胜数的工具,大要上分为两类,一类是像dojo之类的高大全,dojo v1.8随后已经停放了模块化开采组件;另一类是像require.js,sea.js 这种潜心做模块化开荒的工具。

从模块化划分的准绳来区分,首要分为英特尔、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,详细的情况请移步至

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

(1)完成js文件的异步加载,防止网页失去响应;

您大概感兴趣的篇章:

  • 一篇小说精晓RequireJS常用知识
  • 小心!AngularJS结合RequireJS做文件合併压缩的那么些坑
  • RequireJS入门一之完毕率先个例证
  • 在JavaScript应用中动用RequireJS来落到实处延迟加载
  • 使用RequireJS优化JavaScript引用代码的方法
  • 优化RequireJS项指标连带技艺总括
  • JavaScript的RequireJS库入门指南
  • SeaJS 与 RequireJS 的反差比较
  • LABjs、RequireJS、SeaJS的区别

MVC项目中利用RequireJS库的用法示例,mvcrequirejs RequireJS 是一个前端模块化开采的风靡工具,本身是多少个Javascript的库文件,即require...

(2)管理模块之间的注重,便于代码的编辑撰写和护卫。

前端模块化开垦现在有过多的工具,大意上分为两类,一类是像dojo之类的高大全,dojo v1.8从此一度停放了模块化开荒组件;另一类是像require.js,sea.js 这种专注做模块化开采的工具。

从模块化划分的条条框框来区分,主要分为英特尔、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,详细情况请移步至

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的采用详解
  • 应用RequireJS库加载JavaScript模块的实例教程
  • RequireJS使用注意细节
  • 在Html中动用Requirejs举行模块化开拓实例详解
  • 在JavaScript应用中应用RequireJS来落到实处延迟加载
  • 选用RequireJS优化JavaScript援用代码的主意
  • 详解RequireJs官方使用教程

本文由计算机操作发布,转载请注明来源:MVC项目中央银行使RequireJS库的用法示例