JS模块化（amd）
2019-02-09 本文已影响0人
原来哥哥是万家灯火
amd规范，用difine和require两个方法声明和加载模块，然后指定回调函数执行加载之后的业务。RequireJs是一个实现了amd规范的插件。以下是一个使用的小例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--需要指定一个baseUrl-->
<script data-main="js/app.js" src="js/require.js"></script>
</body>
</html>
define() 方法
定义独立模块（不加载其他模块）
提供简单加法、乘法的独立模块：add、multipart
// add.js
// 定义一个不需要依赖任何其他模块的独立模块，第一种写法，在函数中返回一个对象
define(function () {
function add(a, b) {
return a + b;
}
return { addFn: add }
});
// multipart.js
// 定义一个不需要依赖任何其他模块的独立模块，第二种写法，直接给defiene方法传入一个对象作为参数
define({
mulFn: function (a, b) {
return a * b;
}
});
定义非独立模块
app模块，引用add、multipart模块
// app.js
define('app', ['add', 'multipart'], function (add, mul) {
let addResult = add.addFn(5,9);
let mulResult = mul.mulFn(5,9);
document.write(`5 + 9 = ${addResult};<br> 5 × 9 = ${mulResult};`);
// define方法的回调函数需返回一个对象
return {
text: 'this is export from app module'
}
});
require() 方法
使用方法与define基本类似，只是没有再定义一个 "app" 模块而已
// app.js
require(['add', 'multipart'], function (add, mul) {
let addResult = add.addFn(5,9);
let mulResult = mul.mulFn(5,9);
document.write(`5 + 9 = ${addResult};<br> 5 × 9 = ${mulResult};`);
});
require.config()
最上面的HTML中有个<script data-main="js/app.js" src="js/require.js"></script>，其中的data-main是在干什么呢，它实际是在告诉RequireJs本项目的某些基本配置。
插件
除了上面自己写的add模块外，还可以加载一些官方或第三方提供的插件，如官方提供的domReady插件，
下载之后直接引用即可：
require(['domReady'], function (domReady) {
domReady(function () {
//This function is called once the DOM is ready.
//It will be safe to query the DOM and manipulate
//DOM nodes in this function.
});
});
优化器
官方提供了一个压缩、合并模块的工具，名字叫r.js，是个基于node的命令行工具。
