如臂使指：JS 中的 Module 语法

前言

从前 JavaScript 一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。其他语言都有这项功能，比如 Ruby 的 require、Python 的 import，甚至就连 CSS 都有 @import，而 JavaScript 任何这方面的支持都没有，这对开发大型的、复杂的项目开发形成了巨大的障碍。

在 ES6 之前，最主要的模块加载方案是用于服务器的 CommonJS，以及用于浏览器的 AMD。

而 ES6 在语言标准的层面上，以一种非常简单的方式实现了模块功能，成为浏览器和服务器通用的模块解决方案。

下面来逐步深入地看一下它的具体用法和应用场景。

「静态加载」

ES6 模块不是对象，而是通过 export 命令显式指定输出的代码，再通过 import 命令输入。

// ES6模块
import { mapState } from 'vueX'

上面代码的实质是从 vueX 模块加载 mapState 方法，其他方法不加载。这种加载称为“编译时加载”或者静态加载，即 ES6 可以在编译时就完成模块加载，效率要比 CommonJS 模块的加载方式高。

但同时也导致了没法引用 ES6 模块本身，因为它不是对象。

编译时加载使得静态分析成为可能，可以进一步拓宽 JavaScript 的语法，比如引入宏（macro）和类型检验（type system）等只能靠静态分析实现的功能。

「严格模式」

ES6 的模块自动采用严格模式，不管开发者有没有在模块头部加上 ' use strict '。

「 export 」

模块功能主要由两个命令构成：export 和 import。

export 命令用于规定模块的对外接口，import 命令用于输入其他模块提供功能。

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

希望外部能够读取模块内部的某个变量，就必须使用 export 关键字输出该变量。下面是一个 JS 文件，里面使用 export 命令输出变量。

export const firstName = '朱'
export const lastName = '明'
export const year = 1368

上面代码保存了用户信息，ES6将其视作一个模块，里面用 export 命令对外部输出了三个变量。

除了像上面这样，export 的写法还有另外一种：

const firstName = '朱'
const lastName = '明'
const year = 1368export { firstName, lastName, year }

上面代码在 export 命令后面，使用大括号指定所要输出的一组变量。这和前一种写法（直接放置在 const 语句前）是等价的，但是应该优先考虑使用这种写法。因为这样就可以在脚本尾部，一眼看清楚输出了那些变量。

export 命令除了输出变量，还可以输出函数和类（class）。

export function mcTracer(x, y) {return x * y
}

上面代码对外输出一个函数 mcTracer 。

「 as 关键字重命名」

通常情况下，export 输出的变量就是本来的名字，但是可以使用 as 关键字重命名。

function v1() { ... }
function v2() { ... }export {v1 as version1,v2 as version2
}

上面代码使用 as 关键字，重命名了函数 v1 和 v2 的对外接口。

需要特别注意的是， export 命令规定的是对外的接口，必须与模块内部的变量建立一一对应的关系。

// 报错
export 1// 报错
let m = 1
export m

上面两种写法都会报错，因为没有提供对外的接口。第一种写法直接输出 1，第二种写法通过变量 m，还是直接输出 1。1只是一个值，不是接口。正确的写法是下面这样。

// 写法一
export let m = 1// 写法二
let m = 1
export { m }// 写法三
let n = 1
export {n as m}

上面展示了三种正确的写法，规定了对外的接口 m。其他脚本可以通过这个接口，取到值1。它们实质上是在接口名和模块内部变量之间建立了一一对应的关系。

同样的，function 和 class 的输出，也必须遵守这样的写法。

// 报错
function f() {}
export f// 正确
export function f() {}// 正确
function f() {}
export { f }

另外，export 语句输出的接口，与其对应的值是动态绑定关系，即通过该接口，可以取到模块内部实时的值。

export let heart = '宋'
setTimeout(() => heart = '明', 400)

上面代码输出变量 heart，值为 ‘宋’，400毫秒之后变成 ‘明’，这一点与 CommonJS 规范完全不同。

export 命令可以出现在模块的任何位置，只要处于模块顶层就可以。

