标签搜索

目 录CONTENT

文章目录

传统前端项目的js脚本分模块写法

陈铭
2022-12-30 / 0 评论 / 0 点赞 / 146 阅读 / 490 字 / 正在检测是否收录...

前言

最近在学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 模块

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

0

评论区