大家好，我是讯享网，很高兴认识大家。



 <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path> </svg> 

讯享网

随着前端功能越来越复杂，前端代码日益膨胀，为了减少维护成本，提高代码的可复用性，前端模块化势在必行。

所有js文件都在一个html中引入，造成以下不良影响：

webpack中是这样定义的：

在模块化编程中，开发者将程序分解成离散功能块(discrete chunks of functionality)，并称之为模块。每个模块具有比完整程序更小的接触面，使得校验、调试、测试轻而易举。精心编写的模块提供了可靠的抽象和封装界限，使得应用程序中每个模块都具有条理清楚的设计和明确的目的。

模块应该是职责单一、相互独立、低耦合的、高度内聚且可替换的离散功能块。

模块化是一种处理复杂系统分解成为更好的可管理模块的方式，它可以把系统代码划分为一系列职责单一，高度解耦且可替换的模块，系统中某一部分的变化将如何影响其它部分就会变得显而易见，系统的可维护性更加简单易得。

模块化是一种分治的思想，通过分解复杂系统为独立的模块实现细粒度的精细控制，对于复杂系统的维护和管理十分有益。模块化也是组件化的基石，是构成现在色彩斑斓的前端世界的前提条件。

前端开发和其他开发工作的主要区别，首先是前端是基于多语言、多层次的编码和组织工作，其次前端产品的交付是基于浏览器，这些资源是通过增量加载的方式运行到浏览器端，如何在开发环境组织好这些碎片化的代码和资源，并且保证他们在浏览器端快速、优雅的加载和更新，就需要一个模块化系统。

1. 最简单粗暴的方式

讯享网

通过 script 标签引入文件，调用相关的函数。这样需要手动去管理依赖顺序，容易造成命名冲突，污染全局，随着项目的复杂度增加维护成本也越来越高。

2. 用对象来模拟命名空间

这样可以解决上面的全局污染的问题，有那么点命名空间的意思，但是随着项目复杂度增加需要越来越多的这样的对象需要维护，不说别的，取名字都是个问题。最关键的还是内部的属性还是可以被直接访问和修改。

3. 闭包

讯享网

这样就拥有独立的词法作用域，内存中只会存在一份 copy。这不仅避免了外界访问此  中的变量，而且又不会污染全局作用域，通过  暴露出公共接口供外界调用。这其实就是现代模块化实现的基础。

4. 更多

还有基于闭包实现的松耦合拓展、紧耦合拓展、继承、子模块、跨文件共享私有对象、基于 new 构造的各种方式，这种方式在现在看来都不再优雅。

历史上，JavaScript 一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。其他语言都有这项功能，比如 Ruby 的、Python 的，甚至就连 CSS 都有，但是 JavaScript 任何这方面的支持都没有，这对开发大型的、复杂的项目形成了巨大障碍。

在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。

ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS 和 AMD 模块，都只能在运行时确定这些东西。比如，CommonJS 模块就是对象，输入时必须查找对象属性。

目前实现模块化的规范主要有：

CommonJS 是以在浏览器环境之外构建 JavaScript 生态系统为目标而产生的项目，比如在服务器和桌面环境中。

讯享网

采用同步加载模块的方式，也就是说只有加载完成，才能执行后面的操作。CommonJS 代表：Node 应用中的模块，通俗的说就是你用 npm 安装的模块。

它使用 require 引用和加载模块，exports 定义和导出模块，module 标识模块。使用 require 时需要去读取并执行该文件，然后返回 exports 导出的内容。

讯享网

CommonJS主要用于服务端的模块化，不适用于前端模块化的原因在于：

CommonJS在浏览器端实现的步骤：

1. 创建项目结构

2. 下载browserify

3. 定义模块代码(同服务器端)

注意：文件要运行在浏览器上，需要借助browserify将文件打包编译，如果直接在引入就会报错！

4. 打包处理js

根目录下运行

5. 页面使用引入

在index.html文件中引入

异步模块定义，所谓异步是指模块和模块的依赖可以被异步加载，他们的加载不会影响它后面语句的运行。有效避免了采用同步加载方式中导致的页面假死现象。AMD代表：RequireJS。

