JS模块化

面向bug编程
189 阅读16分钟

学习了coderwhy的JavaScript高级语法视频课的笔记

如有错误或者不合适的地方，敬请见谅，欢迎指出和拓展，谢谢各位了

1. 什么是模块化？

  • 到底什么是模块化、模块化开发呢？
    • 事实上模块化开发最终的目的是将程序划分成一个个小的结构；
    • 这个结构中编写属于自己的逻辑代码，有自己的作用域，不会影响到其他的结构；
    • 这个结构可以将自己希望暴露的变量、函数、对象等导出给其结构使用；
    • 也可以通过某种方式，导入另外结构中的变量、函数、对象等。
  • 上面提到的结构，就是模块。按照这种结构划分开发程序的过程，就是模块化开发的过程。
  • JavaScript它都有很多的缺陷：
    • 比如var定义的变量作用域问题；
    • 比如JavaScript的面向对象并不能像常规面向对象语言一样使用class；
    • 比如JavaScript没有模块化的问题。
  • Brendan Eich本人也多次承认过JavaScript设计之初的缺陷，但是随着JavaScript的发展以及标准化，存在的缺陷问题基 本都得到了完善。
  • 无论是web、移动端、小程序端、服务器端、桌面应用都被广泛的使用。

2. 模块化的历史

  • 在网页开发的早期，Brendan Eich开发JavaScript仅仅作为一种脚本语言，做一些简单的表单验证或动画实现等，那个时 候代码还是很少的：
    • 这个时候我们只需要讲JavaScript代码写到< script >标签中即可；
    • 并没有必要放到多个文件中来编写；甚至流行：通常来说 JavaScript 程序的长度只有一行。
  • 但是随着前端和JavaScript的快速发展，JavaScript代码变得越来越复杂了：
    • ajax的出现，前后端开发分离，意味着后端返回数据后，我们需要通过JavaScript进行前端页面的渲染；
    • SPA的出现，前端页面变得更加复杂：没有模块化带来的问题包括前端路由、状态管理等等一系列复杂的需求需要通过JavaScript来实现；
    • 包括Node的实现，JavaScript编写复杂的后端程序，没有模块化是致命的硬伤。
  • 模块化已经是JavaScript一个非常迫切的需求：
    • 但是JavaScript本身，直到ES6（2015）才推出了自己的模块化方案；
    • 在此之前，为了让JavaScript支持模块化，涌现出了很多不同的模块化规范：AMD、CMD、CommonJS等。
  • 将详细介绍的是JavaScript的模块化，尤其是CommonJS和ES6的模块化。

3. 没有模块化带来的问题

  • 早期没有模块化带来了很多的问题：比如命名冲突的问题。
// 1、a.js
var test = 'aaa'

// 2、b.js
var test = 'bbb'

// 3、c.js
var test = 'ccc'


// 4、index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script src="./a.js"></script>
    <script src="./b.js"></script>
    <script src="./c.js"></script>

    <script>
        console.log(test)//ccc
    </script>
</body>
</html>
  • 当然，我们有办法可以解决上面的问题：立即函数调用表达式（IIFE）
    • IIFE (Immediately Invoked Function Expression)
  • 但是，我们其实带来了新的问题：
    • 第一，我必须记得每一个模块中返回对象的命名，才能在其他模块使用过程中正确的使用；
    • 第二，代码写起来混乱不堪，每个文件中的代码都需要包裹在一个匿名函数中来编写；
    • 第三，在没有合适的规范情况下，每个人、每个公司都可能会任意命名、甚至出现模块名称相同的情况。
  • 所以，我们会发现，虽然实现了模块化，但是我们的实现过于简单，并且是没有规范的：
    • 我们需要制定一定的规范来约束每个人都按照这个规范去编写模块化的代码；
    • 这个规范中应该包括核心功能：模块本身可以导出暴露的属性，模块又可以导入自己需要的属性；
    • JavaScript社区为了解决上面的问题，涌现出一系列好用的规范，接下来我们就学习具有代表性的一些规范。
// 1、a.js
var moduleA = (function () {
  var test = 'aaa'

  return {
    test
  }
})()

// 2、b.js
var moduleB = (function () {
  var test = 'bbb'
  return {
    test
  }
})()

