渲染器
虚构DOM: 应用Javascript对象形容实在的 DOM 构造. 例如:
const vNode = { // 标签名 tag: 'div', // 标签属性 prop: { onClick () { alert('点击') } }, // 子节点 children: [ { tag: 'span', children: 'hello world' } ] }应用渲染器将虚构 DOM 变成实在 DOM 并渲染到浏览器页面中, 并寻找并且只更新变动的内容, 如图1:
因而须要编写一个渲染器, 将下面的虚构 DOM 渲染为实在 DOM:
function Render(vNode, root) { // 应用 vNode.tag 作为标签名创立 DOM 对象 const el = document.createElement(vNode.tag) // 遍历 vNode.props 将属性, 事件增加到 DOM 对象 for (const key in vNode.props) { if (/^on/.test(key)) { // 如果 key 以 on 卡头, 阐明它是个事件, 注册相应事件 el.addEventListener(key.substr(2).toLocaleLowerCase(), vNode.props[key]) } } // 解决 children if (typeof vNode.children == 'string') { // 为字符串阐明它是元素的文本子节点 let text = document.createTextNode(vNode.children) el.appendChild(text) } else if (Array.isArray(vNode.children)) { // 递归调用 Render 函数渲染子节点, 应用以后元素 el 作为挂载点 for (let item of vNode.children) { Render(item, el) } } // 元素增加到挂载点下 root.appendChild(el) }渲染器 Render 实现思路, 总体为三步:
- 创立元素: 把 vNode.tag 作为标签名创立 DOM 元素
- 为元素增加属性和事件: 遍历 vNode.props 对象, 如果 key 以 on 字符结尾, 阐明它是一个事件, 把字符 on 截取后再调用 addEventListener 绑定事件处理函数
- 解决 children: 如果 children 是一个数组, 就用递归调动 Render 持续渲染, 留神此时要把刚刚创立的元素作为挂载点(父节点); 如果 children 是字符串, 则应用 createTextNode 函数创立一个文本节点, 并将其增加到新创建的元素内
组件
组件实质就是一组 DOM 元素的封装, 能够定义一个函数代表组件(也能够应用对象, 该对象增加一个函数返回值为虚构 DOM 即可), 函数的返回值是组件要渲染的内容
const MyComponent = function () { return { tag: 'div', props: { onClick: () => alert('组件') }, children: 'click me' }}因而就能够应用虚构 DOM 形容组件:
const vNode = { tag: MyComponent}因而在渲染器渲染时就须要判断 tag 的类型:
function Render (vNode, container) { if (typeof vNode.tag === 'string') { // 阐明 vNode 形容的是标签元素 mountElement(vNode, container) } else if (typeof vNode.tag === 'function') { // 阐明 vNode 形容的是组件 mountComponent(vNode, container) } }若为字符串就能够应用 mountElement 函数进行渲染, 内容与上文的 Render 函数一样
function mountElement(vNode, root) { // 应用 vNode.tag 作为标签名创立 DOM 对象 const el = document.createElement(vNode.tag) // 遍历 vNode.props 将属性, 事件增加到 DOM 对象 for (const key in vNode.props) { if (/^on/.test(key)) { // 如果 key 以 on 卡头, 阐明它是个事件, 注册相应事件 el.addEventListener(key.substr(2).toLocaleLowerCase(), vNode.props[key]) } } // 解决 children if (typeof vNode.children == 'string') { // 为字符串阐明它是元素的文本子节点 let text = document.createTextNode(vNode.children) el.appendChild(text) } else if (Array.isArray(vNode.children)) { // 递归调用 Render 函数渲染子节点, 应用以后元素 el 作为挂载点 for (let item of vNode.children) { // 进行递归时, 仍然须要判断 tag 的类型, 因而是调用 Render Render(item, el) } } // 元素增加到挂载点下 root.appendChild(el) }若为函数则应用 mountComponent 函数渲染:
function mountComponent (vNode, container) { // 调用组件函数, 获取组件要渲染的内容(虚构DOM) const subtree = vNode.tag() // 递归调用 Render 渲染 subtrss Render(subtree, container)}