Modularity

ES6 模块系统在 ES6 之前，我们已经知道了 RequireJS，AngularJS 的依赖注入，以及 CommonJS，具体可以看笔者的上一篇文章《JS模块化历史简介》。当我们学习 ES6 的模块化，就会发现它的发展深受 CommonJS 的影响。通过这篇文章，我们将看到 export 和 import 语句，以及 ES6 模块是怎么与 CommonJS 模块兼容的。 严格模式在 ES6 模块系统中，严格模式是默认开启的。严格模式是语言从语法层面限制你使用一些不好的写法，所以它更严格（==）。它也让编译器更好地处理代码。下面是 MDN上关于严格模式的解释：严格模式 变量必须显式声明函数的形参必须有唯一的名称（否则会报语法错误）不能使用with给只读的属性赋值会报错像 00840 这样的八进制数字会报语法错误试图 delete 无法删除的属性会报错delete prop 会报语法错误，可以使用 delete global[prop]eval 不会在所在的词法作用域引入新的变量eval 和 arguments 不能被改变或赋值arguments 不会跟踪方法的参数变化arguments.callee 不再支持，会报 TypeErrorarguments.caller 不再支持，会报 TypeError传入方法内部的 this 不再被强制转换成 Objectfn.caller 和fn.arguments 不再支持保留关键字 protected，static ，interface 不能被绑定即使在 ES6 中严格默认是默认开启的，也推荐在每个模块中都使用 use strict 关键字。 让我们先来看下 export 关键字吧~ export在 CommonJS 中，导出模块可以用 module.exports 。从下面的代码可以看出，你可以导出任何值： module.exports = 1module.export = NaNmodule.exports = 'foo' module.exports = { foo: 'bar' } module.exports = ['foo', 'bar'] module.exports = function foo () {}像 CommonJS 模块一样，ES6 模块也是暴露 API 的文件。同样的，ES6 模块内部的声明只在模块内部有效。这就意味着，某个模块中的变量，如果没有被导出，在其他模块中就无法使用。 ...

对于 JavaScript 来说，模块化是一个相对现代的概念，这篇文章会带你在 JavaScript 的世界里快速浏览模块化的历史进程~ Script 标签和闭包在早些年间，JavaScript 就是直接写在 HTML 的 <script> 标签里的，最多也就是放在独立的文件里面，而它们也都共享一个全局作用域。 任何 JS 文件里面声明的变量都会被附加在全局的 window 对象上，并且还有可能意外覆盖掉第三方库中的变量。 随着 web 应用越来越复杂，共享全局作用域这种方式的弊端开始显现，于是 IIFE（立即调用函数表达式）就被发明了出来，并且广为使用。IIFE 就是将一整段代码包裹在一个函数中，然后立即执行这个函数。在 JavaScript 中，每个函数都有一个作用域，所以在函数中声明的变量就只在这个函数中可见。即使有变量提升，变量也不会污染到全局作用域中。 下面让我们看几个 IIFE 的写法，每个 IIFE 的作用域都是独立的，其中第一种写法比较常见： (function() { console.log('IIFE using parenthesis')})()~function() { console.log('IIFE using a bitwise operator')}()void function() { console.log('IIFE using the void operator')}()使用 IIFE 这种方式，某个库如果想要暴露全局变量，可以在 window 上绑定一个对象作为命名空间，这样就避免了污染全局作用域。看下面的代码，假如我们要建立一个 mathlib 工具，它有一个 sum 方法。假如这个工具有多个模块，也可以建立多个文件，每个文件里都是一个 IIFE，然后向 window.mathlib 对象中添加方法就可以了： (function() { window.mathlib = window.mathlib || {} window.mathlib.sum = sum function sum(...values) { return values.reduce((a, b) => a + b, 0) }})()mathlib.sum(1, 2, 3)// <- 6IIFE 这种方式可以说是模块化的先河，它让开发者可以将模块放在单独的文件中，并且不污染全局作用域。 ...