ES6模块化导入与导出的方式

让我为大家介绍一下导入与导出的所以方式吧!
想必有的小伙伴使用了导入与导出,但没有作用,可能是如下原因:

// 没有添加 type="module"
<script type="module">script>

严格模式use strict;
module模式
export导出
import导入
as不同模块导出接口名称命名重复, 使用 as 重新定义变量名。
1.导出的函数声明与类声明必须要有名称(匿名函数)(export default 命令另外考虑)。
2.不仅能导出声明还能导出引用(例如函数)。
3.export 命令可以出现在模块的任何位置
4.import 命令会提升到整个模块的头部,首先执行。
5.建议使用大括号指定所要输出的一组变量写在文档尾部,明确导出的接口。
6.函数与类都需要有对应的名称,导出文档尾部也避免了无对应名称。
7.export 命令导出的接口名称,须和模块内部的变量有一一对应关系。
8.导入的变量名,须和导出的接口名称相同,即顺序可以不一致。
9.import只读属性:不允许在加载模块的脚本里面, 改写接口的引用指向,即可以改写 import 变量类型为对象的属性值, 不能改写 import 变量类型为基本类型的值。
10.单例模式:多次重复执行同一句 import 语句,那么只会执行一次,而不会执行多次。 import 同一模块,声明不同接口引用,会声明对应变量,但只执行一次 import 。
11.import静态执行特性:import 是静态执行,所以不能使用表达式和变量。

export导出

文件后缀为js

1.export let a = 1

export let a = 1

2.export {userName,age}

let a  = 1
let b  = 2
export {a,b}

3.export {userName as names}

let a  = 1
export {a as b}

4.export default userName

let a  = 1
export default a

import导入

1.import {userName,age} from “xxx.js”

    import {a,b} from "./index.js"

2.import {userName as aaa} from “xxx.js”

    import {a as b} from "./index.js"

3.import abc from "xxx.js

    import a from "./index.js" 

4.import * as abc from "xxx.js

    import * as a from "./index.js" 

感谢大家的阅读,如有不对的地方,可以向我提出,感谢大家!

你可能感兴趣的:(es6,前端,javascript)