[TOC] ## 1 (web\compiler\) web編譯目錄 ### 1-1 目錄層次 ~~~ compiler\directives html.js ;html指令 text.js ;text指令 model.js ;model指令 index.js ;指令編譯入口 ~~~ ### 1-2 html指令編譯 >[info] import ~~~ ;(導入)添加prop接口 import { addProp } from 'compiler/helpers' ~~~ >[info] module ~~~ ;html解析編譯 export default function html (el, dir) { if (!dir.value) return addProp(el, 'innerHTML', `__toString__(${dir.value})`) } ~~~ >[info] export ~~~ ;(導出)html解析接口 export default function html (el, dir) {} ~~~ ### 1-3 text解析 >[info] import ~~~ import { addProp } from 'compiler/helpers' ~~~ >[info] module ~~~ ;text指令解析編譯 export default function text (el, dir) { if (!dir.value) return addProp(el, 'textContent', `__toString__(${dir.value})`) } ~~~ >[info] export ~~~ ;(導出)text指令解析編譯 export default function text (el, dir) {} ~~~ ### 1-4 model指令解析 >[info] import ~~~ ;(導入)添加事件處理,添加prop,獲取綁定屬性 import { addHandler, addProp, getBindingAttr } from 'compiler/helpers' ~~~ >[info] module ~~~ ;v-model 模型指令解析入口 export default function model (el, dir) { ;dir.value,dir.modifiers const value = dir.value const modifiers = dir.modifiers ;el類型select,checkbox,radio if (el.tag === 'select') { if (el.attrsMap.multiple != null) { genMultiSelect(el, value) } else { genSelect(el, value) } } else { ;el類型checkbox,radio,input switch (el.attrsMap.type) { case 'checkbox': genCheckboxModel(el, value) break case 'radio': genRadioModel(el, value) break default: return genDefaultModel(el, value, modifiers) } } } ;創建Checkbox模型 function genCheckboxModel (el, value) { const valueBinding = getBindingAttr(el, 'value') addProp(el, 'checked', `Array.isArray(${value})` + `?(${value}).indexOf(${valueBinding})>-1` + `:!!(${value})` ) addHandler(el, 'change', `var $$a=${value},` + '$$el=$event.target,' + '$$c=$$el.checked;' + 'if(Array.isArray($$a)){' + `var $$v=${valueBinding},` + '$$i=$$a.indexOf($$v);' + 'if($$c){$$i<0&&$$a.push($$v)}' + 'else{$$i>-1&&$$a.splice($$i,1)}' + `}else{${value}=$$c}` ) } ;創建Radio模型 function genRadioModel (el, value) { const valueBinding = getBindingAttr(el, 'value') addProp(el, 'checked', `(${value}==${valueBinding})`) addHandler(el, 'change', `${value}=${valueBinding}`) } ;創建默認模型input function genDefaultModel (el, value, modifiers) { const type = el.attrsMap.type const { lazy, number, trim } = modifiers || {} const event = lazy ? 'change' : 'input' const needCompositionGuard = !lazy && type !== 'range' const valueExpression = `$event.target.value${trim ? '.trim()' : ''}` let code = number || type === 'number' ? `${value}=Number(${valueExpression})` : `${value}=${valueExpression}` if (needCompositionGuard) { code = `if($event.target.composing)return;${code}` } addProp(el, 'value', `(${value})`) addHandler(el, event, code) if (needCompositionGuard) { // need runtime directive code to help with composition events return true } } ;select值代碼 const getSelectedValueCode = 'Array.prototype.filter' + '.call($event.target.options,function(o){return o.selected})' + '.map(function(o){return "_value" in o ? o._value : o.value})' ;select子選項修改 function patchChildOptions (el, fn) { for (let i = 0; i < el.children.length; i++) { const c = el.children[i] if (c.tag === 'option') { addProp(c, 'selected', fn(getBindingAttr(c, 'value'))) } } } ;生成select function genSelect (el, value) { addHandler(el, 'change', `${value}=${getSelectedValueCode}[0]`) patchChildOptions(el, valueBinding => `$(${value})===(${valueBinding})`) } ;生成MultiSelect function genMultiSelect (el, value) { addHandler(el, 'change', `${value}=${getSelectedValueCode}`) patchChildOptions(el, valueBinding => `$(${value}).indexOf(${valueBinding})>-1`) } ~~~ >[info] export ~~~ ;(導出)model解析編譯 ~~~ ### 1-5 index.js web編譯入口 >[info] import ~~~ ;(導入)model指令解析,text指令解析,html指令解析 import model from './model' import text from './text' import html from './html' ~~~ >[info] export ~~~ ;(導出)model,text,html指令解析 export default { model, text, html } ~~~