但处于块级作用域内会报错

import 命令也是如此。这样做的原因，是为了秉承「静态优化」的初衷。

function foo() {export default 'bar'// SyntaxError
}
foo()

上面代码中，export 语句放在函数之中，结果报错。

「 import 」

使用 export 命令定义了模块的对外接口之后，其他的 JS 文件就可以通过 import 命令加载这个模块。

// main.jsimport { firstName, lastName, year } from './mingDynasty.js'function setName(element) {element.textContent = firstName + ' ' + lastName
}

上面代码的 import 命令，用于加载 mingDynasty.js 文件，并从中输入变量。import 命令接受一对大括号，里面指定要从其他模块导入的变量名。大括号里面的变量名，必须与被导入模块（mingDynasty.js）对外接口的名称相同。

如果想为输入的变量重新取一个名字， import 命令要使用 as 关键字，将输入变量重命名。

import { lastName as surname } from './mingDynasty.js'

import 命令输入的变量都是只读的，因为它的本质是输入接口。[

import {a} from './xxx.js'a = {}// Syntax Error : 'a' is read-only

上面代码中，脚本加载了变量a，对其重新赋值就会报错，因为a是一个只读的接口。但是，如果a是一个对象，改写a的属性是允许的。

import { a } from './xxx.js'a.foo = 'hello'  // 合法操作

上面代码中，a的属性可以成功改写，并且其他模块也可以独到改写后的值。

不过，这种写法很难查错，建议凡是输入的变量，都当作完全只读，轻易不要改变它的属性。

import 后面的 from 指定模块文件的位置，可以是相对路径，也可以是绝对路径。如果只是模块名，不带有路径，那么必须有配置文件，告诉 JavaScript 引擎该模块的位置。

import { appMethod } from 'util'

上面代码中，util 是模块文件名，由于不带有路径，必须通过配置，告诉引擎怎么取到这个模块。

注意，import 命令具有提升效果，会提升到整个模块的头部，首先执行。

foo()import { foo } from 'my_module'

上面的代码不会报错，因为 import 的执行早于 foo 的调用。这种行为的本质是，import 命令是编译阶段执行的，在代码执行之前。由于 import 是静态执行，所以不能使用表达式和变量，这些是只有在运行时才能得到结果的语法结构。

// 报错
import { 'f' + 'oo' } from 'my_module'// 报错
let module = 'my_module'
import { foo } from module// 报错
if (x === 1) {import { foo } from 'module1'
} else {import { foo } from 'module2'
}

上面三种写法都会报错，因为它们用到了表达式、变量和 if 结构。在静态分析阶段，这些语法都是没法得到值的。

最后，import 语句会执行所加载的模块，因此可以有下面的写法。

import 'lodash'

上面代码仅仅执行 lodash 模块，但不是输入任何值。

如果多次重复执行用一句 import 语句，那么只会执行一次，而不会执行多次。

import 'lodash'
import 'lodash'

上面代码加载了两次 lodash，但是只会执行一次。

import { foo } from 'my_module'
import { bar } from 'my_module'// 等同于
import { foo, bar } from 'my_module'

上面代码中，虽然 foo 和 bar 在两个语句中加载，但是它们对应得的是同一个 my_module 实例。也就是说，import 语句是 Singleton 模式。

目前阶段，通过 Babel 转码， CommonJS 模块的 require 命令和 ES6 模块的 import 命令，可以写在同一个模块里面，但是最好不要这样做。因为 import 在静态解析阶段执行，所以它是一个模块之中最早执行的。下面的代码可能不会得到预期结果。

require('core-js/modules/es6.symbol')
require('core-js/modules/es6.promise')
import React from 'React'

「模块的整体加载」

除了指定加载某个输出值，还可以使用整体加载，即用星号（ * ）指定一个对象，所有输出值都加载在这个对象上面。

下面是一个 circle.js 文件，它输出两个方法 area 和 circumference。

// circle.jsexport function area(radius) {return Math.PI * radius * radius
}export function circumference(radius) {return 2 * Math.PI * radius
}

现在，加载这个模块。

