关于前端:组件封装思路以一个简单的loading动画举例

内容不简单，只是为了阐明下组件封装的思路。

一个动画

先来看下这个动画

先来剖析下动画，动画中的每一个字母都会有一个独自的跳动。这个跳动的动画是一样的，只是每一个字母的开始工夫不同。能够看进去这个动画外面的动画成果其实是一个。只是不同的元素在指定这个动画的时候，延迟时间有了一个管制。
那么咱们能够把文字的每一个字母都放到一个 span 标签中。而后对每一个事件标签指定一个动画款式。这里能够利用 nth-of-type 来实现。

<div class="loading loading-1">
  <span>l</span>
  <span>o</span>
  <span>a</span>
  <span>d</span>
  <span>i</span>
  <span>n</span>
  <span>g</span>
  <span>.</span>
  <span>.</span>
  <span>.</span>
</div>

.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 变量来解决。代码如下

<div class="loading loading-2">
  <span style="--index:0">l</span>
  <span style="--index:1">o</span>
  <span style="--index:2">a</span>
  <span style="--index:3">d</span>
  <span style="--index:4">i</span>
  <span style="--index:5">n</span>
  <span style="--index:6">g</span>
  <span style="--index:7">.</span>
  <span style="--index:8">.</span>
  <span style="--index:9">.</span>
</div>

.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 读取某个文字来生产的。

<div class="loading loading-3" id="load">loading...</div>

const loadingEl = document.getElementById('load');
const txts = loadingEl.innerText.split('');
let loadingElChild = '';
txts.forEach((t, i) => {loadingElChild += `<span style="--index:${i}">${t}</span>`;
});
loadingEl.innerHTML = loadingElChild;

这样子，不同文字的跳动期待就实现了。成果如图：

款式局部

因为文字大小，文字色彩，文字居中这几个款式，都是会被子节点继承的。所以内部传入后，间接赋值给父节点就行。这里代码上不须要独自再改了。
代码举例：

<div class="loading loading-3" id="load"
  style="font-size:12px;color:red;font-weight:bold;"
>download...</div>

成果如图：

最初

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

完结

好了，本文到此结束，心愿本文对你有所帮忙 :-)
最近新弄了一个公众号：写代码的浩，求关注 😄。前面会逐渐把把握的前端常识以及职场常识积淀下来。
如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。