12.28早上 -- 开篇数据驱动
12.28晚上 -- 数据驱动p1.1
12.29早上 -- 回顾数据驱动
12.29下午 -- 数据驱动p2
在初学vue源码时碰到了一些难懂的问题,但是随着不断的去学习,发现就像书或电影一样每次学都会有每次不一样的理解点
数据驱动一章主要讲我从HTML节点View视图拿到DOM节点元素模板然后加上data数据去Compile一下
步奏就是:1.拿到DOM 2.拿到data 3.编译
<body>
<div id="app">
<h4>{{name}}</h4>
</div>
<script src="complie.js"></script>
<script>
var data = {
name: "imycode",
sex: "male",
age: 18
};
var tempNodes = document.querySelector("#app");
var generateNode = tempNodes.cloneNode(true); //=>dom元素可以copy
console.log(tempNodes); //=>前后不同
compiler(generateNode, data);
console.log(generateNode); //=>前后不同
app.parentNode.replaceChild(generateNode, app); //=>整个替换
</script>
</body>
//=>compiler
var regExp = /\{\{(.+?)\}\}/g;
function compiler(template, data) {
var childNodes = template.childNodes;
for (let i = 0; i < childNodes.length; i++) {
var type = childNodes[i].nodeType;
if (type === 3) {
let txt = childNodes[i].nodeValue;
txt = txt.replace(regExp, (_, g) => {
let key = g.trim();
let value = data[key];
return value;
});
childNodes[i].nodeValue = txt;
} else if (type === 1) {
compiler(childNodes[i], data);
}
}
}
在compiler中我们需要做的就是模板编译,循环模板的每一个元素,检验模板是否是文本节点,文本节点拿正则,如果是文本节点找到插值key 用data[key]找到这个节点放的内容,最后返回,然后把每一项的文本节点替换一个新的内容,如果不是文本节点的话,就递归直到循环完
网友评论