// main.jsimport { area, circumference } from './circle'console.log('圆面积：' + area(4))
console.log('圆周长：' + circumference(14))

上面写法是逐一指定要加载的方法，整体加载的写法如下。

import * as circle from './circle'console.log('圆面积：' + circle.area(4))
console.log('圆周长：' + circle.circumference(14))

注意，模块整体加载所在的那个对象（上例是circle），应该是可以静态分析的，所以不允许运行时改变。下面的写法都是不允许的。

import * as circle from './circle'// 下面两行都是不允许的
circle.foo = 'hello'
circle.area = function () {}

「 export default 」

从前面的例子可以看出，使用 import 命令的时候，用户需要知道所要加载的变量名或函数名，否则无法加载。但是，用户肯定希望快速上手，未必愿意阅读文档，去了解模块有哪些属性和方法。

为了给用户提供方便，让他们不用阅读文档就能加载模块，就要用到 export default 命令，为模块指定默认输出。

// export-default.js
export default function () {console.log('foo')
}

上面代码是一个模块文件 export-default.js，它的默认输出是一个函数。

其他模块加载该模块时，import 命令可以为该匿名函数指定任意名字。

// import-default.js
import customName from './export-default'
customName() // 'foo'

上面代码的 import 命令，可以用任意名称指向 export - default.js 输出的方法，这时就不需要知道原模块输出的函数名。但是此时的 import 命令后面，不能用大括号。

export default 命令可以用在非匿名函数前：

// export-default.js
export default function foo() {console.log('foo')
}// 或者写成function foo() {console.log('foo')
}export default foo

上面代码中，foo 函数的函数名 foo，在模块外外部是无效的。加载的时候，视同匿名函数的加载。

下面比较一下默认输出和正常输出：

// 第一组
export default function crc32() { // 输出// ...
}import crc32 from 'crc32' // 输入// 第二组
export function crc32() { // 输出// ...
}import {crc32} from 'crc32' // 输入

上面的代码有两组写法，使用 export default 时，对应的 import 语句不需要使用大括号。不使用时，需要大括号。

本质上，export default 就是输出一个叫做 default 的变量或方法，然后系统允许你为他取任意名字。所以下面的写法是有效的。

// modules.js
function add(x, y) {return x * y
}
export { add as default }
// 等同于
// export default add// app.js
import { default as foo } from 'modules'
// 等同于
// import foo from 'modules'

正是因为 export default 命令其实只是输出一个叫做 default 的变量，所以它后面不能跟变量声明语句。

// 正确
export var a = 1// 正确
var a = 1
export default a// 错误
export default var a = 1

上面代码中，export default a 的含义是将变量 a 的值赋给变量 default。所以，最后一种写法会报错。

同样地，因为 export default 命令的本质是将后面的值，赋给 default 变量，所以可以直接将一个值写在 export default 之后。

// 正确
export default 42// 报错
export 42

上面代码中，最后一句报错是因为没有指定对外的接口，而前一句指定对外接口为 default。

有了 export default 命令，输入模块时就非常直观了，比如输入 lodash 模块为例：

import _ from 'lodash'

如果想在一条 import 语句中，同时输入默认方法和其他接口，可以写成下面这样：

import _, { each, forEach } from 'lodash'

对应上面代码的 export 语句如下：

export default function (obj) {// ···
}export function each(obj, iterator, context) {// ···
}export { each as forEach }

上面代码的最后一行的意思是，暴露出 forEach 接口，默认指向 each 接口，即 forEach 和 each 指向同一个方法。

export default 也可以用来输出类：

// MyClass.js
export default class { ... }// main.js
import MyClass from 'MyClass'
let o = new MyClass()

「 export 与 import 的复合写法」

如果在一个模块之中，先输入后输出同一个模块，import 语句可以与 export 语句写在一起。

export { foo, bar } from 'my_module'// 可以简单理解为
import { foo, bar } from 'my_module'
export { foo, bar }

