使用RequireJS来加载MooTools Classes

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属性中加载。

requirejs-test

现在你可以在网页上异步加载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-test

使用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

站点统计