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

摘要:
导出命令用于指定模块的外部接口,导入命令用于输入其他模块提供的功能。以下是一个使用export命令输出变量的JS文件。注意:可以同时使用exportdefault和其他形式的导出。导入时最好区别对待exportdefaulta=1;exportfunctionb(){};import,{b}来自模块路径;//其中a对应默认值。4.类似于require模块引入的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 1var 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()方法可以实现按需导入,条件导入、动态的模块路径(即路径中含有相关的变量)

免责声明:文章转载自《ES6中的export以及import的使用多样性》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇jqgrid+bootstrap样式实践ABBYY PDF Transformer+安装教程下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

Lighttpd 搭建 Web 服务器

背景:      公司项目用到了lighttpd,由于自己没有接触过,所以做下记录。 简介:      Lighttpd 是一个德国人领导的开源Web服务器软件,其根本的目的是提供一个专门针对高性能网站,安全、快速、兼容性好并且灵活的web server环境。具有非常低的内存开销,cpu占用率低,效能好,以及丰富的模块等特点。支持FastCGI, CGI,...

[NS2]TCL语言基本语法

(来自:《NS2仿真实验-多媒体和无线网络通信》) 1. 变量(Variable)和变量替换(Variable Substitution)   tcl变量是在第一次使用set的指令来指派变量的值时所产生的。可以使用unset来取消这个变量。当取用或者改变变量值时,只要在变量名称前加上一个“$”,就可以取用或改变变量内的值。指令eval用于执行一个tcl s...

linux shell 字符串操作详解 (长度,读取,替换,截取,连接,对比,删除,位置 )

linux shell 字符串操作详解 (长度,读取,替换,截取,连接,对比,删除,位置 ) 1.Linux shell 截取字符变量的前8位 实现方法有如下几种: expr substr “$a” 1 8 echo $a|awk ‘{print substr(,1,8)}’ echo $a|cut -c1-8 echo $ expr $a : ‘(....

Illegal modifier for parameter *** , only final is permitted”

大家好,我想在main函数中定义一个public变量,系统报错说“Illegal modifier for parameter chatRoom, only final is permitted”,如果把public去掉,编译成功。可是就算去掉public,我的变量也不是final啊,因为我之后还改了它。为什么系统说它必须是final呢? public放在...

[Unity热更新]tolua# & LuaFramework(一):基础

一、tolua# c#调用lua:LuaState[变量名/函数名] 1.LuaState a.执行lua代码段 DoString(string) DoFile(.lua文件名) Require(.lua文件名(但没有.lua后缀)) b.获取lua函数或者表 LuaFunction func = lua.GetFunction(函数名);      ...

偏最小二乘法

偏最小二乘法是一种新型的多元统计数据分析方法,它于1983年由伍德(S.Wold)和阿巴诺(C.Albano)等人首提示来的,偏最小二乘法有机的结合起来了,在一个算法下,可以同时实现回归建模(多元线性回归)、数据结构简化(主成分分析)以及两组变量之间的相关性分析(典型相关分析)。这是多元统计数据分析中的一个飞跃。 偏最小二乘法在统计应用中的重要性体现在以...