组件化

编程与算法训练与 组件化

Proxy 与双向绑定

组件化： 组件的基本知识，轮播组件

对象与组件

1. 对象包含的内容

• Properties
• Methods
• Inherit

2. 组件包含的内容

• Properties
• Methods
• Inherit
• Attribute
• Config & State
• Event
• Lifecycle
• Children

Component

Attribute vs Property

• Attribute 强调描述性

myComponent.getAttribute('a')
myComponent.setAttribute('a', 'value');

• Property 强调从属关系

myComponent.a = 'value';

• Attribute vs Property

如何设计组件状态

Markup set	JS set	JS Change	User Input Change
❎	✅	✅	❓	property
✅	✅	✅	❓	attribute
❎	❎	❎	✅	state
❎	✅	✅	❎	config

Lifecycle

graph TD

A[模块A] -->|A1| B(模块B)

B --> C{判断条件C}

C -->|条件C1| D[模块D]

C -->|条件C2| E[模块E]

C -->|条件C3| F[模块F]