为什么需要模块化

当前端工程到达一定规模后，就会出现下面的问题：

全局变量污染
依赖混乱

上面的问题，共同导致了代码文件难以细分

模块化就是为了解决上面两个问题出现的

模块化出现后，我们就可以把臃肿的代码细分到各个小文件中，便于后期维护管理

前端模块化标准

前端主要有两大模块化标准：

CommonJS，简称CMJ，这是一个社区规范，出现时间较早，目前仅node环境支持
ES Module，简称ESM，这是随着ES6发布的官方模块化标准，目前浏览器和新版本node环境均支持

node环境
下载地址：https://nodejs.org/zh-cn/

CommonJS如何实现模块化

node天生支持CommonJS模块化标准

node规定：

node中的每个js文件都是一个CMJ模块，通过node命令运行的模块，叫做入口模块
模块中的所有全局定义的变量、函数，都不会污染到其他模块
模块可以暴露（导出）一些内容给其他模块使用，需要暴露什么内容，就在模块中给module.exports赋值
一个模块可以导入其他模块，使用函数require("要导入的模块路径")即可完成，该函数返回目标模块的导出结果
1. 导入模块时，可以省略.js
2. 导入模块时，必须以./或../开头
一个模块在被导入时会运行一次，然后它的导出结果会被node缓存起来，后续对该模块导入时，不会重新运行，直接使用缓存结果

练习题

导入导出练习--打字机效果

按照要求完成下面的模块

1. 配置模块 config.js

它需要导出一个对象，规格如下：

module.exports ={
  wordDuration: 300, // 打印每个字的时间间隔
  text: `西风烈，
长空雁叫霜晨月。
霜晨月，
马蹄声碎，
喇叭声咽。
雄关漫道真如铁，
而今迈步从头越。
从头越，
苍山如海，
残阳如血。` // 要打印的文字
}

2. 延迟模块 delay.js

该模块的文件名为delay，你需要把下面的函数导出：

/**
 * 该函数返回一个Promise，它会等待指定的毫秒数，时间到达后该函数完成
 * @param {number} ms 毫秒数
 * @returns {Promise}
 */
function delay(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}
module.exports = delay;

3. 打印模块 print.js

该模块负责导出一个打印函数，该函数需要获取当前的打印配置：

const config = require("./config");	//初次导入的时候，会运行config.js模块，后续node缓存了，引入就不会再运行了

/**
 * 该函数会做以下两件事：
 * 1. console.clear() 清空控制台
 * 2. 读取config.js中的text配置，打印开始位置到index位置的字符
 * @param {number} index
 */
function print(index) {
  console.clear();
  const txt = config.text.substring(0, index + 1);
  console.log(txt);
}

module.exports = print;

4. 主模块 main.js

这是启动模块，它会利用其它模块，逐字打印出所有的文本，打印每个字的间隔时间在config.js中已有配置

const config = require("./config");
const print = require("./print");
const delay = require("./delay");

async function run() {
  let index = 0;
  while (index < config.text.length) {
    print(index);
    await delay(config.wordDuration);
    index++;
  }
}

run();

为什么需要模块化 ​

前端模块化标准 ​

CommonJS如何实现模块化 ​

练习题 ​

导入导出练习--打字机效果 ​

为什么需要模块化

前端模块化标准

CommonJS如何实现模块化

练习题

导入导出练习--打字机效果