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

不过这样写还是不对的,因为,被主模块依赖的模块(这里的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,详情请移步至。简单的说,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); }); });

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgwysf.html