☰

mini mvvm

自用，bug较多，if和for指令不能使用

目前為 2022-05-07 提交的版本，檢視 最新版本。

此腳本不應該直接安裝，它是一個供其他腳本使用的函式庫。欲使用本函式庫，請在腳本 metadata 寫上： // @require https://update.cn-greasyfork.org/scripts/444466/1047822/mini%20mvvm.js 

  1. // ==UserScript==
  2. // @name        mini mvvm 
  3. // @namespace   Violentmonkey Scripts
  4. // @match       *://*/*
  5. // @grant       none
  6. // @version     0.0.3
  7. // @author      -
  8. // @description 自用，bug较多，if和for指令不能使用
  9. // ==/UserScript==
  10. function* getSequence() {
  11.     let i = 0;
  12.     while (true) {
  13.         yield (i = i + 1);
  14.     }
  15. }
  16. let sequence = getSequence();
  17. function getId(name) {
  18.     return `${name ? name : 'none'}.${new Date().getTime()}.${Math.floor(Math.random() * 10000)}.${sequence.next().value}`;
  19. }
  20. class Dep {
  21.     constructor(name) {
  22.         this.subs = [];
  23.         this.id = getId(name);
  24.     }
  25.     delete() {
  26.         if (this.subs.length < 1)
  27.             return;
  28.         this.notify();
  29.         this.subs.forEach((sub) => {
  30.             sub.removeDep(this);
  31.         });
  32.         this.subs.length = 0;
  33.     }
  34.     addSub(sub) {
  35.         this.subs.push(sub);
  36.     }
  37.     depend() {
  38.         Dep.target.addDep(this);
  39.     }
  40.     notify() {
  41.         this.subs.forEach((sub) => {
  42.             sub.update();
  43.         });
  44.     }
  45. }
  46. Dep.target = null;
  47.  
  48. const extend = (a, b) => {
  49.     for (const key in b) {
  50.         a[key] = b[key];
  51.     }
  52.     return a;
  53. };
  54. const isFunction = (val) => typeof val === 'function';
  55. const NOOP = () => { };
  56. const objectToString = Object.prototype.toString;
  57. const toTypeString = (value) => objectToString.call(value);
  58. const isPlainObject = (val) => toTypeString(val) === '[object Object]';
  59. const hasOwnProperty = Object.prototype.hasOwnProperty;
  60. const hasOwn = (val, key) => hasOwnProperty.call(val, key);
  61. function toArray(nodes) {
  62.     return [].slice.call(nodes);
  63. }
  64. const unique = (arr) => Array.from(new Set(arr));
  65.  
  66. function observe(value, vm) {
  67.     if (!value || typeof value !== 'object')
  68.         return value;
  69.     if(value.__ob__)
  70.         return value
  71.     return new Observer(value, vm).proxy;
  72. }
  73. class Observer {
  74.     constructor(data, vm) {
  75.         Object.keys(data).forEach((key) => {
  76.             data[key] = observe(data[key], vm);
  77.         });
  78.         this.dep = new Dep('data');
  79.         Object.defineProperty(data, '__ob__', {
  80.             configurable: false,
  81.             enumerable: false,
  82.             value:this
  83.         })
  84.         this.proxy = new Proxy(data, {
  85.             get: (target, key, receiver) => {
  86.                 const result = Reflect.get(target, key, receiver)
  87.                 if (Dep.target){
  88.                   if(isPlainObject(result) && result.__ob__)
  89.                     result.__ob__.dep.depend()
  90.                   else
  91.                     this.dep.depend()
  92.                 }
  93.                 return result;
  94.             },
  95.             set: (target, key, newValue, receiver) => {
  96.                 const result = Reflect.set(target, key, observe(newValue), receiver);
  97.                 this.dep.notify();
  98.                 return result;
  99.             },
  100.             deleteProperty: (target, key) => {
  101.                 const childObj = target[key];
  102.                 let result = false;
  103.                 if (isPlainObject(childObj) && hasOwn(childObj, '__ob__')) {
  104.                     let ob = childObj['__ob__'];
  105.                     ob.dep.delete();
  106.                     ob = null;
  107.                     result = Reflect.deleteProperty(target, key);
  108.                     this.dep.notify();
  109.                 }
  110.                 return result;
  111.             },
  112.         });
  113.     }
  114. }
  115.  
  116. class EventEmitter {
  117.     constructor(scope) {
  118.         this._events = new Map();
  119.         if (scope)
  120.             this._scope = scope;
  121.     }
  122.     has(eventName){
  123.       return this._events.has(eventName)
  124.     }
  125.     on(eventName, callback) {
  126.         if (!this._events.has(eventName))
  127.             this._events.set(eventName, []);
  128.         this._events.get(eventName).push(callback);
  129.     }
  130.     emit(eventName, value) {
  131.         if (!this._events.has(eventName))
  132.             return;
  133.         this._events.get(eventName).forEach((callback) => {
  134.             if (isFunction(callback))
  135.                     callback(value);
  136.         });
  137.     }
  138.     off(eventName, callback) {
  139.         if (callback) {
  140.             this._events.set(eventName, this._events.get(eventName).filter((cb) => {
  141.                 if (cb === callback || cb.originFunction === callback)
  142.                     return false;
  143.             }));
  144.         }
  145.         else {
  146.             this._events.delete(eventName);
  147.         }
  148.     }
  149.     once(eventName, callback) {
  150.         const self = this;
  151.         const onceCallback = function () {
  152.             self.off(eventName, onceCallback);
  153.             callback.apply(self, arguments);
  154.         };
  155.         onceCallback.originFunction = callback;
  156.         this.on(eventName, onceCallback);
  157.     }
  158. }
  159.  
  160. var EventLoop;
  161. (function (EventLoop) {
  162.     const callbacks = [];
  163.     const p = Promise.resolve();
  164.     let pending = false;
  165.     let useMacroTask = false;
  166.     function flushCallbacks() {
  167.         pending = false;
  168.         const copies = callbacks.slice(0);
  169.         callbacks.length = 0;
  170.         copies.forEach((fn) => fn());
  171.     }
  172.     EventLoop.flushCallbacks = flushCallbacks;
  173.     const macroTimerFunction = () => {
  174.         setTimeout(flushCallbacks, 0);
  175.     };
  176.     const microTimerFunction = () => {
  177.         p.then(flushCallbacks);
  178.     };
  179.     function withMacroTask(fn) {
  180.         return (fn._withTask ||
  181.             (fn._withTask = function () {
  182.                 useMacroTask = true;
  183.                 const res = fn.apply(null, arguments);
  184.                 useMacroTask = false;
  185.                 return res;
  186.             }));
  187.     }
  188.     EventLoop.withMacroTask = withMacroTask;
  189.     function nextTick(context, callback) {
  190.         let _resolve;
  191.         callbacks.push(() => {
  192.             if (callback)
  193.                 callback.call(context);
  194.             else if (_resolve)
  195.                 _resolve(context);
  196.         });
  197.         if (!pending) {
  198.             pending = true;
  199.             if (useMacroTask)
  200.                 macroTimerFunction();
  201.             else
  202.                 microTimerFunction();
  203.         }
  204.         if (!callback)
  205.             return new Promise((resolve) => {
  206.                 _resolve = resolve;
  207.             });
  208.     }
  209.     EventLoop.nextTick = nextTick;
  210. })(EventLoop || (EventLoop = {}));
  211.  
  212. function getApplyFunction(fn, scope) {
  213.     const func = function () {
  214.         fn.apply(scope, arguments);
  215.     };
  216.     return func;
  217. }
  218. const createVM = (options = {}) => new MVVM(extend(options, {
  219.     element: options.element ? options.element : document.body
  220. }));
  221. class MVVM {
  222.     constructor(options = {}) {
  223.         this.$event = new EventEmitter(this);
  224.         this.$children = {};
  225.         this.$refs = {};
  226.         this.$on = getApplyFunction(this.$event.on, this.$event);
  227.         this.$emit = getApplyFunction(this.$event.emit, this.$event);
  228.         this.$off = getApplyFunction(this.$event.off, this.$event);
  229.         this.$once = getApplyFunction(this.$event.once, this.$event);
  230.         this.$options = options;
  231.         this.components = options.components;
  232.         MVVM.cid += 1;
  233.         this.cid = MVVM.cid;
  234.         this._init();
  235.         if (this.$options.element)
  236.             this.compile(this.$options.element);
  237.     }
  238.     $watch(key, cb) {
  239.         new Watcher(this, key, cb);
  240.     }
  241.     $nextTick(callback) {
  242.         if (callback)
  243.             return EventLoop.nextTick(this, callback);
  244.         return EventLoop.nextTick(this);
  245.     }
  246.     use(fn) {
  247.         fn.call(this, this);
  248.         return this;
  249.     }
  250.     compile(element) {
  251.         this.$compile = new Compile(element, this);
  252.         this.$emit('mounted');
  253.     }
  254.     _init() {
  255.         this._initMethods();
  256.         this._initLifecycle();
  257.         this.$emit('beforeCreate');
  258.         this._initData();
  259.         this._initComputed();
  260.         this._initWatch();
  261.         this.$emit('created');
  262.     }
  263.     _initMethods() {
  264.         let methods = this.$options.methods;
  265.         if (typeof methods !== 'object')
  266.             return;
  267.         Object.keys(methods).forEach((key) => {
  268.             let object = methods[key];
  269.             if (!isFunction(object))
  270.                 return;
  271.             if (this[key])
  272.                 return;
  273.             this[key] = object;
  274.         });
  275.     }
  276.     _initLifecycle() {
  277.         this.$options.beforeCreate &&
  278.             this.$on('beforeCreate', this.$options.beforeCreate.bind(this));
  279.         this.$options.created && this.$on('created', this.$options.created.bind(this));
  280.         this.$options.beforeMount &&
  281.             this.$on('beforeMount', this.$options.beforeMount);
  282.         this.$options.mounted && this.$on('mounted', this.$options.mounted.bind(this));
  283.         this.$options.beforeUpdate &&
  284.             this.$on('beforeUpdate', this.$options.beforeUpdate);
  285.         this.$options.updated && this.$on('updated', this.$options.updated.bind(this));
  286.     }
  287.     _initData() {
  288.         const data = this.$options.data;
  289.         this.$data = isFunction(data) ? data.call(this) : data;
  290.         Object.keys(this.$data).forEach((key) => Object.defineProperty(this, key, {
  291.             configurable: false,
  292.             enumerable: true,
  293.             get: () => {
  294.                 return this.$data[key];
  295.             },
  296.             set: (newVal) => {
  297.                 this.$data[key] = newVal;
  298.             },
  299.         }));
  300.         this.$data = observe(this.$data, this);
  301.     }
  302.     _initComputed() {
  303.         let computed = this.$options.computed;
  304.         if (!isPlainObject(computed))
  305.             return;
  306.         Object.keys(computed).forEach((key) => {
  307.             let object = computed[key];
  308.             Object.defineProperty(this, key, {
  309.                 get: isFunction(object)
  310.                     ? object
  311.                     : 'get' in object
  312.                         ? object.get
  313.                         : NOOP,
  314.                 set: isFunction(object)
  315.                     ? object
  316.                     : 'set' in object
  317.                         ? object.set
  318.                         : NOOP,
  319.             });
  320.         });
  321.     }
  322.     _initWatch() {
  323.         let watch = this.$options.watch;
  324.         if (typeof watch !== 'object')
  325.             return;
  326.         Object.keys(watch).forEach((key) => {
  327.             let object = watch[key];
  328.             if (!isFunction(object))
  329.                 return;
  330.             this.$watch(key, object);
  331.         });
  332.     }
  333. }
  334. MVVM.cid = 0;
  335. function getVMVal(vm, exp) {
  336.     let temp;
  337.     exp.split('.').forEach((k, i) => {
  338.         if (i === 0)
  339.             temp = vm[k];
  340.         else
  341.             temp = temp[k];
  342.     });
  343.     return temp;
  344. }
  345. function setVMVal(vm, exp, value) {
  346.     let temp;
  347.     let exps = exp.split('.');
  348.     if (exps.length === 1)
  349.         vm[exps[0]] = value;
  350.     else
  351.         exps.forEach((k, i, exps) => {
  352.             if (i === 0)
  353.                 temp = vm[k];
  354.             else if (i < exps.length - 1)
  355.                 temp = temp[k];
  356.             else if (i === exps.length - 1)
  357.                 temp[k] = value;
  358.         });
  359. }
  360.  
  361. function parseGetter(exp) {
  362.     return (vm) => getVMVal(vm, exp);
  363. }
  364. class Watcher {
  365.     constructor(vm, expOrFn, callback,deep = false) {
  366.         this.callback = callback;
  367.         this.vm = vm;
  368.         this.deep = deep
  369.         this._depIds = {};
  370.         if (isFunction(expOrFn))
  371.             this._getter = expOrFn;
  372.         else
  373.             this._getter = parseGetter(expOrFn.trim());
  374.         this.value = this.get();
  375.     }
  376.     update() {
  377.         let newVal = this.get();
  378.         let oldVal = this.value;
  379.         if (newVal === oldVal && !(this.deep && isPlainObject(newVal) && isPlainObject(oldVal))) return
  380.         this.value = newVal;
  381.         this.callback.call(this.vm, newVal, oldVal);
  382.     }
  383.     removeDep(dep) {
  384.         delete this._depIds[dep.id];
  385.     }
  386.     addDep(dep) {
  387.         if (!hasOwn(this._depIds, dep.id)) {
  388.             dep.addSub(this);
  389.             this._depIds[dep.id] = dep;
  390.         }
  391.     }
  392.     get() {
  393.         Dep.target = this;
  394.         let value = this._getter.call(this.vm, this.vm);
  395.         Dep.target = null;
  396.         return value;
  397.     }
  398. }
  399.  
  400. class ElementUtility {
  401.     static fragment(el) {
  402.         let fragment = document.createDocumentFragment(), child;
  403.         while ((child = el.firstChild))
  404.             fragment.appendChild(child);
  405.         return fragment;
  406.     }
  407.     static parseHTML(html) {
  408.         const domParser = new DOMParser();
  409.         let temp = domParser.parseFromString(html, 'text/html');
  410.         return temp.body.children;
  411.     }
  412.     static isElementNode(node) {
  413.         if (node instanceof Element)
  414.             return node.nodeType == 1;
  415.         return false;
  416.     }
  417.     static isTextNode(node) {
  418.         if (node instanceof Text)
  419.             return node.nodeType == 3;
  420.         return false;
  421.     }
  422.     static text(node, value) {
  423.         if (typeof value === 'number')
  424.             value = String(value);
  425.         node.textContent = value ? value : '';
  426.     }
  427.     static html(node, value) {
  428.         if (typeof value === 'number')
  429.             value = String(value);
  430.         node.innerHTML = value ? value : '';
  431.     }
  432.     static class(node, value, oldValue) {
  433.         let className = node.className;
  434.         className = className.replace(oldValue, '').replace(/\s$/, '');
  435.         let space = className && String(value) ? ' ' : '';
  436.         node.className = className + space + value;
  437.     }
  438.     static model(node, newValue) {
  439.         if (typeof newValue === 'number')
  440.             newValue = String(newValue);
  441.         node.value = newValue ? newValue : '';
  442.     }
  443.     static style(node, newValue, oldValue) {
  444.         if (!oldValue)
  445.             oldValue = {};
  446.         if (!newValue)
  447.             newValue = {};
  448.         const keys = Object.keys(oldValue).concat(Object.keys(newValue));
  449.         unique(keys).forEach((key) => {
  450.             if (hasOwn(oldValue, key) && hasOwn(newValue, key)) {
  451.                 if (oldValue[key] != newValue[key])
  452.                     node.style.setProperty(key, newValue[key]);
  453.             }
  454.             else if (hasOwn(newValue, key))
  455.                 node.style.setProperty(key, newValue[key]);
  456.             else
  457.                 node.style.removeProperty(key);
  458.         });
  459.     }
  460.     static display(node, newValue, oldValue) {
  461.         let func = (val) => {
  462.             return {
  463.                 display: val ? 'block' : 'none',
  464.             };
  465.         };
  466.         ElementUtility.style(node, func(newValue), null);
  467.     }
  468. }
  469.  
  470. class MVVMComponent extends MVVM {
  471.     constructor(options) {
  472.         super(options);
  473.         this.$template = options.template || '';
  474.         if (options.parent)
  475.             this.$parent = options.parent;
  476.     }
  477.     $mount(element) {
  478.         this.compile(element);
  479.     }
  480.     
  481.     static mount(component,element) {
  482.         const vm = new MVVMComponent(component)
  483.         vm.$mount(element)
  484.         return vm
  485.     }
  486.  
  487.     static appendChild(component,element){
  488.         const div = document.createElement('div')
  489.         element.appendChild(div)
  490.         return MVVMComponent.mount(component,div)
  491.     }
  492. }
  493.  
  494. const parseAnyDirectiveFunction = (parseString) => {
  495.     return (dir) => dir.indexOf(parseString) == 0;
  496. };
  497. const isDirective = parseAnyDirectiveFunction('v-');
  498. const isEventDirective = parseAnyDirectiveFunction('on');
  499. const isTextDirective = parseAnyDirectiveFunction('text');
  500. const isHtmlDirective = parseAnyDirectiveFunction('html');
  501. const isModelDirective = parseAnyDirectiveFunction('model');
  502. const isClassDirective = parseAnyDirectiveFunction('class');
  503. const isStyleDirective = parseAnyDirectiveFunction('style');
  504. const isShowDirective = parseAnyDirectiveFunction('show');
  505. const isRefDirective = parseAnyDirectiveFunction('ref');
  506. const isForDirective = parseAnyDirectiveFunction('for');
  507.  
  508. function bindWatcher(node, vm, exp, updater) {
  509.     let __for__ = node['__for__'];
  510.     let val;
  511.     if (__for__ && __for__[exp]) 
  512.         val = __for__[exp]
  513.     else
  514.         val = getVMVal(vm, exp);
  515.     updater && updater(node, val);
  516.     new Watcher(vm, exp, (newValue, oldValue) => {
  517.         if (newValue === oldValue)
  518.             return;
  519.         updater && updater(node, newValue, oldValue);
  520.     });
  521. }
  522. function eventHandler(node, vm, exp, eventType) {
  523.     let fn = vm.$options.methods && vm.$options.methods[exp];
  524.     if (eventType && fn) {
  525.         if(node instanceof MVVMComponent)
  526.           node.$on(eventType,fn.bind(vm))
  527.         else
  528.           node.addEventListener(eventType, fn.bind(vm), false);
  529.     }
  530. }
  531. function vFor(node, vm, exp, c) {
  532.     let reg = /\((.*)\)/;
  533.     let item, index, list;
  534.     if (reg.test(exp)) {
  535.         const arr = RegExp.$1.trim().split(',');
  536.         item = arr[0];
  537.         index = arr[1];
  538.         let rightString = RegExp.rightContext.trim();
  539.         let rarr = rightString.split(' ');
  540.         list = rarr[1];
  541.         if (rarr[0] !== 'in')
  542.             return;
  543.         let val = getVMVal(vm, list);
  544.         let children = [];
  545.         toArray(node.children).forEach((element) => {
  546.             children.push(element.cloneNode(true));
  547.             node.removeChild(element);
  548.         });
  549.         for (let i = 0; i < val.length; i++) {
  550.             children.forEach((element) => {
  551.                 let newNode = element.cloneNode(true);
  552.                 newNode.__for__ = {
  553.                     [item]: val[i],
  554.                     [index]: i
  555.                 };
  556.                 node.appendChild(newNode);
  557.                 c.compileElement(node);
  558.             });
  559.         }
  560.     }
  561. }
  562. function forHandler(node, vm, exp, c) {
  563.     vFor(node, vm, exp, c);
  564.     new Watcher(vm, exp, (newValue, oldValue) => {
  565.         if (newValue === oldValue)
  566.             return;
  567.         vFor(node, vm, exp, c);
  568.     });
  569. }
  570. class Compile {
  571.     constructor(el, vm) {
  572.         this.slotCallback = [];
  573.         this.$vm = vm;
  574.         this.$el = ElementUtility.isElementNode(el)
  575.             ? el
  576.             : document.querySelector(el);
  577.         this._init();
  578.     }
  579.     _init() {
  580.         if (this.$vm instanceof MVVMComponent) {
  581.             this.$slot = ElementUtility.fragment(this.$el);
  582.             this.$fragment = this.parseComponentTemplate(this.$vm.$template);
  583.             this.$vm.$el = this.$el;
  584.             this.$vm.$emit('beforeMount');
  585.             this.compileElement(this.$fragment);
  586.             this.$el.parentNode.replaceChild(this.$fragment, this.$el);
  587.         }
  588.         else {
  589.             this.$fragment = ElementUtility.fragment(this.$el);
  590.             this.$vm.$el = this.$el;
  591.             this.$vm.$emit('beforeMount');
  592.             this.compileElement(this.$fragment);
  593.             this.$el.appendChild(this.$fragment);
  594.         }
  595.         Object.entries(this.$vm.$children).forEach(([key, child]) => {
  596.             const slotCallback = child.$compile.slotCallback;
  597.             if (slotCallback.length < 1)
  598.                 return;
  599.             slotCallback.forEach((fn) => {
  600.                 fn(this);
  601.             });
  602.         });
  603.     }
  604.     isSlot(node) {
  605.         if (node.tagName === 'SLOT')
  606.             return true;
  607.         return false;
  608.     }
  609.     compileSlotElement(slot) {
  610.         if (!(this.$vm instanceof MVVMComponent))
  611.             return;
  612.         if (this.$slot.children.length === 0) {
  613.             slot.parentNode.removeChild(slot);
  614.             return;
  615.         }
  616.         this.slotCallback.push(c => {
  617.             c.compileElement(this.$slot);
  618.             slot.parentNode.replaceChild(this.$slot, slot);
  619.         });
  620.     }
  621.     parseComponentTemplate(templateHTML) {
  622.         let element = ElementUtility.parseHTML(templateHTML);
  623.         const template = document.createElement('template');
  624.         if (element.length) {
  625.             if (element.length === 1) {
  626.                 if (element[0].tagName.toLowerCase() !== 'template')
  627.                     template.appendChild(element[0]);
  628.             }
  629.             else
  630.                 toArray(element).forEach((child) => {
  631.                     template.appendChild(child);
  632.                 });
  633.         }
  634.         return ElementUtility.fragment(template);
  635.     }
  636.     parseTemplate(leftString, rightString) {
  637.         return (node, newValue, oldValue) => {
  638.             const str = leftString + newValue + rightString;
  639.             ElementUtility.text(node, str);
  640.         };
  641.     }
  642.     compileElement(el) {
  643.         let childNodes = [];
  644.         // slice
  645.         el.childNodes.forEach(node=>{
  646.           childNodes.push(node)
  647.         })
  648.         childNodes.forEach((node) => {
  649.             if (el['__for__'])
  650.                 node['__for__'] = el['__for__'];
  651.             let reg = /\{\{(.*)\}\}/;
  652.             if (ElementUtility.isElementNode(node)) {
  653.                 if (this.isComponent(node))
  654.                   this.compileComponent(node.tagName.toLowerCase(), node);
  655.                 else if (this.isSlot(node)) 
  656.                     this.compileSlotElement(node);
  657.                 else
  658.                     this.compile(node);
  659.             }
  660.             else if (ElementUtility.isTextNode(node) &&
  661.                 reg.test(node.textContent))
  662.                 bindWatcher(node, this.$vm, RegExp.$1.trim(), this.parseTemplate(RegExp.leftContext, RegExp.rightContext));
  663.             if (node.childNodes && node.childNodes.length)
  664.                 this.compileElement(node);
  665.         });
  666.     }
  667.     compile(node) {
  668.         let nodeAttrs = node.attributes;
  669.         toArray(nodeAttrs).forEach((attr) => {
  670.             let attrName = attr.name;
  671.             if (!isDirective(attrName)){
  672.               if (attrName.startsWith('[') && attrName.endsWith(']')) {
  673.                 node.removeAttribute(attrName)
  674.                 let realAttrName = attrName.replace('[','')
  675.                 realAttrName = realAttrName.replace(']','')
  676.                 bindWatcher(node,this.$vm,attr.value,(node,newVal,oldVal)=>{
  677.                   node.setAttribute(realAttrName,newVal)
  678.                 })
  679.               }
  680.               return;
  681.             }
  682.             let dir = attrName.substring(2);
  683.             let suffix = dir.split(':')[1];
  684.             let exp = attr.value || suffix;
  685.             if (isEventDirective(dir))
  686.                 eventHandler(node, this.$vm, exp, suffix);
  687.             else if (isTextDirective(dir))
  688.                 bindWatcher(node, this.$vm, exp, ElementUtility.text);
  689.             else if (isHtmlDirective(dir))
  690.                 bindWatcher(node, this.$vm, exp, ElementUtility.html);
  691.             else if (isClassDirective(dir))
  692.                 bindWatcher(node, this.$vm, exp, ElementUtility.class);
  693.             else if (isModelDirective(dir)) {
  694.                 bindWatcher(node, this.$vm, exp, ElementUtility.model);
  695.                 let val = getVMVal(this.$vm, exp);
  696.                 node.addEventListener('input', (e) => {
  697.                     let target = e.target;
  698.                     let newValue = target.value;
  699.                     if (val === newValue)
  700.                         return;
  701.                     setVMVal(this.$vm, exp, newValue);
  702.                     val = newValue;
  703.                 });
  704.             }
  705.             else if (isStyleDirective(dir))
  706.                 bindWatcher(node, this.$vm, exp, ElementUtility.style);
  707.             else if (isShowDirective(dir))
  708.                 bindWatcher(node, this.$vm, exp, ElementUtility.display);
  709.             else if (isRefDirective(dir))
  710.                 this.$vm.$refs[exp] = node;
  711.             else if (isForDirective(dir))
  712.                 forHandler(node, this.$vm, exp, this);
  713.             node.removeAttribute(attrName);
  714.         });
  715.     }
  716.     isComponent(node) {
  717.         const tagName = node.tagName.toLowerCase();
  718.         if (!/^[(a-zA-Z)-]*$/.test(tagName))
  719.             return false;
  720.         if (this.$vm.components && hasOwn(this.$vm.components, tagName))
  721.             return true;
  722.         return false;
  723.     }
  724.     compileComponent(componentName, node) {
  725.         const attributes = []
  726.         toArray(node.attributes).forEach((attr) => {
  727.           attributes.push(attr)
  728.         })
  729.         const componentOptions = this.$vm.components[componentName];
  730.         const component = new MVVMComponent(extend(componentOptions, {
  731.             parent: this.$vm
  732.         }));
  733.         component.$mount(node);
  734.         this.$vm.$children[componentName] = component;
  735.         attributes.forEach(attr=>{
  736.           let attrName = attr.name;
  737.           if (!isDirective(attrName))
  738.             return;
  739.           let dir = attrName.substring(2);
  740.           let suffix = dir.split(':')[1];
  741.           let exp = attr.value || suffix;
  742.           if (isEventDirective(dir))
  743.             eventHandler(component, this.$vm, exp, suffix);
  744.           else if (isRefDirective(dir))
  745.               this.$vm.$refs[exp] = component;
  746.         })
  747.     }
  748. }