requirejs基本用法

1.背景：

requirejs是用来管理前端开发中的模块依赖的一个轻量级的js库，使用requirejs管理依赖可以减轻业务耦合，避免污染全局作用域，利于项目的维护。比较适合单页应用的项目，因为单页应用的业务逻辑较多。

2.使用：

requirejs基本用法比较简单。包括四个方面：引入主模块（入口）、引入模块、定义模块、路径配置。下面分别进行说明。

1) 引入主模块（入口）

requirejs的使用需要一个入口模块，即一个主模块，引入主模块方法是通过在页面（.html）中引入require.js的script标签里，给自定义属性“data-main”的赋值实现的，另一种方法是在页面中直接用requirejs提供的API：require引入入口。

// 第一种方法
<script type="text/javascript" src="./dep/r.js" data-main="main"></script>
// 主模块
    require(['a', 'b', 'c'], function(a, b, c) {
        // do something
    });


// 第二种方法 在当前页面引入主模块
<script type="text/javascript">
    require(['main'], function(main) {
        // do something
    });
</script>
2) 引入模块
引入模块要利用requirejs提供的API require
// 引入的依赖模块和回调中的参数一一对应
require(['a', 'b', 'c'], function(a, b, c) {       
// do something   
});
3) 定义模块
定义模块用到requirejs中提供的API define，定义模块有三种写法，
// 第一种写法，接受两个参数，第一个是依赖的模块列表，第二个是回调，返回该模块，这种写法会先加载依赖模块然后执行回调，保证正确的执行顺序
define(['a', 'b', 'c'], function(a, b, c) {
    // do something
    // return something
});
// 第二种写法，参数时一个回调，可以在里面写依赖，这种写法会先用正则分析出依赖链，然后按顺序加载执行
define(function(require, exports) {
    var a = require('./a');
    var b = require('./b');
    var c = require('./c');
    // do something
    // return something
});
// 第三种写法，当依赖模块较多时，可以使用第二和第三种写法，否则会比较乱
define(['require', 'dep1', 'dep2', 'dep3', 'dep4', 'dep5'], function (require) {  
    var dep1 = require('dep1');  
    var dep2 = require('dep2');  
});
注意，下面这种写法是错误的
define([require], function (require) {
    var a = require('./a');
})
错误的原因是，如果define接受依赖列表作为参数，则requirejs会认为所有依赖都在列表里了，不会再用正则分析回调中的依赖了。
详细说明参见博客http://blog.csdn.net/aitangyong/article/details/40708025


4) 路径配置
路径配置需要用到requirejs提供的API require.config 。目前我只用到了baseUrl和paths这两个字段。
    require.config({
        baseUrl: 'calculator',
        paths: {
            i: 'Indicator',
            k: 'key'
        }
    });
baseUrl指定基目录，所有引用的绝对路径将都以此路径为根目录。paths配置了一些路径的简称，其中的绝对路径也是已baseUrl为基目录的。当然，在引入依赖模块时，也可以使用相对路径，相对当前文件去引入依赖的文件。
5) 其他API
还有一个比较有用的API require.toUrl，用于生成生产环境的url


3.说明：
requirejs使用ajax进行依赖管理，所以项目要开启服务器才可以进行本地调试，否则会报错   XMLHttpRequest cannot load file:///projects/project1/calculator1/calculator/calculator.js. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.