// 3、c.js
var moduleC = (function () {
  var test = 'ccc'
  return {
    test
  }
})()


// 4、index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script src="./a.js"></script>
    <script src="./b.js"></script>
    <script src="./c.js"></script>

    <script>
        console.log(moduleA.test)//aaa
        console.log(moduleB.test)//bbb
        console.log(moduleC.test)//ccc
    </script>
</body>
</html>

4. CommonJS

  1. CommonJS规范和Node关系
  • 我们需要知道CommonJS是一个规范，最初提出来是在浏览器以外的地方使用，并且当时被命名为ServerJS，后来为了 体现它的广泛性，修改为CommonJS，平时我们也会简称为CJS。
    • Node是CommonJS在服务器端一个具有代表性的实现；
    • Browserify是CommonJS在浏览器中的一种实现；
    • webpack打包工具具备对CommonJS的支持和转换。
  • 所以，Node中对CommonJS进行了支持和实现，让我们在开发node的过程中可以方便的进行模块化开发：
    • 在Node中每一个js文件都是一个单独的模块；
    • 这个模块中包括CommonJS规范的核心变量：exports、module.exports、require；
    • 我们可以使用这些变量来方便的进行模块化开发。
  • 前面我们提到过模块化的核心是导出和导入，Node中对其进行了实现：
    • exports和module.exports可以负责对模块中的内容进行导出；
    • require函数可以帮助我们导入其他模块（自定义模块、系统模块、第三方库模块）中的内容。
// 基本使用

// 1、a.js
var a = 'aaa'

// 导出方案 module.exports
module.exports = {
  a
}

// 1、b.js
// 使用另外一个模块导出的对象, 那么就要进行导入 require
var a = require('./a.js')

console.log(a) //{ a: 'aaa' }
  1. node中的CommonJs的原理 image.png
// 1、a.js
var obj = {
  a: 'aaa'
}

setTimeout(() => {
  obj.a = '111'
}, 1000)

// 导出方案 module.exports
module.exports = obj

// 2、b.js
// 使用另外一个模块导出的对象, 那么就要进行导入 require
var obj = require('./a.js')

console.log(obj) //{ a: 'aaa' }

setTimeout(() => {
  console.log(obj) //{ a: '111' }
}, 2000)
  1. module.exports和exports
  • module.exports和exports都是可以用来导出的，我们追根溯源，通过维基百科中对CommonJS规范的解析：
    • CommonJS中是没有module.exports的概念的；
    • 但是为了实现模块的导出，Node中使用的是Module的类，每一个模块都是Module的一个实例，也就是 module；
    • 所以在Node中真正用于导出的其实根本不是exports，而是module.exports，也就是说最终能导出的一定是module.exports；
    • 因为module才是导出的真正实现者。
  • 但是，为什么exports也可以导出呢？
    • 这是因为exports对象引用了module对象的exports属性；
    • 也就是说 exports = module.exports。
// 1、a.js
var obj = {
  a: 'aaa'
}

// 导出方案 module.exports
module.exports = obj

// 2、b.js
var obj2 = {
  a: 'bbb'
}

// 导出方案 exports
exports.obj2 = obj2

// 3、c.js
// 使用另外一个模块导出的对象, 那么就要进行导入 require
var obj = require('./a.js')
var obj2 = require('./b.js')

console.log(obj) //{ a: 'aaa' }

console.log(obj2) //{ obj2: { a: 'bbb' } }

注意：上面的 module.exports = obj 已经改变了原来的对象引用，变成了引用obj，所以和 exports导出不是同一个引用。

  1. require细节
  • 我们现在已经知道，require是一个函数，可以帮助我们引入一个文件（模块）中导出的对象。
  • 那么，require的查找规则是怎么样的呢？
  • 这里总结比较常见的查找规则：导入格式如下：require(X)
    • 情况一：X是一个Node核心模块，比如path、http。
      • 直接返回核心模块，并且停止查找。
    • 情况二：X是以 ./ 或 ../ 或 /（根目录）开头的。
      • 第一步：将X当做一个文件在对应的目录下查找；
        • 1.如果有后缀名，按照后缀名的格式查找对应的文件
        • 2.如果没有后缀名，会按照如下顺序：
          • 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不是一个核心模块
      • 如果下面的 module.paths 路径中都没有找到，那么报错：not found
