码路教育

02-JS模块化开发

7/25/2022

# 1. 什么是模块化开发

模块化（组件化）指的就是将一个大的功能拆分为一个一个小的模块，通过不同的模块的组合来实现一个大功能。

  • 在node中一个 js 文件就是一个模块
  • 模块内部代码对于外部来说都是不可见的，可以通过两种方式向外部暴露
  • 优点：1.复用性 2.维护性

早期使用IIFE解决命名冲突问题，但也有新的问题

  • 第一，我必须记得每一个模块中返回对象的命名，才能在其他模块使用过程中正确的使用
  • 第二，代码写起来混乱不堪，每个文件中的代码都需要包裹在一个匿名函数中来编写；
  • 第三，在没有合适的规范情况下，每个人、每个公司都可能会任意命名、甚至出现模块名称相同的情况；
// a.js
// let name = "wc";
// let age = 18;
// function sum(){
//     return 110
// }

let moduleA = (function(){
    let name = "wc";
    let age = 18;
    function sum(){
        return 110
    }
    return {
        name,
        age,
        sum
    }
}())
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// b.js
// let name = "xq";
// let age = 28;
// function sum(){
//     return 220
// }

let moduleB = (function(){
    let name = "xq";
    let age = 28;
    function sum(){
        return 220
    }
    return {
        name,
        age,
        sum
    }
}())
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
    <!-- 一个script标签就是一个代码段 -->
    <script src="./a.js"></script>
    <!-- b.js中的数据，污染了a.js中的数据 -->
    <script src="./b.js"></script>

    <script>
        // 下面的代码段可以使用上在的代码段提供的数据
        console.log(moduleA.name);
        console.log(moduleA.age);
        console.log(moduleB.name);
        console.log(moduleB.age);
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

JavaScript社区为了解决上面的问题，涌现出一系列好用的规范，接下来我们就学习具有代表性的一些规范

  • AMD、CMD、CommonJS
  • JavaScript本身，直到ES6（2015）才推出了自己的模块化方案
  • 我们重点讲解CommonJS和ES6的模块化

# 2. CommonJS和Node

CommonJS是一个规范，简称为CJS，Node是CommonJS在服务器端一个具有代表性的实现

  • CommonJS是规范，Node在服务器端实现了这个规范
  • Browserify是CommonJS在浏览器中的一种实现
  • webpack打包工具具备对CommonJS的支持和转换

CommonJS规范要求

  • 在Node中每一个js文件都是一个单独的模块
  • 模块中包括CommonJS规范的核心变量：exports、module.exports、require，使用这些变量来方便的进行模块化开发
  • exports和module.exports可以负责对模块中的内容进行导出
  • require函数可以帮助我们导入其他模块（自定义模块、系统模块、第三方库模块）中的内容

# 3. 导出

exports导出

  • exports是一个对象，我们可以在这个对象中添加很多个属性，添加的属性会导出
  • 另外一个文件中可以导入，require通过各种查找方式，最终找到了exports这个对象，将这个exports对象赋值给一个变量

module.exports导出

  • CommonJS中是没有module.exports的概念的
  • 但是为了实现模块的导出，Node中使用的是Module的类，每一个模块都是Module的一个实例，也就是module
  • 所以在Node中真正用于导出的其实根本不是exports，而是module.exports，module才是导出的真正实现者
  • 之所以exports也可以导出，是因为module对象的exports属性是exports对象的一个引用
  • 就是说 module.exports = exports = main中的bar

# 4. require函数解析

require是一个函数，可以帮助我们引入一个文件（模块）中导出的对象

  • 模块在被第一次引入时，模块中的js代码会被运行一次
  • 模块被多次引入时，会缓存，最终只加载（运行）一次
  • 深度优先算法进行加载

情况一：X是一个Node核心模块，比如path、http

  • 直接返回核心模块，并且停止查找

