From 34feee1f4db4d9f3d6e15f428aca68f1f9373e87 Mon Sep 17 00:00:00 2001 From: sj-henryxue Date: Mon, 19 Sep 2022 17:01:24 +0800 Subject: [PATCH 1/2] =?UTF-8?q?feat:=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 | 86 ++++++++++++++++++++++++++++------------------ vdom/vnode.js | 27 --------------- 2 files changed, 53 insertions(+), 60 deletions(-) delete mode 100644 vdom/vnode.js diff --git a/test/index.spec.js b/test/index.spec.js index 94eb243..af8b53d 100644 --- a/test/index.spec.js +++ b/test/index.spec.js @@ -1,35 +1,55 @@ -const { elementOpen, text, elementEnd, currentInfo } = require('../vdom/vnodeBack.js'); +const { + elementOpen, + text, + elementEnd, + currentInfo, +} = require("../vdom/vnodeBack.js"); -describe('idom', () => { - test('校验idom结构', async () => { - elementOpen('div') - elementOpen('p') - text('1') - elementEnd('p') - text('2') - elementEnd('div') - var currentNode = currentInfo.currentNode - expect(JSON.stringify(currentNode)).toBe('{"tagName":"div","children":[{"tagName":"p","text":"1"}],"text":"2"}') - }) -}) +describe("idom", () => { + test("校验idom结构", async () => { + elementOpen("div"); + elementOpen("p"); + text("1"); + elementOpen("span"); + text("3"); + elementEnd("span"); + elementOpen("span"); + text("4"); + elementEnd("span"); + elementEnd("p"); + text("2"); + elementOpen("p"); + text("5"); + elementEnd("p"); + elementEnd("div"); + var currentNode = currentInfo.currentNode; + expect(JSON.stringify(currentNode)).toBe( + '{"tagName":"div","children":[{"tagName":"p","text":"1","children":[{"tagName":"span","text":"3"},{"tagName":"span","text":"4"}]},{"tagName":"p","text":"5"}],"text":"2"}' + ); + }); +}); -describe('idom2', () => { - test('重复调用的时候，生成结果独立互不影响', async () => { - elementOpen('div') - elementOpen('p') - text('1') - elementEnd('p') - text('2') - elementEnd('div') - var currentNode = currentInfo.currentNode - elementOpen('div') - elementOpen('p') - text('3') - elementEnd('p') - text('4') - elementEnd('div') - var currentNode2 = currentInfo.currentNode - expect(JSON.stringify(currentNode)).toBe('{"tagName":"div","children":[{"tagName":"p","text":"1"}],"text":"2"}') - expect(JSON.stringify(currentNode2)).toBe('{"tagName":"div","children":[{"tagName":"p","text":"3"}],"text":"4"}') - }) -}) \ No newline at end of file +describe("idom2", () => { + test("重复调用的时候，生成结果独立互不影响", async () => { + elementOpen("div"); + elementOpen("p"); + text("1"); + elementEnd("p"); + text("2"); + elementEnd("div"); + var currentNode = currentInfo.currentNode; + elementOpen("div"); + elementOpen("p"); + text("3"); + elementEnd("p"); + text("4"); + elementEnd("div"); + var currentNode2 = currentInfo.currentNode; + expect(JSON.stringify(currentNode)).toBe( + '{"tagName":"div","children":[{"tagName":"p","text":"1"}],"text":"2"}' + ); + expect(JSON.stringify(currentNode2)).toBe( + '{"tagName":"div","children":[{"tagName":"p","text":"3"}],"text":"4"}' + ); + }); +}); diff --git a/vdom/vnode.js b/vdom/vnode.js deleted file mode 100644 index 4839adb..0000000 --- a/vdom/vnode.js +++ /dev/null @@ -1,27 +0,0 @@ -/* -简单实现incremental-dom中的关键api, 需要考虑同时存在多个vdom的情况。不考虑element的情况，直接转换为jsonDom -返回结果示例 -{"tagName":"div","children":[{"tagName":"p","text":"1"}],"text":"2"} -*/ - -var currentInfo = { - currentNode: null, - currentParent: null -} -function elementOpen(tagName) { - // TODO -} - -function text(textContent) { - // TODO -} - -function elementEnd(tagName) { - // TODO -} -module.exports = { - elementOpen, - text, - elementEnd, - currentInfo -}; \ No newline at end of file From 2f0ad68dd4fe3d7fa328859b54c366d87abc74fc Mon Sep 17 00:00:00 2001 From: sj-henryxue Date: Sun, 9 Oct 2022 09:24:02 +0800 Subject: [PATCH 2/2] =?UTF-8?q?fix:gitignore=E4=B8=AD=E5=8E=BB=E6=8E=89vno?= =?UTF-8?q?deBack?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 2 +- vdom/vnodeBack.js | 57 +++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 58 insertions(+), 1 deletion(-) create mode 100644 vdom/vnodeBack.js diff --git a/.gitignore b/.gitignore index c16eea0..a501b1d 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,5 @@ node_modules package-lock.json -vnodeBack.js +# vnodeBack.js vnodeBack2.js vnodeBack3.js \ No newline at end of file diff --git a/vdom/vnodeBack.js b/vdom/vnodeBack.js new file mode 100644 index 0000000..cb81fee --- /dev/null +++ b/vdom/vnodeBack.js @@ -0,0 +1,57 @@ +/* +简单实现incremental-dom中的关键api, 需要考虑同时存在多个vdom的情况。不考虑element的情况，直接转换为jsonDom +返回结果示例 +{"tagName":"div","children":[{"tagName":"p","text":"1"}],"text":"2"} +*/ + +var currentInfo = { + currentNode: null, + currentParent: null, +}; + +var stack = []; + +function elementOpen(tagName) { + // TODO + var newNode = { tagName }; + + // 从头open节点时，清空currentParent指向 + currentInfo.currentParent = stack.length > 0 ? currentInfo.currentNode : null; + currentInfo.currentNode = newNode; + + if (!currentInfo.currentParent) currentInfo.currentParent = newNode; + else if (!currentInfo.currentParent.children) { + currentInfo.currentParent.children = [newNode]; + } else { + currentInfo.currentParent.children.push(newNode); + } + + stack.push(newNode); +} + +function text(textContent) { + stack[stack.length - 1]["text"] = textContent; + + currentInfo.currentNode.text = textContent; +} + +function elementEnd(tagName) { + // TODO 闭合节点后将currentNode和currentParent同时指向往上移动 + var temp; + do { + temp = stack.pop(); + // console.log(temp, tagName, currentInfo.currentParent, stack.length); + // currentParent为空时停止移动 + if (temp.tagName === tagName && currentInfo.currentParent) { + currentInfo.currentNode = currentInfo.currentParent; + currentInfo.currentParent = stack[stack.length - 2]; + break; + } + } while (stack.length); +} +module.exports = { + elementOpen, + text, + elementEnd, + currentInfo, +};