class MVVM{
  constructor(options){
    typeof options.el==='string'?this.el=document.querySelector(options.el):this.el=options.el;
    this.data=options.data;
    this.methods=options.methods;
    typeof this.data==='object'?new Observe(this):new Error('the data is not a object');//数据劫持
    this.el.nodeType===1?new Compile(this.el,this):new Error('The Element is not find');//编译模板
  }
}

class Compile {
  constructor(el, vm) {
    this.el = el;
    this.vm = vm;
    let fragment = this.nodeToFragment(this.el);//将节点移入内存高效快速处理
    //避免编译Dom时浏览器触发重绘重排等操作。
    this.compile(fragment);//开始编译模板
    this.el.appendChild(fragment);//编译后的模板加入到父节点中
    fragment=null;//回收内存
  }
    nodeToFragment(el) {//移入所有节点到内存中
        let fragment = document.createDocumentFragment();
        let firstChild;
        while (firstChild = el.firstChild) {
        fragment.appendChild(firstChild);
        }
        return fragment;
    }
  compile(fragment) {
    let childNodes = fragment.childNodes;
    Array.from(childNodes).forEach(element => {
      if (element.nodeType === 1) { //节点
        this.compileNode(element);//编译节点
        this.compile(element);//是节点再次遍历其子节点
      } else {
        this.compileText(element); //文本
      }
    });
  }
  compileNode(node) {
    let attrs = node.attributes;//得到dom的节点参数
    Array.from(attrs).forEach((item) => {//遍历节点，判断是否是指令
      if (item.name.includes('v-')) {
        let directName, directValue;
        directName = item.name.split('-')[1];//去除对应的指令参数，是modal还是text，html等
        directValue = item.nodeValue;//取出指令的值
        if (directName === 'for') {//v-for参数取值要求in后面的参数 (item,index) in data
          directValue.includes('in') ? directValue = directValue.split('in')[1].trim() : undefined;
        }
        new Watch(this, directValue, (curVal, oldVal) => {//实例化一个监听者，传入指令的值，此时可以根据指令的值获取得到老值，callBack函数传递新值和老值
          this.Util[directName].call(this, node, directValue);//回调函数需要执行的代码，故数据更新时需要执行的代码。
          //调用Util对应的方法进行处理
        })
        this.Util[directName].call(this, node, directValue);//初始化编译时渲染
      }
    })
  }
  compileText(node) {//编译文本
    const that = this;
    let expr = node.textContent;//得到文本内容
    let reg = /\{\{([^}]+)\}\}/g;
    if (reg.test(expr)) //是否符合{{{}}格式
      let text = '';
      expr.replace(/\{\{([^}]+)\}\}/g, (...args) => {
        new Watch(this, args[1], (curVal, oldVal) => { //为数据添加监听者
          node.textContent = curVal;
        })
        text += Compile.getDataValue.call(that, args[1]);//根据getDataValue用户传入指令内的字符串数据返回data对象内对应的值
      })
      node.textContent = text
    }
  }
  static getDataValue(key) {//使用reduce方法向下深入查找值
    let keyArr = key.split('.');
    return keyArr.reduce((a, b) => {
      return a[b]
    }, this.vm.data)
  }
Compile.prototype.Util = {//编译指令后根据指令名称调用Util内的方法
  model(node, expr) { //输入框数据绑定
    const that = this;
    node.value = Compile.getDataValue.call(this, expr);
    node.oninput = function (event) {
      let arr = expr.split('.');
      let result = arr.reduce((a, b,index) => {
        if (index === arr.length - 1) {
          a[b] = event.target.value;
        }
        return a[b];
      }, that.vm.data);
      node.value = result;
    }
  },
  text(node, expr) { //仅显示内容
    node.value = Compile.getDataValue.call(this, expr)
  },
  html(node, expr) { //填充样式
    let value = Compile.getDataValue.call(this, expr);
    node.innerHTML = value;
  },
  show(node, expr) { //是否显示
    let isShow = Boolean(Compile.getDataValue.call(this, expr));
    isShow ? node.style.display = '' : node.style.display = 'none';
  },
  for (node, expr) {//v-for还在研究中
    let parentNode = node.parentElement
    let value = Compile.getDataValue.call(this, expr);
    let fragment = document.createDocumentFragment();
    for (let i = 0; i < value.length; i++) {
      const item = value[i];
      let newnode = node.cloneNode(true)
      fragment.appendChild(newnode)
    }
    console.dir(parentNode)
    parentNode.appendChild(fragment);
  }
}

class Watch{
    constructor(vm,expr,cb){
        Dep.target=this;
        this.cb=cb;
        this.vm=vm;
        this.expr=expr;
        this.oldVal=Compile.getDataValue.call(vm,expr);//初始化时获取现在的值，触发劫持后的get方法
        Dep.target=null;
    }
    update(){
        let curVal=Compile.getDataValue.call(this.vm,this.expr);//获取到当前的值
        this.oldVal!==this.curVal?this.cb(curVal,this.oldVal):undefined;
    }
}
class Dep{//简单的发布订阅模式
    constructor(){
        this.subs=[]
    }
    pushSub(watch){
        this.subs.push(watch)
    }
    notify(){
        this.subs.forEach((watch)=>{
            watch.update();
        })
    }
}

class Observe{
    constructor(data){
        this.data=data;
        if(typeof this.data==='object'){
            for (const key in this.data) {
                if (this.data.hasOwnProperty(key)) {
                    const element = this.data[key];
                    if(typeof element==='object'){new Observe(element)};//遍历到对象时再次对对象劫持
                    this.defineReactive(this.data,key,element);//劫持
                }
            }
        }
    }
    defineReactive(obj,key,val){
        let dep=new Dep();//为每个变量实例化一个发布订阅
        Object.defineProperty(obj,key,{
            get() {
                Dep.target&&dep.pushSub(Dep.target);
                //Dep.target只有在实例化Watcher时才指向watch，执行完后再次指向null，
                //利用了JS单线程的优势，确保每个劫持的数据在视图层中的出现多少次就push进发布订阅几次，
                //其他时候访问数据不对dep做任何操作。
                return val;
            },
            set(newVal) {
                if(newVal===val){return;};
                //赋值为对象是继续动态劫持对象
                if(typeof newVal==='object'){new Observe(newVal)};
                val=newVal;
                dep.notify();//通知dep去更新Dom层数据
            }
        })
    }
}