从零开发一款轻量级滑动验证码插件(深度复盘)

关注并将「趣谈前端」设为星标

每天定时分享技术干货/优秀开源/技术思维

github地址: https://github.com/MrXujiang/react-slider-vertify

之前一直在分享 低代码 和 可视化 的文章，其中涉及到很多有意思的知识点和设计思想，今天继续和大家分享一款非常有趣且实用的前端实战项目——从零基于 react + canvas 实现一个滑动验证码，并将其发布到 npm 上供他人使用。当然如果大家更喜欢 vue 的开发方式，也不用担心，文中的设计思想和思路都是通用的，如果大家想学习如何封装 vue 组件并发布到 npm 上，也可以参考我之前的文章: 从零到一教你基于vue开发一个组件库。

从这个实战项目中我们可以学到如下知识点:

• 前端组件设计的基本思路和技巧

• canvas 基本知识和使用

• react hooks 基本知识和使用

• 滑动验证码基本设计原理

• 如何封装一款可扩展的滑动验证码组件

• 如何使用 dumi 搭建组件文档

• 如何发布自己第一个npm组件包

如果你对以上任意知识点感兴趣，相信这篇文章都会给你带来启发。

效果演示

滑动验证组件基本使用和技术实现

上图是实现的滑动验证组件的一个效果演示，当然还有很多配置项可以选择，以便支持更多 定制化 的场景。接下来我先介绍一下如何安装和使用这款验证码插件，让大家有一个直观的体验，然后我会详细介绍一下滑动验证码的实现思路，如果大家有一定的技术基础，也可以直接跳到技术实现部分。

基本使用

因为 react-slider-vertify 这款组件我已经发布到 npm 上了，所以大家可以按照如下方式安装和使用:

1. 安装

# 或者 yarn add @alex_xu/react-slider-vertify
npm i @alex_xu/react-slider-vertify -S

1. 使用

import React from 'react';
import { Vertify } from '@alex_xu/react-slider-vertify';

export default () => {
    return <Vertify 
            width={320}
            height={160}
            onSuccess={() => alert('success')} 
            onFail={() => alert('fail')} 
            onRefresh={() => alert('refresh')} 
        />
};

通过以上两步我们就可以轻松使用这款滑动验证码组件了，是不是很简单?

当然我也暴露了很多可配置的属性，让大家对组件有更好的控制。参考如下:

技术实现

在做这个项目之前我也研究了一些滑动验证码的知识以及已有的技术方案，收获很多。接下来我会以我的组件设计思路来和大家介绍如何用 react 来实现和封装滑动验证码组件，如果大家有更好的想法和建议， 也可以在评论区随时和我反馈。

1.组件设计的思路和技巧

每个人都有自己设计组件的方式和风格，但最终目的都是更 优雅 的设计组件。这里我大致列举一下 优雅 组件的设计指标:

• 可读性(代码格式统一清晰，注释完整，代码结构层次分明，编程范式使用得当)

• 可用性(代码功能完整，在不同场景都能很好兼容，业务逻辑覆盖率)

• 复用性(代码可以很好的被其他业务模块复用)

• 可维护性(代码易于维护和扩展，并有一定的向下/向上兼容性)

• 高性能

以上是我自己设计组件的考量指标，大家可以参考一下。

另外设计组件之前我们还需要明确需求，就拿滑动验证码组件举例，我们需要先知道它的使用场景(用于登录注册、活动、论坛、短信等高风险业务场景的人机验证服务)和需求(交互逻辑，以什么样的方式验证，需要暴露哪些属性<