编辑“︁JavaScript代码组织”︁（章节）

= JavaScript代码组织 =

'''JavaScript代码组织'''是指通过模块化、设计模式和目录结构等方式，使代码更易于维护、扩展和协作开发的一系列实践方法。良好的代码组织能够提升项目的可读性、可复用性和性能，尤其对大型项目至关重要。

== 核心概念 ==

=== 1. 模块化开发 ===
模块化是将代码分割成独立功能单元的方法，常见方式包括：

* '''IIFE（立即调用函数表达式）'''：传统模块化方式
* '''CommonJS'''：Node.js采用的模块系统
* '''ES Modules'''：现代JavaScript标准模块系统

<syntaxhighlight lang="javascript">
// ES Module示例
// math.js
export function add(a, b) {
    return a + b;
}

// app.js
import { add } from './math.js';
console.log(add(2, 3)); // 输出: 5
</syntaxhighlight>

=== 2. 目录结构 ===
典型项目目录结构示例：

<mermaid>
graph TD
    A[项目根目录] --> B[src/]
    B --> B1[components/]
    B --> B2[utils/]
    B --> B3[services/]
    B --> B4[styles/]
    A --> C[public/]
    A --> D[tests/]
    A --> E[config/]
</mermaid>

=== 3. 设计模式应用 ===
常用组织代码的设计模式：

{| class="wikitable"
|-
! 模式名称 !! 描述 !! 适用场景
|-
| 单例模式 || 确保类只有一个实例 || 全局状态管理
|-
| 工厂模式 || 通过工厂方法创建对象 || 复杂对象创建
|-
| 观察者模式 || 对象间订阅/通知机制 || 事件处理系统
|}

== 进阶技术 ==

=== 依赖管理 ===
使用工具管理第三方库：

* npm/yarn/pnpm：包管理器
* Webpack/Rollup：模块打包工具

数学公式示例（计算依赖复杂度）：
<math>
C = \sum_{i=1}^{n} (d_i + 1)
</math>
其中<math>C</math>为总复杂度，<math>d_i</math>为第i个模块的依赖数。

=== 代码分割 ===
动态加载技术示例：

<syntaxhighlight lang="javascript">
// 动态导入
button.addEventListener('click', async () => {
    const module = await import('./dialog.js');
    module.openDialog();
});
</syntaxhighlight>

== 实际案例 ==

'''电商网站购物车实现'''

1. 模块划分：
   - cart/
     - Cart.js（主逻辑）
     - CartItem.js（单项处理）
     - storage.js（持久化）
     - utils.js（辅助函数）

2. 代码结构示例：

<syntaxhighlight lang="javascript">
// 采用类组织购物车功能
class Cart {
    constructor() {
        this.items = [];
    }

    addItem(product) {
        // 添加逻辑
    }

    calculateTotal() {
        return this.items.reduce((total, item) => {
            return total + (item.price * item.quantity);
        }, 0);
    }
}

// 使用示例
const cart = new Cart();
cart.addItem({ id: 1, price: 10, quantity: 2 });
console.log(cart.calculateTotal()); // 输出: 20
</syntaxhighlight>

== 最佳实践总结 ==

* 保持模块单一职责原则（SRP）
* 使用有意义的命名规范
* 控制文件大小（建议不超过300行）
* 合理使用注释和文档
* 建立一致的代码风格
* 分离业务逻辑与UI组件
* 实施自动化测试

=== 复杂度对比 ===

<mermaid>
pie
    title 代码组织前后对比
    "维护时间" : 40
    "新功能开发" : 30
    "错误修复" : 20
    "团队协作" : 10
</mermaid>

通过良好的代码组织，上述指标可显著改善，特别是在大型项目中效果更为明显。

[[Category:编程语言]]
[[Category:JavaScript]]
[[Category:Javascript最佳实践]]