编辑“︁JavaScript组件设计”︁

= JavaScript组件设计 =

'''JavaScript组件设计'''是构建可复用、模块化UI元素的核心技术，它通过封装HTML结构、CSS样式和JavaScript行为，形成独立的代码单元。现代前端框架（如React、Vue、Angular）均以此概念为基础。

== 核心概念 ==
=== 组件定义 ===
组件是：
* '''自包含'''：拥有独立的逻辑与样式
* '''可配置'''：通过props/attributes接收参数
* '''可组合'''：可嵌套形成复杂界面
* '''状态感知'''：可能包含内部状态管理

=== 设计原则 ===
{| class="wikitable"
|+ 组件设计SOLID原则
|-
! 原则 !! 说明
|-
| '''单一职责''' || 每个组件只解决一个特定问题
|-
| '''开放封闭''' || 对扩展开放，对修改封闭
|-
| '''依赖倒置''' || 依赖抽象而非具体实现
|}

== 基础实现示例 ==
以下展示原生Web Components实现：

<syntaxhighlight lang="javascript">
class CounterComponent extends HTMLElement {
  constructor() {
    super();
    this.count = 0;
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <button id="dec">-</button>
      <span id="count">0</span>
      <button id="inc">+</button>
    `;
  }

  connectedCallback() {
    this.shadowRoot.getElementById('inc').addEventListener('click', () => this.updateCount(1));
    this.shadowRoot.getElementById('dec').addEventListener('click', () => this.updateCount(-1));
  }

  updateCount(change) {
    this.count += change;
    this.shadowRoot.getElementById('count').textContent = this.count;
  }
}

customElements.define('counter-component', CounterComponent);
</syntaxhighlight>

'''使用示例'''：
<syntaxhighlight lang="html">
<counter-component></counter-component>
</syntaxhighlight>

'''输出效果'''：
<mermaid>
flowchart LR
    A[初始状态] -->|点击+| B[计数增加]
    A -->|点击-| C[计数减少]
</mermaid>

== 框架实现对比 ==
=== React函数式组件 ===
<syntaxhighlight lang="javascript">
function Counter({ initialValue = 0 }) {
  const [count, setCount] = useState(initialValue);
  return (
    <>
      <button onClick={() => setCount(c => c - 1)}>-</button>
      <span>{count}</span>
      <button onClick={() => setCount(c => c + 1)}>+</button>
    </>
  );
}
</syntaxhighlight>

=== Vue单文件组件 ===
<syntaxhighlight lang="html">
<template>
  <div>
    <button @click="count--">-</button>
    <span>{{ count }}</span>
    <button @click="count++">+</button>
  </div>
</template>

<script>
export default {
  data() {
    return { count: 0 }
  }
}
</script>
</syntaxhighlight>

== 高级模式 ==
=== 复合组件模式 ===
<mermaid>
classDiagram
    class Dropdown {
        +toggle()
        +close()
    }
    class DropdownTrigger
    class DropdownMenu
    Dropdown --> DropdownTrigger
    Dropdown --> DropdownMenu
</mermaid>

=== 渲染属性模式 ===
<syntaxhighlight lang="javascript">
<DataFetcher 
  url="/api/users"
  render={data => (
    <ul>
      {data.map(user => <li key={user.id}>{user.name}</li>)}
    </ul>
  )}
/>
</syntaxhighlight>

== 性能优化 ==
* '''记忆化'''：使用<code>React.memo</code>或<code>useMemo</code>
* '''虚拟化'''：长列表使用<code>react-window</code>等库
* '''懒加载'''：动态导入组件
* '''CSS-in-JS'''：避免不必要的样式计算

优化公式示例：
<math>
Perf = \frac{Initial\ Render\ Time + Update\ Time}{Component\ Complexity}
</math>

== 实际案例 ==
'''电商产品卡片组件'''需包含：
1. 响应式图片
2. 价格显示逻辑
3. 库存状态指示器
4. 交互式评分组件

<syntaxhighlight lang="javascript">
function ProductCard({ product }) {
  return (
    <div className="card">
      <Image src={product.image} alt={product.name} responsive />
      <Price value={product.price} discount={product.discount} />
      <InventoryIndicator stock={product.stock} />
      <Rating 
        value={product.rating} 
        onChange={newRating => updateProductRating(product.id, newRating)}
      />
    </div>
  );
}
</syntaxhighlight>

== 测试策略 ==
{| class="wikitable"
|+ 组件测试金字塔
|-
! 测试类型 !! 工具示例
|-
| 单元测试 || Jest, Vitest
|-
| 集成测试 || React Testing Library
|-
| E2E测试 || Cypress
|}

== 最佳实践 ==
# 保持组件体积小于300行代码
# Props命名使用camelCase
# 为复杂组件编写TypeScript接口
# 提供默认Prop值和PropTypes验证
# 避免在组件内部直接操作DOM

== 延伸阅读 ==
* 组件设计模式（容器/展示组件）
* 状态管理库集成（Redux/Zustand）
* 微前端架构中的组件共享
* Web Components标准演进

[[Category:编程语言]]
[[Category:JavaScript]]
[[Category:Javascript框架介绍]]