本文共 1959 字，大约阅读时间需要 6 分钟。

3. Compiler

• 功能
• 负责编译模板，解析指令及插值表达式
• 负责页面的首次渲染
• 在数据变化后重新渲染视图
• 代码

class Compiler {     constructor(vm) {       this.el = vm.$el;       this.vm = vm;       this.compile(this.el);     }     compile(el) {       let childNodes = el.childNodes;       Array.from(childNodes).forEach(node => {         if (this.isTextNode(node)) {           this.compileText(node);         } else if (this.isElementNode(node)) {           this.compileElement(node);         }         if (node.childNodes && node.childNodes.length) {           this.compile(node);         }       });     }     compileElement(node) {       Array.from(node.attributes).forEach(attr => {         if (this.isDirective(attr.name)) {           const attrName = attr.name.substring(2);           this.update(node, attr.value, attrName);         }       });     }     update(node, key, attrName) {       const updateFn = this[attrName + 'Updater'];       if (updateFn && updateFn.call(this, node, this.vm[key], key)) {         return true;       }     }     textUpdater(node, value, key) {       node.textContent = value;       new Watcher(this.vm, key, (newValue) => {         node.textContent = newValue;       });     }     modelUpdater(node, value, key) {       node.value = value;       new Watcher(this.vm, key, (newValue) => {         node.value = newValue;       });       node.addEventListener('input', () => {         this.vm[key] = node.value;       });     }     compileText(node) {       const reg = /\{\{(.+?)\}\}/;       const value = node.textContent;       if (reg.test(value)) {         const key = RegExp.$1.trim();         node.textContent = value.replace(reg, this.vm[key]);         new Watcher(this.vm, key, (newValue) => {           node.textContent = newValue;         });       }     }     isDirective(attrName) {       return attrName.startsWith('v-');     }     isTextNode(node) {       return node.nodeType === 3;     }     isElementNode(node) {       return node.nodeType === 1;     } }

转载地址：http://drir.baihongyu.com/