ES6的module语法中export和import的使用

头像
风如也
     四川
    阅读 8 分钟
    头图

    ES6模块与CommonJS模块的差异

    ES6 模块与 CommonJS 模块完全不同
    它们有三个重大差异

    • CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用
    • CommonJS 模块是运行时加载，ES6 模块是编译时输出接口
    • CommonJS 模块的 require() 是同步加载模块，ES6 模块的 import 命令是异步加载，有一个独立的模块依赖的解析阶段
      第二个差异是 CommonJS 加载的是一个对象（即 module.exports 属性），该对象只有在脚本运行完才会生成，而 ES6 模块不是对象，它的对外接口只是一种静态定义，在代码静态解析阶段就会生成。

    CommonJS 模块是 Node.js 专用的，语法上面，与 ES6 模块最明显的差异是，CommonJS 模块使用 require() 和 module.exports ，ES6 模块使用 import 和 export。

    ES6 中 module 的语法

    ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。
    ES6模块不是对象，而是通过 export 命令显式指定输出的代码，再通过 import 命令输入。

    export 命令

    模块功能主要由两个命令构成：export 和 import。 export 命令用于规定模块的对外接口，import 命令用于输入其他模块提供的功能。
    一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果希望外部能够读取模块内部的某个变量，就必须使用 export 关键字输出该变量。

    export 输出变量

    // export.js
let firstName = 'Mark'
let lastName = 'Dave'

export { firstName, lastName }

    上面代码在 export 命令后面，使用大括号指定所要输出的一组变量。

    export 输出函数或类

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

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

    上面代码对外输出一个函数 `multiply

    export使用as重命名

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

    function fun1() { ... }
function fun2() { ... }

export {
    fun1 as streamFun1,
    fun2 as streamFun2,
    fun2 as streamLatestFun 
}

    上面代码使用 as 关键字，重命名了函数 fun1 和 fun2 的对外接口，重命名后，fun2 可以用不同的名字输出两次

    export 规定的对外接口，必须与模块内部的变量一一对应

    export 命令规定的是对外的接口，必须与模块内部的变量建立一一对应关系

    // 报错
export 1;

// 报错
let m = 1
export m;

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

    // 写法1
export let m = 1;

// 写法2
let m = 1
export { m }

// 写法3
let n = 2
export { n as m }

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

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

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

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

// 正确
export function f() {}

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

    export 命令可以出现在模块的任何位置，只要处于模块顶层就可以。如果处于块级作用域内，就会报错

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

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

    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()

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

    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 时，对应的 import 语句需要使用大括号。

    export default 命令用于指定模块的默认输出。显然，一个模块只能有一个默认输出，因此 export default 命令只能使用一次。所以，import 命令后面才不用加大括号，因为只可能唯一对应 export default 命令。
    本质上，export default 就是输出一个叫做 default 的变量或方法，然后系统允许你为它取任意名字。所以，下面的写法是有效的。

    // module.js
function add(x, y) {
    return x + y
}
export { add as default }
// 等同于
export default add

// main.js
import { default as foo } from 'modules'
// 等同于
import foo from 'modules'

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

    // 正确
export let a = 1

// 正确
let a = 1
export default a

// 错误
export default let a = 1

    上面代码中，export default a 的含义是将变量 a 的值赋值给变量 default。所以，最后一种写法会报错。
    同样地，因为 export default 命令的本质是将后面的值，赋给 default 变量，所以可以直接将一根值写在 rcport default 之后

    // 正确
export default 42

// 报错
export 42

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

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

    export default 也可以用来输出类

    // MyClass.js
export default class { ... }

// main.js
import MyClass from 'MyClass'
let o = new MyClass()

    import 命令

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

    // import.js
import { firstName, lastName } from './export.js'

function setName(element) {
    element.textContent = firstName + ' ' + lastName
}

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

    import 使用 as 重命名变量

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

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

    import`命令输入的变量都是只读的

    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 具有提升效果

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

    foo()

import { foo } from 'my_module'

    上面的代码不会报错，因为 import 的执行早于 foo 的调用。这种行为的本质是，import 命令是编译阶段执行的，在代码运行之前。

    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 模式。

    模块的整体加载

    除了指定加载某个输出值，还可以使用整体加载，即用星号（*）指定一个对象，所有输出值都加载在这个对象上。
    例如，下面是一个 circle.js 文件，它输出两个方法 area 和 circum

    // circle.js
