RhykeJS ——專爲開啓「實驗室功能」的手勢密碼庫

預覽地址：jrainlau.github.io/rhyke/ 項目地址：github.com/jrainlau/rh…

初衷

在前端業務上生產的時候，可能仍然有部分功能須要被隱藏，只有達成特定的條件纔可以顯示，這些功能能夠被稱做爲「實驗室功能」。常規的作法就是相似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()
}
複製代碼

證書

MIT