你能告诉我一些关于Keymap.js的例子吗？（权威指南）？

Question

function Keymap(bindings) { 
    this.map = {}; // Define the key identifier->handler map 
    if (bindings) { // Copy initial bindings into it 
     for(name in bindings) this.bind(name, bindings[name]); 
    } 
} 

// Bind the specified key identifier to the specified handler function 
Keymap.prototype.bind = function(key, func) { 
    this.map[Keymap.normalize(key)] = func; 
}; 

// Delete the binding for the specified key identifier 
Keymap.prototype.unbind = function(key) { 
    delete this.map[Keymap.normalize(key)]; 
}; 

// Install this Keymap on the specified HTML element 
Keymap.prototype.install = function(element) { 
    // This is the event-handler function 
    var keymap = this; 
    function handler(event) { return keymap.dispatch(event, element); } 

    // Now install it 
    if (element.addEventListener) 
     element.addEventListener("keydown", handler, false); 
    else if (element.attachEvent) 
     element.attachEvent("onkeydown", handler); 
}; 

// This method dispatches key events based on the keymap bindings. 
Keymap.prototype.dispatch = function(event, element) { 
    // We start off with no modifiers and no key name 
    var modifiers = "" 
    var keyname = null; 

    // Build the modifier string in canonical lowercase alphabetical order. 
    if (event.altKey) modifiers += "alt_";  
    if (event.ctrlKey) modifiers += "ctrl_"; 
    if (event.metaKey) modifiers += "meta_"; 
    if (event.shiftKey) modifiers += "shift_"; 

    // The keyname is easy if the DOM Level 3 key property is implemented: 
    if (event.key) keyname = event.key; 
    // Use the keyIdentifier on Safari and Chrome for function key names 
    else if (event.keyIdentifier && event.keyIdentifier.substring(0,2) !== "U+") 
     keyname = event.keyIdentifier; 
    // Otherwise, use the keyCode property and the code-to-name map below 
    else keyname = Keymap.keyCodeToKeyName[event.keyCode]; 

    // If we couldn't figure out a key name, just return and ignore the event. 
    if (!keyname) return; 

    // The canonical key id is modifiers plus lowercase key name 
    var keyid = modifiers + keyname.toLowerCase(); 

    // Now see if the key identifier is bound to anything 
    var handler = this.map[keyid]; 

    if (handler) { // If there is a handler for this key, handle it 
     // Invoke the handler function 
     var retval = handler.call(element, event, keyid); 

     // If the handler returns false, cancel default and prevent bubbling 
     if (retval === false) { 
      if (event.stopPropagation) event.stopPropagation(); // DOM model 
      else event.cancelBubble = true;      // IE model 
      if (event.preventDefault) event.preventDefault(); // DOM 
      else event.returnValue = false;      // IE 
     } 

     // Return whatever the handler returned 
     return retval; 
    } 
}; 

// Utility function to convert a key identifier to canonical form. 
// On non-Macintosh hardware, we could map "meta" to "ctrl" here, so that 
// Meta-C would be "Command-C" on the Mac and "Ctrl-C" everywhere else. 
Keymap.normalize = function(keyid) { 
    keyid = keyid.toLowerCase();   // Everything lowercase 
    var words = keyid.split(/\s+|[\-+_]/); // Split modifiers from name 
    var keyname = words.pop();    // keyname is the last word 
    keyname = Keymap.aliases[keyname] || keyname; // Is it an alias? 
    words.sort();       // Sort remaining modifiers 
    words.push(keyname);     // Add the normalized name back 
    return words.join("_");    // Concatenate them all 
}; 

Keymap.aliases = {  // Map common key aliases to their "official" 
    "escape":"esc",  // key names used by DOM Level 3 and by 
    "delete":"del",  // the key code to key name map below. 
    "return":"enter",  // Both keys and values must be lowercase here. 
    "ctrl":"control", 
    "space":"spacebar", 
    "ins":"insert" 
}; 

