摘要：預(yù)覽地址項(xiàng)目地址初衷在前端業(yè)務(wù)上生產(chǎn)的時(shí)候，可能仍然有部分功能需要被隱藏，只有達(dá)成特定的條件才能夠顯示，這些功能可以被稱作為實(shí)驗(yàn)室功能。參考了上述多種做法，提出了使用摩斯電碼節(jié)奏作為手勢(shì)密碼，開啟實(shí)驗(yàn)室功能的想法。

預(yù)覽地址：https://jrainlau.github.io/rh...
項(xiàng)目地址：https://github.com/jrainlau/r...

在前端業(yè)務(wù)上生產(chǎn)的時(shí)候，可能仍然有部分功能需要被隱藏，只有達(dá)成特定的條件才能夠顯示，這些功能可以被稱作為“實(shí)驗(yàn)室功能”。常規(guī)的做法就是類似Segmentfault，知乎之類的應(yīng)用，在層級(jí)較深的地方設(shè)置一個(gè)開關(guān)以開啟實(shí)驗(yàn)室功能，又或者像微信那樣通過在對(duì)話框輸入特定的字符串，來(lái)啟用隱藏的功能。RhykeJS參考了上述多種做法，提出了使用摩斯電碼節(jié)奏作為手勢(shì)密碼，開啟實(shí)驗(yàn)室功能的想法。

RhykeJS名字來(lái)源于“rhythm”和“awake”的組合，也就是“通過節(jié)奏喚醒”。

在RhykeJS內(nèi)部，監(jiān)聽了指定范圍內(nèi)的用戶點(diǎn)擊事件（mouse或者touch事件）。通過設(shè)置dashTime，可以指定一個(gè)時(shí)間區(qū)分“短信號(hào)”和“長(zhǎng)信號(hào)”并直接轉(zhuǎn)化成節(jié)奏.和-。當(dāng)輸入節(jié)奏與設(shè)定節(jié)奏相吻合時(shí)，則觸發(fā)事件。

可以在codepen進(jìn)行預(yù)覽：
https://codepen.io/jrainlau/p...

支持通過yarn或npm進(jìn)行安裝。

yarn add rhyke

或

npm install rhyke --save

RhykeJS被打包成了UMD模塊，支持ES Modules，CommonJS和Web瀏覽器方式進(jìn)行引入。

ES6 modules

import Rhyke from "rhyke"

CommonJS

const Rhyke = require("rhyke")

Web broswer

被引入進(jìn)來(lái)的Rhyke實(shí)例是一個(gè)構(gòu)造函數(shù)，需要通過new操作符并傳入配置對(duì)象進(jìn)行初始化。

const rhyke = new Rhyke({
    rhythm: "...---...",
    matching (rhyArr) {
      // 獲取用戶的莫斯電碼節(jié)奏輸入
      // 例如 [".", ".", "-", "-", "-", "."]
    },
    matched () {
      // 當(dāng)輸入的節(jié)奏與設(shè)定的節(jié)奏吻合時(shí)觸發(fā)
    },
    unmatched () {
      // 當(dāng)輸入的節(jié)奏與設(shè)定的節(jié)奏不吻合時(shí)觸發(fā)
    },
    onTimeout () {
      // 當(dāng)手勢(shì)密碼輸入超時(shí)時(shí)觸發(fā)
    }
})

Rhyke接受一個(gè)配置對(duì)象作為參數(shù)

defaultOptions = {
    // 受監(jiān)聽范圍，默認(rèn)為“body”
    el: "body",
    // 定義莫斯電碼節(jié)奏，短為“.”，長(zhǎng)為“-”，默認(rèn)為“...”
    rhythm: "...",
    // 定義電碼為“長(zhǎng)”的時(shí)間，默認(rèn)為大于等于400毫秒
    dashTime: 400,
    // 定義輸入超時(shí)時(shí)間，若超時(shí)則重新獲取用戶節(jié)奏輸入，默認(rèn)為2000毫秒
    timeout: 2000,
    // 是否開啟移動(dòng)端touch事件。默認(rèn)為false，使用mouse事件作為監(jiān)聽，在移動(dòng)端需要設(shè)置為true，
    // 使用touch事件作為監(jiān)聽
    tabEvent: false,
    // 獲取用戶的莫斯電碼節(jié)奏輸入
    matching: (arr) => {},
    // 當(dāng)輸入的節(jié)奏與設(shè)定的節(jié)奏吻合時(shí)觸發(fā)
    matched: () => {},
    // 當(dāng)輸入的節(jié)奏與設(shè)定的節(jié)奏不吻合時(shí)觸發(fā)
    unmatched: () => {},
    // 當(dāng)手勢(shì)密碼輸入超時(shí)時(shí)觸發(fā)
    onTimeout: () => {}
}

有時(shí)候可能只需要開啟一次實(shí)驗(yàn)室功能，在開啟完畢以后把受監(jiān)聽范圍的Rhyke事件注銷，那么可以在matched階段的最后通過下列方法進(jìn)行事件解綁：

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

MIT