一、为什么要使用模块化？
使用模块化可以：
1、解决命名冲突；
2、可进行依赖管理；
3、增强代码的可读性；
4、代码解耦，提高代码的复用率；
二、CMD、AMD、CommonJS 规范分别指什么？有哪些应用？
1、CommonJS
CommonJS 是服务器端模块规范；Node.js的模块系统就是参照CommonJS规范实现的；CommonJS中，有一个全局性方法require()，用于加载模块。假定有一个数学模块math.js，就可以像下面这样加载。
var math = require('math');
然后我们可以这样调用：
var math = require('math');
math.add(1,2)//3
- 端：服务端
- 同异步：同步
-
实例：
image.png
2、AMD
AMD（Asynchronous Module Definition）异步模块定义，它是一种采用异步的方式加载模块（即模块在加载的过程中不影响后面代码的运行）的javascript规范；它主要运用在客户端；常用的require.js就是采用了AMD规范；AMD也采用require()语句加载模块，但是不同于CommonJS，它要求两个参数：
require([module], callback);
[module] 是一个数组，里面就是需要调用的模块名称；
callback 则是加载完成后的回调函数；
上面CommonJS的例子我们可以看出如果在客户端执行的话，可能会出现无响应的情况（因为它是同步执行的即要等待math.js加载完才能执行第二行语句），因此对于客户端（浏览器端）不能采用同步加载的机制，需要采用异步加载的机制，这也是AMD产生的背景。
例如上面CommonJS的例子就可以采用AMD规范改成下面这样：
require(['math'],function(math){
math.add(1,2)//3
});
在此再举个require.js的例子：
1、先写个html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://apps.bdimg.com/libs/require.js/2.1.11/require.min.js"></script>
</head>
<body>
<script>
require.config({
baseUrl:"js/lib" //设置基目录
})
require(['amd-main']);
console.log("starting")
</script>
</body>
</html>
2、然后在该html文件目录中的js文件夹下的lib文件夹新建如下两个js文件
//amd-main.js
define(["inc-amd"],function(Inc){
console.log(Inc.get());
Inc.add1();
console.log(Inc.get());
Inc.add1();
console.log(Inc.get());
})
// inc-amd
define(function(){
var inc=(function(){
var a=1;
function add1(){
a++;
}
function get(){
return a;
}
return {
add1:add1,
get:get
};
}());
return inc;
})
运行编好的html文件后会得到如下结果：
Paste_Image.png
- 端：浏览器
- 同异步：异步
-
实例：
image.png
- 相关库：require.js
3、CMD
CMD（Common Module Definition）通用模块定义，它也是javascript的一种模块规范，与依赖关系前置的AMD不同的是，CMD是按需加载的。国内玉伯编写的Sea.js里的所有javascript模块都是遵循 CMD 模块定义规范的。
- 端：浏览器
- 同异步：异步
- 实例：
image.png
- 相关库：Sea.js
4、UMD
通用模块定义
它兼容了AMD和CommonJS，同时还支持老式的“全局”变量规范
5、ES6 export/import modules
推荐资料
**本文版权归本人即简书笔名：该账户已被查封 所有，如需转载请注明出处。谢谢！ *
网友评论