function MyVue (options = {}) {
  //第一步：首先就是將實(shí)例化的對象給拿到，得到data對象
  this.$options = options;
  this._data = this.$options.data;

  //第二步：數(shù)據(jù)劫持,，將data對象中每一個(gè)屬性都設(shè)置get/set方法
  observe(this._data);

  //第三步：數(shù)據(jù)代理,，這里就是將_data的對象屬性放到myVue實(shí)例中一份，實(shí)際的數(shù)據(jù)還是_data中的
  for (let key in this._data) {
    //這里的this代表當(dāng)前myVue實(shí)例對象
    Object.defineProperty(this, key, {
      enumerable: true,
      get () {
        return this._data[key];
      },
      set (newVal) {
        this._data[key] = newVal;
      }
    })
  }

  //第四步：compile模板,需要將el屬性和當(dāng)前myVue實(shí)例
  compile(options.el, this)
}

function compile (el, vm) {
  return new Compile(el, vm);
}

function Compile (el, vm) {
  //將el代表的那個(gè)dom節(jié)點(diǎn)掛載到myVue實(shí)例中
  vm.$el = document.querySelector(el);

  //創(chuàng)建虛擬節(jié)點(diǎn)容器樹
  let fragment = document.createDocumentFragment();

  //將el下所有的dom節(jié)點(diǎn)都放到容器樹中,注意appendChild方法,，這里是將將dom節(jié)點(diǎn)移動到容器樹中啊,，不是死循環(huán)！
  while (child = vm.$el.firstChild) {
    // console.log('count:' + vm.$el.childElementCount);
    fragment.appendChild(child)
  };

  //遍歷虛擬節(jié)點(diǎn)中的所有節(jié)點(diǎn),，將真實(shí)數(shù)據(jù)填充覆蓋這種占位符{{}}
  replace(fragment, vm);

  //將虛擬節(jié)點(diǎn)樹中內(nèi)容渲染到頁面中
  vm.$el.appendChild(fragment);
}

function replace (n, vm) {
  //遍歷容器樹中所有的節(jié)點(diǎn),，解析出{{}}里面的內(nèi)容，然后將數(shù)據(jù)覆蓋到節(jié)點(diǎn)中去
  Array.from(n.childNodes).forEach(node => {
    console.log('nodeType:' + node.nodeType);

    let nodeText = node.textContent;
    let reg = /\{\{(.*)\}\}/;
    // 節(jié)點(diǎn)類型常用的有元素節(jié)點(diǎn),，屬性節(jié)點(diǎn)和文本節(jié)點(diǎn),，值分別是1,2,3
    //一定要弄清楚這三種節(jié)點(diǎn)，比如<p id="123">hello</p>,這個(gè)p標(biāo)簽整個(gè)的就是元素節(jié)點(diǎn),，nodeType==1
    //id="123"可以看作是屬性節(jié)點(diǎn),，nodeType==2
    //hello 表示文本節(jié)點(diǎn)，nodeType==3
    //因?yàn)檎嘉环鹻{}}只在文本節(jié)點(diǎn)中,，所以需要判斷是否等于3
    if (node.nodeType === 3 && reg.test(nodeText)) {
      // RegExp.$1是RegExp的一個(gè)屬性,指的是與正則表達(dá)式匹配的第一個(gè) 子匹配(以括號為標(biāo)志)字符串,，以此類推，RegExp.$2,。,。。
      let arr = RegExp.$1.split(".");
      let val = vm;
      // 這個(gè)for循環(huán)就是取出這樣的值：myVue[name][user]
      arr.forEach(i => {
        val = val[i];
      })
      // 創(chuàng)建Watcher，最主要的是傳入的這個(gè)回調(diào)函數(shù),，會覆蓋node節(jié)點(diǎn)中的占位符{{xxx}}
      new Watcher(vm, RegExp.$1, function (newVal) {
        node.textContent = nodeText.replace(reg, newVal);
      })
      // 把值覆蓋到虛擬節(jié)點(diǎn)的占位符{{}}這里
      node.textContent = nodeText.replace(reg, val);
    }

    //這里遍歷到元素的節(jié)點(diǎn),，例如：<p id="xx">aaa</p></p>，<input type="text v-model=" username">
    //然后需要取到其中的vue相關(guān)的指令,，例如v-model="xxx",，一般是以v-開頭的
    if (node.nodeType === 1) {
      // console.log(node);
      let nodeAttributes = node.attributes;
      Array.from(nodeAttributes).forEach(attr => {
        let name = attr.name;
        let exp = attr.value;
        // 找到v-model指令,data中的數(shù)據(jù)填充到input框中
        if (name.indexOf("v-model") == 0) {
          node.value = vm[exp];
        }
        // data中的數(shù)據(jù)變化，input中的數(shù)據(jù)也要跟著變化
        new Watcher(vm, exp, function (newVal) {
          node.value = newVal;
        })
        node.addEventListener("input", e => {
          // 獲取input輸入框中的值
          let inputValue = e.target.value;
          //input中修改的值同步到到data中去,，這里又會觸發(fā)該屬性的set方法,，set方法中又會觸發(fā)發(fā)布訂閱模式，將所有的Watcher都調(diào)用一遍
          vm[exp] = inputValue;
        })

      })
    }

    // 第一個(gè)遍歷的節(jié)點(diǎn)是<div id="app">這一行后面的換行,，nodeType等于3,，但是沒有占位符{{}}，所以會進(jìn)入到這里進(jìn)行遞歸調(diào)用內(nèi)部
    //的每一個(gè)節(jié)點(diǎn),，直到找到文本節(jié)點(diǎn)而且占位符{{}}
    if (node.childNodes) {
      replace(node, vm);
    }
  })
}

