组件封装思路——以一个简单的loading动画举例

内容不复杂，只是为了说明下组件封装的思路。

一个动画

先来看下这个动画

先来分析下动画，动画中的每一个字母都会有一个单独的跳动。这个跳动的动画是一样的，只是每一个字母的开始时间不同。可以看出来这个动画里面的动画效果其实是一个。只是不同的元素在指定这个动画的时候，延迟时间有了一个控制。
那么我们可以把文字的每一个字母都放到一个span标签中。然后对每一个事件标签指定一个动画样式。这里可以利用nth-of-type来实现。

  l
  o
  a
  d
  i
  n
  g
  .
  .
  .

.loading {
  margin: 100px;
  height: 100px;
  line-height: 100px;
}
.loading > span {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 2px;
  animation: loadingWord 800ms ease-in infinite alternate;
}
/* 10个字母，每一个的延迟都不同 */
.loading-1 > span:nth-of-type(1){ animation-delay: 200ms; }
.loading-1 > span:nth-of-type(2){ animation-delay: 300ms; }
.loading-1 > span:nth-of-type(3){ animation-delay: 400ms; }
.loading-1 > span:nth-of-type(4){ animation-delay: 500ms; }
.loading-1 > span:nth-of-type(5){ animation-delay: 600ms; }
.loading-1 > span:nth-of-type(6){ animation-delay: 700ms; }
.loading-1 > span:nth-of-type(7){ animation-delay: 800ms; }
.loading-1 > span:nth-of-type(8){ animation-delay: 900ms; }
.loading-1 > span:nth-of-type(9){ animation-delay: 1000ms; }
.loading-1 > span:nth-of-type(10){ animation-delay: 1100ms; }
@keyframes loadingWord {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-16px);
  }
}

这样子，动画就很快实现了。效果如图：

封装成组件

如果只是实现一个动画功能，那么上面的代码就可以了。如果我们需要把这个加载动画封装成一个组件，方便后续类似场景的使用，就需要考虑更多东西，不能简单的实现这一个效果就行了。
首先，我们需要分析这个功能中，可能会出现变化的部分：

1. 这个动画，是表示一个等待过程。等待过程可能是加载中，loading；下载中，downloading；上传中，uploading等多种情况。所以这里的文字是需要可配置的。
2. 文字的样式可能会需要变化。核心是文字大小，颜色。
3. 动画方式，动画频率。因为这个组件本身就是跳动等待动画，所以动画部分建议固定。不然组件就太灵活了，使用上会不方便。还不如实现两个组件。

文字部分

像之前的代码，需要在CSS中写死index，对每一个固定位置的子元素设置动画延迟。如果文字长度不是固定的，那么这种写法就是有问题的。我们首先要解决的就是这个问题。
这里可以利用css变量来解决。代码如下

  l
  o
  a
  d
  i
  n
  g
  .
  .
  .

.loading {
  margin: 100px;
  height: 100px;
  line-height: 100px;
}
.loading > span {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 2px;
  animation: loadingWord 800ms ease-in infinite alternate;
  animation-delay: calc(var(--index) * 100ms + 200ms);
}

这样子，每一个span分别有自己的--index。那么动画延迟就会计算出对应--index的时间。
我们再把子节点改成JS读取某个文字来生产的。

loading...

const loadingEl = document.getElementById('load');
const txts = loadingEl.innerText.split('');
let loadingElChild = '';
txts.forEach((t, i) => {
  loadingElChild += `${t}`;
});
loadingEl.innerHTML = loadingElChild;

这样子，不同文字的跳动等待就完成了。效果如图：

样式部分

由于文字大小，文字颜色，文字居中这几个样式，都是会被子节点继承的。所以外部传入后，直接赋值给父节点就行。这里代码上不需要单独再改了。
代码举例：

download...

效果如图：

最后

本文讲解了一个组件封装的思路，相信大家看完就知道怎么去把一个功能封装成一个组件了。具体是Vue组件还是React组件，就靠各位了。我这里就不写了。

结束

好了，本文到此结束，希望本文对你有所帮助 :-)
最近新弄了一个公众号：写代码的浩，求关注 。后面会逐步把掌握的前端知识以及职场知识沉淀下来。
如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。