require.js 基础使用方法记录

require.js 作为 javascript 的一种模块化编程规范，异步加载模块，主要应用于浏览器端，异步加载 js 文件，让浏览器不会因为在加载 js 文件而失去响应。下载地址:

http://www.requirejs.cn/docs/download.html

##一、开始

目录结构：
require.png
首先要加载 require.js

1
<script data-main="js/app.js" src="js/require.js" defer></script>

app.js 即是入口文件，我们在里面加载 math.js

1
2
3
require(['app/math'],function(math){
    console.log('1 + 3 = ',math.add(1,3));
})

require 模块的编写要符合 AMD 规范

1
2
3
4
5
6
7
8
9
10
// define('方法名(和文件名一样)',['依赖'],function('依赖的别名'){})；

define(function(){
    var add = function(a,b){
        return a+b;
    }
    return {
        add:add
    }
})

这时候运行就可以打印相应的结果:
require.png

##二、加载不符合 AMD 规范的 js 文件
require.js 为我们提供了一个 shim 方法，帮助我们加载一些不符合 AMD 规范的 js 文件

首先我们随便在 People.js 里面写点内容：

1
2
3
4
5
6
var People = function(name){
    this.name = name;
    this.sayName = function(){
        console.log(`my name is ${this.name}`);
    };
};

改写 app.js

1
2
3
4
5
6
7
8
9
10
11
12
13
require.config({
    shim:{
        'app/People':{
            deps:[], // 这里声明依赖文件
            exports:'People' // 输出方法
       }
    }
});
require(['app/math','app/People'],function(math,People){
    console.log('1 + 3 = ',math.add(1,3));
    var jack = new People('jack');
    jack.sayName();
})

运行，正确输出：
require.png

##三、baseUrl 和 paths
require 提供一些帮助我们定位文件的方法

在 app.js 中添加 baseUrl：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
require.config({
    baseUrl:'js/app', //相对于html目录定位
    shim:{
        People:{
            deps:[], // 这里声明依赖文件
            exports:'People' // 输出方法
       }
    }
});
require(['math','People'],function(math,People){
    console.log('1 + 3 = ',math.add(1,3));
    var jack = new People('jack');
    jack.sayName();
})

同样可以输出相应的结果：
require.png

我们还可以为特定的文件指定 paths，比如我们要引入 jquery：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
require.config({
    baseUrl:'js/app', //相对于html目录定位
    paths:{
        jquery:'../lib/jquery' // 相对于baseUrl定位
    },
    shim:{
        People:{
            deps:[], // 这里声明依赖文件
            exports:'People' // 输出方法
        }
    }
});
require(['math','People','jquery'],function(math,People,$){
    $(function(){
        console.log('1 + 3 = ',math.add(1,3));
        var jack = new People('jack');
        jack.sayName();
    })
})

同样输出了一样的结果：
require.png