export function area(radius) {
    return Math.PI * radius * radius
}
export function circum(radius) {
    return @ * Math.PI * radius
}

    现在，加载这个模块

    // main.js
import {area, circum} from './circle'

console.log(area(4))
console.log(circum(14))

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

    import * as circle from './circle'

console.log(circle.area(4))
console.log(circle.circum(14))

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

    import * as circle from './circle'

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

    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'

    import()

    import 和 export 命令只能在模块的顶层，不能在代码块之中（比如，在 if 代码块之中，或在函数之中）
    ES2020提案引入 import() 函数，支持动态加载模块

    import(specifier)

    上面代码中，import 函数的参数 specifier，指定所要加载的模块的位置，import 命令能够接受上面参数，import() 函数就能接受上面参数，两者区别主要是后者为动态加载。
    import() 返回一个 Promise 对象。如

    const main = document.querySelector('main');

import(`./section-modules/${someVariable}.js`)
  .then(module => {
    module.loadPageInto(main);
  })
  .catch(err => {
    main.textContent = err.message;
  });

    import() 函数可以用在任何地方，不仅仅是模块，非模块的脚本也可以使用。它是运行时执行，也就是说，什么时候运行到这一句，就会加载指定的模块。另外，import() 函数与所加载的模块没有静态连接关系，这点也是与 import 语句不相同。import() 类似于 Node 的 require 方法，区别主要是前者是异步加载，后者是同步加载。

    适用场合

    按需加载

    import() 可以在需要的时候，再加载某个模块

    button.addEventListener('click', event => {
  import('./dialogBox.js')
  .then(dialogBox => {
    dialogBox.open();
  })
  .catch(error => {
    /* Error handling */
  })
});

    上面代码中，import() 方法放在 click 事件的监听函数中，只有用户点击了按钮，才会加载这个模块。

    条件加载

    import() 可以放在 if 代码块，根据不同的情况，加载不同的模块

    if (condition) {
  import('moduleA').then(...);
} else {
  import('moduleB').then(...);
}

    上面代码中，如果满足条件，就加载模块 A，否则加载模块 B

    动态的模块路径

    import() 允许模块路径动态生成

    import(f())
.then(...)

    上面代码中，根据函数 f 的返回结果，加载不同的模块。

    注意点

    import() 加载模块成功以后，这个模块会作为一个对象，当作 then 方法的参数。因此，可以使用对象结构赋值的语法，获取输出接口

    import('./myModule.js')
.then({export1, export2}) => {
    // ...
})

    上面代码中，export1 和 export2 都是 myModule.js 的输出接口，可以解构获得
    如果想同时加载多个模块，可以

    Promise.all([
  import('./module1.js'),
  import('./module2.js'),
  import('./module3.js'),
])
.then(([module1, module2, module3]) => {
   ···
});

    import() 也可以用在 async 函数中

    async function main() {
  const myModule = await import('./myModule.js');
  const {export1, export2} = await import('./myModule.js');
  const [module1, module2, module3] =
    await Promise.all([
      import('./module1.js'),
      import('./module2.js'),
      import('./module3.js'),
    ]);
}
main();

    结语

    ❤️ 🧡 💛大家喜欢我写的文章的话，欢迎大家点点关注、点赞、收藏和转载！！

    欢迎关注公众号前端开心果 🔥我会持续更新前端相关的内容文章哦。

    javascriptecmascript-6前端
    风如也
    202 声望11 粉丝

    分享努力写前端代码的生活

    « 上一篇
    认识Base64，看这篇足够了
    下一篇 »
    koa中基于JWT的用户权限管理详细说明

    引用和评论

    推荐阅读
    头像
    服务器发送事件Server-sent events详解与示例

    风如也赞 1阅读 2.5k

    头像
    腾讯新闻中心首页改版啦

    小蚊酱赞 11阅读 9.3k评论 7

    头像
    网页设计的垂直居中

    寒青赞 39阅读 4.6k评论 3

    头像
    CSS团队协作规范

    寒青赞 36阅读 3.9k

    头像
    前端如何入门 Go 语言

    robin赞 26阅读 7.7k评论 8

    头像
    100个React最佳实践小技巧

    夕水赞 17阅读 2.6k评论 4

    头像
    不使用 JS 纯 CSS 获取屏幕宽高

    南城FE赞 15阅读 2.1k评论 3

    0 条评论
    得票最新