JavaScript es6模块化

目录

之前看网上很多对es6的模块化这块讲的不够明确，于是乎自己总结一篇记录下来。

一. export导出

1.导出变量/常量

export let a = 10;
export const b = 15;

2.集中导出和as关键字

let a = 10;
const b = 15;
function show(){
    console.log("aa");
}

export {
    a,
    b as c,
    show
}

上面的例子中可以将导出的内容通过as进行更名（import 里也可以使用as）

3.export default

那么export和export default的区别是：前者导出的东西需要在导入的时候加{}，而后者则不需要：

export default let a = 10;
const b = 15;
function show(){
    console.log("aa");
}

export{
    b,
    show
}

//那么import a的时候就不需要加{}、
// import a,{b,show} from './modules/1.js';

二. import导入

特点

1. import可以是相对路径，也可以是绝对路径
2. import模块只会导入一次，无论你引入多少次
3. import './modules/1.js'; 如果这么用，相当于引入文件
4. 有提升效果，import会自动提升到顶部，首先执行
5. 导出去模块内容，如果里面有定时器更改，外面也会改动

注意：引入的时候前面要加上(./)当前路径，不加就会报错

导入方式

1.导入一个变量

import {a} from "./demo.js";

2.导入多个

import {a,b,c} from "./demo.js";

3.as关键字

import {a as aa,b as bb,c } from "./demo.js";

4.使用* as 导出整个module

import * as modTwo from "./demo.js";
//可以使用 modTwo.aa 使用变量

5.导入default

//导入default不需要{},别的需要加
import aa,{c,d} from "./demo.js";

动态导入模块

好处

1. 按需加载

2. 可以写if中

3. 路径可以动态

使用示例

在JavaScript中还可以通过import() 进行动态导入模块。

import('https://code.jquery.com/jquery-3.3.1.js').then(res =>{
    $(function(){
        $('body').css({
            background:'gray'
        })
    })
})