RequireJS是什么
- RequireJS是以一个工具库,主要用于客户端的模块管理。它可以让客户端的代码分成一个个模块,实现异步或动态加载,从而提高代码的性能和可维护性。
- Require的基本思想
- 通过
define
方法,将代码定义为模块; - 通过
require
方法,实现代码的模块加载;
- 通过
- RequireJS是一个非常小巧的JavaScript模块载入模块,是AMD规范的实现者之一。压缩后14k左右。它还可以同时和其他的框架协同工作。
RequireJS可以做什么
- 声明不同js文件之间的依赖关系
- 可以按需、并行、延时载入js库
- 可以让我们的代码以模块化的方式组织
RequireJS如何用
在HTMl中,添加:
<script src="/path/to/require.js" data-main="/path/to/app/config.js"></script>
通常使用requirejs的话,我们只需要导入requirejs即可,不需要显式导入其他的js库,因为这个工作会教给requirejs来做。
属性data-main
告诉requirejs:你下载完以后,马上去载入真正的入口文件。它一般用来对 requirejs 进行配置,并且载入真正的程序模块。
使用RequireJS加载JavaScript文件
案例一:加载JavaScript文件
<script src="./js/require.js">
<script>
require(["./js/a.js", "./js/b.js"], function(){
myFunctionA();
myFunctionB();
});
</script>
</script>
- require方法里的字符串数组参数允许不同的值,当字符串是以
.js
结尾,或以/
开头,或是一个url时,RequireJS会认为用户是在直接加载一个JS文件;否则, 当字符串是类似my/modyle
时,他会认为这是一个模块,并且会以用户配置的baseUrl
和paths
来加载相应的模块所在的JS文件。 - 注意:RequireJS默认情况下并没有保证myFunctionA和myFunctionB一定是在页面加载完成以后执行的,在有需要保证页面加载以后执行脚本时,RequireJS提供了一个独立的
domReady
模块,需要去RequireJS官方网站下载这个模块,他并没有包含在RequireJS中。
案例二:页面加载后执行JavaScript
<script src="./js/require.js"></script>
<script>
require(["domReady!", "./js/a.js", "./js/b.js"], function() {
myFunctionA();
myFunctionB();
});
</script>
案例三:RequireJS插入的
<script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="js/a.js" src="js/a.js"></script>
使用RequireJS来定义JavaScript模块
- 这里的JS模块与传统的JS代码不同处在于它无须访问全局的变量。模块化的设计使得JS代码在需要访问“全局变量”的时候,都可以通过依赖关系,把这些“全局变量”做为参数传递到模块的实现体里,在实现中就避免了访问或者声明全局的变量或函数,有效的避免大量而复杂的命名空间管理。
- 定义JS模块是通过
define
方法来实现的。
案例四:student模块,student.js
define(function(){
return {
createStudent: function(name, gender){
return {
name: name,
gender: gender
}
}
}
})
通过定义一个 student 模块和一个 class 模块,在主程序中实现创建 student 对象并将 student 对象放到 class 中去。
案例五:class模块,class.js
defint(function(){
var allStudents = [];
return {
classID: "001",
department: "wy",
addToClass: function(student){
allStudents.push(student);
},
getClassSize: function(){
return allStudents.length;
}
}
})
案例六:主程序
require(["js/student","js/class"], function(student,clz){
clz.addToClass(student.createStudent("Jack","male"));
clz.addToClass(student.createStudent("Xiao","female"));
console.log(clz.getClassSize());
})
案例七:依赖student的class模块的manager模块,manager.js
define(["js/student","js/class"], function(student, clz){
return {
addNewStudent: function(name,gender){
clz.addToClass(student.createStudent(name.gender));
}
getMyClassSize: function(){
return clz.getClassSize();
}
}
})
案例八:新的主程序
require(["js/manager"],function(manager){
manager.addNewStudent("xiao", "女");
manager.addNewStudent("ming","男");
console.log(manager.getMyClassSize());
})
配置RequireJS
引入:
模块名字怎么来的?当require一个模块时,这个模块是如何映射到具体的JS文件上去的?这就涉及到配置RequireJS
案例九:载入 require.js
<script data-main="js/main" src="script/require.js"></script>
配置 RequireJS
<script type="text/javascript" src="./js/require.js"></script>
<script type="text/javascript">
require.config({
baseUrl: "./js",
paths: {
"some": "some/v1"
},
waitSeconds: 10
});
require(["some/module","my/module","./js/a.js"], function(someModule, myModule){});
</script>
baseUrl
指明的是所有模块的baseURL- 以
.js
结尾的文件加载时不会使用该baseUrl
,它们仍会使用当前index.html
所在的相对路径来加载。 - 如果
baseUrl
没有指定,那么会使用data-main
中指定的路径。 paths
中定义的路径是用于替换模块中的路径。waitSeconds
指定最多花多久的等待时间来加载一个JavaScript文件,用户不指定的情况下默认为7秒packages
指定其他符合CommonJS AMD规范的目录结构,由此带来了丰富的扩展性。如Dojo
jQuery
等的模块也可以通过该配置来让RequireJS加载。
综合运用 RequireJS
当RequireJS与其他框架一起工作的时候,它是可以作为统一的加载器来加载其他框架。