import（导入）和export（导出）

使用export和import实现模块化：
export用于对外输出本模块变量的接口（一个文件可以理解为一个模块）。
import用于在一个模块中加载另一个含有export接口的模块。

ES6的模块化的基本规则或特点：
现在ES6自带了模块化，也是JS第一次支持module，在很久以后，我们可以直接作用import和export在浏览器中导入和导出各个模块了，一个js文件代表一个js模块；
1：每一个模块只加载一次，每一个JS只执行一次，如果下次再去加载同目录下同文件，直接从内存中读取。一个模块就是一个单例，或者说就是一个对象；
2：每一个模块内声明的变量都是局部变量，不会污染全局作用域；
3：模块内部的变量或者函数可以通过export导出；
4：一个模块可以导入别的模块

也就是说使用export命令定义了模块的对外接口以后，其他JS文件就可以通过import命令加载这个模块（文件）。如下图(假设a和b文件在同一目录下)
如下有两个js脚本文件，a.js和b.js
a.js代码如下：

var sex="boy";
var echo=function(value){console.log(value)
}
export {sex,echo}
//通过向大括号中添加sex，echo变量并且export输出，就可以将对应变量值以sex、echo变量标识符形式暴露给其他文件而被读取到
//不能写成export sex这样的方式，如果这样就相当于export "boy",外部文件就获取不到该文件的内部变量sex的值，因为没有对外输出变量接口,只是输出的字符串。

b.js代码如下：

//通过import获取a.js文件的内部变量，{}括号内的变量来自于a.js文件export出的变量标识符。
import {sex,echo} from "./a.js"
console.log(sex)   // boy
echo(sex) // boy

例子2：

//lib.js
//导出常量
export const sqrt = Math.sqrt;
//导出函数
export function square(x) {return x * x;
}
//导出函数
export function diag(x, y) {return sqrt(square(x) + square(y));
}
//main.js
import { square, diag } from './lib';
console.log(square(11)); // 121
console.log(diag(4, 3)); // 5

例子3：
下面列出几种import和export的基本语法。
第一种导出的方式：
在lib.js文件中，使用 export{接口} 导出接口，大括号中的接口名字为上面定义的变量， import和export是对应的；

//lib.js 文件
let bar = "stringBar";
let foo = "stringFoo";
let fn0 = function() {console.log("fn0");
};
let fn1 = function() {console.log("fn1");
};
export{ bar , foo, fn0, fn1}
//main.js文件
import {bar,foo, fn0, fn1} from "./lib";
console.log(bar+"_"+foo);
fn0();
fn1();

第二种导出的方式：
在export接口的时候，我们可以使用 XX as YY，把导出的接口名字改了，比如： closureFn as sayingFn，把这些接口名字改成不看文档就知道干什么的：

//lib.js文件
let fn0 = function() {console.log("fn0");
};
let obj0 = {}
export { fn0 as foo, obj0 as bar};//main.js文件
import {foo, bar} from "./lib";
foo();
console.log(bar);

第三种导出的方式：
这种方式是直接在export的地方定义导出的函数，或者变量：

//lib.js文件
export let foo = ()=> {console.log("fnFoo") ;return "foo"},bar = "stringBar";
//main.js文件
import {foo, bar} from "./lib";
console.log(foo());
console.log(bar);

第四种导出的方式：
这种导出的方式不需要知道变量的名字，相当于是匿名的，直接把开发的接口给export；
如果一个js模块文件就只有一个功能，那么就可以使用export default导出；

//lib.js
export default "string";
//main.js
import defaultString from "./lib";
console.log(defaultString);

第五种导出方式：
export也能默认导出函数，在import的时候，名字随便写，因为每一个模块的默认接口就一个：

//lib.js
let fn = () => "string";
export {fn as default};
//main.js
import defaultFn from "./lib";
console.log(defaultFn());

第六种导出方式：
使用通配符* ,重新导出其他模块的接口 (其实就是转载文章，然后不注明出处啦);

//lib.js
export * from "./other";
//如果只想导出部分接口， 只要把接口名字列出来
//export {foo,fnFoo} from "./other";
//other.js
export let foo = "stringFoo", fnFoo = function() {console.log("fnFoo")};
//main.js
import {foo, fnFoo} from "./lib";
console.log(foo);
console.log(fnFoo());

其他：ES6的import和export提供相当多导入以及导出的语法；
在import的时候可以使用通配符*导入外部的模块：

