JS模块化编程（一）：CommonJS，AMD/CMD

前言

模块化是什么？

为什么采用模块化？

场景：

一个html，因不同的业务需求开发，会不断的引入js文件。另外，a.js和b.js中的变量或函数必须是全局的，才能暴露给使用方。

<script type="text/javascript" src="/scripts/jquery.min.js"></script>
<script type="text/javascript" src="/scripts/jquery.cookie.js"></script>
<script type="text/javascript" src="/scripts/a.js"></script>
<script type="text/javascript" src="/scripts/b.js"></script>

以上写法存在很大的问题：一是、过多的js文件加载会阻塞页面渲染；二是、js文件之间存在依赖关系，需严格保证加载顺序。

1.便于团队协同工作，成员只需要实现核心的业务逻辑，其他的工具类，底层逻辑，直接加载别人已经写好的模块。

2.减少全局变量的使用，避免全局变量的污染和覆盖。

一、CommonJS

CommonJS是一种规范，NodeJS是这种规范的实现。

NodeJS的出现，标志着“Javascript模块化编程”的正式诞生。

在CommonJS中，有一个全局性方法require()，用于加载模块。

服务端模块。

同步加载完成。

Browserify 是目前最常用的 CommonJS 格式转换的工具。

二、AMD

异步模块定义规范

客户端模块。

异步加载完成。

实现AMD规范的javascript常用库，require.js

采用require()加载模块

require([module]，callback);

第一个参数[module]，字符串数组

第二个参数callback，加载模块成功后回调函数

require(['util'], function (util) {
    util.getFormatDate('2018-09-01');     
})

三、CMD（通用模块定义）Common Module Definition

浏览器实现SeaJS。

推崇就近依赖，只有用到某个模块的时候再去require。

四、AMD和CMD的区别

两者的对依赖的处理不同。

JS模块化编程（一）：CommonJS，AMD/CMD

推荐阅读