如何實(shí)現(xiàn) MVVM 類 Vue 迷你框架（六）

我們先來講講怎么處理 model 以及事件：

• model 處理跟 text,html 處理相似
• 事件處理需要找到 @ 屬性的事件，給對(duì)應(yīng)的節(jié)點(diǎn)添加事件監(jiān)聽器

// 節(jié)點(diǎn)元素編譯
class Compile {
 compileElement(node) {
     const nodeAttrs = Array.from(node.attributes);
      nodeAttrs.forEach(attr => {
        const {name, value} = attr;
         // 指令處理
         if(name.startWith('m-')) {
          const dir = this[name.slice(2)]; // 找出指令方法
           dir && dir(node, value);
         }
         // 事件處理
         if(name.startWith('@')) {
          // 找出開頭是 @
           const dir = name.slice(1);
           // 事件監(jiān)聽
           this.eventHandler(node, value, dir);
         }
      })
   }
   // 綁定監(jiān)聽器
   eventHandler(node,value,dir) {
     const { methods } = this.$vm.$options;
      const fn = methods && methods[value];
      fn && node.addEventListener(dir, fn.bind(this.$vm));
   }
}

解析 model

modelUpdater(node, val) {
 node.value = val;
}


model(node, key) {
 this.update(node, key, 'model');
   node.addEventListener('input', e=>{
     this.$vm[key] = e.target.value;
   })
}