情况一：X是以 ./ 或 ../ 或 /（根目录）开头的

  • 第一步：将X当做一个文件在对应的目录下查找
    • 如果有后缀名，按照后缀名的格式查找对应的文件
    • 如果没有后缀名，会按照如下顺序
      • 1，直接查找文件X
      • 2，查找X.js文件
      • 3，查找X.json文件
      • 4，查找X.node文件
  • 第二步：没有找到对应的文件，将X作为一个目录
    • 查找目录下面的index文件
      • 1，查找X/index.js文件
      • 2，查找X/index.json文件
      • 3，查找X/index.node文件
  • 如果没有找到，那么报错：not found

情况三：直接是一个X（没有路径），并且X不是一个核心模块

  • 会在用户电脑上查找这个第三方模块，会在多个地方查找，如果找不到，就报错

# 5. CommonJS规范缺点

CommonJS加载模块是同步的

  • 同步的意味着只有等到对应的模块加载完毕，当前模块中的内容才能被运行
  • 在服务器不会有什么问题，因为服务器加载的js文件都是本地文件，加载速度非常快
  • 所以它应用在浏览器，同步的就意味着后续的js代码都无法正常运行，即使是一些简单的DOM操作
  • 所以在浏览器中，我们通常不使用CommonJS规范
  • 早期为了可以在浏览器中使用模块化，通常会采用AMD或CMD
  • 但是目前一方面现代的浏览器已经支持ES Modules，AMD和CMD已经使用非常少了

# 6. ESModule用法详解

ECMA推出自己的模块化系统，弥补了JavaScript没有模块化一直是它的痛点

  • CommonJS、AMD、CMD等，仅仅是JS社区的规范，并不是官方的
  • 采用ES Module将自动采用严格模式：use strict

ES Module模块采用export和import关键字来实现模块化

  • export负责将模块内的内容导出
  • import负责从其他模块导入内容

浏览器中演示ES6的模块化开发（需要在服务器端来测试）

- <script src="./modules/foo.js" type="module"></script>
- <script src="main.js" type="module"></script>
1
2

# exports关键字

  • export关键字将一个模块中的变量、函数、类等导出
  • 方式一：在语句声明的前面直接加上export关键字
  • 方式二：将所有需要导出的标识符，放到export后面的 {}中（这里的 {}里面不是ES6的对象字面量的增强写法，{}也不是表示一个对象的）
  • 方式三：导出时给标识符起一个别名，通过as关键字起别名

# import关键字

  • import关键字负责从另外一个模块中导入内容
  • 方式一：import {标识符列表} from '模块'，这里的{}也不是一个对象，里面只是存放导入的标识符列表内容
  • 方式二：导入时给标识符起别名，通过as关键字起别名
  • 方式三：通过 * 将模块功能放到一个模块功能对象（a module object）上

# export和import结合使用

  • 在开发和封装一个功能库时，通常我们希望将暴露的所有接口放到一个文件中，这样方便指定统一的接口规范，也方便阅读

# default用法

前面我们学习的导出功能都是有名字的导出（named exports）

  • 在导出export时指定了名字
  • 在导入import时需要知道具体的名字

另一种导出叫做默认导出（default export）

  • 默认导出export时可以不需要指定名字
  • 在导入时不需要使用 {}，并且可以自己来指定名字
  • 在一个模块中，只能有一个默认导出（default export）

# import函数

通过import加载一个模块，是不可以在其放到逻辑代码中的，ES Module在被JS引擎解析时，就必须知道它的依赖关系，这个时候js代码没有任何的运行，所以无法在进行类似于if判断中根据代码的执行情况

确确实实希望动态的来加载某一个模块

  • 如果根据不同的条件，动态来选择加载模块的路径
  • 使用 import() 函数来动态加载
  • import函数返回一个Promise，可以通过then获取结果
Last Updated: 12/25/2022, 10:02:14 PM

03-包管理工具