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

bVYHYF?w=922&h=271

初衷

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

bVYHZ9?w=640&h=417

原理

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

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

安装及引入

支持通过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

const Rhyke = window.Rhyke

使用

被引入进来的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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值