Node 之 JavaScript 模块化开发

目录

一、模块化

1. 概念

2. 历史

01 - 早期

02 - 现在

3. 问题 

问题一

        01 - 定义 foo.js

        02 - 定义 bar.js

        03 - 定义 html 页面

问题二 

二、CommonJs

1. 概念

2. exports导出

01 - 定义 bar.js 

02 - 定义 main.js 

03 - 原理 

3. CommonJs在Node中实现的本质

栗子一 🌰

        01 - 定义 bar.js

        02 - 定义 main.js

栗子二 🌰

        01 - 定义 bar.js

        02 - 定义 main.js

栗子三 🌰

        01 - 定义 bar.js

        02 - 定义 main.js

4. module.exports导出

栗子一 🌰

        01 - 定义 bar.js

        02 - 定义 main.js

栗子二 🌰

        01 - 定义 bar.js

        02 - 定义 main.js

        03 - 解释 

5. require 

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

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

        第一步：将X当做一个文件在对应的目录下查找

        第二步：没有找到对应的文件，将X当作一个目录

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

6. 模块的加载过程

结论一

        01 - 定义main.js

        02 - 定义coder.js

结论二

        01 - 定义main.js

        02 - 效果 

结论三

7. CommonJS规范缺点

三、AMD规范 ( 不怎么使用 )

规范 

实现

四、CMD规范 ( 不怎么使用 )

规范 

实现

五、ES Module

1. 概念

2. 使用ES module注意事项

注意事项一

注意事项二 JavaScript 模块 - JavaScript | MDN

栗子 🌰 

        01 - 新建 coder.js

        02 - 新建 main.js

        03 - 新建 index.html

3. export 

方式一

方式二

方式三

4. import 

方式一

方式二

方式三

import.meta 

5. export和import结合使用

01 - 通常

02 - 优化一

03 - 优化二

6. default

01 - 默认导出

02 - 默认导入

03 - 两种导出

04 - 两种导入

05 - 统一导出默认导出

        定义 text.js 文件

        定义 index.js 文件

        定义main.js文件

        定义index.html文件 

7. import函数 

8. ES Module的解析流程 

阶段一：构建阶段

阶段二和三：实例化阶段 – 求值阶段

---

一、模块化

1. 概念

模块化开发 : 

• 事实上模块化开发最终的目的是将程序划分成一个个小的结构
• 这个结构中编写属于自己的逻辑代码，有自己的作用域，定义变量名词时不会影响到其他的结构
• 这个结构可以将自己希望暴露的变量、函数、对象等导出给其结构使用
• 也可以通过某种方式，导入另外结构中的变量、函数、对象等

结构，就是模块  =>  按照这种结构划分开发程序的过程，就是模块化开发的过程

JavaScript缺陷 : 

• var定义的变量作用域问题
• 比如JavaScript的面向对象并不能像常规面向对象语言一样使用class
• 比如JavaScript没有模块化的问题
• ......

2. 历史

01 - 早期

在网页开发的早期，Brendan Eich开发JavaScript仅仅作为一种脚本语言，做一些简单的表单验证或动画实现等，那个时候代码还是很少的

• 这个时候只需要将JavaScript代码写到