es6模块化

Posted 2021-10-20 change-oneself

在es6出来之前，javascript还不支持模块化，想要实现模块化，只能用requrie.js（国外）和seajs（国内）之类相关的库。

随着大前端的工作越来越繁杂，系统越来越庞大，更好的分工使其模块化就显得很重要。

在复习之前有一个很重要的，就是目前没有浏览器支持ES6的module模块，如果直接写会报错的。

对于ES6的模块化，主要有两个属性，一个是export（导出模块），一个是import（导入模块）；

基础用法，假设有两个模块，a.js和b.js

//---a.js文件---

//导出变量：name
export var name = "lzhe"; 

export就是暴露一个变量，也可以是对象或者是方法，供其他调用的模块使用。如果想要用这个属性也很简单。

//---b.js文件---

//导入 模块B的属性 name
import { name } from "./a.js";
console.log(name);    

能正常打印，说明正确引用了a.js文件中暴露的变量或者方法。

那么如果有多个变量或者是方法想要暴露的话，可以这样写：

    //变量name
    var name = "lzhe";
    //变量age
    var age  = 25;
    //方法 result
    var result = function(){
        console.log("say hello");
    }
    
    //这里是想要导出的模块
    export {name,age,result}

这里暴露了多个变量和方法，想要引用这些模块的变量和方法的话，需要这样接收，顺序无所谓

    //---b.js文件---

    //导入 模块a的变量和方法
    import { name,age,result } from "./a.js";

每个模块，支持导出没有名字的变量（export default）

    export default function(){
        //todosomething...
    }

那我们在导入的时候，可以起任意名字，就不怕对应不上了。注意：这里不用大括号来引用

    //想起什么名字都可以
    import fangfeiziwo from "./a.js";

    fangfeiziwo();

如果导出的时候起了一个名字，而导入的时候想给模块重新命个名字（这里as可以重命名）

 import { name as rename } from "./a.js";

还可以整体导入

    //使用*整体导入
    import * as obj from "./a.js";

    console.log(obj.name);
    console.log(obj.age);
    obj.result();

以上，几个知识点，export和import实现导入导出，支持批量导出，默认导出（export default），使用*整体导入，as重命名等。