微信Vue框架构建Part5——渲染对象数据

概述

• 本节内容是在上一篇的基础上，实现对象类型的数据渲染，渲染到真实页面中

• 难点有：

  1. 如何知道单个vnode中有那些模板语法
  2. 如何实现知道模板语法对应的值
  3. 如何实现数据的替换，实现页面渲染
• 流程概览图示
  

找到模板语法

• 在上文中我们实现了模板和vnode之间的相互映射，且用Map对象保存，所以可通过Map的内置方法实现

• 代码实现

    /**
  * 渲染虚拟DOM
  * @param {*} vm
  * @param {*} vnode
  */
  function renderVNode(vm, vnode) {
  if (vnode.nodeType === NODE_TYPE_TEXT) {
  const templateArr = VNodeToTemplate.get(vnode);
  if (templateArr && templateArr.length) {
  for (let i = 0; i < templateArr.length; i++) {
  // 1.遍历vnode下所有的模板语法
  // 2. 知道每个模板语法对应的值
  // 3. 操作真实DOM，替换模板语法，实现数据渲染
  }
  }
  } else {
  for (let i = 0; i < vnode.children.length; i++) {
  renderVNode(vm, vnode.children[i]);
  }
  }
  }
  

  找到模板语法在data中的值

• vue中的data属性值是一个变量，所以我们将定义一个方法来实现这个功能
• 模板的数据可能有两个，一个是data中定义的，一个可能是类型v-for循环这样的局部变量

• 代码实现

    /**
  * 返回模板语法对应的数据
  * @param {*} dataArr 数据源
  * @param {*} template 模板语法
  */
  export function getTemplateValue(dataArr, template) {
  let templateValue;
  if (dataArr instanceof Array) {
  for (let i = 0; i < dataArr.length; i++) {
  templateValue = getObectValue(dataArr[i], template);
  if (templateValue) break;
  }
  }
  return templateValue;
  }
  function getObectValue(obj, template) {
  let tempalteValue;
  const keyArr = template.split(\".\");
  for (let i = 0; i < keyArr.length; i++) {
  const key = keyArr[i].trim();
  const value = obj[key];
  if (value instanceof Object) {
  // 数据是对象的情况
  return (tempalteValue = getObectValue(value, template));
  } else {
  tempalteValue = obj[key];
  }
  }
  if (!tempalteValue) {
  throw new Error(`${template} is not undefined`);
  }
  return tempalteValue || \"undefined\";
  }

  拿到模板语法的值后，渲染数据

• 之前我们定义的vnode中有真实DOM，所以可以直接操作
• 通过正则实现模板语法的替换

• 代码实现

   function renderVNode(vm, vnode) {
  if (vnode.nodeType === NODE_TYPE_TEXT) {
  const templateArr = VNodeToTemplate.get(vnode);
  if (templateArr && templateArr.length) {
  for (let i = 0; i < templateArr.length; i++) {
  // 获取模板语法的值
  const templateValue = getTemplateValue(
  [vm._data, vnode.env],
  templateArr[i]
  );
  let nodeValue;
  console.log(\"templateValue\", templateValue);
  // 如果模板语法有对应的值，就替换模板语法
  if (templateValue) {
  nodeValue = vnode.text.replace(
  new RegExp(`{{[\\s|${templateArr[i]}|\\s]+}}`, \"g\"),
  templateValue
  );
  }
  // 操作真实DOM，实现数据渲染
  vnode.elm.nodeValue = nodeValue;
  }
  }
  } else {
  for (let i = 0; i < vnode.children.length; i++) {
  renderVNode(vm, vnode.children[i]);
  }
  }
  }
  

微信Vue框架构建Part5——渲染对象数据

原文：https://www.cnblogs.com/imoooja/p/14945248.html