前言

最近在学Vue，看到过去自己web项目杂乱的一堆js文件，萌生了分模块的想法，主要是把常用的函数独立出来，或者多个功能组装成对象export出去（类似java中import一个类）

静态导入

HTML写法

HTML内部加上，引入了test.js这个脚本，这个脚本会引用别的模块的函数。注意type=“module”

<script type="module" src='test.js'></script>

JS写法

test.js 脚本

// 导入外部模块的方法，要写全文件名，即加上“.js”
// ./module.js是相对于test.js的位置，它们在同级目录下
// 导出了函数和默认导出对象，默认导出对象重命名为module1
import {fun1,default as module1} from "./module.js";

$(function (){
    // 运行函数
    fun1();
    // 运行默认导出对象的函数
    module1.getFirstName();
})

module.js 模块

模块一般不写业务逻辑，一般定义函数和对象

// 暴露一个函数出去
export function fun1() {
    console.log(123)
}

// 当然可以暴露一个对象，这里设置为了默认导出
export default {
    myArray: [
        {
            name: "cm1",
            age: 15
        },
        {
            name: "cm2",
            age: 17
        }, {
            name: "cm3",
            age: 18
        }
    ],
    getFirstName: function () {
        console.log(this.myArray[0].name)
    }
}

动态导入

HTML写法

静态的 import 导入无法做到按需编译，从而降低首页加载速度，而需要动态的引入解决这些问题。此时可以不写type=“module”

<script src='test.js'></script>

JS写法

test.js 脚本

动态导入的import()函数返回的是一个 promise。

$(function (){
    import('./module.js').then(module => {
        console.log(module)
        let myDefaut = module.default // 获取默认到处对象
        let fun1 = module.fun1 // 获取导出的函数
        fun1() // 运行函数
        myDefaut.getFirstName() // 运行默认导出对象的函数
    })
})

module.js 模块

模块和静态导入一样，就不重复展示了