JS 模块化

模块化概述

什么是模块化

• 将程序文件依据一定规则拆分成多个文件, 这种编码方式就是模块化的编码方式
• 拆分处理的每个文件就是一个模块, 模块化中的数据都是私有的, 模块之间互相隔离
• 同时也能通过一些手段, 可以把模块内的指定数据交出去, 供其他模块使用

为什么需要模块化

随着应用的复杂度越来越高, 其代码量和文件数量都会急剧增加, 逐渐引发以下问题:

• 全局污染问题

  例如一个.html文件引入的多个.js文件中有变量或函数命名冲突, 后引入的就会把前面引入的覆盖

• 依赖混乱问题

  例如引入的Jquery.xxx.js顺序不能乱, 否则就会报错

• 数据安全问题

  例如user.js定义的有用户敏感信息, 虽然定义的函数只返回了部分信息, 但是仍然可以在window上拿到全部信息

模块化规范有哪些

历史背景(了解即可):

2009 年, 随着 Node.js 的出现, JS 在服务器端的应用逐渐增多, 为了让 Node.js 的代码更好维护, 就必须要制定一种 Node.js 环境下的模块化规范

来自 Mozilla 的工程师 Kevin Dangoor 提出了 CommonJS 规范(初期名字叫做 ServerJS), 随后 Node.js 社区采纳了这一规范

随着时间的推移, 针对JS的不同运行环境, 相继出现了多种模块化规范, 按时间排序分别为:

1. CommonJS: 服务端应用广泛
2. AMD
3. CMD
4. ES6 Module: 浏览器端应用广泛

导入与导出的概念

模块化的核心思想: 模块之间是互相隔离的, 通过导入和导出进行数据和功能的共享

• 导出(暴露): 模块公开其内部的一部分(如变量和函数等), 使这些内容可以被其他模块使用
• 导入(引入): 模块引入和使用其他模块导出的内容, 以重用代码和功能