A...Component?

最近有些面試官會問一個有個我有點不懂的問題：

你會寫組件嗎？

對我來說，這個問題就好像是說「你會寫程式嗎？」或是「你會寫模塊（Module）嗎？」這樣。

所以到底組件是什麼

身為 Vue 出身的我是這麼理解組件的：

組件是個獨立的程式實體。它能夠透過給定參數，擁有屬於自己的外觀、還有程式功能。

如果我要用英文來說的話：

Components are an independent program instance which has their own layout and functional features by given inputs.

我又順便查了一下三個前端框架對組件的理解：

Angular: Angular components are a subset of directives, always associated with a template.
React: Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.
Vue: Components are reusable Vue instances with a name.

大概和我的理解相去不遠。三個前端框架的組件，主要都包含以下功能：

我認為，程式就是要切得夠小夠簡單，才方便偵錯與重用。大多數的程式設計觀念，也會告訴你程式要盡量短小、能切就切。

由於電腦程式可重複執行的特性，我們發明了遞迴以精簡程式。同時為了方便理解程式、並降低閱讀程式的負擔，我們也發明了很多抽象化的方法，來試圖把程式化約為一個又一個的指令介面：只要你給我什麼，我就會秀出什麼之類的。這件事情在複雜的大型專案尤其重要。

很多程式語言都藉此發展出模塊的概念，以方便我們抽象化。只不過我感覺前端開發對模塊的概念，來得有點晚。大概是因為以前 JavaScript 都只被當成是稍微裝飾、或做點小功能的玩具吧。誰知道到了今天，還有完全靠 JavaScript 的網路應用程式呢。

反正到了這個能用 JavaScript 完成大型程式專案的時代，JavaScript 終於也碰上了管理程式的問題，所以也發明了各種方法來解決。在前端框架的世界，自然就把組件當成模塊一類的東西來用了。

基本上就是想寫就寫囉。事實上組件遲早要寫的：總不能把所有程式都寫在一個檔案裡面吧。不過按照前面的理解，組件規模可以有繁有簡：你可以簡單到只有一些 HTML 與 CSS，也可以複雜到有一大串的複雜計算這樣。

不過通常我會考慮寫組件的時機有：

總之呢，為了讓程式變得好理解，程式員真的下了很多功夫。