Web 前端模块出现的原因，以及 Node.js 中的模块

模块出现原因

简单概述

随着 Web 2.0 时代的到来，JavaScript 不再是以前的小脚本程序了，它在前端担任了更多的职责，也逐渐地被广泛运用在了更加复杂的应用开发的级别上。

但是 JavaScript 缺乏一个最重要的模块机制，虽然它能够通过 <script> 标签重新组织代码和结构，但是依旧没有解决变量污染的问题，标签只作用于代码层面。在其他高级语言中，Java 有类文件，Python 有 import 机制，Ruby 有 require，PHP 有 include 和 require。所以 JavaScript 开发人员不得不用命名空间等方式人为地约束代码，已达到安全和易用的目的。

变量污染

在文件形式上这些不同文件的 js 以不同的身份存在着的，但是一旦引入到同一个 index.html 文件之后，如果其中两个 js 文件中声明了同名变量 c ，由于 <script> 标签并不会为每个 js 文件单独划分私有作用域，它们被全部组织到一个作用域内，（可以把 index.html 看作一个作用域）。所以，在运行期间，浏览器将抛出 SyntaxError 错误，即变量 c 已被声明。

a.js 文件：

// a.js
let c = 10

b.js 文件：

// b.js
let c = 11

在 index.html 中引入 js 文件：

<script src="../../../static/js/chap06/a.js"></script>
<script src="../../../static/js/chap06/b.js"></script>

两个变量 c 声明冲突，所以抛出异常：

经过数年的发展后，Mozilla 工程师 Kevin Dangoor 在 2009年8 月，发布了 CommonJS 规范，它的出现是 JavaScript 发展的重要的里程碑。

Node.js 模块

在 JS 中，方法可以形成一个闭包，使该作用域内的所有变量、方法等都限定在区域内，外界无法直接访问到这个作用域中的东西。

一个 .js 文件就是一个模块。

let a = 10
let b = 5

module.exports.a = a
module.b = b

console.log(arguments)
console.log(arguments.callee())

实际上，我们写的所有内容都存放在一个函数里，Node.js 自动为我们封装函数内的代码。通过调用 arguments.callee() 可以获得当前正在执行的函数。

function (exports, require, module, __filename, __dirname) {
let a = 10
let b = 5

module.exports.a = a
exports.b = b

console.log(arguments)
console.log(arguments.callee + '')

}

Node.js 将模块放进了一个函数内，通过函数形成的闭包，避免变量污染等问题。

ES6 模块

现在，最新的浏览器开始原生支持模块功能了，并且 Node.js 也支持了 ES6 的模块机制了，前提是在 package.json 中有 "type": "module"。如果在 html 页面中引入了一个 .js 文件，并且文件中用到了 ES6 的模块机制，就必须在 script 标签中添加 type="module"。

export 为导出变量和方法，import 用于引入一个模块（.js 文件）。

export

export 可以一一地对变量和方法导出，也可以在文件最后用 {} 来一次性导出这些变量和方法。

一次性导出：

let a = 10
let b = 10

export {a, b}

或一一导出：

export let a = 10
export let b = 10

export 导出时，可以为这些变量和方法重命名。

export {a as _a, b as _b}

export default

export default 方式的导出在一个模块中只能有一个。

export default let msg = 'hello world!'

import

import 导入 export default 方式导出的变量不需要加 {}，可以重命名；export 方式导出的需要加 {}，也可以重命名。

import msg from 'b.js'
// import {default as msg} from 'b.js'
import {a, b} from 'a.js'
// import {a as _a, b as _b} from 'a.js'

NPM 包管理

Node 组织了自身的核心模块，也使得第三方文件模块可以有序地编写和使用。第三方模块中，模块与模块之间仍然是散列在各地的，相互之间不能直接引用。但是，包和NPM则是将模块联系起来的一种机制。包是在模块的基础上进一步组织 JavaScript 代码。

NPM 的意义

NPM 相当于 gem 之于 Ruby，Maven 之于 Java。对于 Node 而言，NPM 帮助完成了第三方模块的发布、安装和依赖等。借助 NPM，Node与第三方模块之间形成了很好的一个生态系统。

总结

Node 和 ES6 利用模块机制，弥补了 JavaScript 弱结构性的问题。NPM 通过对包规范的支持，有效地组织了第三方模块，项目开发中的依赖问题得到了很好的解决，并有效提供了分享和传播的平台。