js中的module模块化_多个esm 模块js有多个导出怎么合并-CSDN博客

本文链接：https://blog.csdn.net/qq_47915690/article/details/121871044

js中的module模块化

模块可以把多个功能隔离成独立的文件，减少代码的耦合度
模块可以开放部分功能供外部使用
模块通过导入导出的形式，使代码看着更规整

导出

let title = "导出主题";
function show(){
    console.log("我是导出的方法"+`这是我的${title}`);
};

export {title,show};

导入

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script type="module">//这里type必须加这type script标签才能识别
        import {title,show} from "./1.1.js";
        console.log(title);
        show();
    </script>
</body>
</html>

模块的延迟和解析

    <script type="module">//这里type必须加这type script标签才能识别
        console.log(this);//这里会后输出因为有延迟，并且输出的undefined因为模块功能里面默认是使用严格模式的
    </script>
    <script>
        console.log(this);//这里会先输出因为使用了模块会最后才加载有延迟，因为它往往会依赖其它模块所以加载完之后再加载
    </script>

作用域在模块中的体现

    <script type="module">
        var site = 1;
    </script>
    <script>
        var site = 2;
    </script>
    <script type="module">
        console.log(site);//在这里不能输出site因为模块都是在公共作用域里面有块单独的作用域,但是会输出2
    </script>

预解析(通过预解析正确处理多个 js 之间的相互引用关系，防止未引入先使用导致错误),如果有请求后台操作防止多次引用多次请求

模块的具名导出与导入

class Lessons{
    constructor(){
        this.data = [];
    };
    init(){
        this.data = [{name:'js'},{name:"css"}];
    };
    set(){
        this.data[0].name = "html"
    };
    static show(){
        console.log("我是Lessons的show方法");
    };
};
let ls = new Lessons();
ls.init();

export class Lessons2{//可以只导出某个具体的类或者方法
    static show(){
        console.log("我是Lessons2的show方法");
    };
};
export {Lessons}//也可以在这里进行导出

模块的批量导入

class Lessons{
    constructor(){
        this.data = [];
    };
    init(){
        this.data = [{name:'js'},{name:"css"}];
    };
    set(){
        this.data[0].name = "html"
    };
    static show(){
        console.log("我是Lessons的show方法");
    };
};
let ls = new Lessons();
ls.init();

class Lessons2{
    static show(){
        console.log("我是Lessons2的show方法");
    };
};
export {Lessons,Lessons2}

导入

    <script type="module">
        import * as api from "./1.1.js";
        api.Lessons.show();
        api.Lessons2.show();
    </script>

批量导入在打包的时候会将没有用到的模块也一起打包，具名导入和导出则不会，具名导入和导出在打包的时候会将用到的模块进行打包不会将没用的模块也打包

模块别名使用

import{Lessons as l1,Lessons2 as l2} from "./1.1.js";//这里就是用的别名 ，导出时也可这样使用
l1.show();
l2.show();

default默认导出

export default class Lessons{//在这里进行默认导出，默认导出的情况是一个模块只需导出一个
    constructor(){
        this.data = [];
    };
    init(){
        this.data = [{name:'js'},{name:"css"}];
    };
    set(){
        this.data[0].name = "html"
    };
    static show(){
        console.log("我是Lessons的show方法");
    };
};

    <script type="module">
        import Lessons from "./1.1.js";//这里进行默认导出的导入 此时该变量可以是任意名字
    </script>

混合的导入导出

export default class Lessons{//在这里进行默认导出，默认导出的情况是一个模块只需导出一个
    constructor(){
        this.data = [];
    };
    init(){
        this.data = [{name:'js'},{name:"css"}];
    };
    set(){
        this.data[0].name = "html"
    };
    static show(){
        console.log("我是Lessons的show方法");
    };
};
export class Lessons2{//可以只导出某个具体的类或者方法
    static show(){
        console.log("我是Lessons2的show方法");
    };
};

        import Lessons,{Lessons2} from "./1.1.js";//这里进行默认导出的导入 此时该变量可以是任意名字
        Lessons.show();
        Lessons2.show();

模块的合并导出

1.1.js

export default class Lessons{//在这里进行默认导出，默认导出的情况是一个模块只需导出一个
    constructor(){
        this.data = [];
    };
    init(){
        this.data = [{name:'js'},{name:"css"}];
    };
    set(){
        this.data[0].name = "html"
    };
    static show(){
        console.log("我是Lessons的show方法");
    };
};
export class Lessons2{//可以只导出某个具体的类或者方法
    static show(){
        console.log("我是Lessons2的show方法");
    };
};

1.2.js

let site = "www.baidu.com";
let name = "勒布朗";
export {site,name};

1.index.js

import * as js11 from "./1.1.js";
import * as js12 from "./1.2.js";
export {js11,js12}

module.html

        import * as api from "./1.indiex.js";
        api.js11.default.show();

按需动态加载模块

        console.log(import("./1.1.js"));//此时就是动态按需加载会返回一个promise对象
        //静态引入使用import {name} from "./1.js"使用这种形式是必须放在js顶层的不能放在花括号或者一些函数里面的
        import("./1.1.js").then(({Lessons,Lessons2}) => {
            Lessons.show()
        });