/* @flow */

const fnExpRE = /^\s*([\w$_]+|\([^)]*?\))\s*=>|^function\s*\(/
const simplePathRE = /^\s*[A-Za-z_$][\w$]*(?:\.[A-Za-z_$][\w$]*|\['.*?']|\[".*?"]|\[\d+]|\[[A-Za-z_$][\w$]*])*\s*$/ // keyCode aliases
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;'
} const isMouseEventRE = /^mouse|^pointer|^(click|dblclick|contextmenu|wheel)$/
const mouseEventModifierCode = {
ctrl: 'if(!$event.ctrlKey)return;',
shift: 'if(!$event.shiftKey)return;',
alt: 'if(!$event.altKey)return;',
meta: 'if(!$event.metaKey)return;'
} export function genHandlers (events: ASTElementHandlers, native?: boolean): string {
let res = native ? 'nativeOn:{' : 'on:{'
for (const name in events) {
res += `"${name}":${genHandler(name, events[name])},`
}
return res.slice(0, -1) + '}'
} function genHandler (
name: string,
handler: ASTElementHandler | Array<ASTElementHandler>
): string {
if (!handler) {
return 'function(){}'
} else if (Array.isArray(handler)) {
return `[${handler.map(handler => genHandler(name, handler)).join(',')}]`
} else if (!handler.modifiers) {
return fnExpRE.test(handler.value) || simplePathRE.test(handler.value)
? handler.value
: `function($event){${handler.value}}`
} else {
let code = ''
const keys = []
const isMouseEvnet = isMouseEventRE.test(name)
for (const key in handler.modifiers) {
if (modifierCode[key]) {
code += modifierCode[key]
} else if (isMouseEvnet && mouseEventModifierCode[key]) {
code += mouseEventModifierCode[key]
} else {
keys.push(key)
}
}
if (keys.length) {
code = genKeyFilter(keys) + code
}
const handlerCode = simplePathRE.test(handler.value)
? handler.value + '($event)'
: handler.value
return 'function($event){' + code + handlerCode + '}'
}
} function genKeyFilter (keys: Array<string>): string {
const code = keys.length === 1
? normalizeKeyCode(keys[0])
: Array.prototype.concat.apply([], keys.map(normalizeKeyCode))
if (Array.isArray(code)) {
return `if(${code.map(c => `$event.keyCode!==${c}`).join('&&')})return;`
} else {
return `if($event.keyCode!==${code})return;`
}
} function normalizeKeyCode (key) {
return (
parseInt(key, 10) || // number keyCode
keyCodes[key] || // built-in alias
`_k(${JSON.stringify(key)})` // custom alias
)
}

vue.js 源代码学习笔记 ----- codegenEvents.js的更多相关文章

  1. vue.js 源代码学习笔记 ----- html-parse.js

    /** * Not type-checking this file because it's mostly vendor code. */ /*! * HTML Parser By John Resi ...

  2. vue.js 源代码学习笔记 ----- helpers.js

    /* @flow */ import { parseFilters } from './parser/filter-parser' export function baseWarn (msg: str ...

  3. vue.js 源代码学习笔记 ----- codegen.js

    /* @flow */ import { genHandlers } from './events' import { baseWarn, pluckModuleFunction } from '.. ...

  4. vue.js 源代码学习笔记 ----- fillter-parse.js

    /* @flow */ export function parseFilters (exp: string): string { let inSingle = false let inDouble = ...

  5. vue.js 源代码学习笔记 ----- text-parse.js

    /* @flow */ import { cached } from 'shared/util' import { parseFilters } from './filter-parser' //找到 ...

  6. vue.js 源代码学习笔记 ----- 工具方法 lang

    /* @flow */ // Object.freeze 使得这个对象不能增加属性, 修改属性, 这样就保证了这个对象在任何时候都是空的 export const emptyObject = Obje ...

  7. vue.js 源代码学习笔记 ----- 工具方法 env

    /* @flow */ /* globals MutationObserver */ import { noop } from 'shared/util' // can we use __proto_ ...

  8. vue.js 源代码学习笔记 ----- 工具方法 share

    /* @flow */ /** * Convert a value to a string that is actually rendered. { .. } [ .. ] 2 => '' */ ...

  9. vue.js 源代码学习笔记 ----- instance render

    /* @flow */ import { warn, nextTick, toNumber, _toString, looseEqual, emptyObject, handleError, loos ...

随机推荐

  1. 使用 Nginx 提升网站访问速度

    使用 Nginx 提升网站访问速度 http://www.ibm.com/developerworks/cn/web/wa-lo-nginx/ Nginx 简介 Nginx ("engine ...

  2. C++模拟Http/Https访问web站点

    一.概述 1.Http与Https的区别与联系 在OSI参考模型中Http与Https均属于应用层协议.Http即Hypertext Transfer Protocol,超文本传输协议:而Https为 ...

  3. Flask系列之自定义中间件

    from flask import Flask app = Flask(__name__) @app.route('/index') def index(): return 'Hello World' ...

  4. Missing Number-[回溯][难]

    2. Missing number 转自:https://mp.weixin.qq.com/s/WLRXLdi-3igkjtiWlHg7Ug Given a positive integer n(n≤ ...

  5. Python---1. 基础数据类型

    转载:  Py西游攻关之基础数据类型

  6. cocos代码研究(9)ProgressTimer类学习笔记

    理论部分 ProgressTimer是Node的子类. 该类根据百分比来渲染显示内部的Sprite对象. 变化方向包括径向,水平或者垂直方向. 代码部分 Type getType () const获取 ...

  7. Android 创建SQLite数据库(一)

    Android内置了轻量级的数据库SQLite,这里将自己理解作个记录,方便自己复习. 一.首先,创建SQLite数据库比较常见的方式是通过Android提供的SQLiteOpenHelper来实现, ...

  8. JS在if中的强制类型转换

    JS在if中的强制类型转换 众所周知,JS在很多情况下会进行强制类型转换,其中,最常见两种是: 1.使用非严格相等进行比较,对==左边的值进行类型转换 2.在if判断时,括号内的值进行类型转换,转化为 ...

  9. http://www.cvvision.cn/2888.html

    图像处理(一)图像变形(1)矩形全景图像还原-Siggraph 2014 著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处.作者:cvvision链接:http://www.cvvi ...

  10. TED #06# Questioning the universe

    Stephen Hawking: Questioning the universe 1. 第一段: There is nothing bigger or older than the universe ...