ES 标准模块化规范概述和导入导出

本文转载自微信公众号「勾勾的标准前端世界」，作者西岭。模块转载本文请联系勾勾的化规前端世界公众号。

ES 标准模块化规范-概述

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

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

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

一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。

如果你希望外部能够读取模块内部的某个变量，就必须使用 export 关键字导出该变量。想要是要其他模块导出的内容, 就必须使用 import 导入。

导入 (Importing)

导入的值不能重新分配，尽管导入的对象和数组可以被修改(导出模块，源码库以及任何其他的导入，都将受到该修改的影响)。在这种情况下，它们的行为与 const 声明类似。

命名导入 (Named Imports)

从源模块导入其原始名称的特定项目。

import  {  something } from./module.js; 

从源模块导入特定项，并在导入时指定自定义名称。

import {  something as somethingElse } from./module.js;  命名空间导入 (Namespace Imports)

将源模块中的所有内容作为对象导入，将所有源模块的命名导出公开为属性和方法。默认导出被排除在此对象之外。

importas module from./module.js 

上面的 “something” 的例子将被附加到作为属性的导入对象上。

“module.something”。  默认导入 (Default Import)

导入源文件的默认导出。

import something from./module.js;  空的导入 (Empty Import)

加载模块代码，但不要创建任何新对象。

import ./module.js; 

这对于 polyfills 是有用的，或者当导入的代码的主要目的是服务器托管与原型有关的时候。

导出 (Exporting)

命名导出 (Named exports)

导出具体声明的值：

var something =true; export {  something }; 

在导出时重命名：

export {  something as somethingElse }; 

声明后立即导出：

// 这可以与 `var`, `let`, `const`, `class`, and `function` 配合使用 exportvar something =true;  默认导出(Default Export)

导出一个值作为源模块的默认导出：

exportdefault something; 

当源模块只有一个导出时，才建议使用此做法。

将默认和命名导出，并放在同一模块中是不好的，尽管它是符合规范的。

很赞哦!（22）