// The legacy keyCode property of the keydown event object is not standardized 
// But the following values seem to work for most browsers and OSes. 
Keymap.keyCodeToKeyName = { 
    // Keys with words or arrows on them 
    8:"Backspace", 9:"Tab", 13:"Enter", 16:"Shift", 17:"Control", 18:"Alt", 
    19:"Pause", 20:"CapsLock", 27:"Esc", 32:"Spacebar", 33:"PageUp", 
    34:"PageDown", 35:"End", 36:"Home", 37:"Left", 38:"Up", 39:"Right", 
    40:"Down", 45:"Insert", 46:"Del", 

    // Number keys on main keyboard (not keypad) 
    48:"0",49:"1",50:"2",51:"3",52:"4",53:"5",54:"6",55:"7",56:"8",57:"9", 

    // Letter keys. Note that we don't distinguish upper and lower case 
    65:"A", 66:"B", 67:"C", 68:"D", 69:"E", 70:"F", 71:"G", 72:"H", 73:"I", 
    74:"J", 75:"K", 76:"L", 77:"M", 78:"N", 79:"O", 80:"P", 81:"Q", 82:"R", 
    83:"S", 84:"T", 85:"U", 86:"V", 87:"W", 88:"X", 89:"Y", 90:"Z", 

    // Keypad numbers and punctuation keys. (Opera does not support these.) 
    96:"0",97:"1",98:"2",99:"3",100:"4",101:"5",102:"6",103:"7",104:"8",105:"9", 
    106:"Multiply", 107:"Add", 109:"Subtract", 110:"Decimal", 111:"Divide", 

    // Function keys 
    112:"F1", 113:"F2", 114:"F3", 115:"F4", 116:"F5", 117:"F6", 
    118:"F7", 119:"F8", 120:"F9", 121:"F10", 122:"F11", 123:"F12", 
    124:"F13", 125:"F14", 126:"F15", 127:"F16", 128:"F17", 129:"F18", 
    130:"F19", 131:"F20", 132:"F21", 133:"F22", 134:"F23", 135:"F24", 

    // Punctuation keys that don't require holding down Shift 
    // Hyphen is nonportable: FF returns same code as Subtract 
    59:";", 61:"=", 186:";", 187:"=", // Firefox and Opera return 59,61 
    188:",", 190:".", 191:"/", 192:"`", 219:"[", 220:"\\", 221:"]", 222:"'" 
}; 

JavaScript权威指南：第六届Keymap.js

Keymap.js：绑定的关键事件处理函数。

该模块定义了一个Keymap类。这个类的一个实例代表一个 关键标识符（定义如下）到处理函数的映射。 Keymap 可以安装在HTML元素上以处理keydown事件。当发生这样的事件时，键映射使用其映射来调用适当的处理程序。

当您创建Keymap时，您可以传递代表 Keymap的初始绑定集的JavaScript对象。该对象 的属性名称是关键标识符，属性值是处理函数。 在创建键映射后，您可以通过将密钥 标识符和处理函数传递给bind（）方法来添加新绑定。您可以通过将密钥标识符传递给unbind（）方法来删除绑定 。

要使用键盘映射，请调用其install（）方法，并传递HTML元素 （如文档对象）。 install（）将onkeydown事件处理程序添加到指定对象的 。当这个处理程序被调用时，它确定按键的标识符 ，并调用绑定到该键标识符的处理函数，如果有的话， 。一个键盘映射可以安装在多个 一个HTML元素上。

密钥标识符

甲密钥标识符是一个键加 被同时按住任何修改键不区分大小写的字符串表示。密钥名称通常是 密钥上的（未转换的）文本。合法的关键名称包括“A”，“7”， “F2”，“PageUp”，“Left”，“Backspace”和“Esc”。

请参阅本模块中的Keymap.keyCodeToKeyName对象以获取名称列表。 这些是由DOM Level 3标准定义的名称的子集，并且该类将在实现时使用事件对象的关键属性。

密钥标识符还可以包括修饰符密钥前缀。这些前缀是 Alt，Ctrl，Meta和Shift。它们不区分大小写，并且必须使用空格或下划线将 与密钥名称和相互间隔开， 连字符或+分开。例如：“SHIFT + A”，“Alt_F2”，“meta-v”和“ctrl alt left”。 在Mac上，Meta是Command键，Alt是Option键。某些浏览器 将Windows键映射到Meta修饰符。

处理函数

处理程序被调用作为在其 安装键映射的文档或文档元素的方法和传递两个参数： 1）的事件对象为keydown事件 2）密钥标识符被按下的键 处理程序返回值成为keydown处理程序的返回值。 如果处理函数返回false，则键映射将停止冒泡，并且取消与keydown事件关联的任何默认操作。

...

Answer 1

摘要代码：

• 的KeyMap一个新实例通过new关键字创建。
  可选地，有可能通过含有键映射的对象，以预先结合：

  { 
      "key-combi1": func1, //key-combi such as alt+a, ctrl+c, shift+s 
      "key-combi2": func2, 
      .... 
      "key-combin": funcn //<-- Last property should not end with a comma 
  } 
  

• 创建一个新的实例（var keymap = new Keymap();）之后，可以使用以下的方法（听取在逻辑时间顺序） ：

  1. bind - 添加附加键结合
     keymap.bind("key-combi", function);
  2. unbind - 删除键绑定
     keymap.unbind("key-combi");
  3. install - 将键映射到元件（绑定到​​事件）
     keymap.install(element);

实例

用这个方法最简单的方法如下所示：

var keymap = new Keymap;      // Create a new instance of Keymap 
keymap.bind("ctrl_a", function(event, keyid) { // Bind key combi: ctrl+a 
    alert("Key pressed down! KeyId: " + keyid) 
}); 
keymap.install(document.body);     // Attach keymap to <body> 

的另一种方式，以相同的结果：

var keymap = new Keymap({      // Create a new instance of Keymap 
    "ctrl_a": function(event, keyid) {   // Bind key combi: ctrl+a 
     alert("Key pressed down! KeyId: " + keyid) 
    } 
}); 
keymap.install(document.body);     // Attach keymap to <body>