前端进阶课程之模块化（二）AMD规范

时间 2019-12-02

标签前端进阶课程模块化 amd 规范繁體版

原文原文链接

一：require.js

疑问：为何会出现AMD规范呢？为何会出现require.js呢？解决了什么问题？html

答案：在没有AMD规范以前，咱们是采用Commonjs规范，可是Commonjs规范是同步加载模块，它是node普通采用的一种模块机制，对于node而言，常见的加载本地文件或者其余各类I/O操做，速度是很快的，咱们采用同步机制去加载模块文件是没有问题的，可是对于浏览器端而言，请求网络资源的速度是很慢的，若是依然采用同步方式去请求资源，浏览器端极可能形成阻塞问题，node

因此，解决方法是什么呢？AMD(Asynchronous Module Definition) 异步模块定义而require.js是AMD规范的具体实现。浏览器

例如：以下代码，bash

咱们但愿在index.html，引入main.js, a.js, b.js, c.js四个js文件网络

第一种：最原始的作法，在index.html里面，从上到下同步加载异步

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="./lib/a.js"></script>
<script src="./lib/b.js"></script>
<script src="./lib/c.js"></script>
<script src="./lib/main.js"></script>
</body>
</html>
问题：这样只能从上到下，同步加载js文件，可能因为前面的js文件过大，形成阻塞问题
复制代码

第二种：采用require.js来异步加载js文件函数

//index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
//data-main去声明主入口文件
<script src="./require.js" data-main="./main.js"></script>
</body>
</html>
//main.js
//写法1：直接引入js文件
require(['./a', './b', './c'], function () {
   console.log('文件所有加载成功');
});
//写法2：设置js文件别名
require.config({
    paths: {
        aaa: './lib/a',
        bbb: './lib/b',
        ccc: './lib/c'
    }
});
或者
require.config({
    baseUrl: './lib',
    paths: {
        aaa: 'a',
        bbb: 'b',
        ccc: 'c'
    }
});

require(['aaa', 'bbb', 'ccc'], function () {
    console.log('文件所有加载成功');
});
复制代码

二：AMD与require.js的关系

经过上面，能够知道：ui

AMD是一种规范，而require.js是真正的实现，主要解决了两个问题：spa

1：实现js文件的异步加载，避免同步加载致使的网页阻塞code

2: 定义模块之间如何相互依赖，能够更好的管理模块。

三：AMD规范代码实例

//index.html ： 引入require.js，肯定主入口文件main.js
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="./require.js" data-main="./main.js"></script>
</body>
说明：data-main属性用于说明require.js加载的模块主入口是什么。
复制代码

//在main.js中引入a.js模块：
require.config({
    baseUrl: './lib',
    paths: {
        aaa: 'a',
    }
});
require(['aaa'], function (a) {
    console.log(a);//此处，在回调方法中，就能够获取define中定义的对象：{name: '111'}
});

复制代码

//a.js： 使用define方法直接传入一个对象，或者传入一个函数，函数返回一个对象
define({
    name: '111'
});

复制代码