RhykeJS ——專為開啟“實驗室功能”的手勢密碼庫

摘要： 在前端業務上生產的時候，可能仍然有部分功能需要被隱藏，只有達成特定的條件才能夠顯示，這些功能可以被稱作為“實驗室功能”。常規的做法就是類似Segmentfault，知乎之類的應用，在層級較深的地方設定一個開關以開啟實驗室功能，又或者像微信那樣通過在對話方塊輸入特定的字串，來啟用隱藏的功能。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()
}
複製程式碼