import和export的用法

Youngdze 发布于2019-08-23 17:58 / 1943人阅读

摘要：命令用于规定模块的对外接口，命令用于输入其他模块提供的功能。前者用于服务器，后者用于浏览器。命令接受一对大括号，里面指定要从其他模块导入的变量名。基本用法其他和主要区别为前者是动态加载。

问题来了

在日常开发中，HMS经常会遇到以下这些语句

import {xxx, xxxx} from "xxx"
import xxx from "xxx"
import("../xxx")

let xxx = "x"; export {xxx}
export class xxx {}
export default {}
exports.post()
module.exports.init = init;

那么问题来了，这些import和export语句表示什么意思？有什么区别呢？

背景知识 1. ES6模块

import和export是ES6模块中的两个命令。

ES6模块功能主要有两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。

在ES6前，模块加载最主要的有 CommonJS 和 AMD两种。前者用于服务器，后者用于浏览器。
ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。

2. export

export命令用于规定模块的对外接口。即输出模块内部变量（方法、类）。

基本用法

// 1. 直接输出变量（方法、类）
export var m = 1;
export function multiply(x, y) {
  return x * y;
};

// 2. 使用大括号指定所要输出的一组变量（方法、类）
var m = 1;
export { m };

// 3. as关键字重命名
// 重命名后，v2可以用不同的名字输出两次
function v1() { ... }
function v2() { ... }
export {
  v1 as streamV1,
  v2 as streamV2,
  v2 as streamLatestVersion
};

注意项

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

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

3. import

使用export命令定义了模块的对外接口以后，其他 JS 文件就可以通过import命令加载这个模块。
import命令接受一对大括号，里面指定要从其他模块导入的变量名。大括号里面的变量名，必须与被导入模块对外接口的名称相同。

基本用法

// 1. 引入变量（方法、类）-（逐一加载）
import { firstName, lastName, year } from "./profile.js";

// 2. as关键字重命名
import { lastName as surname } from "./profile.js";

// 3. 整体加载
import * as circle from "./circle";

注意项

引入变量只读，引入对象属性可改写

from后面是文件路径（相对路径、绝对路径均可，可省略.js猴嘴；模块名，已配置模块位置）

import命令提升至顶部先执行（编译阶段执行）

import命令静态执行，不能使用表达式和变量

重复执行同一句import命令，只会执行一次

4. export default

export default就是输出一个叫做default的变量或方法，系统允许自定义命名

基本用法

// 默认输出一个函数
export default function () {
  console.log("foo");
}
// 引用并指定名字
import customName from "./export-default";

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

5. import()

为了实现在运行中加载模块，引入了import()函数，实现了动态加载。

基本用法

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

其他

import()和import主要区别为前者是动态加载。
import()返回一个Promise对象，import()加载模块成功以后，这个模块会作为一个对象，当作then方法的参数。
import()类似于Node的require方法，区别主要是前者是异步加载，后者是同步加载
import()通常用于按需加载、条件加载、动态的模块路径

问题解答

// 1. 
// 引入模块的某些变量（方法、类），配合4、5使用
import {xxx, xxxx} from "xxx"  

// 2. 
// 引入模块的默认变量（方法、类），配合6使用
import xxx from "xxx" 

// 3.
// 实现动态加载，适用于按需加载等
import("../xxx") 

// 4.
// 输出模块的变量（方法、类），对应引入方法为1
let xxx = "x"; export {xxx}
// 5.
// 输出模块的变量（方法、类），对应引入方法为1
export class xxx {}
// 6.
// 输出模块默认的变量（方法、类），对应引入方法为2
export default {}
// 7.
// 待更新
exports.post()
// 8.
// 待更新
module.exports.init = init;

参考文章

《ECMAScript 6 入门——阮一峰》

混合云超融合服务器写的文件import 的用法 cdn的用法 find的用法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104458.html

javascript中import和export用法总结

摘要：前者用于服务器，后者用于浏览器。某些打包工具可以允许或要求使用扩展名。的形式需要的支持，比如将导出在中的对象或值。如上，也是的内容，和是一对。比如如命名导出引入的命名导出等价为，值得注意的是在该模块中不能直接使用和。 import import 和 require 的区别 import 和js的发展历史息息相关，历史上 js没有模块(module)体系，无法将一个大程序拆分成互相依赖的...

ideaa 2019-08-23 12:00 评论0 收藏0
JS/TS 的 import 和 export 用法小结

摘要：昨天帮一个网友解决一个的问题，看了一下，归根结底还是对的和用法的不熟悉。让我想起来当年学这个知识点的时候，也是云里雾里跌跌撞撞猜了很久用法，踩过坑。昨天帮一个网友解决一个typescript的问题，看了一下，归根结底还是对js的import和export用法的不熟悉。让我想起来当年学这个知识点的时候，也是云里雾里跌跌撞撞『猜』了很久用法，踩过坑。当时主要看的是阮一峰的这篇文章 hpt...

DevTTL 2019-08-23 14:08 评论0 收藏0
export和import的用法总结

摘要：把直接加到声明前面就可以省略无论怎样输出，输入的时候都需要。其实这种导出方式可以看成是命名导出的变种，只不过把命名写成了。对应输入的例子参考文章详解中与的用法和区别我在 ES6中export一般的用法有两种命名导出（Named exports）默认导出（Default exports）命名导出（Named exports）就是每一个需要输出的数据类型都要有一个name，统一...

EasonTyler 2019-08-26 11:42 评论0 收藏0
前端模块化杂记

摘要：入口模块返回的赋值给总结在剖析了整体的流程之后，可以看到相关的技术细节还是比较清晰的，学无止境引用混合使用详解的语法前端模块化规范前言 CMDAMD简介 Commonjs简介 Module简介 Common和Module的区别 Module与webpack Module与Babel 一些问题总结引用前言前端模块化在近几年层出不穷，有Node的CommonJs,也有属于cl...

GitCafe 2019-08-26 13:29 评论0 收藏0