ES6中的export以及import的使用多样性
模块功能主要由两个命令构成:export
和import
。export
命令用于规定模块的对外接口,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的形式进行调用,
//该形式和
var aaa={a:a,b:b,c:c}
export default aaa
import ddd from modulePath
的形式是类似的,相当于导出时对对象进行命名为default,导入的时候重命名
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是发生在执行阶段,同步加载的。
注意:在 export default 和其他形式的export是可以同时使用的,导入的时候区别对待就好
export default a=1; export function b(){}; import a,{b} from modulePath;//其中a对应的是default
四、类似require模块引入的方法
import()方法可以实现按需导入,条件导入、动态的模块路径(即路径中含有相关的变量)