requireJs 初体验

前面两篇简要的描述了Javascript模块化编程相关的概念，下面介绍下模块化最佳实践－－－requireJs的使用．

用到的三个方法:

a. require()    //使用模块

b. require.define()  //定义模块

c. require.config()  //配置模块:模块名称,模块路径等

 

a. 模块化编程原因之一是希望能方便使用他人的模块，自己则专注业务逻辑．使用模块很简单，调用require，第一个参数是数组，包含你所想使用的的模块的名称（也叫着模块ID），第二个参数是一个函数，是实现自己业务逻辑的地方．

注意：使用模块其实是加载某个js文件，数组中的模块名称和要加载的模块文件名称及模块路径怎么配置？这正是require.config()要做的事情，下面再讲．

require(　['jquery'], 　function($) {

    var ele = $( '#id' ); // $是jQuery对象, 因为它作为参数传递给函数使用,在函数中是一个局部变量不会污染全局变量
    
});

 

b. 不是任何一个框架，任何一个js文件都可以像上面那样require过来使用的，得有统一的方式来定义模块，这就得用到require.define()．

define( function() {
    return {
        add : function (a, b) {
             return a + b;
        },
        minus : function (a, b) {
            return a - b;
        }
    }
});

如果定义的模块也依赖到别的模块:

define ( ['jquery'], function( $ ) {
    
    var ele;

    var slide = {
        init : function( id ) {
            ele = $( '#' + id );
            // 略.... 
        }
        start : function( ) {
            // 略....
        },
        
        stop : function() {
            // 略....
        }    
    };
   
    return slide;

});

上面示例中return不一定要返回object，返回一个function也是可以的．

 

c. 继续模块id，模块文件名称和模块路径的问题．

首先最开始肯定是先加载requirejs，如下：

<script data-main="lib/main" src="require.js"></script>

main 是主模块名称，相当于C或者Java的main函数，是主入口，它会在require.js加载完后自动加载执行．

main.js中有如下代码:

require.config(
    paths: {
        jquery : jquery-1.7.2
    },
    baseUrl : 'lib'
);
require( ['jquery'], function( $ ){
      console.log( $.version );
});

那么加载模块jquery就是加载文件 lib/jquery-1.7.2.  这一点请详看官网说明:http://makingmobile.org/docs/tools/requirejs-api-zh/#jsfiles

require.config 还可以配置 shim, map, config等等, 感兴趣可以看上面官方文档.

 

参考:http://www.requirejs.org/

http://www.cnblogs.com/snandy/archive/2012/05/22/2513652.html