feat: 通过编码了解google/incremental-dom原理

README.md

@@ -1,4 +1,5 @@
-# homework11
-* 理解incremental-dom的实现思路，完成其关键api的实现。可以先不考虑render中element的情况，直接输出jsonDom的内容
+# incremental-dom
+
+* 理解incremental-dom的实现思路，可未考虑render中element的情况，直接输出jsonDom的内容
 
 * 参考文档：https://github.com/google/incremental-dom

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 () => {

vdom/vnode.js

@@ -8,17 +8,51 @@ var currentInfo = {
 	currentNode: null,
 	currentParent: null
 }
+
 function elementOpen(tagName) {
-	// TODO
+	currentInfo.currentNode = { tagName }
+	currentInfo.currentNode.parent = currentInfo.currentParent
+
+	// 当前节点没有parent时，说明它时根节点
+	if (currentInfo.currentNode.parent === null) {
+		currentInfo.currentParent = currentInfo.currentNode
+		return
+	}
+
+	// 有父节点时，看children有没有创建
+	if (currentInfo.currentNode.parent.children) {
+		currentInfo.currentNode.parent.children.push(currentInfo.currentNode)
+	} else {
+		currentInfo.currentNode.parent.children = [currentInfo.currentNode]
+	}
+
+	// 把当前节点置为父节点
+	currentInfo.currentParent = currentInfo.currentNode
 }
 
 function text(textContent) {
-	// TODO
+	if (currentInfo.currentNode) {
+		currentInfo.currentNode.text = textContent
+	}
 }
 
 function elementEnd(tagName) {
-	// TODO
+	if (currentInfo.currentNode.tagName === tagName) {
+		const parent = currentInfo.currentNode.parent
+		// 结果里不能有parent属性，要删除
+		delete currentInfo.currentNode.parent
+		// 父节点不为空，则回到父节点
+		if (parent !== null) {
+			currentInfo.currentNode = parent
+			// 同elementOpen。父节点可能继续elementOpen其它子元素，其它子元素的parent其实就是当前节点
+			currentInfo.currentParent = currentInfo.currentNode
+		} else {
+			// parent为空，说明结束了，为了不影响后一轮，清空
+			currentInfo.currentParent = null
+		}
+	}
 }
+
 module.exports = {
 	elementOpen,
 	text,