转自：http://blog.moocss.com/tutorials/javascript-tutorials/1386.html （不错的Blog）
RequireJS 是一个根据需要来加载 js 文件的 JavaScript 框架，可避免不必要的js文件加载，提升网页浏览速度。RequireJS 没有依赖任何一个JavaScript框架，它是组织和管理JavaScript文件或JavaScript库的好方法。
这样我们就不用羡慕dojo的dojo.require() 和 YUI的yui-loader了。
获取和使用RequireJS
成功下载RequireJS文件以后，放到服务器上，我们就可以正常使用RequireJS了。
Download RequireJS »
加载JavaScript文件
如果你只是加载一些JavaScript文件的话，只需把下面的语法规则放到网页的 <head>标签里。
1
2
3
4
5
6
7
8
|
<script src="scripts/require.js"></script>
<script>
require(["a.js", "b.js", "some/module"], function() {
//This function will be called when all the dependencies
//listed above are loaded. Note that this function could
//be called before the page is loaded. This callback is optional.
});
</script>
|
根据["a.js", "b.js", "some/module"]参数，把它们各自作为独立的<script>标签，放到src属性中加载。
现在你可以在网页上异步加载JavaScript文件了！
文件默认的后缀是.js ,如果文件名不加.js后缀的话，查找路径算法会找到相关文件，并加上.js 后缀，文件路径为绝对路径，否则为相对路径。
更好的加载方法 ：
虽然你可以使用<script>标签直接使用 require() ,但是我们还是大力鼓励由RequireJS加载文件来工作。这样更容易通过优化工具，并有一个方便的缩写模式。
把上面的例子结构改为这样：
1
|
<script type="text/javascript" data-main="main" src="require.js"></script>
|
或者是
1
|
<script type="text/javascript" data-main="main.js" src="require.js"></script>
|
这样RequireJS 会自动查找该”data-main”属性对应的文件及调用一个require([]) 。因此，在这种情况下，它会加载scripts/main.js 。
1
2
3
4
|
//Inside scripts/main.js
require(["a.js", "b.js", "c.js"], function() {
//callbacks
});
|
使用RequireJS来加载MooTools Classes
随着RequireJS可用，接下来，我们就可以使用 require function 了，传递一个文件数组和一个回调函数来执行已加载的所有文件：
1
2
3
4
|
//require ScrollSpy and Roar
require(['scrollspy.1.2.js','Roar.js'],function(){
//callbacks
});
|
一旦类被加载，我就可以使用它们了！来看看吧：
1
2
3
4
5
6
7
8
9
10
|
// require ScrollSpy and Roar
require(['scrollspy.1.2.js','Roar.js'],function(){
//use them!
var roar = new Roar();
var spy = new ScrollSpy({
onEnter: function() {
//....
}
});
});
|
实际使用情况如何？ 如果一个”lazyload”CSS类存在，我们就load LazyLoad类文件和创建一个实例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
//when the DOM is ready
window.addEvent('domready',function(){
//find image to lazyload
var scrollspyElements = $$('.lazyload');
//if there are images to lazyload...
if(scrollspyElements.length) {
//require the class and when done...
require(['lazyload.js'],function(){
//create a LazyLoad instance and use it!
new LazyLoad({
range: 200,
image: 'Assets/blank.gif',
elements: $$('.lazyload')
});
});
}
});
|
你不仅可以使用RequireJS 来加载单个类，还可以嵌套异步加载需要的文件！
一旦MooTools是准备好了，你可以让你检查和load MooTools classes：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
//load mootools with RequireJS!
require(['mootools-1.2.4.js'],function() {
//when the DOM is ready
require.ready(function(){
//find image to lazyload
var scrollspyElements = $$('.lazyload');
//if there are images to lazyload...
if(scrollspyElements.length) {
//require the class and when done...
require(['lazyload.js'],function(){
//create a LazyLoad instance and use it!
new LazyLoad({
range: 200,
image: 'Assets/blank.gif',
elements: $$('.lazyload')
});
});
}
});
});
|
真棒！按需加载我们需要的组件是JavaScript的未来（甚至是整个架构）。
require.ready！
require.ready()是指在 DOM 加载完毕之后执行代码，就像 jQuery 中的 $(document).ready()。
如果你不使用JavaScript框架，RequireJS提供了一个现成的方法来触发DOM is ready！
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
// require ScrollSpy
require(['scrollspy.1.2.js','Roar.js'],function(){
//use it when the dom is ready!
require.ready(function(){
//use them!
var roar = new Roar();
var spy = new ScrollSpy({
container: document.id('someDiv'),
onEnter: function() {
//....
}
});
});
});
|
参考文档：RequireJS API
This entry was posted in
JavaScript and tagged Tags:
JavaScript,
RequireJS.
Bookmark the
permalink