前端组件设计

前端组件设计

主要参考

设计原则

细粒度考量

font color=\"#16884a\

通用性考量

通用性设计其实是一定意义上放弃对 DOM 的掌控，而将 DOM 结构的决定权转移给开发者。通用性设计在将 DOM 结构决定权交给开发者的同时也保留了默认结构，在开发者没有显示自定义的时候默认使用默认渲染结构。组件的形态(DOM结构)永远是千变万化的，但是其行为(逻辑)是固定的。因此通用组件的秘诀之一就是将 DOM 结构的控制权交给开发者，组件只负责行为和最基本的 DOM 结构。

例子

Vue 中的插槽与插槽的后备内容就能做到将 DOM 结构决定权交给开发者同时保留默认结构

我的想法

组件要封装不变的部分，将变化部分的控制权转交给用户

不变的部分

基本功能/行为（逻辑）

最基本的 DOM 结构

变化的部分

表现层/形态

细节 DOM 结构

样式细节

交互细节

调用方式

性能考量

技术选型

css 方案

前端技术架构与工程脑图中的 CSS 部分

此文章中选择的是 CSS-in-JS 方案

jsx 已经将 js 和 html 框定到一个组件中，但是css 依然处于分离状态，这就导致了每次引用组件却还需要显示引入 css。 css-in-js 是正式彻底组件化的解决方案。

js 方案

Typescript

快速启动一个组件库项目

打包

webpack

rollup

我没有实际用过，以后需要了再好好调查选择与实践

Scope Hoisting将模块构建在一个函数内的做法更适合类库的打包。

代码检测

ESLint

commit 规范

font color=\"#c41230\

流行方案

Angular 团队的规范

结构

<type>[optional scope]: <description>[optional body][optional footer(s)]

type

将规范集成到工具流中

规范人们不一定会遵守，因为人总会偷懒。用 commitizen 将此规范集成到工具流中，每个 commit 就不得不遵循规范了。

commitizen

具体使用以后再看

测试工具

业务开发中由于前端需求变动频繁的特性，导致前端对测试的要求并没有后端那么高，后端业务逻辑一旦定型变动很少，比较适合测试。但是基础类库作为被反复依赖的模块和较为稳定的需求是必须做测试的。

测试库选择

Jest

代码美化

prettier

解放人肉美化，同时利于不同人协作的风格一致

持续集成

travis-ci

好像实际用过，但是研究不多，以后需要研究了再好好调查与实践

解放人肉测试 lint，利于保证每次 push 的可靠程度

Travis CI 提供的是持续集成服务（Continuous Integration，简称 CI）。它绑定 Github 上面的项目，只要有新的代码，就会自动抓取。然后，提供一个运行环境，执行测试，完成构建，还能部署到服务器。持续集成指的是只要代码有变更，就自动运行构建和测试，反馈运行结果。确保符合预期以后，再将新代码\"集成\"到主干。持续集成的好处在于，每次代码的小幅变更，就能看到运行结果，从而不断累积小的变更，而不是在开发周期结束时，一下子合并一大块代码。

快速启动脚手架

作者最近开发了一款快速启动组件库开发的命令行工具 create-component利用 create-component init MyComponent 来快速启动项目。我们提供了丰富的可选配置，只要你做好技术选型后，根据提示去选择配置即可。create-component 会自动根据配置生成脚手架，其灵感就来源于 vue-cli和 Angular-cli。

实战设计轮播图组件

研究组件原理

研究组件效果

研究组件在代码中如何使用

基础实现

基础 HTML 结构与 CSS

基础事件效果

无缝切换

目前业界的普遍做法是将图片首尾相连，例如图片1前面连接一个图片4，图片4后跟着一个图片1。这就是为什么之前计算长度时要+2。当我们移动图片4时就不会出现上述向左滑图片却向右滑的情况，因为真实情况是:图片4 -- 滑动为 -> 伪图片1，也就是位置 5 变成了位置 6。当动画结束之后，我们迅速把伪图片1的位置设置为真图片1。这其实是个障眼法，也就是说动画执行过程中实际上是图片4到伪图片1的过程，当结束后我们偷偷把伪图片1换成真图片1。因为两个图一模一样，所以这个转换的过程用户根本看不出来…

动画效果

CSS3

简单易用上手快，兼容性好

requestAnimationFrame API

灵活性更高，能实现 css3实现不了的动画，比如众多缓动动画

缓动函数我没有实际用过，以后需要了再好好调查与实践

改进

通用性优化

性能优化

我们的轮播图其实是有自动轮播功能的，但是很多时候页面并不在用户的可视页面中，我们可以根据是否页面被隐藏来取消定时器终止自动播放：监听 visibilitychange 事件(浏览器标签页被隐藏或显示的时候会触发 visibilitychange 事件)

实际项目开发中最好还是使用成熟的开源组件，要有造轮子的能力和不造轮子的觉悟