上面代码中，export 和 import 语句可以结合在一起，写成一行。但在这之后，foo 或 bar 实际上并没有被导入当前模块，只是相对于对外转发了这两个接口，导致当前模块不能直接使用 foo 和 bar。

模块的接口改名和整体输出，也可以采用这种写法。

// 接口改名
export { foo as myFoo } from 'my_module'// 整体输出
export * from 'my_module'

默认接口的写法如下。

export { default } from 'foo'

具名接口改为默认接口的写法如下：

export { es6 as default } from './someModule'// 等同于
import { es6 } from './someModule'
export default es6

同样地，默认接口也可以改名为具名接口：

export { default as es6 } from './someModule'

「模块的继承」

模块之间也可以继承。假设有一个 circleplus 模块，继承了 circle 模块。

// circleplus.jsexport * from 'circle'
export let e = 2.71828182846
export default function(x) {return Math.exp(x)
}

上面代码中的 export *，表示再输出 circle 模块的所有属性和方法。注意，export *命令会忽略 circle 模块的 default 方法。然后，上面代码又输出了自定义的 e 变量和默认方法。

这时，也可以将 circle 的属性或方法，改名后再输出。

// circleplus.jsexport { area as circleArea } from 'circle'

上面代码表示，只输出 circle 模块的 area 方法，且将其改名为 circleArea。

加载上面模块的写法如下：

// main.jsimport * as math from 'circleplus'
import exp from 'circleplus'
console.log(exp(math.e))

上面代码中的 import exp 表示，将 circleplus 模块的默认方法加载为 exp 方法

如臂使指：JS 中的 Module 语法相关推荐

Node.js 中的 module.exports 与 exports
介绍 module:每个模块中都有 module 对象,存放了当前模块相关的信息: module.exports:模块导出的内容: exports:默认情况下,exports 和 module.exp ...
JS中正则表达式常用语法总结
目录一.正则表达式的创建二.().[].{} 的区别三.^ 和 $ 四.\d \s \w . 五.* + ? 六.test .match 七.支持正则表达式的 String 对象的方法一.正则 ...
js中的eval语法
一.基本使用 var evalString = `var message ="hello world";console.log(message)` eval(evalString) ...
webpack打包处理js文件中的高级语法
前言在js文件中定义一个User类 import $ from 'jquery' import './css/at.css' import './css/at.less' import './css ...
node.js中公培训笔记大全（讲的一般，小白基础入门）
day01 本阶段的授课内容为 ES6 2天-3天 NodeJS 2天-3天 express 2天-3天 webpack 1天 MySQL数据库 2天实战项目 2天今天的授课内容为 1.ES5-严 ...
配置 postCSS 自动添加 css 的兼容前缀||打包样式表中的图片和字体文件||打包处理 js 文件中的高级语法
配置 postCSS 自动添加 css 的兼容前缀 ① 运行 npm i postcss-loader autoprefixer -D 命令 ② 在项目根目录中创建 postcss 的配置文件 pos ...
在JS中最常看到切最容易迷惑的语法(转)
发现一篇JS中比较容易迷惑的语法的解释,挺有用的,转载下,与大家分享: js中大括号有四种语义作用语义1,组织复合语句,这是最常见的 Js代码 if( condition ) { //... }e ...
node.js中exports与module.exports的区别分析
前言关于Node.js中的exports和module.exports,很多时候都比较容易让人混淆,弄不清楚两者间的区别.那么我们就从头开始理清这两者之间的关系. 来源在开发Node.js应用的时 ...
js中的for循环如何跳出,js中for循环的两种语法
js几种for循环的几种用法谷歌人工智能写作项目:小发猫 js,for循环是怎么运行的? typescript有哪些变化. 最普遍的介绍:for循环是JavaScript中最常用的循环,标准for循 ...

如臂使指：JS 中的 Module 语法

前言

如臂使指：JS 中的 Module 语法相关推荐

最新文章

热门文章

如臂使指 ：JS 中的 Module 语法

前言

如臂使指 ：JS 中的 Module 语法相关推荐

最新文章

热门文章

如臂使指：JS 中的 Module 语法

如臂使指：JS 中的 Module 语法相关推荐