ES模块化的导入和导出

3月

本文最后更新于2020年03月22日，已经过了1762天没有更新，若内容或图片失效，请留言反馈

什么是模块化-->点击这里

ES6的导入和导出

要使用模块化在引入js文件的时候需要将type的值设为module

text 代码:

<script src="a.js" type="module" charset="utf-8"></script>
<script src="b.js" type="module" charset="utf-8"></script>

export的使用

export导出变量

text 代码:

export let flag = true;
export let count = 0;

另一种写法

text 代码:

var flag = true;
let conut = 0;
export{
    flag,
    sum
}

export导出函数或类

text 代码:

 //导出函数
 export function sum(num1,num2){
     return num1+num2
 }

//导出类
 export clss person{
    constructor(name,age){
         this.name = name;
         this,age = age;
     }
 }

另一种方式

text 代码:

 //函数
 function sum(num1,num2){
     return num1+num2
 }

//类
 clss person{
    constructor(name,age){
         this.name = name;
         this,age = age;
     }
 }

 //导出
 export {sum,person}

export default

在某些情况下，一个模块中包含某个功能，我们并不希望给这个功能命名，而是让导入者自己来命名

这时候就需要使用export default

text 代码:

    //a.js
    export default function(){
        console.log("default function");
    }

我们使用export default导出了一个函数，但没有给它命名。
在其他模块中导入时我们可以自定义这个函数的名字

text 代码:

//main.js
import myFun from "a.js";
myFun();

注意export default在一个模块中只允许存在一个

import的使用

我们使用export导出的模块对外提供的接口，之后用import命令来加载对应的这个模块

text 代码:

//a.js导出
export{
    flag,
    sum
}

//b.js导入
import {flag,sum} from "a.js";

通过*可以将模块中所有export变量导入

使用时要给*起个别名

text 代码:

//a.js导出
export{
    flag,
    sum
}

//b.js导入
import * as info from "a.js";
//使用
console.log(info.flag);

声明：本文由 yuan（博主）原创，依据 CC-BY-NC-SA 4.0 许可协议授权，转载请注明出处。

还没有人喜爱这篇文章呢