共计 5598 个字符，预计需要花费 14 分钟才能阅读完成。
概述
在上一篇中，咱们实现了 vue 对象的构建，并且曾经初步实现了变量的绑定和事件绑定，当初咱们就剩下一个问题须要解决，就是 v-for 指令的实现，这也是本系列中最难的局部。
难点
实现 v -for 有以下几个难点
- 表达式解析，v-for 有两种语法
item in items和(item,index) in items，第二种能够获取到序号，程序须要解析这两种语法 - 编译 v -for 内的元素，尽管曾经有了 compile 函数，然而 v -for 循环内的上下文和 vue 并不统一，什么意思呢，compile 外面绑定的值和变量是 vue，vue 是全局的，但 v -for 内绑定的变量是循环内的，每次都不一样
编译
在 compile 中，如果遇到 v -for 会先将 v -for 内的节点全副生成好，再作为子节点 append 到父节点上，因而第一步就是判断是否蕴含 v -for 指令
function isLoop(element) {return element.attributes && element.attributes['v-for'];
}compile 函数递归编译子节点从
for (let i = 0; i < node.childNodes.length; ++i) {element.appendChild(compile(node.childNodes[i]));
}批改为
for (let i = 0; i < node.childNodes.length; ++i) {let child = node.childNodes[i];
if (isLoop(child)) {let ns = compileLoop(child, element);
for (let j = 0; j < ns.length; ++j) {element.appendChild(ns[j]);
}
} else {element.appendChild(compile(child));
}
}compileLoop会对 v -for 节点进行编译，并且返回节点数组，父节点对返回的节点进行 append。
解析
编译的第一步就是解析，须要解析三局部的内容
- 循环的数组变量
- 循环过程中变量名
- 循环过程中元素下标
let vfor = element.attributes['v-for'].value;
let itemName;
let indexName;
let varName;
let loopExp1 = /\(([^,]+),([^\)]+)\)\s+in\s+(.*)/g;
let loopExp2 = /(\w+)\s+in\s+(.*)/g;
let m;
if (m = loopExp1.exec(vfor)) {itemName = m[1];
indexName = m[2]
varName = m[3];
} else if (m = loopExp2.exec(vfor)) {itemName = m[1];
varName = m[2];
}间接用正则进行解析，loopExp1 和 loopExp2 别离对应两种语法，varName：数组名，itemName：循环变量名，indexName：循环下标
元素生成
解析实现后就能够开始生成元素
var directive = {origin: element.cloneNode(true),
attr: 'v-for',
exp: {
varName: varName,
indexName: indexName,
itemName: itemName
}
}
element.attributes.removeNamedItem('v-for');
let arrays = vue[varName];
let elements = [];
for (let i = 0; i < arrays.length; ++i) {vue[itemName] = arrays[i];
vue[indexName] = i;
elements.push(compile(element.cloneNode(true), false));
}
if (!loopElement[varName]) {let loop = {};
loop.elements = elements;
loop.parent = parent;
loopElement[varName] = loop;
}- 定义了一个变量 directive，把 v -for 一些语法也做了保留，下次能够间接用，无需再次解析
- 因为是用 clone 生成，因而须要移除掉 v -for 标签，不然会进入死循环
- 递归调用 compile 生成新元素，在每一次循环都将以后变量和下标放到 vue 中，保障了编译的时候程序能够找到变量
for (let i = 0; i < arrays.length; ++i) {vue[itemName] = arrays[i];
vue[indexName] = i;
elements.push(compile(element.cloneNode(true), false));
}- 将后果保留到 loopElement 中，保留的目标是，当绑定的数组发生变化时，须要删除以后相干节点从新生成新的节点
指令
directive.change = function (name, value) {let ele = loopElement[name];
for (let i = 0; i < ele.elements.length; ++i) {ele.elements[i].remove();}
let newEles = [];
let arrays = vue[this.exp.varName];
for (let i = 0; i < arrays.length; ++i) {vue[this.exp.itemName] = arrays[i];
vue[this.exp.indexName] = i;
let node = compile(this.origin.cloneNode(true));
newEles.push(node);
}
loopElement[name].elements = newEles;
for (let j = 0; j < newEles.length; ++j) {ele.parent.appendChild(newEles[j]);
}
}
addSubscriber(varName, directive);- 先对以后元素进行移除
- 和下面的逻辑一样，生成新的元素
- 通过之前保留的 parent 进行 append
- addSubscriber 创立订阅者将指令注册到订阅者中
残缺的 compileLoop 代码如下
function compileLoop(element, parent) {let vfor = element.attributes['v-for'].value;
let itemName;
let indexName;
let varName;
let loopExp1 = /\(([^,]+),([^\)]+)\)\s+in\s+(.*)/g;
let loopExp2 = /(\w+)\s+in\s+(.*)/g;
let m;
if (m = loopExp1.exec(vfor)) {itemName = m[1];
indexName = m[2]
varName = m[3];
} else if (m = loopExp2.exec(vfor)) {itemName = m[1];
varName = m[2];
}
var directive = {origin: element.cloneNode(true),
attr: 'v-for',
exp: {
varName: varName,
indexName: indexName,
itemName: itemName
}
}
element.attributes.removeNamedItem('v-for');
let arrays = vue[varName];
let elements = [];
for (let i = 0; i < arrays.length; ++i) {vue[itemName] = arrays[i];
vue[indexName] = i;
elements.push(compile(element.cloneNode(true), false));
}
if (!loopElement[varName]) {let loop = {};
loop.elements = elements;
loop.parent = parent;
loopElement[varName] = loop;
}
directive.change = function (name, value) {let ele = loopElement[name];
for (let i = 0; i < ele.elements.length; ++i) {ele.elements[i].remove();}
let newEles = [];
let arrays = vue[this.exp.varName];
for (let i = 0; i < arrays.length; ++i) {vue[this.exp.itemName] = arrays[i];
vue[this.exp.indexName] = i;
let node = compile(this.origin.cloneNode(true));
newEles.push(node);
}
loopElement[name].elements = newEles;
for (let j = 0; j < newEles.length; ++j) {ele.parent.appendChild(newEles[j]);
}
}
addSubscriber(varName, directive);
return elements;
}事件响应
在上一篇中咱们的事件响应是这么写的
function addEvent(element, event, method) {element.addEventListener(event, function(e) {let params = [];
let paramNames = method.params;
if (paramNames) {for (let i = 0; i < paramNames.length; ++i) {params.push(vue[paramNames[i]]);
}
}
vue[method.name].apply(vue, params);
})
}这么写对于循环有个问题，因为每次循环都会重置下标和循环变量，下标和循环变量都是保留在 vue 对象中的，所以当事件触发时，params.push(vue[paramNames[i]]);这行代码是取不到值的因为上下文曾经发生变化。解决这个问题的方法就是闭包，通过闭包保留过后环境信息，不至于运行时失落，只需将获取数据移到里面就行。
function addEvent(element, event, method) {let params = [];
let paramNames = method.params;
if (paramNames) {for (let i = 0; i < paramNames.length; ++i) {params.push(vue[paramNames[i]]);
}
}
element.addEventListener(event, function (e) {vue[method.name].apply(vue, params);
})
}到这里就能够实现 v -for 指令，但之前的一些遗留还未修复，咱们在 dom 解析这篇中提到目前对于文本节点值发生变化只是简略的文本替换，如下：
if (node.nodeType == 3) {directive.change = function(name, value) {this.node.textContent = this.origin.replace("\{\{" + name + "\}\}", value);
}
} 如果有多个变量或者相似 todo.text 这种多级变量后果就会出错，这里写了一个专门用来解析表白的函数
if (node.nodeType == 3) {directive.change = function (name, value) {this.node.textContent = evaluteExpression(this.origin);
}
} - evaluteExpression
function evaluteExpression(text) {let vars = parseVariable(text);
for (let i = 0; i < vars.length; ++i) {let value = getVariableValue(vars[i]);
text = text.replace("\{\{" + vars[i] + "\}\}", value);
}
return text;
}- 先对变量进行解析
- 循环获取变量值，通过调用 getVariableValue
- 循环替换
- getVariableValue
function getVariableValue(name) {
let value;
if (name.indexOf(".")) {let ss = name.split(".");
value = vue[ss[0]];
if (value) {for (let i = 1; i < ss.length; ++i) {value = value[ss[i]];
if (value == undefined) {break;}
}
}
} else {value = vue[name];
}
if (value == undefined || value == null) {value = "";}
return value;
}- 相似
item.text的多级变量进行循环获取值 - 如果未定义设置为空字符串
成果
以下是实现的效果图，也能够点击这里进行查看
残缺 js 代码点击这里查看
参考
点击以下链接，查看该系列其余文章
- 模拟 vue 本人入手写响应式框架(一) – Vue 实现 todo 利用
- 模拟 vue 本人入手写响应式框架(二) – Vue 对象创立用
- 模拟 vue 本人入手写响应式框架(三) – dom 解析
- 模拟 vue 本人入手写响应式框架(四) – Vue 对象构建
- 模拟 vue 本人入手写响应式框架 (五) 终章 – v-for 指令实现
正文完