[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属性生成虚拟节点