JS高级—15—模块化（CommonJS和ESModule）

最新推荐文章于 2024-05-30 11:27:58 发布

csdnWhyTrouble

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量180

点赞数

分类专栏：前端文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/csdnWhyTrouble/article/details/124977473

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、模块化概

模块化主要是让每个木块有自己的作用域，即使定义为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块级作用域可以很好的解决这个问题；

我们使用es6的module后，如果在html文件中，只需要如下两步即可模块化开发：

1.首先在html中的<script>标签里有一个type=moudule表示我们要引入一个模块；

2.其次有三种方式导入模块：分别是通用导入方式（这个方式针对三种暴露都可）、解构赋值导入方式（这个方式针对三种暴露都可）、简便导入方式（这个简便方式只可以针对默认暴露）

二、commonjs规范和node实现

（2）exports

（3）module.exports和exports区别

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

（4）require函数

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

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

（5）模块加载过程

深度优先：先沿着路径找到最深的那个引用，然后返回；

（6）commonjs缺点：

三、ES Module规范

我们定义了一个foo模块，

在index.html导入的时候，即使咩有使用foo（）函数，foo模块的代码也都已经被执行一遍了；

我们将//foo();注释放开：

所以说，我们在阅读vue源码时，看到这里就知道，当我们new Vue时，

initMixin(Vue)

stateMixin(Vue)

eventsMixin(Vue)

lifecycleMixin(Vue)

renderMixin(Vue)

这些方法，都已经被执行过了，Vue函数的原型上已经被添加了很多方法；

（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解析流程

csdnWhyTrouble

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS高级—15—模块化（CommonJS和ESModule）

一、模块化概模块化主要是让每个木块有自己的作用域，即使定义为var也不会影响其他模块，因为只在自己作用域有效；然后模块化也可以暴露接口，引入接口；<!DOCTYPE html><html lang="en"><head> <title>Document</title></head><body> <script src='a.js'></script&.
复制链接

扫一扫