模块化开发之AMD规范

模块化开发之AMD规范

欢迎访问我的博客,祝码农同胞们早日走上人生巅峰,迎娶白富美~~~

概念

AMD(Asynchronous Module Definition),异步模块定义:它是在浏览器端实现模块化开发的规范。由于该规范不是原生js支持的,使用AMD规范进行开发的时候需要引入第三方的库函数,也就是鼎鼎大名的RequireJS

RequireJS

RequireJS主要解决了两个问题:

  1. 多个js文件可能有依赖关系,被依赖的文件需要早于依赖它的文件加载到浏览器
  2. js加载的时候浏览器会停止页面渲染,加载文件越多,页面失去响应时间越长

定义模块

RequireJS定义了一个define函数,用来定义模块

语法

1
define([id], [dependencies], factory)

参数

  • id:可选,字符串类型,定义模块标识,如果没有提供参数,默认为文件名
  • dependencies:可选,字符串数组,AMD 推崇依赖前置,即当前模块依赖的其他模块,模块依赖必须在真正执行具体的factory方法前解决
  • factory:必需,工厂方法,初始化模块需要执行的函数或对象。如果为函数,它只被执行一次。如果是对象,此对象会作为模块的输出值
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// mod1.js
define('mod1',[],function(){
// ...
return {
// ...
}
})

// mod2.js
define('mod2', ['mod1'], function (mod1) {
// ...
return {
// ....
}
})

模块的加载

加载模块需要使用require()函数

语法

1
require([dependencies], function(){})

参数

  • dependencies:字符串数组,该模块的依赖
  • function:Function类型,所依赖的模块都加载成功之后,回调,依赖的模块会以参数的形式传入该函数,从而在回调函数内部就可以使用这些模块
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script src="require.js"></script>
<script type="text/javascript" src="mod1.js"></script>
<script type="text/javascript" src="mod2.js"></script>
<script type="text/javascript">
require(['mod1','mod2'],function(mod1, mod2){
// ...
});
</script>
</body>
</html>

require()函数加载依赖模块是异步加载,这样浏览器就不会失去响应

AMD模式开发

AMD模式开发的简单三层结构(基础库/UI层/应用层)

  • 定义无依赖的模块
1
2
3
4
5
6
7
8
// base.js
define(function () {
return {
bas: function (sou, tar) {
// ...
}
}
})
  • 定义有依赖的模块
1
2
3
4
5
6
7
8
// ui.js
define(['base'], function (base) {
return {
initPage: function () {
// ...
}
}
})
1
2
3
4
// page.js
define(['data', 'ui'], function (data, ui) {
// ...
})
  • 定义数据对象模块
1
2
3
4
5
// data.js
define({
users: [],
numbers: []
})
  • 具名模块
1
2
3
define('index', ['data','base'], function(data, base) {
// ...
})
  • 包装模块
1
2
3
4
5
6
define(function(require, exports, module) {
var base = require('base');
exports.show = function() {
// todo with module base
}
})

dependencies是可选参数,当用户不提供该参数时,实现 AMD的框架应提供默认值为[“require”,”exports”,“module”]

文章推荐

参考文章

本文标题:模块化开发之AMD规范

文章作者:王工头

发布时间:2019年01月31日 - 20:46:28

最后更新:2019年01月31日 - 23:38:47

原始链接:https://qqqww.com/模块化开发之AMD规范/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

-------------本文结束感谢大佬们的阅读-------------