RequireJS的目标是鼓励代码的模块化,它使用在js中加载js文件的方式代替传统的script加载步骤。可以用它来加速、优化代码,但其主要目的还是为了代码的模块化。
requirejs的出现主要解决两个问题:
1. 实现js文件的异步加载,避免网页失去响应;
2. 管理模块之间的依赖性,便于代码的编写和维护。
按照requireJS当中的规范要求,你只需加载一个文件就可以而,并指定页面主模块main.js,由于requirejs默认的文件后缀名是js,所以可以把main.js简写成main。
data-main属性的作用是,指定网页程序的主模块,main.js文件如下:
//main.js-----
requirejs(['common','moduleA','moduleB','moduleC'],function(jq){
//这里的代码等common,moduleA,moduleB,moduleC模块都加载完成后执行
//但不保证以上模块的加载顺序
});
基础路径baseUrl,任何文件的加载都是基于此路径。
1. 默认值是加载require.js的HTML文件所在的路径;
2. 但如果用了data-main属性,则主模块所在的目录就变成baseUrl。
1. 配置参数:requirejs.config/require.config
2. 加载模块:requirejs/require
3. 定义模块:define
这个require.js你可以从官网下载,这个config.js你必须自己完成。不用担心,它写起来非常简单:
//config.js-----
requirejs.config({
baseUrl : "js",
paths : {
"jquery": "lib/jquery.1.11.3"
}
});
指定基础路径。
path映射那些不直接放置于baseUrl下的模块名。设置path时起始位置是相对于baseUrl的。
例如:以上配置路径 “jquery”: “lib/jquery.1.11.3”
冒号左边jquery模块名称,右边则是文件路径,注意文件没有后缀名,因为在require看来所有的模块都是JS文件。真实路径为:js/lib/jquery.1.11.3.js
严格意义上来说,requirejs必须加载由define()函数定义的模块,但有一些插件,本身未return任何对象或函数,只是对某个框架的扩展,例如 jquery.scroll.js 该怎么实现模块化加载,答案是shim配置。
requirejs.config({
baseUrl: "js",
paths: {
"jquery" : "lib/jquery.1.11.3",
"jquery.scroll" : "lib/jquery.scroll"
},
shim: {
"jquery.scroll": {
deps: ["jquery"],//设置依赖
exports: "jQuery.fn.scroll"
}
}
});
以上配置好后,就可以加载模块了,如加载jquery只需如下代码:
requirejs(['jquery'],function(jq){
//这里的jq就是jquery,原理请看模块的定义
});
使用defined方法定义模块必须符合require的规范要求,格式如下:
//把commonjs定义成模块
//在引入模块时,回调函数中得到什么取决于定义模块时返回了什么
define(function(){
return {
getStyle : function(){ ........ },
randomColor : function(){ ......... }
}
});
如果定义的模块需依赖其他模块,格式如下,这种模块加载方式称为:预加载
//本模块依赖jquery
//第一个参数为依赖模块,可以是多个,这里的路径同样基于baseUrl或path
define(["jquery"],function(jq){
return {
start: function(){
jq("#box").show(1000);
console.log("模块提供的start方法");
}
}
});
如果需要在define内部依赖其他模块,则写法如下,这种模块加载方式称为:延迟加载。
define(["require","jquery"],function(require){
var a = require('./js/a');
});
1.避免命名冲突
你有没有发现,整个项目当中,再也没有出现一个全局变量?即使两个框架名字冲突了也没关系。
2.更好的依赖处理
你有没有发现,你再也没有考虑过加载顺序的问题?
3.按需加载
更好的代码组织方式,而且你肯定没有发现,所有的JS文件的加载过程,已经变成了异步。
4.面向对象编程
最后,你还发现,用了requireJS,你的代码想不写成面相对象都难。
1.commonJS:通用的模块规范(同步);
模块化框架:nodejs
2.AMD:异步模块定义规范(预加载);
模块化框架:requirejs
3.CMD:通用模块定义规范(延迟加载)。
模块化框架:seajs