<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>create vue</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="root">
<div><div>{{name}}</div></div>
</div>
<script>
var tmp = document.querySelector("#root");
var data = {
name: "咬人的汪",
age: 18,
};
// vue源码也是用递归写的,不过此处我们仅考虑一个简单的compiler模板解析函数的实现,让我们一步一步来,我会持续更新的
const compiler = (template, data) => {
let childNodes = template.childNodes;
const bracketsReg = /\{\{.+?\}\}/g; // 使用正则表达式的懒惰模式把模板内容挑出来,考虑一个文本内容里面放多个{{xxx}}内容;如果对正则不太熟悉,动动小手 百度一下
for (let i = 0; i < childNodes.length; i++) {
let type = childNodes[i].nodeType;
if (type === 1) {
compiler(childNodes[i], data);
} else if (type === 3) {
let txt = childNodes[i].nodeValue;
txt = txt.replace(bracketsReg, function (val) {
let key = val.replace(/(\{|\})/g, "").trim();
let value = data[key];
return value;
});
childNodes[i].nodeValue = txt;
}
}
};
let generateNodes = tmp.cloneNode(true); // 这里copy一下,免得把原本的元素整没喽
compiler(tmp, data); // ,vue会自动帮我们把解析后的元素替换掉原来的内容,包括原来的元素;
console.log(generateNodes);
</script>
</body>
</html>
把vue掰碎了写一写 - -compiler
最新推荐文章于 2024-07-06 09:03:33 发布