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

最新推荐文章于 2022-10-30 17:34:54 发布

weixin_33858485

最新推荐文章于 2022-10-30 17:34:54 发布

阅读量101

点赞数

文章标签：前端 ViewUI

原文链接：https://juejin.im/post/5bf7f92b5188250f3e1d19f2

版权

一：require.js

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

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

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

例如：如下代码，

我们希望在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的关系

通过上面，可以知道：

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

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

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'
});

复制代码

weixin_33858485

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端进阶课程之模块化（二）AMD规范

一：require.js疑问：为什么会出现AMD规范呢？为什么会出现require.js呢？解决了什么问题？答案：在没有AMD规范之前，我们是采用Commonjs规范，但是Commonjs规范是同步加载模块，它是node普通采用的一种模块机制，对于node而言，常见的加载本地文件或者其他各种I/O操作，速度是很快的，我们采用同步机制去加载模块文件是没有问题的，但是对于浏览器端而言，请求网络资源...
复制链接

扫一扫