javascript中import和export用法总结

ideaa 发布于2019-08-23 12:00 / 1841人阅读

摘要：前者用于服务器，后者用于浏览器。某些打包工具可以允许或要求使用扩展名。的形式需要的支持，比如将导出在中的对象或值。如上，也是的内容，和是一对。比如如命名导出引入的命名导出等价为，值得注意的是在该模块中不能直接使用和。

import import 和 require 的区别

import 和js的发展历史息息相关，历史上 js没有模块(module)体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。这对开发大型工程非常不方便。
在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。也就是我们常见的 require 方法。比如 `let { stat, exists, readFile } = require("fs");
` 。
ES6 在语言标准的层面上，实现了模块功能。ES6 模块不是对象，而是通过export命令显式指定输出的代码，再通过import命令输入。

import 的几种用法:

1. import defaultName from "modules.js";
2. import { export } from "modules";
3. import { export as ex1 } from "modules";
4. import { export1, export2 } from "modules.js";
5. import { export1 as ex1, export2 as ex2 } from "moduls.js";
6. import defaultName, { expoprt } from "modules";
7. import * as moduleName from "modules.js";
8. import defaultName， * as moduleName from "modules";
9. import "modules";

import用法解释

import后面的from指定模块文件的位置，可以是相对路径，也可以是绝对路径，.js后缀可以省略。如果只是模块名，不带有路径，那么必须有配置文件，告诉 JavaScript 引擎该模块的位置。某些打包工具可以允许或要求使用扩展名。

上面代码使用的 ==as== 关键字，相当于import 进来的‘值’的别名。

import * from "xx" 将导入整个模块的内容，而 import defaultName 和 import { export1， export2 } 将导入export的某个对象或值

最后一种方式 import "modules" 将运行模块中的全局代码，而不导入任何值。

import的形式需要export的支持，比如 import defaultName from "module.js 将导出在modules.js中export default的对象或值。

export

如上，export也是es6的内容，和import是一对。

export的几种用法

1.export { name1, name2, …, nameN };
2.export { variable1 as name1, variable2 as name2, …, nameN };
3.export let name1, name2, …, nameN; // also var
4.export let name1 = …, name2 = …, …, nameN; // also var, const
5.export function FunctionName() {...}
6.export class ClassName {...}

7.export default expression;
8.export default function (…) { … } // also class, function*
9.export default function name1(…) { … } // also class, function*
10.export { name1 as default, … };

11.export * from …;
12.export { name1, name2, …, nameN } from …;
13.export { import1 as name1, import2 as name2, …, nameN } from …;

export用法解释

命名导出

比如：


const ex1 = "xxx";
const fun = function() {...}
export { ex1, fun as demoFun};
export let ex2 = "demo";
export function multiply(x, y) {
  return x * y;
};

对应的import 写法


import { ex1, demoFun, ex2, multiply } from "module.js";

默认导出

export 命名导出需要export 名字和import名字严格一致。而export default命令，为模块指定默认输出，在import 的时候可以随意命名名字。一个模块只能有一个默认输出，也就是说 export default 一个模块只能用一次。
用法:

// a.js 输出一个默认函数
export default function add(x, y) { return x + y; }
import anyName from "a.js";
// b.js 输出一个默认变量
let name = "b.js";
export default name;
import anyName from "b.js"
// c.js 输出一个类
export default class { ...}
import anyClass from "c.js";
// d.js  输出一个值
export default 1;
import value from "d.js"

export 和 import 混合使用(模块重定向)

也就是在一个模块之中，先输入后输出同一个模块。比如:
如:


export { foo, bar } from "my_module";
// 等价为，值得注意的是 在该模块中不能直接使用 foo 和 bar。
import { foo, bar } from "my_module";
export { foo, bar };

export * from  "./other-module";  // 导出所有方法，但注意此种方法不会到导出module.js中的默认导出变量。
// 导出 默认导出用下面写法
export {default} from "./other-module";

参考

阮一峰 Module的语法
MDN import 命令
MDN export 语法

云服务器 GPU云服务器 linux中export命令 javascript学习总结 javascript用法 javascript常见用法

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

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

export和import的用法总结

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

EasonTyler 2019-08-26 11:42 评论0 收藏0
javascript中的模块化

摘要：所谓的模块也叫元件或者组件，可以理解为可以服用的功能代码。如遵循规范的和遵循规范的中的模块化。是在文件中引模块的。如果引用一个以上的组件，就可以用把这一组组件放在数组中就可以了，如下，，，二中的模块化。所谓的模块也叫元件或者组件，可以理解为可以服用的功能代码。比如说a页面用功能了，b页面用到了这功能了，所以我们可以把这个功能抽为组件，便于服用。那么javascript中的组件化如何使...

zzbo 2019-08-22 17:21 评论0 收藏0
探索 JS 中的模块化

摘要：的主要思想是异步模块，主逻辑在回调函数中执行，这和浏览器前端所习惯的开发方式不谋而合，应运而生。是目前开发中使用率最高的模块化标准。原文链接: http://yanjiie.me 偶然的一个周末复习了一下 JS 的模块标准，刷新了一下对 JS 模块化的理解。从开始 Coding 以来，总会周期性地突发奇想进行 Code Review。既是对一段时期的代码进行总结，也是对那一段时光的...

SoapEye 2019-08-22 18:21 评论0 收藏0
ES6-class、模块化在vue中应用(10)

摘要：我们在之前文章与面向对象编程中，说到了目前大部分框架和库，都采用了面向对象方式编程。那么具体是怎么样应用的呢面向对象编程，最典型和最基础的作用就是封装，封装的好处就是代码的能够复用，模块化，进行项目和文件的组织。模块化在中的应用。我们在之前文章《ES6 class与面向对象编程》中，说到了目前大部分框架和库，都采用了面向对象方式编程。那么具体是怎么样应用的呢？面向对象编程，最典型和最...

endiat 2019-08-26 13:45 评论0 收藏0