ES6模块化——import和export

╰+哭是因爲堅強的太久メ 2022-12-19 03:48 527阅读 0赞

### 一、import ###

**1、静态import导入的js文件，在严格模式下运行**

静态的`import` 语句用于导入由另一个模块导出的绑定。无论是否声明了 [`strict mode`][strict mode] ，导入的模块都运行在严格模式下。

**2、type=“module”的默认加载方式为defer**

在浏览器中，`import` 语句只能在声明了 `type="module"` 的 `script` 的标签中使用。type=“module”的加载方式**默认**使用 defer的加载方式。

关于defer 和 async ：defer和async 都是异步加载代码。但是defer要等到整个页面在内存中正常渲染结束（DOM 结构完全生成，以及其他脚本执行完成），才会执行。 async一旦下载完，渲染引擎就会中断渲染，执行这个脚本以后，再继续渲染。 一句话，defer是“渲染完再执行”，async是“下载完就执行”。另外，如果有多个defer脚本，会按照它们在页面出现的顺序加载，而多个async脚本是不能保证加载顺序的。

也**支持async加载**模块：

**3、关于CORS**

type="module" 默认不支持跨域，这一点儿与传统js或图片完全不一样。传统js或图片默认就是支持跨域的。如果你想 type="module" 支持跨域。需要在从服务器返回的header上显示的给予有效的 CORS声明。

Access-Control-Allow-Origin: *

**4、type=“module”类型的js文件，必须从域（服务器）中加载**

本地测试时，需要开启服务器，才可以进行测试，不然会报错。就像cookie一样，必须从服务器中加载才能生效。

比如：html中引入a.js

a.js

console.log(1);
    import {m} from "./b.js";
    console.log(m);

b.js

export let m = 100;

结果：

![20201105112738472.png][]

当我们通过node的http-server开启服务器，访问该html

（1）安装http-server

$ npm install http-server -g

（2）启动服务器

![20201105113139758.png][]

可以成功访问！

**5、关于导入**

（1）导入可以重命名

导出：

let obj = {
        name: "zhu",
        age: 24
    }
    export  {obj}

导入：导入时重命名

import {obj as o} from "./b.js";
    console.log(o);

（2）如果是默认的导出，导入时可以随便起变量名

导出：

let obj = {
        name: "zhu",
        age: 24
    }
    export  default obj;

导入：

import o from "./b.js";
    console.log(o);

**6、动态导入**

标准用法的import导入的模块是静态的，会使所有被导入的模块，在加载时就被编译（无法做到按需编译，降低首页加载速度）。有些场景中，你可能希望根据条件导入模块或者按需导入模块，这时你可以使用动态导入代替静态导入。下面的是你可能会需要动态导入的场景：

*  当静态导入的模块很明显的降低了代码的加载速度且被使用的可能性很低，或者并不需要马上使用它。
 *  当静态导入的模块很明显的占用了大量系统内存且被使用的可能性很低。
 *  当被导入的模块，在加载时并不存在，需要异步获取
 *  当导入模块的说明符，需要动态构建。（静态导入只能使用静态说明符）
 *  当被导入的模块有副作用（这里说的副作用，可以理解为模块中会直接运行的代码），这些副作用只有在触发了某些条件才被需要时。（原则上来说，模块不能有副作用，但是很多时候，你无法控制你所依赖的模块的内容）

请不要滥用动态导入（只有在必要情况下采用）

关键字import可以像调用函数一样来动态的导入模块。以这种方式调用，将返回一个 `promise`。所以可以调用then方法，then的处理函数接收一个Module对象，该对象内包括了导入模块的数据

导出：

let obj = {
        name: "zhu",
        age: 24
    }
    let arr = [10, 20, 30];
    export {obj, arr};

动态导入：

import('./b.js').then(module => console.log(module));

打印Module对象：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70][]

**这种使用方式也支持 `await` 关键字。等总结了async和await后，此处还需研究。。。**

**7、导入时将所有导出接口注入到模块对象上**

导出：对外暴露了三个接口

let obj = {
        name: "zhu",
        age: 24
    }
    let arr = [10, 20, 30];
    let m = 1;
    export {obj, arr, m};

