基于 AMD 规范的 require.js 的使用

require.js 作用

1. 实现js文件的异步加载，避免网页失去响应
2. 管理模块之间的依赖性，便于代码的编写和维护

 

加载require.js

 <script src="js/require.min.js" data-main="js/main" defer async="true"></script>

 

自定义模块并加载

// math.js

define(function() {
　　return {
　　　　add: function(x, y) {
　　　　　　return x + y;
　　　　}
　　};
});

// main.js

require(["math"], function(math) {
　　console.log(math.add(4, 6));
});

 

依赖自定义模块并加载

// math.js

define(["math_other"], function(math_other) {
　　return {
　　　　add: function(x, y) {
　　　　　　return math_other.add(x, y);
　　　　}
　　};
});

 

jquery, underscore 的加载

// main.js

require.config({

　　baseUrl: "js/lib",
　　paths: {
　　　　jquery: "jquery-1.11.3.min",
　　　　underscore: "underscore-min"
　　}
});

require(["underscore", "jquery"], function(_, $) {
　　console.log(_.shuffle([1,2,3,4,5,6,7]));
　　console.log($.trim(" 你好！ "));
});

 

参考资料：

Javascript模块化编程（三）：require.js的用法