ES6 用模块封装代码

Question

JS 没有模块，导致所有的变量都是全局的，这种方法自然无法应对日渐复杂的大型项目。都说全局变量是邪恶的，因为修改是在运行时发生，你没有办法预知一个变量是在何时被谁修改成了什么值，出了问题回溯极难。

历史上有过很多方案来人为解决这个没有模块的问题，比如：

• 每个库使用自己的一个独一无二的全局变量
• CommonJS
• 等

ES6 的 import / export 实则是借鉴了以上各种优秀方案形成的内建模块化方案。服务端内容的导入导出感觉我早已玩溜，比如命名导出、默认导出、重命名导入导出、导入重命名等，这里就不再赘述。目前我看到的最佳实践是：

• 尽量不要使用动态 require 。这样方便搜引用点，方便回溯。动态反射难以回溯，搜不到应用点
• 日常写业务代码，一律使用命名导出。这样所有模块的引用都是静态的，方便重构，方便 IDE 自动导入
• 有朝一日写框架代码，考虑使用默认导出，因为 API 简洁，自动导入问题可使用 live template 解决
• 无导出模块 说明一定修改了全局作用域上的东西。多用来做 polyfill 等，要很有节制地用

浏览器端的导入导出会有一点区别。规范实际上只规定了模块之间如何解析，而下载和执行次序时机则未指定，由各厂商自行设定。在浏览器端的情况是，下载是由浏览器端决定的，但一般都是在下载完毕、文档加载完毕后，才会开始执行脚本（默认的 <script defer> 效果）。执行次序按照代码编写次序，除非你设定了 async 标签，则该脚本会在下载完毕后立即执行，而不会等待文档加载完成。