使用 RequireJS 优化 Web 应用前端 （4）综合运用 RequireJS
|
- UID
- 1066743
|
使用 RequireJS 优化 Web 应用前端 （4）综合运用 RequireJS
综合运用 RequireJS当 RequireJS 与其他框架一起工作的时候，显然它是可以作为统一的加载器来加载其他框架。鉴于 jQuery、Dojo 等已经支持了 AMD ，那么就有可能在定义自己的模块的时候，通过适当配置，直接把其他框架的模块作为依赖对象。
RequireJS 和 Dojo清单 11是一个基本的 RequireJS 和 Dojo 集成配置方法，这里关键是将 dojo 和 dijit 都在 packages 里面注册一下。
清单 12. 配置 RequireJS 和 Dojo1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| <script>
require = {
packages: [
{
name: “dojo”,
location: “dojo”,
main:”lib/main-browser”,
lib: “.”
},
{
name: “dijit”,
location: “dijit”,
main:”lib/main”,
lib: “.”
}
],
paths: {
require: “./js”
},
ready: function () {
require([“my/module”], function (module) {
});
}
};
</script>
|
在定义 module 这个模块时就可以直接将 dojo 和 dijit 里的模块作为依赖对象了。
RequireJS 和 jQuery把 jQuery 作为一个依赖模块来使用也非常简单，只需要在 RequireJS 里的 config 里做相应的配置就可以了。
清单 13. 配置 RequireJS 和 jQuery1
2
3
4
5
6
7
8
| require.config({
paths: {
"jquery": "./js/jquery-1.7"
}
});
require(["jquery"],function(jQ){
console.log(jQ);
});
|
RequireJS 和 Web WorkersWeb Workers 是多线程的 JavaScript，每个 worker 里面的脚本都 会启动一个新的线程来执行，通过在 worker 里面用 importsScript 来加载 require.js 可以直接在 worker 里面使用 RequireJS 。
清单 14. RequireJS 和 Web Workers1
2
3
4
5
6
| importScripts('./js/require.js');
require(["require"],
function(require) {
postMessage("test");
}
);
|
小结本文简单介绍了 AMD 的概念和它带来的好处，深入介绍了如何使用 RequireJS 来定义自己的 JavaScript 模块，管理这些模块的依赖关系，异步按需加载这些模块。并进一步讨论了如何用 RequireJS 和其他框架协同工作，有兴趣的读者可以继续阅读相关文档了解更多详细的用法。 |
|
|
|
|
|
