9、大型 Web 应用中的 JavaScript 模块化与 DOM 操作

大型 Web 应用中的 JavaScript 模块化与 DOM 操作

1. 模块化 JavaScript

在将网页组件划分为可复用的模块并添加 CSS 展示层后，就可以专注于使用 JavaScript 实现动态行为。JavaScript 模块应具备以下特点：
- 拥有适用于架构特定部分的独立模块，即目标明确。
- 在不同上下文中复用模块时，不会产生意外后果，即无副作用。

将大部分 JavaScript 方法分离到模块中后，每个页面只需少量独特的 JavaScript 代码就能将它们组合起来。

2. 引入 JavaScript 的方式

在 Web 应用中，有三种引入 JavaScript 的方式，每种方式都有其适用场景，以下是详细介绍：
| 引入方式 | 描述 | 优点 | 示例代码 |
| ---- | ---- | ---- | ---- |
| 链接（Linking） | 将 JavaScript 代码放在一个文件中，通过在 HTML 文件中使用带有 src 属性的 <script> 标签引入。 | 多个页面可共享同一 JavaScript 文件，浏览器首次下载后可缓存文件，提高性能。 | <script src="http://.../sitewide.js" type="text/javascript"></script> |
| 嵌入（Embedding） | 直接将 JavaScript 代码放在页面内。 | 可以在构建页面时方便地以编程方式生成和包含 Java