切换虚拟DOM Step 1

guibwl · Aug 10, 2020 · 879fa35 · 879fa35
1 parent 948f77c
commit 879fa35
Showing 1 changed file with 59 additions and 25 deletions.
diff --git a/ToyReact.js b/ToyReact.js
@@ -1,36 +1,70 @@
 
 class ElementWrapper {
     constructor(type) {
-        this.root = document.createElement(type);
+        // this.root = document.createElement(type);
+        this.type = type;
+        this.props = Object.create(null);
+        this.children = [];
     }
     setAttribute(name, value) {
-        if (name.match(/^on([\s\S]+)$/)) {
-            const eventName =
-                RegExp.$1.replace(/^[\s\S]/, s => s.toLowerCase());
-            this.root.addEventListener(eventName, value);
-        }
+        // if (name.match(/^on([\s\S]+)$/)) {
+        //     const eventName =
+        //         RegExp.$1.replace(/^[\s\S]/, s => s.toLowerCase());
+        //     this.root.addEventListener(eventName, value);
+        // }
 
-        if (name === 'className') 
-            name = 'class';
+        // if (name === 'className') 
+        //     name = 'class';
 
-        this.root.setAttribute(name, value);
+        // this.root.setAttribute(name, value);
+        this.props[name] = value;
     }
     // vchild 为虚拟 dom
     appendChild(vchild) {
-        let range = document.createRange();
-        if (this.root.children.length) {
-            range.setStartAfter(this.root.lastChild);
-            range.setEndAfter(this.root.lastChild);
-        } else {
-            range.setStart(this.root, 0);
-            range.setEnd(this.root, 0);
-        }
-        vchild.mountTo(range);
+        this.children.push(vchild);
+        // let range = document.createRange();
+        // if (this.root.children.length) {
+        //     range.setStartAfter(this.root.lastChild);
+        //     range.setEndAfter(this.root.lastChild);
+        // } else {
+        //     range.setStart(this.root, 0);
+        //     range.setEnd(this.root, 0);
+        // }
+        // vchild.mountTo(range);
     }
     // parent 为真实 dom
     mountTo(range) {
         range.deleteContents();
-        range.insertNode(this.root);
+
+        let element = document.createElement(this.type);
+
+        for (let name in this.props) {
+            let value = this.props[name];
+            if (name.match(/^on([\s\S]+)$/)) {
+                const eventName =
+                    RegExp.$1.replace(/^[\s\S]/, s => s.toLowerCase());
+                element.addEventListener(eventName, value);
+            }
+
+            if (name === 'className') 
+                name = 'class';
+
+            element.setAttribute(name, value);
+        }
+
+        for (let child of this.children) {
+            let range = document.createRange();
+            if (element.children.length) {
+                range.setStartAfter(element.lastChild);
+                range.setEndAfter(element.lastChild);
+            } else {
+                range.setStart(element, 0);
+                range.setEnd(element, 0);
+            }
+            child.mountTo(range);
+        }
+
+        range.insertNode(element);
     }
 }
 
@@ -68,13 +102,13 @@ export class Component {
         if (this.didMount && this.componentWillUpdate) 
             this.componentWillUpdate();
 
-        let placeholder = document.createComment('placeholder');
-        let range = document.createRange();
-        range.setStart(this.range.endContainer, this.range.endOffset);
-        range.setEnd(this.range.endContainer, this.range.endOffset);
-        range.insertNode(placeholder);
+        // let placeholder = document.createComment('placeholder');
+        // let range = document.createRange();
+        // range.setStart(this.range.endContainer, this.range.endOffset);
+        // range.setEnd(this.range.endContainer, this.range.endOffset);
+        // range.insertNode(placeholder);
 
-        this.range.deleteContents();
+        // this.range.deleteContents();
         let vdom = this.render();
         vdom.mountTo(this.range);