From cb79d3624f66a6348e6c08f3b76cdf373e1b8469 Mon Sep 17 00:00:00 2001 From: "blake.li" Date: Mon, 19 Sep 2022 00:55:28 +0800 Subject: [PATCH] commit homework --- test/index.spec.js | 2 +- vdom/vnode.js | 69 ++++++++++++++++++++++++++++++++++++++++------ 2 files changed, 61 insertions(+), 10 deletions(-) diff --git a/test/index.spec.js b/test/index.spec.js index 94eb243..8e9ddb6 100644 --- a/test/index.spec.js +++ b/test/index.spec.js @@ -1,4 +1,4 @@ -const { elementOpen, text, elementEnd, currentInfo } = require('../vdom/vnodeBack.js'); +const { elementOpen, text, elementEnd, currentInfo } = require('../vdom/vnode.js'); describe('idom', () => { test('校验idom结构', async () => { diff --git a/vdom/vnode.js b/vdom/vnode.js index 4839adb..7e348d3 100644 --- a/vdom/vnode.js +++ b/vdom/vnode.js @@ -4,24 +4,75 @@ {"tagName":"div","children":[{"tagName":"p","text":"1"}],"text":"2"} */ +// 这里的currentInfo.currentNode 只用作测试用例返回值,其实在我的代码中currentNode代表的是顶层root节点 var currentInfo = { - currentNode: null, - currentParent: null + currentNode: null, + currentParent: null } + +// 新开标签入栈,主要用栈检查是否正确关闭。currentNode 代表真正的当期节点。currentParent 代表真正的当期父节点 +let stack = []; +let currentNode = null; +let currentParent = null; + function elementOpen(tagName) { - // TODO + let element = { + 'tagName': tagName + } + if (stack.length === 0) { + currentInfo.currentNode = element; + currentNode = null; + } + + currentParent = currentNode; + currentNode = element; + + if (currentParent) { + !currentParent.children ? currentParent.children = [element] : currentParent.children.push(element); + } + + stack.push(tagName); } function text(textContent) { - // TODO + currentNode.text = textContent; } function elementEnd(tagName) { - // TODO + if (stack[stack.length - 1] !== tagName) { + console.log('标签闭合错误,请检查~'); + return; + } + + stack.pop(); + + currentNode = currentParent; + + if (currentInfo.currentNode) { + // 当期操作节点已经到顶层了,不需要计算父亲节点 + if (currentInfo.currentNode === currentNode) { + return; + } + + // 计算父亲节点 + let node = currentInfo.currentNode; + function findNode(curNode) { + for(let i = 0; i< curNode.children; i++) { + if(currentNode === curNode.children[i]) { + currentParent = curNode; + } else { + findNode(curNode.children[i]) + } + } + } + findNode(node); + } } + + module.exports = { - elementOpen, - text, - elementEnd, - currentInfo + elementOpen, + text, + elementEnd, + currentInfo }; \ No newline at end of file