修改用例复杂度，实现incremental-dom的关键api

.gitignore

@@ -1,5 +1,5 @@
 node_modules
 package-lock.json
-vnodeBack.js
+# vnodeBack.js
 vnodeBack2.js
 vnodeBack3.js

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"}')
-  })
-})
+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"}'
+    );
+  });
+});

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,
+};