hw11

test/index.spec.js

@@ -1,35 +1,46 @@
-const { elementOpen, text, elementEnd, currentInfo } = require('../vdom/vnodeBack.js');
+const {
+  elementOpen,
+  text,
+  elementEnd,
+  currentInfo
+} = require("../vdom/vnode.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");
+    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('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/vnode.js

@@ -5,23 +5,56 @@
 */
 
 var currentInfo = {
-	currentNode: null,
-	currentParent: null
+  currentNode: null,
+  currentParent: null
+};
+var stack = [];
+
+function createNode(tagName) {
+  var newNode = {
+    tagName
+  };
+
+  if (tagName === "div") {
+    return {
+      ...newNode,
+      children: []
+    };
+  }
+
+  return newNode;
 }
+
 function elementOpen(tagName) {
-	// TODO
+  var newNode = createNode(tagName);
+
+  if (!stack.length) {
+    currentInfo.currentNode = newNode;
+    stack.push(newNode);
+  } else {
+    // peek last element
+    var current = stack[stack.length - 1];
+
+    if ("children" in current) {
+      current.children.push(newNode);
+    }
+
+    stack.push(newNode);
+  }
 }
 
 function text(textContent) {
-	// TODO
+  var current = stack[stack.length - 1];
+  current.text = textContent;
 }
 
 function elementEnd(tagName) {
-	// TODO
+  var last = stack[stack.length - 1];
+  if (tagName === last.tagName) stack.pop();
 }
 module.exports = {
-	elementOpen,
-	text,
-	elementEnd,
-	currentInfo
-};
+  elementOpen,
+  text,
+  elementEnd,
+  currentInfo
+};