<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<p>{{ name }}-{{ describe }}
<div>高启盛{{info.describe}}</div>
</p>
<p>{{ describe }}</p>
<p>{{ info.describe }}</p>
<p>div</p>
</div>
</body>
<!-- <script src="./test.js"></script> -->
<script>
const objData = {
name: '高启强',
describe: '黑帮大佬',
info: {
describe: '喜欢吃鱼'
}
}
const app = document.getElementById('app')
const fragment = document.createDocumentFragment()
while (child = app.firstChild) { // 通过获取app节点下子节点赋值给虚拟节点
fragment.appendChild(child) // appendChild 特性 如果要添加的子元素节点已经存在于 DOM 树中,那么该节点会被从原来的位置移动到新的位置,而不是创建一个新的节点;
}
const regex = /\{\{\s*(\S+)\s*\}\}/
function parseStr(vnode) {
if (vnode.nodeType == 3) { // nodeType 是 DOM 中的一个属性,它表示节点的类型,其值是一个整数。不同类型的节点有不同的 nodeType 值,常见的值包括:1: 元素节点 2: 属性节点 3: 文本节点 8: 注释节点
const text = vnode.textContent
const regRes = text.split(regex) //切分
if (regRes) {
const newContent = regRes.map((i)=> i.split('.').reduce((data, key) => data[key] || key, objData)).join('') //匹配所有内容
vnode.textContent = newContent
}
}
vnode.childNodes.forEach(element => parseStr(element)); //递归循环所有子元素
}
parseStr(fragment)
app.appendChild(fragment)
</script>
</html>
手写实现Vue模板语法
最新推荐文章于 2024-10-05 01:22:45 发布
该文章展示了一个使用JavaScript处理HTML模板字符串的例子,通过创建文档碎片、正则表达式解析和数据对象映射,实现在DOM元素中动态绑定数据。文章主要讨论了如何更新文本节点的内容,以及对子元素进行递归处理的过程。
摘要由CSDN通过智能技术生成