博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
RhykeJS——专为开启“实验室功能”的手势密码库
阅读量:7113 次
发布时间:2019-06-28

本文共 1594 字,大约阅读时间需要 5 分钟。

clipboard.png

预览地址:

项目地址:

初衷

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

图片描述

原理

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

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

可以在codepen进行预览:

安装及引入

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

yarn add rhyke

npm install rhyke --save

RhykeJS被打包成了UMD模块,支持ES ModulesCommonJSWeb浏览器方式进行引入。

  • ES6 modules

    import Rhyke from 'rhyke'
  • CommonJS

    const Rhyke = require('rhyke')
  • Web broswer

使用

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

转载地址:http://fjwel.baihongyu.com/

你可能感兴趣的文章
我的友情链接
查看>>
python-selenum3 第三天补充——截图和退出
查看>>
在RHEL/CentOS 5/6下停用按下Ctrl-Alt-Del 重启系统的功能
查看>>
linux下删除或重命名乱码文件
查看>>
当域用户存在于power users群组时如何安装打印机(图)
查看>>
安装redislive
查看>>
Python基础学习三 字符串
查看>>
RHEL6.3启动出错init:rcS post-stop process (1005) terminated with status 1
查看>>
解析发展方向,定格人生道路
查看>>
项目需求分析答辩总结
查看>>
怎样才能有效地在国内推广 Ubuntu?
查看>>
点一下某个按钮,表格样式变化。
查看>>
我的友情链接
查看>>
python爬虫项目(新手教程)之知乎(requests方式)
查看>>
Liunx 命令
查看>>
怎么成为一名熟练的iOS开发者
查看>>
C# datagridview绑定数据库
查看>>
CSS代码缩写、兼容浏览器技巧总结
查看>>
将Vim改造为强大的IDE—Vim集成Ctags/Taglist/Cscope/Winmanager/NERDTree/OmniCppComplete(有图有真相)...
查看>>
安卓五子棋(1)
查看>>