Build Scalable User Interface by Componentization

通过元件化以构建可扩展的用户界面

前言

近期在大改造现有产品的设计系统，预期会与来自不同领域的人合作，因此这篇文章是写给对网页无任何前置知识的人的，主要介绍「界面组件化」这个概念。此篇文章还在参考不同资料编写中。

组件是一块拼图、一个积木、一个齿轮……，就是一个可以被重复使用并且可被组合成更大物件的概念。这个概念从早期网页就已存在，举例来说一个网页组件可以是个按钮、输入框、下拉式选单：

<!-- 按钮 -->
<button>点击我</button>

<!-- 输入框 -->
<input type="text" />

<!-- 下拉式选单 -->
<select>
  <option>选项一</option>
  <option>选项二</option>
</select>

除此以上的范例外，网页还有许多「原生（浏览器预设支援）」的组件，可以直接在浏览器中呈现，开发者们可以用宣告（Declarative）的方式去架构它们，让浏览器去处理它们的行为。

所以总结起来，大多网页组件有以下几种特性：

现代主流的前端框架例如：React、Vue、Angular 或是 Web Component 也采取组件化的概念，组件化对网页开发来说是很基础必备的观念。

了解组件化的概念后，可以发现这是一个非常实用的概念！与其构建一个庞大的系统，不如将系统拆解成许多小的组件，再将这些组件组合起来，就能构建出一个庞大的系统，这么一来有以下的好处：

看起来很简单的道理，但我们还是花许多时间在写以页为单位的 AWD 网页未思考长期产品的维护与扩张性。组件化的过程不仅包含了创造新组件，也需要考虑如何将现有的系统整理成可靠可维护的组件，需要团队上下共同努力才能达成：

组件应当应该足够小以解决特定问题，但又不能太小而无法成为更大解决方案的部分，白话来说就是组件要有清晰独特的职责，并也能包容系统的差异性，像是：logo, button, menu, input, dropdown, video, image 都是小而精确的界面组件案例。

组件不应该依赖外部的环境来运作，不管是功能上还是样式上，组件都应该是独立的，这样才能确保组件在任何环境下都能正常运作：

功能上：与纯粹函数🔗的概念相似，组件不应该隐性的依赖外部的状态来表现，而是应该通过传入的属性来决定。
样式上：谨慎使用 absolute、fixed 或外距🔗这类依靠外部环境或影响外部环境的样式，这类样式会让组件失去独立性，造成于不同环境下的表现不一致。