导入：

import * as module from "./b.js";
    console.log(module)

打印结果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70 1][]

### 二、export ###

在创建模块时，`export` 语句用于从模块中导出实时绑定的函数、对象或原始值，以便其他程序可以通过 [`import`][import] 语句使用它们。

被导出的绑定值依然可以在本地进行修改。在使用import进行导入时，这些绑定值只能被导入模块所读取，但在export导出模块中对这些绑定值进行修改，所修改的值也会实时地更新。

无论您是否声明，导出的模块都处于[`严格模式`][strict mode]。

export语句不能用在嵌入式脚本中。

**有两种不同的导出方式，命名导出和默认导出。你能够在每一个模块中定义多个命名导出，但是只允许有一个默认导出。**

**（1）导出单个特性**

导出：var类型的特性值（也可以是let、const类型）

export var a = 1, b = 2, c = 3;

导入：

import {a,b,c}  from "./b.js";
    console.log(a,b,c);

导出：函数类型

export function func(){
        console.log("111");
    }

导入

import {func}  from "./b.js";
    func();

**（2）导出列表**

导出：一个列表集合的形式导出

let m = 100;
    let n = 10;
    let arr = [1,2,3];
    export {m,n,arr};

导入：

import {m,n,arr}  from "./b.js";
    console.log(m,n,arr);

**（3）导出时重命名**

导出：

let m = 100;
    let n = 10;
    let arr = [1,2,3];
    export {m as x, n as y, arr as z};

导入：

import {x, y, z}  from "./b.js";
    console.log(x, y, z);

** （4）导出对象和数组**

导出：

let obj = {
        name: "zhu",
        age: 24
    }
    let arr = [10,20,30];
    export {obj, arr};

导入：

import {obj, arr}  from "./b.js";
    console.log(obj, arr);

** （5）解构导出**

导出：导出一个解构赋值

let obj = {
        name: "zhu",
        age: 24
    }
    export let {name, age} = obj;

导入：

import {name, age}  from "./b.js";
    console.log(name ,age);

**（6）解构导出并重命名**

解构导出时，重命名

let obj = {
        name: "zhu",
        age: 24
    }
    export let {name:m, age:n} = obj;

导入：

import {m, n}  from "./b.js";
    console.log(m, n);

** （7）默认导出**

导出：默认导出，需要使用default关键字；不需要\{\}包裹

let obj = {
        name: "zhu",
        age: 24
    }
    export default obj; // export  {obj as default};

导入：默认导入，也不需要\{\}包裹

import obj  from "./b.js";
    console.log(obj);

**（8）导出模块集合**

文件C中导出：

let arr = [1,2,3];
    export {arr};

文件B中导出：

let obj = {
        name: "zhu",
        age: 24
    }
    export  {obj};
    export  {arr} from "./c.js"

文件A中导入：

import {obj, arr}  from "./b.js";
    console.log(obj, arr);

**（9）同一个文件可以多次导出export不同的内容；同一个文件可以import导入多个js文件**

文件C导出：

let arr = [1,2,3];
    export {arr};

文件B导出：

let obj = {
        name: "zhu",
        age: 24
    }
    let m = 10;
    export  {obj};
    export  {m};

文件A导入：

import {obj, m}  from "./b.js";
    import {arr} from './c.js';
    console.log(obj, m, arr);

### 参考文章： ###

[在浏览器中使用ES6的模块功能 import 及 export][ES6_ import _ export]

[https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/import][import]

[https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/export][https_developer.mozilla.org_zh-CN_docs_Web_JavaScript_Reference_Statements_export]

[strict mode]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Strict_mode
[20201105112738472.png]: /images/20221120/9c8c491acff748fba0feeffabdfa6708.png
[20201105113139758.png]: /images/20221120/bb181fff90b24899bcc694128282daf4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201105143441681.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201105145001538.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw,size_16,color_FFFFFF,t_70
[import]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/import
[ES6_ import _ export]: https://segmentfault.com/a/1190000014342718
[https_developer.mozilla.org_zh-CN_docs_Web_JavaScript_Reference_Statements_export]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/export