ES_Modules执行过程以及导入导出

先说下执行过程

个人理解export内部实现就是

先定义一个变量     const name = 'lsh'

export {}相当于拷贝了name的地址,然后在模块的内部做了一个操作,并且是实时绑定,如果name改变了,会删除之前的,然后重新const

const name = name 

之后我们import的时候,实际上导入的就是模块内部const定义的name

import {name}

再说下导出的几种方法

1.

export const name = "lsh";

2.

export {
  name
}

记住，{}大括号, 但是不是一个对象，是放置要导出的变量的引用列表

3.

export {
name as fName
}

{} 导出时, 可以给变量起别名

4.

export default function lsh() {
  console.log("哈哈哈");
}

一个模块，只能有一个default

再说下导入的几种方法

1.

扫描二维码关注公众号，回复： 12443328 查看本文章

import { name } from '';

2.

import { name as lName } from '';

3.

import * as foo from '';

4.

import lsh from '';

最后还有一个export和import结合使用的

export {name} from '';
import { name } from '';

为什么要这样做呢?如果我们在开发和封装一个功能库的时候,通常我们希望将暴露的所有接口放到一个文件里，这样方便指定统一的接口规范,也方便阅读,这个时候，就要结合使用