⌨️ Vue項目給應用優雅的綁定快捷鍵

想必各位前端看官也必定作過這樣的需求，給咱們的應用某些主要的功能綁定一個快捷鍵。尤爲是工具類的產品，讓用戶可使用快捷鍵操做，能大大提升工具使用效率。

如何綁定快捷鍵

聰明的你也想到了，Vue 官方文檔自有解釋：按鍵修飾符

可是實際實踐過的你也可能知道，這種綁定按鍵事件的方式都是綁定在了當前 ViewModel 上的。也就是模版字符串 template 中，這樣就沒法自定義一個時機在 JavaScript 中自由調用。不過這樣作也有好處，好比當一個 ViewModel 被銷燬時，全部的事件處理器都會自動被刪除。你無須擔憂如何清理它們。

這裏使用第三方插件 keymaster 來作按鍵綁定，編程式綁定任意按鍵。

使用插件

安裝

npm i keymaster -S
or
yarn add keymaster -S

使用

import key from 'keymaster'

// 給按鍵 A 綁定快捷鍵
key('a', function(){ alert('you pressed a!') });

// 回調函數返回 false 以阻止瀏覽器默認事件行爲
key('ctrl+r', function(){ alert('stopped reload!'); return false });

// 綁定多個快捷鍵，作同一件事
key('⌘+r, ctrl+r', function(){ });

定製插件

若是一個函數被使用超過3次以上，我習慣封裝一個通用函數，不如直接寫成 Vue 中的 plugin 好了。

// @/plugins/shortcut.js

import Vue from 'vue'
import keymaster from 'keymaster'

const bindKeyHandler = fn => {
  return () => {
    fn()
    return false
  }
}

export const shortcut = {
  bind: (seed, func) => keymaster(seed, bindKeyHandler(func)),
  ...keymaster
}

Vue.prototype.$shortcut = shortcut

插件爲 Vue.prototype 添加了全局方法 $shortcut，shortcut 擴展了 keymaster 「遺散多年」的 bind 方法（綁定按鍵事件），我猜 keymaster 沒有提供 bind API，多是由於 bind() 是 JavaScript 內置的方法。爲了不命名衝突或者語法歧義。

綁定事件

🌰 舉個例子：給應用添加保存功能，那快捷鍵必定是 ⌘ / Ctrl + S 啦

<script>
export default {
  ...
  mounted () {
        // 綁定按鍵綁全套，mac 和 windows
    this.$shortcut.bind('⌘+s, ctrl+s', this.handleSave)
  },
  methods: {
    handleSave () {
      // 保存邏輯
    }
  }
  ...
}
</script>

銷燬事件

Vue 組件中綁定事件監聽器的最佳實踐告訴咱們，綁定後的事件是須要在組件銷燬時候解綁的。

<script>
export default {
  ...
  beforeDestroy () {
    this.$shortcut.unbind('⌘+s, ctrl+s')
  }
  ...
}
</script>

作好防抖

拿上面綁定事件例子講，可能包括你在內的開發者，會習慣無限 Ctrl + S 保存代碼，一頓三連擊以得到安全感😂，假設我爲應用綁定了快捷鍵，可是沒作防抖的話。那麼會觸發屢次 handleSave 回調。其實這是不必的。爲了不這種狀況發生，咱們讓正常的回調函數變成防抖的回調函數。

直接上例子，這裏藉助 lodash 中的 debounce 函數來實現：

<script>
import { debounce } from 'lodash'

export default {
  ...
  mounted () {
        // 綁定按鍵綁全套，mac 和 windows
    this.$shortcut.bind('⌘+s, ctrl+s', this.handleSave)
  },
  methods: {
    handleSave: debounce(function () {
      // 保存邏輯
    }, 200)
  }
  ...
}
</script>

快捷鍵列表

應用功能一旦多起來，那麼你提供的快捷鍵必定也變得多起來，爲了提高用戶體驗以及產品的專業性。咱們能夠給快捷鍵製做一個列表。統一展現快捷鍵。像這樣：

系統間差別

要注意截圖中展現的是 macOS 下的快捷鍵 ⌘，若是是 Windows 系統，那麼須要替換相應的 Ctrl

咱們可使用 navigator.userAgent 來判斷當前用戶的操做系統是什麼。來抉擇在頁面到底顯示的快捷鍵字符。

你能夠點擊 https://simpl.info/useragent/ 來當即查看 navigator.userAgent 打印的內容

// 在不考慮 linux 系統的狀況下，咱們能夠這樣簡單的判斷當前的操做系統是 mac 仍是 windows
const ns = navigator.userAgent
const isMacOS = /\\b(Mac OS|Macintosh)\\b/.test(ns)

語義化HTML

形如⌘ + S 這樣的快捷鍵，咱們可使用 HTML 標籤 <kbd> 來標識鍵盤映射。

<!-- 舉個例子 -->
<kbd>⌘</kbd> + <kbd>S</kbd>

同類型類庫

• hotkeys - 是 keymaster 的臨摹版

原文： https://www.xlbd.me/posts/202...