RhykeJS——专为开启“实验室功能”的手势密码库

[jrainlau]

预览地址： https://jrainlau.github.io/rhyke/

项目地址： https://github.com/jrainlau/rhyke

初衷

在前端业务上生产的时候，可能仍然有部分功能需要被隐藏，只有达成特定的条件才能够显示，这些功能可以被称作为“实验室功能”。常规的做法就是类似 Segmentfault，知乎之类的应用，在层级较深的地方设置一个开关以开启实验室功能，又或者像微信那样通过在对话框输入特定的字符串，来启用隐藏的功能。RhykeJS 参考了上述多种做法，提出了使用摩斯电码节奏作为手势密码，开启实验室功能的想法。

原理

RhykeJS名字来源于“ rhythm ”和“ awake ”的组合，也就是“通过节奏唤醒”。

在RhykeJS内部，监听了指定范围内的用户点击事件（ mouse 或者 touch 事件）。通过设置dashTime，可以指定一个时间区分“短信号”和“长信号”并直接转化成节奏.和-。当输入节奏与设定节奏相吻合时，则触发事件。

可以在 codepen 进行预览： https://codepen.io/jrainlau/pen/vWWypv

安装及引入

支持通过 yarn 或 npm 进行安装。

yarn add rhyke

或

npm install rhyke --save

RhykeJS被打包成了UMD模块，支持ES Modules，CommonJS和Web 浏览器方式进行引入。

• ES6 modules

  import Rhyke from 'rhyke'
  

• CommonJS

  const Rhyke = require('rhyke')
  

• Web broswer

  <script src="rhyke.js"></script>
  <script>
      const Rhyke = window.Rhyke
  </script>
  

使用

被引入进来的Rhyke实例是一个构造函数，需要通过new操作符并传入配置对象进行初始化。

const rhyke = new Rhyke({
    rhythm: '...---...',
    matching (rhyArr) {
      // 获取用户的莫斯电码节奏输入
      // 例如 [".", ".", "-", "-", "-", "."]
    },
    matched () {
      // 当输入的节奏与设定的节奏吻合时触发
    },
    unmatched () {
      // 当输入的节奏与设定的节奏不吻合时触发
    },
    onTimeout () {
      // 当手势密码输入超时时触发
    }
})

配置

Rhyke接受一个配置对象作为参数

defaultOptions = {
    // 受监听范围，默认为“ body ”
    el: 'body',
    // 定义莫斯电码节奏，短为“.”，长为“-”，默认为“...”
    rhythm: '...',
    // 定义电码为“长”的时间，默认为大于等于 400 毫秒
    dashTime: 400,
    // 定义输入超时时间，若超时则重新获取用户节奏输入，默认为 2000 毫秒
    timeout: 2000,
    // 是否开启移动端 touch 事件。默认为 false，使用 mouse 事件作为监听，在移动端需要设置为 true，
    // 使用 touch 事件作为监听
    tabEvent: false,
    // 获取用户的莫斯电码节奏输入
    matching: (arr) => {},
    // 当输入的节奏与设定的节奏吻合时触发
    matched: () => {},
    // 当输入的节奏与设定的节奏不吻合时触发
    unmatched: () => {},
    // 当手势密码输入超时时触发
    onTimeout: () => {}
}

API

有时候可能只需要开启一次实验室功能，在开启完毕以后把受监听范围的 Rhyke 事件注销，那么可以在matched阶段的最后通过下列方法进行事件解绑：

matched () {
  // something was awoke
  rhyke.removeListener()
}

证书

MIT

[image72]

👍代码非常简洁， 值得学习
已 start