<template>
  <div>
    <h2>{{ count + 1 }}</h2>
    <button @click="plus(1)">+</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      count: 0
    }
  },
  methods: {
    plus (num) {
      this.count += num;
    }
  }
}
</script>

{
  template:
   `<div>
     <h2>{{ count + 1 }}</h2>
      <button @click="plus(1)">+</button>
  </div>`,
  name: 'App',
  data() {
    return { count: 0 }
  },
  methods: {
    plus(num) { this.count += num; },
  }
}

import App from './App';
import { createApp } from '../modules/vue';
createApp(App).mount('#app');

function createApp(component) {
  const vm = {};
  const { template, methods, data } = component;
}

/* 
  template:
   `<div>
     <h2>{{ count + 1 }}</h2>
      <button @click="plus(1)">+</button>
  </div>`,
*/
vm.$node = createNode(template);

function createNode(template) {
  const _tempNode = document.createElement('div');
  _tempNode.innerHTML = template;
  return getFirstChildNode(_tempNode);
}

vm.$data = data();

for (let key in vm.$data) {
  Object.defineProperty(vm, key, {
    get() {
      return vm.$data[key];
    },
    set(newValue) {
      vm.$data[key] = newValue;
      // update觸發(fā)節(jié)點(diǎn)更新，至于實(shí)現(xiàn)我放到后面再說(shuō)
      update(vm, key);
    },
  });
}

// 節(jié)點(diǎn)數(shù)據(jù)池
const exprPool = new Map();
// 正則獲取雙括號(hào)中內(nèi)容
const regExpr = /\{\{(.+?)\}\}/;

const allNodes = $node.querySelectorAll('*');
allNodes.forEach((node) => {
  // 這里獲取到的textContent是原原始的沒(méi)經(jīng)過(guò)任何處理的節(jié)點(diǎn)內(nèi)容，如{{count + 1}}
  const vExpression = node.textContent;
  /* exprMatched：{
      0: "{{ count + 1 }}"
      1: " count + 1 "
      groups: undefined
      index: 0
      input: "{{ count + 1 }}"
    }
    */
  const exprMatched = vExpression.match(regExpr);
  // 如果有雙括號(hào)語(yǔ)法
  if (exprMatched) {
    const poolInfo = checkExpressionHasData($data, exprMatched[1].trim());
    // 把節(jié)點(diǎn)存入節(jié)點(diǎn)數(shù)據(jù)池
    poolInfo && exprPool.set(node, poolInfo);
  }
});

function checkExpressionHasData(data, expression) {
  for (let key in data) {
    if (expression.includes(key) && expression !== key) {
      // count + 1,返回{key:count,expression:count+1}
      return {
        key,
        expression,
      };
    } else if (expression === key) {
      // count,返回{key:count,expression:count}
      return {
        key,
        expression: key,
      };
    } else {
      return null;
    }
  }
}

const eventPool = new Map();
// 匹配函數(shù)名
const regStringFn = /(.+?)\((.+?)\)/;
// 匹配函數(shù)參數(shù)
const regString = /\'(.+?)\'/;

const allNodes = $node.querySelectorAll('*');
allNodes.forEach((node) => {
  const vClickVal = node.getAttribute(`@click`);
  if (vClickVal) {
    /* 
      比如@click='plus(1)',解析完成的fnInfo就是
      fnInfo:{
        args: [1]
        methodName: "plus"
      }
      */
    const fnInfo = checkFunctionHasArgs(vClickVal);
    const handler = fnInfo
      ? //有參函數(shù)傳入args
        methods[fnInfo.methodName].bind(vm, ...fnInfo.args)
      : //無(wú)參函數(shù)直接綁定
        methods[vClickVal].bind(vm);

    //存入事件池，節(jié)點(diǎn)為key,事件為value
    eventPool.set(node, {
      type: vClick,
      handler,
    });
    //刪除dom上的attr，不然瀏覽器查看源代碼就會(huì)顯示自定義事件  這樣不好
    node.removeAttribute(`@${vClick}`);
  }
});

function checkFunctionHasArgs(str) {
  const matched = str.match(regStringFn);

  if (matched) {
    const argArr = matched[2].split(',');
    const args = checkIsString(matched[2])
      ? argArr // ['1']
      : argArr.map((item) => Number(item));

    return {
      methodName: matched[1],
      args,
    };
  }
}
function checkIsString(str) {
  return str.match(regString);
}

function (vm) {
  //node:key  info:value
  for (let [node, info] of eventPool) {
        // type:事件類(lèi)型  handler：事件處理函數(shù)
    let { type, handler } = info;
    //在vue中，是用this.function 去訪(fǎng)問(wèn)方法，所以方法要被綁定到vm上
    vm[handler.name] = handler;
    //給節(jié)點(diǎn)綁定事件處理函數(shù)
    node.addEventListener(type, vm[handler.name], false);
  }
}

function render(vm) {
  exprPool.forEach((info, node) => {
    _render(vm, node, info);
  });
}
function _render(vm, node, info) {
  //info:{key: 'count',expression 'count + 1'}
  const { expression } = info;
  //expression是一個(gè)字符串，為了執(zhí)行字符串，所以我們需要new Function
  const r = new Function(
    'vm',
    'node',
    `
    with (vm) {
      node.textContent = ${expression};
    }
  `
  );

  r(vm, node);
}

var a = 1;
var obj = {
  a: 2,
};
with (obj) {
  console.log(a); //2
}

export function update(vm, key) {
  //在節(jié)點(diǎn)數(shù)據(jù)池中查找哪個(gè)節(jié)點(diǎn)的key==當(dāng)前改變的key，找到則重新render
  exprPool.forEach((info, node) => {
    if (info.key === key) {
      _render(vm, node, info);
    }
  });
}