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

預覽地址：https://jrainlau.github.io/rh...
項目地址：https://github.com/jrainlau/r...

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

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

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

可以在codepen進行預覽：
https://codepen.io/jrainlau/p...

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

被引入進來的Rhyke實例是一個構造函數(shù)，需要通過new操作符并傳入配置對象進行初始化。

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

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

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

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

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

MIT