AMD一开始是CommonJS规范中的一个草案，全称是Asynchronous Module Definition，即异步模块加载机制。后来由该草案的作者以RequireJS实现了AMD规范，所以一般说AMD也是指RequireJS。

RequireJS是一个工具库，主要用于客户端的模块管理。它的模块管理遵守AMD规范，RequireJS的基本思想是，通过define方法，将代码定义为模块；通过require方法，实现代码的模块加载。

它主要有两个接口：define 和 require。define 是模块开发者关注的方法，而 require 则是模块使用者关注的方法。

define() 函数：

讯享网

需要注意的是，dependencies有多少个元素，factory就有多少个传参，位置一一对应。使用栗子：

require() 函数

讯享网

需要注意的是 ，module 有多少个元素，callback 就有多少个传参，位置一一对应。

AMD的优缺点

AMD 运行时核心思想是「Early Executing」，也就是提前执行依赖 AMD 的这个特性有好有坏：

AMD在浏览器端的实现步骤

1. 下载require.js, 并引入

然后将require.js导入项目: js/libs/require.js

2. 创建项目结构

讯享网

3. 定义require.js的模块

4. 页面引入require.js模块:

在index.html引入 

此外在项目中如何引入第三方库？只需在上面代码的基础稍作修改：

讯享网

上例是在alerter.js文件中引入jQuery第三方库，main.js文件也要有相应的路径配置。 小结：通过两者的比较，可以得出AMD模块定义的方法非常清晰，不会污染全局环境，能够清楚地显示依赖关系。AMD模式可以用于浏览器环境，并且允许非同步加载模块，也可以根据需要动态加载模块。

CMD是SeaJS在推广过程中生产的对模块定义的规范，在Web浏览器端的模块加载器中，SeaJS与RequireJS并称，SeaJS作者为阿里的玉伯。

CMD规范专门用于浏览器端，模块的加载是异步的，模块使用时才会加载执行。CMD规范整合了CommonJS和AMD规范的特点。在 Sea.js 中，所有 JavaScript 模块都遵循 CMD模块定义规范。

CMD语法

定义暴露模块：

引入使用模块：

讯享网

CMD的优缺点

sea.js使用步骤

1. 下载sea.js, 并引入

然后将sea.js导入项目: js/libs/sea.js

2. 创建项目结构

3. 定义sea.js的模块代码

讯享网

4. 在index.html中引入

ES6模块的设计思想，是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。所以说ES6是编译时加载，不同于CommonJS的运行时加载(实际加载的是一整个对象)，ES6模块不是对象，而是通过export命令显式指定输出的代码，输入时也采用静态命令的形式。

ES6 的模块自动采用严格模式，不管你有没有在模块头部加上。

严格模式主要有以下限制。

上面这些限制，模块都必须遵守。由于严格模式是 ES5 引入的，不属于 ES6，所以请参阅相关 ES5 书籍，本书不再详细介绍了。

其中，尤其需要注意的限制。ES6 模块之中，顶层的指向，即不应该在顶层代码使用。

语法

模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。

export

一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。下面是一个 JS 文件，里面使用export命令输出变量。

讯享网

import

使用命令定义了模块的对外接口以后，其他 JS 文件就可以通过命令加载这个模块。

ES6 模块与 CommonJS 模块的差异

它们有两个重大差异：

1. CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。

2. CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。

第二个差异是因为 CommonJS 加载的是一个对象（即module.exports属性），该对象只有在脚本运行完才会生成。而 ES6 模块不是对象，它的对外接口只是一种静态定义，在代码静态解析阶段就会生成。

下面重点解释第一个差异，我们还是举上面那个CommonJS模块的加载机制例子:

讯享网

ES6 模块的运行机制与 CommonJS 不一样。ES6 模块是动态引用，并且不会缓存值，模块里面的变量绑定其所在的模块。

学习有趣的知识，结识有趣的朋友，塑造有趣的灵魂！

文章转载自公众号〖编程三昧〗，作者是 隐逸王，欢迎关注！