内容简介:在前端业务上生产的时候,可能仍然有部分功能需要被隐藏,只有达成特定的条件才能够显示,这些功能可以被称作为“实验室功能”。常规的做法就是类似Segmentfault,知乎之类的应用,在层级较深的地方设置一个开关以开启实验室功能,又或者像微信那样通过在对话框输入特定的字符串,来启用隐藏的功能。RhykeJS参考了上述多种做法,提出了使用摩斯电码节奏作为手势密码,开启实验室功能的想法。在
在前端业务上生产的时候,可能仍然有部分功能需要被隐藏,只有达成特定的条件才能够显示,这些功能可以被称作为“实验室功能”。常规的做法就是类似Segmentfault,知乎之类的应用,在层级较深的地方设置一个开关以开启实验室功能,又或者像微信那样通过在对话框输入特定的字符串,来启用隐藏的功能。RhykeJS参考了上述多种做法,提出了使用摩斯电码节奏作为手势密码,开启实验室功能的想法。
原理
RhykeJS
名字来源于“rhythm”和“awake”的组合,也就是“通过节奏唤醒”。
在 RhykeJS
内部,监听了指定范围内的用户点击事件(mouse或者touch事件)。通过设置 dashTime
,可以指定一个时间区分“短信号”和“长信号”并直接转化成节奏 .
和 -
。当输入节奏与设定节奏相吻合时,则触发事件。
可以在codepen进行预览: codepen.io/jrainlau/pe…
安装及引入
支持通过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() } 复制代码
以上所述就是小编给大家介绍的《RhykeJS ——专为开启“实验室功能”的手势密码库》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- TensorFlow 实现手势识别
- Flutter 手势密码控件
- Flutter学习指南:交互、手势和动画
- iOS —— 触摸事件传递及响应与手势
- iOS – 几种常见手势的简单使用[原创]
- 使用Flutter仿写TikTok的手势交互(二)
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
MultiCharts Powerlanguage 语法字典
MultiCharts中国技术顾问团队 / 东方出版社 / 2013-9-1 / 38
MC编程工具书,适用于MC7.4及8.5版本一起来看看 《MultiCharts Powerlanguage 语法字典》 这本书的介绍吧!