Requirejs快速使用

浏览数：22 / 时间：2015年06月09日

Requirejs是一个简单，实用，强大的前端模块化js库，它遵循AMD这一客户端模块定义规范，使用它能够使我们前端代码更加清晰高效加载，摆脱了以前前端代码杂乱无序的状态。

使用步骤如下：

1.下载require.js文件,地址为 http://www.requirejs.cn/docs/download.html#requirejs,并将其加入我们的项目中；

2.使用define方法定义模块

这里主要有两种形式，第一种是定义无依赖的js模块代码，即这个js模块是单独存在的，不依赖于其他模块或者js库，这里新建一个independent.js,代码如下

define(
    function()
    {
        return{
            test1:function()
            {
                console.log(‘i am test1‘);
            },
            test2:function()
            {
                console.log(‘i am test2‘);
            }

        }
    }
)

　　在这个js文件中定义了一个模块，返回了一个对象，其包含两个方法用以外部文件调用，这是定义一个独立的模块；

第二种方式是定义一个依赖于其他模块的模块，新建一个depend.js,代码如下：

define([‘test‘],function(test){
    return{
        showName:function(){
            console.log( test.name);
        },
        showAge:function(){
            console.log(test.age);
        }

    }

});

这里定义了一个模块，其依赖于test模块，需要注意的是，requirejs默认js文件名为模块名，test模块即对应于test.js文件，在这个模块中，第一个参数是需要依赖的外部模块名称，是一个数组，也可以依赖多个，第二个参数是一个function，其形参test对应着test模块，所以在showName,showAge方法中课直接调用test的属性或方法；

test.js

define(
    function()
    {
        return {
            name:‘张三‘,
            age:22
        }
    }
);

这里定义了一个test模块，返回了包含name和age的一个对象，供其他模块调用.

3.使用require调用模块

新建一个main.js,用来作为项目的主js文件，即在页面中只加载这个js文件，其他js文件都通过它以模块调用的形式存在，代码如下：

require(["depend"],function(de){
    de.showAge();
    de.showName();


});

表示调用depend模块，并调用其showAge和showName方法。

在html中加载requirejs,将其data-main属性指向我们的主js文件main.js

结果如下：

4.加载jQuery

平时开发中jQuery用的很多，最新版1.11以上的都遵循AMD规范，可以利用requirejs直接将其作为一个模块加载进来

在main.js中添加require.config,对jQuery进行配置，代码如下：

require.config(
    {
        paths:{
            jquery:"http://code.jquery.com/jquery-1.11.1.min"
        }
    }
);

这里配置了一个jQuery模块，它的地址为一个CDN地址，也可以将其下载到本地，地址指向本地地址也可以，注意地址后面没有.js,

然后就可以使用require方法来调用了，main.js中调用代码如下：

require(["jquery","depend","independent"],function($,de,ind){
    de.showAge();
    de.showName();
    console.log($("#span1").html());
    ind.test1();
    ind.test2();

});

这里调用了三个模块，我们之前自己定义的两个加上jQuery模块，并且使用了他们中的方法，其中jquery模块选择html页面上的一个span并将其内部文字输出到控制台

其余两个模块调用的都是在他们内部自定义的方法

最终结果如下：