import * as obj from "./lib";
console.log(obj);

ES6导入的模块都是属于引用：
每一个导入的js模块都是活的，每一次访问该模块的变量或者函数都是最新的

//lib.js
export let counter = 3;
export function incCounter() {counter++;
}
export function setCounter(value) {counter = value;
}
//main.js
import { counter, incCounter ,setCounter} from './lib';
// The imported value `counter` is live
console.log(counter); // 3
incCounter();
console.log(counter); // 4
setCounter(0);
console.log(counter); // 0
//在main.js中， counter一直指向lib.js中的局部变量counter， 按照JS的尿性， 像数字或者字符串类型或者布尔值的原始值要被复制， 而不是赋址；

export default
前面的例子可以看出，b.js使用import命令的时候，用户需要知道a.js所暴露出的变量标识符，否则无法加载。可以使用export default命令，为模块指定默认输出，这样就不需要知道所要加载模块的变量名。
例如：
a.js代码如下：

var sex="boy";
export default sex（sex不能加大括号）
//原本直接export sex外部是无法识别的，加上default就可以了.但是一个文件内最多只能有一个export default。
//其实此处相当于为sex变量值"boy"起了一个系统默认的变量名default，自然default只能有一个值，所以一个文件内不能有多个export default。

b.js代码如下：

//本质上，a.js文件的export default输出一个叫做default的变量，然后系统允许你为它取任意名字。所以可以为import的模块起任何变量名，且不需要用大括号包含
import any from "./a.js"
import any12 from "./a.js"
console.log(any,any12)   // boy,boy

import（导入）和export（导出）相关推荐

Docker - 本地镜像的导出、导入（export、import、save、load）
Docker - 本地镜像的导出.导入(export.import.save.load)
docker 镜像导入load、导出save以及重命名
docker 导入导出操作 save 保存(导出)镜像 # 把镜像打包成 .tar # -o 要保存路径.tar # > 要保存路径.tar # docker save 镜像id > /存 ...
java使用EasyExcel实现导入导出几种方式（导入、模板导出、和不需要模板的导出）
java通过EasyExcel实现导入导出(导入.模板导出.和不需要模板的导出) 此文章只是涉及到简单的导入导出通过实体模板导入数据无实体模板导入数据导出数据通过模板导出数据使用到的mave ...
python怎么导入时间-Python的import导入与时间
一.模块与包模块,在Python可理解为对应于一个文件.在创建了一个脚本文件后,定义了某些函数和变量.你在其他需要这些功能的文件中,导入这模块,就可重用这些函数和变量.一般用module_name. ...
import time python_Python的import导入与时间
一.模块与包模块,在Python可理解为对应于一个文件.在创建了一个脚本文件后,定义了某些函数和变量.你在其他需要这些功能的文件中,导入这模块,就可重用这些函数和变量.一般用module_name. ...
Excel导入poi、导出poi
Excel导入poi.导出poi 依赖Jar包  <dependency><groupId>org.apache.poi&l ...
chrome谷歌浏览器导入密码和导出密码的方法
chrome谷歌浏览器导入密码和导出密码的方法导出账号密码导入账号密码有时候大家遇到换了新电脑,或者公司需要调整电脑,或者说需要导入别人电脑上谷歌浏览器存的账号密码,发现可以导出密码,但是没有导 ...
数据导不进oracle数据库,学习笔记:Oracle逻辑导出/导入数据逻辑导出时跳过指定表不进行导出...
天萃荷净 Oracle数据库逻辑exp导出时,跳过指定某些表,对其表中数据不进行导出有一个需求,某个用户有很多张表,但是只能使用exp导出,而且想跳过其中某几张表,其他对象包括依赖关系都需要.针对这 ...
python 第三方包自动导入_7行代码，彻底告别python第三方包import导入问题！
最近有不少小伙伴咨询关于pyton第三方包导入的问题,今天我们就来聊聊第三方包导入那些事. 随着对python学习的渐入臻境,越来越多的小伙伴们开始导入自己所需的第三方包,实现各种各样的功能.但是,他 ...
Python中import导入上一级目录模块及循环import问题的解决
Python中import导入上一级目录模块及循环import问题的解决参考文章: (1)Python中import导入上一级目录模块及循环import问题的解决 (2)https://www.cn ...

import（导入）和export（导出）

import（导入）和export（导出）相关推荐

最新文章

热门文章