当前位置:编程学习 > > 正文

js的模块模式设计(如何理解JavaScript模块化)

时间:2022-04-01 01:05:55类别:编程学习

js的模块模式设计

如何理解JavaScript模块化

1. 浏览器支持

使用JavaScript 模块依赖于 import 和 export,import 和 export 的浏览器支持程度是最新的浏览器版本都是支持的,但 IE 和旧版本的浏览器不支持,因此若想兼容 IE 和旧版本的浏览器基本就不能使用了。

export 和 import 是成对出现,配合工作的

JS模块化是各种JS框架学习的前提基础

import 和 export 语句用于将一个模块里实现某些功能的变量或函数导入/导出,也可导入/导出类

2. export 导出模块

默认导出

一个模块只能有一个默认导出,默认导出的变量只能有一个,且不能有大括号{}

语法为export default 变量名

model.js

  • function Test1(){
        console.log("这是默认导出")
    }
    function Test2(){
        console.log('这是命名导出')
    }
    export default Test1
    
  • 批量导出

    语法为export {变量名,变量名……}

  • function Test1(){
        console.log("这是默认导出")
    }
    function Test2(){
        console.log('这是命名导出')
    }
    export {Test1, Test2}
    
  • 3. import 导入模块

    默认导入

    main.js

  • import Test1 from "./model.js"
    Test1()
    
  • 默认导入的重命名

    main.js

  • import x from "./model.js"//x就是默认导出的Test1
    x()
    
  • 批量导入

    main.js

  • import {Test1, Test2} from "./model.js"
    Test1();
    Test2();
    
  • 批量导入的重命名

    as关键字跟一个新名字实现重命名

    main.js

  • import {Test1 as x1, Test2 as x2} from "./model.js"
    x1();
    x2();
    
  • 也可在导出时用as关键字重命名

    model.js

  • function Test1(){
        console.log("这是默认导出")
    }
    function Test2(){
        console.log('这是命名导出')
    }
    export {Test1 as x1, Test2 as x2}
    
  • 应用模块

    html

  • <script src="main.js"></script>
    
  • 4. 创建模块对象

    使用对象,在as关键字重命名的基础上进一步简单化

  • import * as Model from "./model.js"
    Model.x1();
    Model.x2();
    
  • 5. export import 中转站

    有时候可以将多个子模块组合到一个父模块中,再由父模块决定导出哪个,这个父模块文件就像是个组合各个模块的中转站

    语法为export {变量名} from 模块路径

    当前目录结构结构

    src

        index.html

        main.js

        redirection.js

        models

            model.js

            model2.js

    model.js

  • function Test1(){
        console.log("这是子模块1")
    }
    export {Test1}
    
  • model2.js

  • function Test2(){
        console.log('这是子模块2')
    }
    export {Test2}
    
  • redirection.js

  • export {Test1} from "./models/model.js"
    export {Test2} from "./models/model2.js"
    
  • main.js

  • import * as Model from "./redirection.js"
    Model.Test1()
    Model.Test2()
    
  • html

  • <script src="./main.js"></script>
    
  • 6. 动态加载模块

    动态加载模块用于在导入模块时不必预先加载所有模块,可以在需要时使用 import() 作为函数调用,将其参数传递给模块的路径,它返回一个 promise,使用 Promise 对象对模块加载结果操作。

    语法为import(动态加载的模块路径)

    dynamic.js

  • function TestDy(){
        console.log("这是动态模块")
    }
    export default TestDy
    
  • main.js

  • document.querySelector('.load').onclick = function(){
        import('./dynamic.js').then((Model)=>{
            Model.default()
        })
    }
    
  • 以上就是如何理解JavaScript模块化的详细内容,更多关于JavaScript模块化的资料请关注开心学习网其它相关文章!

    标签:
    上一篇下一篇

    猜您喜欢

    热门推荐