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/cal
a4e2
culator.js. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.