JavaScript 模块化开发入门

JS 为什么要模块化

JavaScript 语言最初设计的主要作用仅仅是用来验证表单输入的有效性，为Web页面添加一些动画效果等，并不包含太多的高级语言的特性，此时通常直接在HTML页面中编写简单的 JS 代码或从外部引入一个 JS 文件即可。

随着前端开发技术的发展和演化，JS 在应用程序中的地位显著提升（甚至已经扩展到了服务端应用，如：Node.js），伴随而来的是前端 JS 代码的复杂度也在相应的不断提高，因此 JS 模块化编程成为了一个迫切需要解决的问题。

什么是 JS 模块化

JS 模块化是将一个大的 JS 文件根据功能或职责的需要，拆分成多个相互独立或依赖的小 JS 文件，再进行统一的拼装或加载。

JS 文件拆分后进一步细化了每个文件的具体职责：

提高代码可复用性
降低代码偶合度
更有利于多人协作开发和维护
…

JS模块化开发 - 全局函数

在早期的开发过程中就是将重复的代码封装到函数中，再将一系列的函数放到一个文件中（HTML或JS）

这种情况下全局函数的方式只能认为它们属于一个模块，但是程序并不能区分哪些函数是同一个模块，如果仅仅从代码的角度来说，这时没有任何模块的概念。

<script>
// 全局 加法(转换成数字再相加)
function add(a, b) {        return parseFloat(a) + parseFloat(b);
}   // 全局 减法
function substract(a, b) {        return parseFloat(a) - parseFloat(b);
}console.log('1+2=' + add('1', '2'));
</script>

JS模块化开发 - 对象封装

通过添加命名空间的形式从某种程度上解决了变量命名冲突的问题，但是并不能从根本上解决命名冲突。

此时从代码级别可以明显区分出哪些函数属于同一个模块。

<script>
// 计算器对象
var calculator = {       count: 0,        // 加法        add: function (a, b) {            return parseFloat(a) + parseFloat(b);        },        // 减法        substract: function (a, b) {            return parseFloat(a) - parseFloat(b);        }
}
console.log(calculator.add('1', '2'));
</script>

JS模块化开发 - 立即执行函数

利用此方式将函数包装成一个独立的作用域，私有空间的变量和函数不会影响到全局作用域（私有公有成员分离）。

以返回值的方式得到模块的公共成员，公开公有方法，可以隐藏私有空间内部的属性。此方式可以有选择的对外暴露自身成员。从某种意义上来说，解决了变量命名冲突的问题。

<script>
var calculator = (function () {        var count = 0;        // 加法        function addFun(a, b) {            return parseFloat(a)+parseFloat(b);        };  return {            add: addFun        }
})();  console.log(calculator.add('1', '2'));
</script>

JS模块化开发规范

AMD（异步模块定义，Asynchronous Module Definition）
CMD（通用模块定义，Common Module Definition）
CommonJS（已经逐渐废弃，不推荐使用）
ES6 Module（ECMAScript 6 的简称，JavaScript语言的下一代标准）– 推荐使用

注：浏览器目前还不完全支持 ES6 模块，利用 Babel（https://babeljs.io/）库可以将其转换为 ES5 的写法。

AMD规范采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。

require.js （ RequireJS ）实现AMD规范的模块化JS库

CMD是另一种国内发展出来的js模块化方案，它与AMD很类似，不同点在于：AMD 推崇依赖前置、提前执行，CMD推崇依赖就近、延迟执行。

sea.js （ https://github.com/seajs/seajs ）实现CMD规范的模块化JS库

Node.js是commonJS规范的主要实践者，CommonJS 的模块提案为在服务器端声明模块指定了一个简单的 API。
CommonJS 已经过时，Node.js 的内核开发者已经逐渐废弃了该规范。

ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，旨在成为浏览器和服务器通用的模块解决方案。
ES6 模块功能主要由两个命令构成：export 和 import。

export命令用于规定模块的对外接口

import命令用于输入其他模块提供的功能