RequireJS ialah alat popular untuk pembangunan modular bahagian hadapan Ia ialah fail perpustakaan Javascript, iaitu require.js.
Fungsi utama RequireJs:
(1) Laksanakan pemuatan tak segerak bagi fail js untuk mengelakkan halaman web kehilangan respons;
(2) Uruskan kebergantungan antara modul untuk memudahkan penulisan dan penyelenggaraan kod.Terdapat banyak alatan untuk pembangunan modular bahagian hadapan, yang secara amnya dibahagikan kepada dua kategori Satu ialah alatan canggih seperti dojo, yang mempunyai komponen pembangunan modular terbina dalam selepas dojo v1.8; memerlukan .js, sea.js ialah alat yang memfokuskan pada pembangunan modular.
Daripada peraturan pembahagian modular, ia terbahagi terutamanya kepada dua kategori: AMD dan CMD dan require.js mengikut yang pertama, manakala sea.js mengikut spesifikasi CMD.
require berfungsi dengan baik dalam aplikasi satu halaman Walau bagaimanapun, untuk aplikasi berbilang halaman tradisional, penggunaan memerlukan boleh menjadi agak mengelirukan dan menyusahkan.
Artikel ini menerangkan cara menggunakan keperluan dalam struktur ASP.NET MVC dan menyediakan skrip mampatan untuk mencapai pemampatan separa automatik.
Kod js berasingan
Secara umumnya, laluan dalam ASP.NET MVC sepadan dengan paparan Struktur fail paparan mungkin seperti berikut:
Views |--Shared |--_layout.cshtml |--Home |--Index.cshtml |--Blog |--Create.cshtml |--Edit.cshtml |--Detail.cshtml |--Index.cshtml
<script type="text/javascript">
$(function(){...});
</script>
Seterusnya kami gunakan keperluan untuk merancang js kami dan membina direktori js dengan struktur berikut
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
Kemudian, kami boleh memadamkan semua rujukan js dalam _layout dan menggunakan arahan @RenderSection untuk menghendaki subhalaman menyediakan rujukan js, _layout.cshtml:
<head>
...
@RenderSection("require_js_module", false)
...
</head>
@section require_js_module{
<script src="@Url.Content("~/js/require.js")" data-main="@Url.Content("~/js/app/home.index.js")" ></script>
}
Kami tahu bahawa selain menggunakan kaedah memerlukan, modul utama selalunya perlu mengkonfigurasi laluan modul lain melalui require.config, dan juga memerlukan shim Sebagai contoh, kod berikut sering muncul pada permulaan utama modul:
require.config({
paths: {
"jquery": "lib/jquery.min",
"underscore": "lib/underscore.min",
"backbone": "lib/backbone.min"
},
shim: {
'underscore':{
exports: '_'
},
'backbone': {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
}
}
});
requirejs.config({
paths: {
"jquery": "/js/jquery.min",
"bootstrap": "/js/bootstrap"
},
shim: {
'bootstrap': {
deps: ['jquery'],
exports: "jQuery.fn.popover"
}
}
});
require(['../config','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
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
