1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>LikeVue</title> </head> <body> <div id="root"> <div> <span>{{name}}</span> <span>{{age}}</span> </div> </div>
<script> class VNode{
constructor(tag, data, children, text, type) { this.tag = tag && tag.toLowerCase(); this.data = data; this.children = []; this.text = text; this.type = type; }
appendChild(vnode) { this.children.push(vnode); } }
function createVNode(node) { let nodeType = node.nodeType; let _vnode = null; if(nodeType === 1){ let _attrObj = {}; for(let i = 0; i < node.attributes.length; i++){ _attrObj[node.attributes[i].name] = node.attributes[i].value; } _vnode = new VNode(node.tagName, _attrObj, [], undefined, nodeType); for(let i = 0; i < node.childNodes.length; i++){ _vnode.appendChild(createVNode(node.childNodes[i])); } }else if(nodeType === 3){ _vnode = new VNode(null, null, null, node.textContent, nodeType); } return _vnode; } function parseVNode(vnode) { let nodeType = vnode.type; let _node = null; if(nodeType === 1){ _node = document.createElement(vnode.tag); for(let key in vnode.data){ _node.setAttribute(key, vnode.data[key]); } for(let i = 0; i < vnode.children.length; i++){ _node.appendChild(parseVNode(vnode.children[i])); } }else if(nodeType === 3){ _node = document.createTextNode(vnode.text); } return _node; } function LikeVue(options) { this._data = options.data; this.$el = document.querySelector(options.el); this._template = options.el; this._parent = this.$el.parentNode; this.mount(); } LikeVue.prototype.getPropByPath = function (obj, path){ return path.split('.').reduce((acc, cur) => acc[cur], obj); } LikeVue.prototype.combine = function (tmpNode, data) { let rPattern = /\{\{(.*?)\}\}/g; let _type = tmpNode.type; let _tag = tmpNode.tag; let _data = tmpNode.data; let _text = tmpNode.text; let _children = tmpNode.children;
let _vnode = null; if(_type === 1){ _vnode = new VNode(_tag, _data, [], _text, _type); _children.forEach(element => _vnode.appendChild(this.combine(element, data))); }else if(_type === 3){ _text = _text.replace(rPattern, (match, key) => { return this.getPropByPath(data, key.trim()); }); _vnode = new VNode(_tag, _data, _children, _text, _type); } return _vnode; } LikeVue.prototype.mount = function(){ this.render = this.createRenderFn(); this.mountComponent(); } LikeVue.prototype.mountComponent = function(){ let mount = () => { console.log('this.render()', this.render()) this.update(this.render()); } mount.call(this); } LikeVue.prototype.createRenderFn = function(){ let _ast = createVNode(this.$el); console.log('ast', _ast) return function(){ return this.combine(_ast, this._data); } } LikeVue.prototype.update = function(newAST){ this._parent.replaceChild(parseVNode(newAST), this.$el); } let app = new LikeVue({ el: '#root', data: { name: '张三', age: 18 } }); </script> </body> </html>
|