ES6中的export以及import的使用多样性

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

一、export导出模块使用部分的几种方式

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

(1)利用default做接口导出

var a=1;
export default a;
export default function scc(){}
//错误的使用方式
export default var a=1

本质上,export default就是输出一个叫做default的变量或方法,然后系统允许你为它取任意名字,正是因为export default命令其实只是输出一个叫做default的变量,所以它后面不能跟变量声明语句,而且一个模块中只能有一个default。同时同样地,因为export default本质是将该命令后面的值,赋给default变量以后再默认,所以直接将一个值写在export default之后是可以的:

export default 1

(2)直接导出变量以及方法

export var a=1;
export function fun(){}

但是不能直接使用如下形式:

export 1;

var a=1;
export a //以上两种方式中均直接导出是常量而不是接口

(3)将上诉的方式用对象的形式导出

var a=1;
var b=5;
function c(){}
export {a,b,c}或者export {a}

该方式的导出更直观,通常采用该方式进行。

二、import导入方式

(1)对应第一种导出方式,可以为default任意命名

import name from modulePath;
import{default as name} from modulePath
//两种方式实现的效果是一样的

(2)对应与第二种和第三种方式的导入方式是一样的:

import {a, b,c} from modulePath  //按名称一次导入模块直接使用

import * as ddd from modulePath  //导出模块的所有部分并重命名为ddd,通过ddd.a的形式进行调用

import {a} from modulePath  //只导入导出模块的部分
//以上三种方式均没有修改导出部分的名称

import{a as aaa} from modulePath  //给a进行重命名,通过aaa进行调用

需要注意的是不要将导入导出的对应弄混了,某则将其不了作用的。

(3)import和export的复合写法

export { foo, bar } from ‘my_module‘;

// 等同于
import { foo, bar } from ‘my_module‘;
export { foo, bar };

三、ES6的导入导出方式和node的require(commonJS)的区别

(1)ES6的import主要用于客户端导入模块,同时导入是出于编译阶段的,因而不能实现按需导入以及在语句块中导入模块,而应该在顶级作用域中。同时不能再import中使用变量

// 报错不能进行条件导入
if (x === 2) {
  import MyModual from ‘./myModual‘;
}
// 报错不能使用变量,编译阶段无法识别变量import aa from ‘/index‘+path  

(2)import命令会被 JavaScript 引擎静态分析,先于模块内的其他模块执行,可以在import的前面调用方法

aa();//不会报错
import aa from modulePath

(3)import是异步加载模块的,require是发生在执行阶段,同步加载的。

四、类似require模块引入的方法

import()方法可以实现按需导入,条件导入、动态的模块路径(即路径中含有相关的变量)

时间: 2024-08-11 05:30:47

ES6中的export以及import的使用多样性的相关文章

ES6模块之export和import教程

一.ES6中的模块ES6中的模块即使一个包含JS代码的文件,在这个模块中所有的变量都是对其他模块不可见的,除非我们导出它.ES6的模块系统大致分为导出(export)和导入(import)两个模块. 二.导入的具体使用 场景1:只想导入源模块的部分内容假设a.js是以如下方式导出的 // a.js export var num = 100 export var name = '王小明' 那么如果我们只需要a模块的num,就应该按下面的方式导入它 // b.js import {num} from

ES6中表达export default const是无效的

问题 如果您是ES6新手,可以参考一下本文--高手请移驾别往!请先看下面的图形描述: 也就是说,ES6中default后面是不允许跟const关键字的. 分析 上图中表达可以更换成另一种形式,就可以了,如下所示: const decreaseAction={type:'decrease'} export default decreaseAction 引用 1,https://segmentfault.com/q/10100000101260102,https://blog.csdn.net/zh

es6环境中,export与import使用方法

es6环境下,一个模块就是一个独立的文件.该文件内部的所有变量,外部无法获取.如果你希望外部能够读取模块内部的某个变量,就必须使用export关键字输出该变量. 初出茅庐 来个Demo(因为最近在学习Vue,所以请先构建好Vue项目)在src目录下,新建common文件夹,新建profile.js,现在我们在profile.js里面加入以下代码 export var firstName = 'Michael'; export var lastName = 'Jackson'; export va

解决es6中webstrom不支持import的一个简单方法

代码如下: export_one.js的代码如下: export function one() { console.log('one'); } export function two() { console.log('two'); } function three() { console.log('three'); } function four() { console.log('four'); } function five() { console.log('five'); } export

ES6 模块定义 export 与 import

一般导出 export math.js export function* getFibo() { let a = 1; let b = 1; yield a; yield b; while (true) { let next = a + b; a = b; b = next; yield next; } } export function add(a,b) { return a+b; } index.js 注意:如果导出模块没有default定义,那么 引用 导出模块的时候必须有 {} ,标红部

JavaScript ES6中export及export default的区别

相信很多人都使用过export.export default.import,然而它们到底有什么区别呢? 在JavaScript ES6中,export与export default均可用于导出常量.函数.文件.模块等,你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式,将其导入,以便能够对其进行使用,但在一个文件或模块中,export.import可以有多个,export default仅有一个. 具体使用: 1. //demo1.js export con

ES6中export与export default的区别

首先要知道export,import ,export default是什么 ES6模块主要有两个功能:export和importexport用于对外输出本模块(一个文件可以理解为一个模块)变量的接口import用于在一个模块中加载另一个含有export接口的模块.也就是说使用export命令定义了模块的对外接口以后,其他JS文件就可以通过import命令加载这个模块(文件).这几个都是ES6的语法. export与export default 1.export与export default均可用

ES6 中 export ,export default 区别

1.export与export default均可用于导出常量.函数.文件.模块等: 2.你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式,将其导入,以便能够对其进行使用: 3.在一个文件或模块中,export.import可以有多个,export default仅有一个: 4.通过export方式导出,在导入时要加{ },export default则不需要. export //a.js export const str = "hello es6&quo

ES6中比较实用的几个特性

1.Default Parameters(默认参数) in ES6 es6之前,定义默认参数的方法是在一个方法内部定义 1 var link = function (height, color, url) { 2 var height = height || 50; 3 var color = color || 'red'; 4 var url = url || 'http://azat.co'; 5 ... 6 } es6写法,简单粗暴了很多了 var link = function(heig