require.js模块化编程

require.js的使用提要

require.js的特点：

① 防止js加载阻塞页面渲染

② 使用程序调用的方式加载js,实现模块化编程

1、加载require.js

<script type="text/javascript" src="require.js"></script>

 或异步加载

<script type="text/javascript" defer async="true"  src="require.js"></script>

或指定网页程序的主模块

<script type="text/javascript" src="require.js" data-main="main"></script>

2、通过deifine()函数定义一个AMD模块

require.js默认加载AMD规范的模块。模块定义形式如下：

定义一个独立性模块：

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

定义一个依赖于myLib.js的模块(被依赖的模块将会在该模块加载前加载)：

define(['myLib'],function(){
    function foo(){
        //myLib.doSomething();
    }
    return {
        foo:foo        //定义模块输出
    };
});

3、用require([])来加载定义了的模块

require(['jquery','underscore','backbone'],callbackFunction);

4、然后在页面中使用。

//$, _, Backbone分别对应'jquery','underscore','backbone'的输出
function callbackFunction($, _, Backbone){
    //do something....
}

5、配置需要加载AMD规范的模块(配置写在main.js中)

场景一(相对于main文件所在的路径)：

require.config({
    paths:{
        "jquery" : "lib/jquery.min",
        "underscore" : "lib/underscore.min",
        "backbone" : "lib/backbone"
    }
});

场景二（用baseUrl属性指定基目录）:

require.config({
    baseUrl : "js/lib",
    paths:{
        "jquery" : "lib/jquery.min",
        "underscore" : "lib/underscore.min",
        "backbone" : "lib/backbone"
    }
});

场景三（全路径加载远程模块）

require.config({
    paths : {
        "jquery" : "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min"
    }
});

6、配置需要加载的第三方模块(配置写在require.config参数对象中)

shim : {
    "jquery.scroll" : {
        deps : ["jquery"],                    //deps数组，表明该模块的依赖性
        exports : "jQuery.fn.scroll"     //exports值（输出的变量名）,表明这个模块外部调用时的名称
    }
}

注：① main.js中的配置具有全局性，称为require.js 中的 “主数据"

       ② 加载main.js : <script data-main="js/main" src="js/require.js"></script>

       ③ 更多参见：http://www.jb51.net/article/78661.htm

       ④ 更多参见：入门篇一 (http://www.cnblogs.com/snandy/archive/2012/05/22/2513652.html)

                             入门篇二 (http://www.cnblogs.com/snandy/archive/2012/05/23/2513712.html)

                             入门篇三 (http://www.cnblogs.com/snandy/archive/2012/05/24/2514700.html)

                             进阶篇一 (http://www.cnblogs.com/snandy/archive/2012/06/06/2536969.html)

                             进阶篇二 (http://www.cnblogs.com/snandy/archive/2012/06/07/2537477.html)

                             进阶篇三 (http://www.cnblogs.com/snandy/archive/2012/06/08/2538001.html)

                             requirejs2.0新特性：http://www.cnblogs.com/snandy/archive/2012/06/04/2532997.html

       ⑤ reqiurejs下载：http://requirejs.org/docs/download.html