requirejs
新接触requirejs, 入门级选手, 把了解东西记录下来, 以备后面查阅
有误请指正!
传统的js加载方式是使用多个script
标签, 将js文件按依赖顺序依次加载, 这样的加载方式不但会阻塞其它资源的加载, 而且会影响浏览器的渲染.
requirejs通过声明不同js文件之间的依赖关系, 并采用异步加载和回调执行的方式执行js代码, 有效的解决的上述问题.
并且requirejs是一个模块化的js框架, 鼓励代码的模块化, 鼓励使用脚本时用moduleId替代其URL地址. 一个文件只定义一个模块.
API
requirejs常用的三个函数和三个配置项
三个函数:
- define: define是一个全局函数, 用于创建一个新的模块.
此方法可接受3个参数, define(name, deps, callback):
- name: 可选参数, 模块名称
- deps: 可选参数, 依赖模块数组
- call: 必选, 回调函数, 若存在依赖的模块, 则被依赖的模块可以参数(我们称其为模块对象)的形式传入此回调函数, 并且参数的顺序与模块的依赖顺序一致.
- require: require也是一个全局函数, 用于加载依赖.
此方法可接受两个参数, require(deps, callback):
- 数组, 表示所依赖的模块
- 回调函数, 指定的模块加载后, 将调用此函数; 加载的模块会以参数的形式传入此回调函数, 并且参数的顺序与模块的依赖顺序一致.
- config: 用于配置requirejs
三个配置项:
- basrUrl: 加载模块的根路径
- paths: 映射不在根路径下的模块的路径
- shim: 对于不符合AMD规范的js模块, 使用此配置可实现requirejs引入
现在开始上示例
目录结构及主要代码
- app目录, 存放各页面功能代码
- module目录, 存放自定义模块代码
- lib目录, 存放库文件
- main.js, 程序入口点, 主要有两个功能, 一是配置所需模板及模板间的依赖关系, 二是加载程序主模块.
index.html
Hello World
main.js
require.config({
baseUrl: "js/",
paths: {
"jquery": ["lib/jquery/jQuery.v1.11.1.min"]
}
});
require(["jquery"], function(jq){
alert(jq().jquery);
});
浏览器访问index.html
alert提示jQuery版本号1.11.1, 页面显示Hello World,
而且js的执行并没有影响页面的渲染.
示例代码中, 映射关系的key值jquery不能改变, 这是因为在调用
define
函数创建jquery模块时, 使用了第一个参数, 将此模块命名为jquery, 那么这个模块就只属于jquery, 只能用jquery去引用它, 所以当使用其它名称去引入时, 会提示undefined
.而, 当定义模块时没有使用第一个参数为其命名, 那么在引用它时就可以使用任意的名称, 使用起来很自由.
代码解释
index.html中, 通过script
标签引入了requirejs.js库文件
requirejs通过data-main
属性去搜索一个脚本文件(本示例中就是main.js), 此脚本文件中需要为所有脚本文件配置一个根路径, requirejs通过这个根路径去加载相关的模块.
main.js中,
首先配置了所有模块的根路径baseUrl,
然后配置了paths对象, 示例中只映射了jquery的库文件
需要注意的是:
- 库文件不需要再加
.js
后缀 - 如果baseUrl不配置的话, 默认为main.js所在路径, 即其他模块的文件默认与main.js在同一个目录(或其子目录)
require方法加载了jquery模块, 并将其模块对象作为参数传入到回调函数中,
最终打印了jquery的版本信息.
下面使用define函数定义一个无其它依赖的模块, 并调用其功能
在module目录下新建文件person.js
, 内容如下:
define(function(){
return function(){
var persons = [{
id: 1,
name: '张三',
age: 23,
sex: '男'
}, {
id: 2,
name: '李四',
age: 21,
sex: '女'
}, {
id: 3,
name: '王五',
age: 19,
sex: '男'
}, {
id: 4,
name: '刘一',
age: 23,
sex: '男'
}];
var list = function() {
// 通常从服务器端获取, 示例就用静态的了
return persons;
};
return {
list: list
};
}();
});
文件中定义了一个模块, 此模块不依赖任何其他模块, 并反正一个对象, 对象中包含一个list方法.
main.js
文件修改如下:
require.config({
baseUrl: "js/",
paths: {
"jquery": ["lib/jquery/jQuery.v1.11.1.min"],
"person": ["module/person"]
}
});
require(["jquery", "person"], function($, person){
var persons = person.list();
for(var i=0; i"+ persons[i].id + ". " + persons[i].name + "