前端通用组件设计

调用组件库的API相信很多人都会用，但是如何封装一个高复用的组件并不是每个人都能做到，而这也是检验一个前端开发人员的一个标准。

说到开发组件，首先需要考虑一个问题，一个可复用的组件都需要具备哪些必要条件。

1. 细粒度考量
看过设计模式的朋友应该有了解过很多设计原则，其中一个就是单一职责原则，这个原则放在开发组件中也同样适用。在原则上一个组件就只负责一件事，这就是单一原则所带来的好处也非常明显，就是可以更大可能的复用组件。但如果职责过于单一，也会造成组件碎片化严重，过于抽象。

因此我们需要考虑，所谓的单一职责原则是建立在可复用的基础上的。否则，可以做为独立组件的内部组件进行使用。

2. 组件通用性考量
组件设计之初是为了当时的页面设计进行封装设计的，那么之后的页面设计极大可能是与之前不同的，那么之前设计的组件就不能用了。

而一旦发生这样的情况，就说明我们之前所设计的组件是不通用的，需要重新设计了。就像Antd组件库那样，预留了dropdownRender进行组件渲染。

通用性的设计就代表着将放弃对DOM的操作权，暴露给开发者进行操作，组件开发者本身只负责底层逻辑和基本的DOM结构。这也是开发通用型组件的秘诀之一。

3. 技术选型
css存在着许多的弊端，例如样式易冲突（没有作用域的概念）、书写繁琐（不支持嵌套）、缺少变量（不便于一件更换主题）等等。而解决这些问题的方案也是层出不穷，从最早的css预处理，到后来的Postcss，再到后来的styled-compontent，各种方式任君选择。

4. 打包工具
产品的设计思想固然是核心，但是也需要一堆辅助工具来来帮助我们开发，例如编译工具、测试工具、打包工具。

说到打包工具，就不得不提一下如今非常火爆的，需要配置工程师专门配置的webpack了。但是他也有一个强大的竞争对手 rollup。

rollup更适合用于组件库的打包，优势如下：

1. Tree Shaking: 自动移除未使用的代码, 输出更小的文件
2. Scope Hoisting: 所有模块构建在一个函数内, 执行效率更高
3. Config 文件支持通过 ESM 模块格式书写，
4. 可以一次输出多种格式:
   模块规范: IIFE, AMD, CJS, UMD, ESM
   Development 与 production 版本: .js, .min.js

设计一个轮播图组件
学以致用，学了就肯定要实践一下。轮播图是一个比较常见的组件，每个组件库中都封装的有，接下来我们也来介绍一下如何设计一个轮播图组件。

1. 轮播图原理
通常情况下我们使用轮播图是这样编写的

  <Carousel>
    <div><h3>1<h3><div>
    <div><h3>2<h3><div>
    <div><h3>3<h3><div>
    <div><h3>4<h3><div>
  <Carousel>

那么为什么放入了四个div盒子却只显示一个呢，这是因为可视区域是固定的，只需要移动div盒子就可以显示出后面的盒子，这样就达到了轮播的效果。

为了是观看效果更好，我们都会隐藏掉可视区域之外的内容，这样就是大家经常看到的轮播图了。组件就可以这样设计：

<Frame>
  <SlideList>
    <SlideItem>
      <div><h3>1</h3><div>
    </SlideItem>
    <SlideItem>
      <div><h3>2</h3><div>
    </SlideItem>
    <SlideItem>
      <div><h3>3</h3><div>
    </SlideItem>
    <SlideItem>
      <div><h3>4</h3><div>
    </SlideItem>
  </SlideList>
</Frame>

可以通过transform: translateX()不断改变SlideList的位置，就可以达到轮播的效果了。

2. 轮播图的基础实现
知道了基础原理就可以进行组件的实现了，这里以移动端轮播图为例。

首先，获取移动端可视窗口的宽度。

------- 未完待续 --------