From 1de33504a5c7b98b677f520028148b9be4675fff Mon Sep 17 00:00:00 2001 From: gygirl <1308265464@qq.com> Date: Sun, 2 Oct 2022 23:27:43 +0800 Subject: [PATCH 1/2] =?UTF-8?q?'=E6=8F=90=E4=BA=A4=E4=BD=9C=E4=B8=9A'?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- test/index.spec.js | 2 +- vdom/vnode.js | 52 +++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 52 insertions(+), 2 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..c3a58bf 100644 --- a/vdom/vnode.js +++ b/vdom/vnode.js @@ -1,5 +1,6 @@ /* -简单实现incremental-dom中的关键api, 需要考虑同时存在多个vdom的情况。不考虑element的情况,直接转换为jsonDom +简单实现incremental-dom中的关键api, 需要考虑同时存在多个vdom的情况。 +不考虑element的情况,直接转换为jsonDom 返回结果示例 {"tagName":"div","children":[{"tagName":"p","text":"1"}],"text":"2"} */ @@ -8,16 +9,65 @@ var currentInfo = { currentNode: null, currentParent: null } +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, From aa79826cd73733a7fe32d9832ccd40162e658841 Mon Sep 17 00:00:00 2001 From: gygirl <1308265464@qq.com> Date: Sun, 2 Oct 2022 23:31:54 +0800 Subject: [PATCH 2/2] =?UTF-8?q?'=E6=8F=90=E4=BA=A4=E4=BD=9C=E4=B8=9A'?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- vdom/vnode.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/vdom/vnode.js b/vdom/vnode.js index c3a58bf..9b8aa41 100644 --- a/vdom/vnode.js +++ b/vdom/vnode.js @@ -1,6 +1,5 @@ /* -简单实现incremental-dom中的关键api, 需要考虑同时存在多个vdom的情况。 -不考虑element的情况,直接转换为jsonDom +简单实现incremental-dom中的关键api, 需要考虑同时存在多个vdom的情况。不考虑element的情况,直接转换为jsonDom 返回结果示例 {"tagName":"div","children":[{"tagName":"p","text":"1"}],"text":"2"} */