diff --git a/ToyReact.js b/ToyReact.js index 4ddaa1c..4118409 100644 --- 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);