// 从当前导入的位置，由内到外，一层层找 node_modules 文件夹下的 b
var a = require('b')

console.log(a) //{ b: 'bbb' }

console.log(module.paths)

/* [
  'C:\\Users\\86134\\Desktop\\js高级联系文件夹\\16、模块化\\2、CommonJs\\1、基本使用\\node_modules',
  'C:\\Users\\86134\\Desktop\\js高级联系文件夹\\16、模块化\\2、CommonJs\\node_modules',
  'C:\\Users\\86134\\Desktop\\js高级联系文件夹\\16、模块化\\node_modules',
  'C:\\Users\\86134\\Desktop\\js高级联系文件夹\\node_modules',
  'C:\\Users\\86134\\Desktop\\node_modules',
  'C:\\Users\\86134\\node_modules',
  'C:\\Users\\node_modules',
  'C:\\node_modules'
] */
  1. 模块的加载过程
  • 结论一：模块在被第一次引入时，模块中的js代码会被运行一次。
  • 结论二：模块被多次引入时，会缓存，最终只加载（运行）一次。
    • 为什么只会加载运行一次呢？
    • 这是因为每个模块对象module都有一个属性：loaded；
    • 为false表示还没有加载，为true表示已经加载。
  • 结论三：如果有循环引入，那么加载顺序是什么？
    • 如果出现下图模块的引用关系，那么加载顺序是什么呢？
      • 这个其实是一种数据结构：图结构；
      • 图结构在遍历的过程中，有深度优先搜索（DFS, depth first search）和广度优先搜索（BFS, breadth first search）；
      • Node采用的是深度优先算法，况且CommonJS加载模块是同步，等到对应的模块加载完毕，当前模块中的内容才能被运行，所以加载顺序是：main -> aaa -> ccc -> ddd -> eee ->bbb。 image.png
  • 结论四：require导入也可以修改对其值修改
  1. CommonJS规范缺点
  • CommonJS加载模块是同步的：
    • 同步的意味着只有等到对应的模块加载完毕，当前模块中的内容才能被运行；
    • 这个在服务器不会有什么问题，因为服务器加载的js文件都是本地文件，加载速度非常快。
  • 如果将它应用于浏览器呢？
    • 浏览器加载js文件需要先从服务器将文件下载下来，之后再加载运行；
    • 那么采用同步的就意味着后续的js代码都无法正常运行，即使是一些简单的DOM操作。
  • 所以在浏览器中，我们通常不使用CommonJS规范：
    • 当然在webpack中使用CommonJS是另外一回事；
    • 因为它会将我们的代码转成浏览器可以直接执行的代码。
  • 在早期为了可以在浏览器中使用模块化，通常会采用AMD或CMD：
    • 但是目前一方面现代的浏览器已经支持ES Modules，另一方面借助于webpack等工具可以实现对CommonJS或者ES Module代码的转换；
    • AMD和CMD已经使用非常少了，所以这里我们进行简单的演练。

*5. AMD

  • AMD主要是应用于浏览器的一种模块化规范：
    • AMD是Asynchronous Module Definition（异步模块定义）的缩写；
    • 它采用的是异步加载模块；
    • 事实上AMD的规范还要早于CommonJS，但是CommonJS目前依然在被使用，而AMD使用的较少了。
  • 我们提到过，规范只是定义代码的应该如何去编写，只有有了具体的实现才能被应用：
    • AMD实现的比较常用的库是require.js和curl.js。
  • require.js的使用
    • 第一步：下载require.js
    • 第二步：定义HTML的script标签引入require.js和定义入口文件：
      • data-main属性的作用是在加载完src的文件后会加载执行该文件。 image.png
// 1、a.js
define(function () {
  var a = 'aaa'

  return {
    a
  }
})

// 2、b.js
// 1、第一种写法
define(function () {
  // 导入a.js
  require(['a'], function (val) {
    console.log('b.js:')
    console.log(val)
  })
})

/* 打印结果：
{a: 'aaa'}
b.js:
{ a: 'aaa' } */

