[TOC] **** ## 3 events.js 事件解析 >[info] import ~~~ ;(導入)數組判斷基礎工具 import { isArray } from 'shared/util' ~~~ >[info] module ~~~ ;簡單路徑正則 const simplePathRE = /^[A-Za-z_$][\w$]*(?:\.[A-Za-z_$][\w$]*|\['.*?'\]|\[".*?"\]|\[\d+\]|\[[A-Za-z_$][\w$]*\])*$/ ;按鍵別名 const keyCodes = { esc: 27, tab: 9, enter: 13, space: 32, up: 38, left: 37, right: 39, down: 40, 'delete': [8, 46] } ;代碼轉換 const modifierCode = { stop: '$event.stopPropagation();', prevent: '$event.preventDefault();', self: 'if($event.target !== $event.currentTarget)return;' } ;生成事件接口 export function genHandlers (events) { let res = 'on:{' for (const name in events) { res += `"${name}":${genHandler(events[name])},` } return res.slice(0, -1) + '}' } ;生成事件處理函數 function genHandler (handler) { if (!handler) { return 'function(){}' } else if (isArray(handler)) { return `[${handler.map(genHandler).join(',')}]` } else if (!handler.modifiers) { return simplePathRE.test(handler.value) ? handler.value : `function($event){${handler.value}}` } else { let code = 'function($event){' for (const key in handler.modifiers) { code += modifierCode[key] || genKeyFilter(key) } const handlerCode = simplePathRE.test(handler.value) ? handler.value + '($event)' : handler.value return code + handlerCode + '}' } } ;按鍵處理 function genKeyFilter (key) { const code = keyCodes[key] if (isArray(code)) { return `if(${code.map(c => `$event.keyCode!==${c}`).join('&&')})return;` } else { return `if($event.keyCode!==${code})return;` } } ~~~ >[info] export ~~~ ;(導出)事件解析接口 export function genHandlers (events) {} ~~~