我們要來談談切分元件了，我學習切分元件的概念，是到用SASS才出現Component這個詞，但其實在簡單切版的時候就會有初步概念了。記得那時候，跑去問問題，學姊告訴我要先觀察哪些會『重複使用』，那個就很適合拆成元件（可能設計稿當時只有一張沒有多頁可參考，要靠想像ＱㄇＱ）。後來到Vue切版，概念類似但稍微不一樣（因為HTML、CSS、JS寫在一起了）於是我學習元件這件事，一直都是靠觀察，哪些重複？哪些會變化？還有切版順口溜『由上至下，由左至右，由大至小』。

元件元件你是誰？

當我去查了軟體元件(Component)相關資料，關於軟體元件的說法：

軟體元件定義
軟體元件是一個具備特定執行行為的軟體單元(Software Element)，在元 件模型(Component Model)中，可獨立地提供外界為組合所需之軟體功能。而 所謂元件模型則是一種元件通訊協定與元件相互組合方式標準。元件模型被 進一步實作後，可形成軟體元件運作的環境，讓軟體元件可以發揮其功能。 最後，軟體開發者可利用元件模型環境，組合相關軟體元件來達成前端使用者的需求，形成所謂元件式軟體(Component-based Software)。
-《軟體元件發展趨勢與科專研發方向建議》（2001，龔俊霖）

看來元件是誰？這件事有點不單純。

切切切

所以先定義一下，這裡說的元件是標頭、導航列、按鈕、卡片等元件，為網頁或應用程式中的可重複使用的獨立部分，通常有幾個特點：

• 是獨立的實體，它可以在不影響其他部分的情況下運作。這意味著元件的行為和外觀應該與其他元件無關，可以單獨使用或組合在一起。
• 可以被多次使用。這使得開發人員可以在同一應用程式中的不同部分使用相同的元件，從而減少重複造輪子。
• 每個元件代表著特定的功能或界面元素。例如，按鈕元件可以處理點擊事件，表單元件可以處理用戶輸入，卡片元件可以顯示特定的信息，等等。
• 通常包括HTML結構，定義其外觀和結構；CSS樣式，設計元件的外觀；以及JavaScript，用於元件的行為。

而元件是切版的關鍵，可以被視為網頁的可重複使用的組成部分，通常是在 HTML 和 CSS 開發的同時進行的，以確保模塊化和可維護性。如何解構元件？解構元件是種思維方式，旨在將網頁拆分成可重複使用的獨立組件：

• 觀察重複使用
  切版時，觀察設計稿中哪些元素或組合在多個頁面中重複出現，這些是潛在的元件。例如，標頭、導航列、按鈕、卡片等都是常見的元件。此外，重複使用中，有還分成『可編輯』與『不可編輯』的。
• 考慮可變性
  元件應該是可配置的，以適應不同的內容和風格，考慮哪些屬性或變數應該是元件的參數，以便在不同情境下自定義外觀和行為。這會涉及到RWD啦，另外一篇會分享。
• 建立元件模板
  其中包含該元件的 HTML 結構和相關的CSS樣式。這將有助於確保元件的一致性，節省開發時間。

小結

以上是簡單的分享，然而，『什麼是元件？要怎樣拆才會好？』這個命題我還會繼續追下去，拆得好上天堂啊～