//數(shù)據(jù)劫持操作
function observe (data) {
  // 如果data不是對象,，就結(jié)束，不然遞歸調(diào)用會棧溢出的
  if (typeof data !== 'object') return;
  return new Observe(data);
}

function Observe (data) {
  let dep = new Dep();

  // 遍歷data所有屬性
  for (let key in data) {
    let val = data[key];
    //初始化的時(shí)候,， data中就有復(fù)雜對象的時(shí)候,，例如data: { message:{a:{b:1}}}  ,就需要遞歸的遍歷這個(gè)對象中每一個(gè)屬性都添加get和set方法
    observe(val);
    Object.defineProperty(data, key, {
      enumerable: true,
      get () {
        // 訂閱
        Dep.target && dep.addSub(Dep.target);
        return val;
      },
      set (newVal) {
        if (val === newVal) return;
        val = newVal;
        //當(dāng)后續(xù)可能因?yàn)闃I(yè)務(wù)邏輯使得_data.message = {name: "小王"}，設(shè)置對象類型的屬性值,，就需要遞歸的給對象中{name: "小王"}的每個(gè)屬性也添加get和set方法
        //否則name是沒有g(shù)et/set方法的
        observe(val);
        dep.notify();
      }
    })
  }
}


// ===============================發(fā)布訂閱===============================
// 可以看做是公眾號端
function Dep () {
  // 存放每個(gè)用戶的容器
  this.subs = [];
}

//對外提供的api之一,，供用戶訂閱
Dep.prototype.addSub = function (sub) {
  this.subs.push(sub);
}

// 對外提供的api之二，遍歷每個(gè)用戶,，給每個(gè)用法發(fā)信息
Dep.prototype.notify = function () {
  this.subs.forEach(sub => {
    sub.update();
  });
}


// 用戶端
function Watcher (vm, exp, fn) {
  // 這個(gè)可以看作是用戶的標(biāo)志,；注意，這個(gè)fn一般是一個(gè)回調(diào)函數(shù)
  this.vm = vm;
  this.exp = exp;
  this.fn = fn;

  Dep.target = this;
  let val = vm;
  let arr = exp.split(".");
  arr.forEach(item => {
    val = val[item];
  })
  Dep.target = null;
}

// 用戶端提供的對外api,，讓公眾號端使用
Watcher.prototype.update = function () {
  let val = this.vm;
  let arr = this.exp.split(".");
  arr.forEach(item => {
    val = val[item];
  })
  this.fn(val);
}