[TOC] * * * * * # 1 模塊功能 > CreateElement 由屬性生成虛擬節點 > CreateChild 由屬性生成單個虛擬節點 > CreateChildren　遍歷children生成虛擬節點 > createAttrsAndEvents 讀取attrs屬性信息 # 2 模塊實現 ## 2.1 createElement() 生成虛擬節點vnode ~~~ //由tag,props,children生成虛擬節點vnode export default function createElement(tag, props, ...children) { return createChild({ tag, attrs: props, children }); } ~~~ ## 2.2 createChild() 生成虛擬節點vnode ~~~ //由tag,attrs,children,className,style,events,hooks生成虛擬節點 function createChild({ tag, attrs, children, className, style, events, hooks }) { // tag檢查 if (tag === undefined && !isNullOrUndefined(attrs) && !attrs.tpl && !isNullOrUndefined(children) && children.length === 0) { return null; } // attrs檢查 const key = !isNullOrUndefined(attrs) && !isNullOrUndefined(attrs.key) ? attrs.key : undefined; // children 檢查 if (!isNullOrUndefined(children) && children.length === 0) { children = null; } else if (!isInvalidNode(children)) { children = isArray(children) && children.length === 1 ? createChildren(children[0]) : createChildren(children); } if (key !== undefined) { delete attrs.key; } // 讀取attrs的信息 const attrsAndEvents = createAttrsAndEvents(attrs, tag); // 創建虛擬節點vnode const vNode = createVNode(); // className屬性,style屬性 className = className || attrsAndEvents.className; style = style || attrsAndEvents.style; // 注冊屬性到vnode中 vNode.tag = tag || null; vNode.attrs = attrsAndEvents.attrs || null; vNode.events = attrsAndEvents.events || events; vNode.hooks = attrsAndEvents.hooks || hooks; vNode.children = children === undefined ? null : children; vNode.key = key === undefined ? null : key; vNode.className = className === undefined ? null : className; vNode.style = style === undefined ? null : style; // 返回生成的vnode return vNode; } ~~~ ## 2.3 createAttrsAndEvents() 讀取props中的屬性信息 ~~~ export function createAttrsAndEvents(props, tag) { let events = null; let hooks = null; let attrs = null; let className = null; let style = null; if (!isNullOrUndefined(props)) { // 返回數組props if (isArray(props)) { return props; } // 讀取對象類Props for (let prop in props) { if (prop === 'className') { //className className = props[prop]; } else if (prop === 'style') { // style style = props[prop]; } else if (isAttrAHook(prop) && !isFunction(tag)) { // hooks if (isNullOrUndefined(hooks)) { hooks = {}; } hooks[prop.substring(2).toLowerCase()] = props[prop]; delete props[prop]; } else if (isAttrAnEvent(prop) && !isFunction(tag)) { // events if (isNullOrUndefined(events)) { events = {}; } events[prop.toLowerCase()] = props[prop]; delete props[prop]; } else if (isAttrAComponentHook(prop) && isFunction(tag)) { if (isNullOrUndefined(hooks)) { hooks = {}; } hooks['c' + prop.substring(3)] = props[prop]; delete props[prop]; } else if (!isFunction(tag)) { // attrs if (isNullOrUndefined(attrs)) { attrs = {}; } attrs[prop] = props[prop]; } else { attrs = props; } } } // 返回屬性中的信息 return { attrs, events, className, style, hooks }; } ~~~ ## 2.4 createChildren() 遍歷children屬性生成虛擬節點 ~~~ // children屬性檢查并生成 export function createChildren(children) { // children屬性檢查 const childrenDefined = !isNullOrUndefined(children); // children屬性處理 if (childrenDefined && isArray(children)) { const newChildren = []; // 遍歷生成children節點 for (let i = 0; i < children.length; i++) { const child = children[i]; if (!isNullOrUndefined(child) && typeof child === 'object') { if (isArray(child)) { if (child.length > 0) { newChildren.push(createChildren(child)); } else { newChildren.push(null); } } else { newChildren.push(createChild(child)); } } else { newChildren.push(child); } } return newChildren; } else if (childrenDefined && typeof children === 'object') { return children.dom === undefined ? createChild(children) : children; } return children; } ~~~ # 3 模塊總結 * createElement() 　　 　 生成虛擬節點 * createChild()　　　　　 生成虛擬節點 * createAttrsAndEvents() 讀取attrs屬性中的信息 * createChildren()　　　 遍歷children屬性生成虛擬節點