JS高级—15—模块化(CommonJS和ESModule)

互联网 2022/5/21 23:06:06

一、模块化概述 模块化主要是让每个木块有自己的作用域,即使定义为var也不会影响其他模块,因为只在自己作用域有效; 然后模块化也可以暴露接口,引入接口;<!DOCTYPE html> <html lang="en"> <head><title>Document</title> &…

一、模块化概述

 

 

模块化主要是让每个木块有自己的作用域,即使定义为var也不会影响其他模块,因为只在自己作用域有效;

然后模块化也可以暴露接口,引入接口;

<!DOCTYPE html>
<html lang="en">
<head>

    <title>Document</title>
</head>
<body>
    <script src='a.js'></script>
    <script src='b.js'></script>
    <script src='c.js'></script>

    
</body>
</html>

这种不是模块化,a.js里用var定义的变量是可以被b.js改变的;

 

 

 

模块化开发加letconst块级作用域可以很好的解决这个问题;

 

 

 

二、commonjs规范和node实现

 

 (2)exports

 

(3)module.exports和exports区别

导出的其实就是module对象里的exports对象;

(4)require函数

node中每一个文件都是一个模块;

 

 

 

情况三一般就是引入第三方模块,require会去项目里的node_modules加载;

 

 

 

 

(5)模块加载过程

深度优先:先沿着路径找到最深的那个引用,然后返回;

 

 

(6)commonjs缺点:

 

 

三、esmodule规范

(1)概念

每一个文件就是一个模块,每一个模块都有自己的作用域;所以即使不同的模块都定义了var name =‘kobe’,都不会相互影响;

 

(2)export关键字

 

 (3)import关键字 

通过import导入的值不能被修改,类似const;

(4)export和import结合使用

在开发和封装一个功能库时,通常我们希望将暴露的所有接口放到一个文件中;如果我们写了很多个js文件,可以再单独写一个index.js文件作为统一的接口暴露,在这个indexjs里导入所有其他的业务文件,然后再统一暴露给调用者;

有三种方式,第三种最好;

 

 (5)default

默认导出只能有一个;

(6)import函数

import xxx from ‘xxx.js’是同步的,只有执行完之后才可以加载底下的代码;

这是一种很耗时的操作,那么有没有一种异步加载的方式?有,import();

 

 

 

 

四、esmodule解析流程

 

随时随地学软件编程-关注百度小程序和微信小程序
关于找一找教程网

本站文章仅代表作者观点,不代表本站立场,所有文章非营利性免费分享。
本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章,希望广大程序员努力学习,让我们用科技改变世界。
[JS高级—15—模块化(CommonJS和ESModule)]http://www.zyiz.net/tech/detail-324120.html

赞(0)
关注微信小程序
程序员编程王-随时随地学编程

扫描二维码或查找【程序员编程王】

可以随时随地学编程啦!

技术文章导航 更多>