// 1、第二种写法,b.js比a.js先执行
// define(['a'], function (val) {
//   console.log('b.js:')
//   console.log(val)
// })

/* 打印结果：
b.js:
{a: 'aaa'}
{ a: 'aaa' } */

// 3、main.js
require.config({
  baseUrl: '', //如果不写，则下面不需要'/src'
  paths: {
    a: './src/a', //不需要手动加.js；这路径是相对于index.html
    b: './src/b'
  }
})

require(['a', 'b'], function (val) {
  // 这里打印的是a.js导出的对象
  console.log(val)
})

// 4、index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script src="./lib/require.js" data-main="./src/main.js"></script>
</body>

</html>

*6. CMD

  • 第一步：下载SeaJS
  • 第二步：引入sea.js和使用主入口文件
    • seajs是指定主入口文件的。

image.png

// 1、a.js
define(function (require, exports, module) {
  var a = 'aaa'

  module.exports = {
    a
  }
})

// 2、main.js
define(function (require, exports, module) {
  var a = require('./a')

  console.log(a) //{a: 'aaa'}
})

// 3、index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script src="./lib/sea.js"></script>
    <script>
        seajs.use('./src/main.js')
    </script>
</body>

</html>

7. ES Module

  1. 认识 ES Module
  • JavaScript没有模块化一直是它的痛点，所以才会产生我们前面学习的社区规范：CommonJS、AMD、CMD等， 后来ES推出了自己的模块化系统。
  • ES Module和CommonJS的模块化有一些不同之处：
    • 一方面它使用了import和export关键字；
    • 另一方面它采用编译期的静态分析，并且也加入了动态引用的方式。
  • ES Module模块采用export和import关键字来实现模块化：
    • export负责将模块内的内容导出 (node的CommonJs，exports加多个s)；
    • import负责从其他模块导入内容。
  • 了解：采用ES Module将自动采用严格模式：use strict。
  • 如果直接在浏览器中运行代码，会发生报错，这个在MDN上面有给出解释：
    • developer.mozilla.org/zh-CN/docs/…
    • 你需要注意本地测试 — 如果你通过本地加载Html 文件 (比如一个 file:// 路径的文件), 你将会遇到 CORS 错误，因为 Javascript 模块安全性需要；
    • 你需要通过一个服务器来测试，VSCode中有一个插件：Live Server。
// 基本使用
// 1、a.js
export const a = 'aaa'
export const a2 = 'aaa2'

// 2、main.js
import { a, a2 } from './a.js'

console.log(a) //aaa
console.log(a2) //aaa2

// 3、index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    // 需要加入 type="module"
    <script src="./main.js" type="module"></script>
    
</body>
</html>
  1. export关键字
  • export关键字将一个模块中的变量、函数、类等导出。
  • 我们希望将其他中内容全部导出，它可以有如下的方式：
    • 方式一：在语句声明的前面直接加上export关键字
    • 方式二：将所有需要导出的标识符，放到export后面的 {}中
      • 注意：这里的 {}里面不是ES6的对象字面量的增强写法，{}也不是表示一个对象的；
      • 所以： export {name: name}，是错误的写法；
    • 方式三：导出时给标识符起一个别名。
// 1.方式一: export 声明语句
export const a = 'aaa'

// 2.方式二: export 导出 和 声明分开
const a = 'aaa'
export {
  a
}

// 3.方式三: 第二种导出时起别名
const a = 'aaa'
export {
  a as b
}
  1. import关键字
  • import关键字负责从另外一个模块中导入内容。
  • 导入内容的方式也有多种：
    • 方式一：import {标识符列表} from '模块'；
      • 注意：这里的{}也不是一个对象，里面只是存放导入的标识符列表内容；
    • 方式二：导入时给标识符起别名；
    • 方式三：通过 * 将模块功能放到一个模块功能对象（a module object）上。
// 1.方式一: 普通的导入
import { a } from './a.js' // 导入的名字需要和导出的一样

// 2.方式二: 起别名
import { a as b } from './a.js'

// 3.方式三: 将导出的所有内容放到一个标识符中，并命名为b
import * as b from './a.js'
  1. export和import结合使用
  • export和import可以结合使用
// 1、通过 * 将可以将from导入的模块功能，全部export导出去
export * from './a.js'

// 2、可以将from导入的模块功能，全部export导出去
export { a } from './a.js'

// 3、普通做法，导入和导出分开
import { a } from './a.js'
export {
    a
}
  • 为什么要这样做呢？
    • 在开发和封装一个功能库时，通常我们希望将暴露的所有接口放到一个文件中；
    • 这样方便指定统一的接口规范，也方便阅读；
    • 这个时候，我们就可以使用export和import结合使用。

image.png

// 1、a.js
export function a(val) {
  console.log(val)
}

// 2、b.js
export function b(val) {
  console.log(val)
}

// 3、index.js
// 方式一
// export * from './a.js'
// export * from './b.js'

// 方式二
// export { a } from './a.js'
// export { b } from './b.js'

// 方式三
import { a } from './a.js'
import { b } from './b.js'

export { a, b }

// 4、main.js
import { a, b } from './utils/index.js'

a('aaa') //aaa
b('bbb') //bbb

// 5、index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script src="./main.js" type="module"></script>

</body>
</html>
  1. default用法
  • 前面我们学习的导出功能都是有名字的导出（named exports）：
    • 在导出export时指定了名字；
    • 在导入import时需要知道具体的名字。
  • 还有一种导出叫做默认导出（default export）
    • 默认导出export时可以不需要指定名字；
    • 在导入时不需要使用 {}，并且可以自己来指定名字；
    • 它也方便我们和现有的CommonJS等规范相互操作。
  • 注意：在一个模块中，只能有一个默认导出（default export）。
// 1、a.js
const a = 'aaa'
const a2 = 'aaa2'

// 默认导出的方式一:
/* export {
    a,
    a2 as default
} */

// 默认导出的方式二: 常见
export default a2

// 2、main.js
// 导入语句: 导入的默认的导出
import b from './a.js'

console.log(b) //aaa2


// 3、index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script src="./main.js" type="module"></script>

</body>
</html>
  1. import函数
  • 通过import加载一个模块，是不可以在其放到逻辑代码中的，比如：
    • 下面的代码会出现问题的
      • 这是因为ES Module在被JS引擎解析时，就必须知道它的依赖关系；
      • 由于这个时候js代码没有任何的运行，所以无法在进行类似于if判断中根据代码的执行情况；
// 错误写法
if (true) {
  import { a } from './a.js'
}
  • 但是某些情况下，我们确确实实希望动态的来加载某一个模块：
    • 如果根据不同的条件，动态来选择加载模块的路径；
    • 这个时候我们需要使用 import() 函数来动态加载。
// 1、a.js
const a = 'aaa'

export { a }

// 2、main.js
if (true) {
  // import函数返回的结果是一个Promise
  import('./a.js').then(res => {
    console.log(res.a) //aaa
  })
}

// ES11新增的特性
// meta属性本身也是一个对象: { url: "当前模块所在的路径" }
console.log(import.meta)


// 3、index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script src="./main.js" type="module"></script>

</body>
</html>
  1. ES Module的解析流程
  • ES Module是如何被浏览器解析并且让模块之间可以相互引用的呢？
  • ES Module的解析过程可以划分为三个阶段：
    • 阶段一：构建（Construction），根据地址查找js文件，并且下载，将其解析成模块记录（Module Record）；
    • 阶段二：实例化（Instantiation），对模块记录进行实例化，并且分配内存空间，解析模块的导入和导出语句，把模块指向对应的内存地址；
    • 阶段三：运行（Evaluation），运行代码，计算值，并且将值填充到内存地址中。 image.png

（1）. 阶段一：构建阶段 image.png

  • 注意：
  1. 解析是一个静态分析过程，比如上面讲过的，import不能放入if里；
  2. main.js解析成一个模块记录（Module Record）后，会继续下载main.js依赖的js文件然后进行解析，直到依赖结束，这过程还没有执行代码（不会重复下载同一个文件）。 image.png

（2）. 阶段二和三：实例化阶段 – 求值阶段 image.png 注意：模块通过import导入的，不能对其进行修改。

  1. CommonJs和ES Module的相互引用 image.png
avatar
文章
阅读
粉丝