ES6—Module 的语法

export命令

ES6 模块的设计思想是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。

模块功能主要由两个命令构成:exportimportexport命令用于规定模块的对外接口,import命令用于输入其他模块提供的功能。

一个模块就是一个独立的文件。该文件内部的所有变量,外部无法获取。如果你希望外部能够读取模块内部的某个变量,就必须使用export关键字输出该变量。下面是一个 JS 文件,里面使用export命令输出变量。

//profile.js
//分别暴露
/* export let firstName = "li";
export let lastName = "siyu";
export function birthdy() {
  console.log("hello world");
} */

//统一暴露(优先使用)
let firstName = "li";
let lastName = "siyu";
function birthdy() {
  console.log("hello world");
}
export { firstName, lastName, birthdy };

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

function v1(a, b) {
  return a * b;
}
function v2(a, b) {
  return a - b;
}
export { v1 as streamV1, v2 as streamV2, v2 as streamVersion };

重命名后,v2可以用不同的名字输出两次。

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

//写法一
export let m = 1;
//写法二
let p = 2;
export { p };
//写法三:
let q = 3;
export { q as n };

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

export var foo = "bar";
setTimeout(() => {
  foo = "baz";
}, 500);

上面代码输出变量foo,值为bar,500 毫秒之后变成baz。

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

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

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

import命令

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

<script type="module">
      
      import { firstName, lastName } from "./profiles.js";
      function setName() {
        return firstName + " " + lastName;
      }
      console.log(setName());
    </script>

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

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

<script type="module">
      
      import { firstName as first, lastName } from "./profiles.js";
      function setName() {
        return first + " " + lastName;
      }
      console.log(setName());
    </script>

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

import * as name from "./profiles.js";
      //可以使用"./profiles.js",中所有export出来的变量
      console.log(name.m);

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'

 

相关推荐

  1. ES6Module 语法

    2024-03-23 10:06:03       16 阅读
  2. es6核心语法

    2024-03-23 10:06:03       17 阅读
  3. es6新增加语法

    2024-03-23 10:06:03       12 阅读
  4. ES6基础语法

    2024-03-23 10:06:03       39 阅读
  5. ES6语法笔记

    2024-03-23 10:06:03       14 阅读
  6. ES6 - 语法

    2024-03-23 10:06:03       15 阅读
  7. es6基础语法

    2024-03-23 10:06:03       7 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-03-23 10:06:03       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-03-23 10:06:03       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-03-23 10:06:03       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-03-23 10:06:03       18 阅读

热门阅读

  1. 前端小白的学习之路(ES6 三)

    2024-03-23 10:06:03       18 阅读
  2. FM25512

    2024-03-23 10:06:03       18 阅读
  3. 【单点知识】基于实例讲解PyTorch中的ImageFolder类

    2024-03-23 10:06:03       16 阅读
  4. 7-24 两个整数最大值

    2024-03-23 10:06:03       16 阅读
  5. 关于RestController发送请求用List<T> 接收数据

    2024-03-23 10:06:03       19 阅读
  6. ChatGPT PLUS 团队版 和 ChatGPT PLUS 比较

    2024-03-23 10:06:03       25 阅读
  7. Linux常用通配符

    2024-03-23 10:06:03       14 阅读
  8. 学“计算机专业”的女生毕业后能做什么工作?

    2024-03-23 10:06:03       13 阅读
  9. 3.0 V-22V 宽输入电压,高效率异步升压芯片-ZCC5429

    2024-03-23 10:06:03       19 阅读
  10. 奶牛选美(dfs)

    2024-03-23 10:06:03       16 阅读
  11. 代码随想录Day31

    2024-03-23 10:06:03       17 阅读
  12. Qt平台插件“xcb“加载失败问题及其解决方案

    2024-03-23 10:06:03       13 阅读