JavaScript 进阶之深入理解数据双向绑定

var template = function(tpl, data) {
  var re = /{{(.+?)}}/g,
    cursor = 0,
    reExp = /(^( )?(var|if|for|else|switch|case|break|{|}|;))(.*)?/g,
    code = "var r=[];\n";

  // 解析html
  function parsehtml(line) {
    // 单双引号转义，换行符替换为空格,去掉前后的空格
    line = line
      .replace(/('|")/g, "\\$1")
      .replace(/\n/g, " ")
      .replace(/(^\s+)|(\s+$)/g, "");
    code += 'r.push("' + line + '");\n';
  }

  // 解析js代码
  function parsejs(line) {
    // 去掉前后的空格
    line = line.replace(/(^\s+)|(\s+$)/g, "");
    code += line.match(reExp)
      ? line + "\n"
      : "r.push(" + "this." + line + ");\n";
  }

  // 编译模板
  while ((match = re.exec(tpl)) !== null) {
    // 开始标签  {{ 前的内容和结束标签 }} 后的内容
    parsehtml(tpl.slice(cursor, match.index));
    // 开始标签  {{ 和 结束标签 }} 之间的内容
    parsejs(match[1]);
    // 每一次匹配完成移动指针
    cursor = match.index + match[0].length;
  }
  // 最后一次匹配完的内容
  parsehtml(tpl.substr(cursor, tpl.length - cursor));
  code += 'return r.join("");';
  return new Function(code.replace(/[\r\t\n]/g, "")).apply(data);
};

const template = data => `
  <p>name: ${data.name}</p>
  <p>age: ${data.profile.age}</p>
  <ul>
    ${data.skills
      .map(
        skill => `
      <li>${skill}</li>
    `
      )
      .join("")}
  </ul>`;

const data = {
  name: "zhaomenghuan",
  profile: { age: 24 },
  skills: ["html5", "javascript", "android"]
};

document.body.innerHTML = template(data);

function MVVM(opt) {
  this.dom = document.querySelector(opt.el);
  this.data = opt.data || {};
  this.renderDom(this.dom);
}

MVVM.prototype = {
  init: {
    sTag: "{{",
    eTag: "}}"
  },
  render: function(node) {
    var self = this;
    var sTag = self.init.sTag;
    var eTag = self.init.eTag;

    var matchs = node.textContent.split(sTag);
    if (matchs.length) {
      var ret = "";
      for (var i = 0; i < matchs.length; i++) {
        var match = matchs[i].split(eTag);
        if (match.length == 1) {
          ret += matchs[i];
        } else {
          ret = self.data[match[0]];
        }
        node.textContent = ret;
      }
    }
  },
  renderDom: function(dom) {
    var self = this;

    var attrs = dom.attributes;
    var nodes = dom.childNodes;

    Array.prototype.forEach.call(attrs, function(item) {
      self.render(item);
    });

    Array.prototype.forEach.call(nodes, function(item) {
      if (item.nodeType === 1) {
        return self.renderDom(item);
      }
      self.render(item);
    });
  }
};

var app = new MVVM({
  el: "#app",
  data: {
    name: "zhaomenghuan",
    age: "24",
    color: "red"
  }
});

var o = {
  a: 0
};
Object.defineProperty(o, "b", {
  get: function() {
    return this.a + 1;
  },
  set: function(value) {
    this.a = value / 2;
  }
});
console.log(o.a); // "0"
console.log(o.b); // "1"

// 更新o.a
o.a = 5;
console.log(o.a); // "5"
console.log(o.b); // "6"

// 更新o.b
o.b = 10;
console.log(o.a); // "5"
console.log(o.b); // "6"

let o = {
  a: 0
};
o.b = o.a + 1;
console.log(o.a); // "0"
console.log(o.b); // "1"

// 更新o.a
o.a = 5;
o.b = o.a + 1;
console.log(o.a); // "5"
console.log(o.b); // "6"

// 更新o.b
o.b = 10;
o.a = o.b / 2;
o.b = o.a + 1;
console.log(o.a); // "5"
console.log(o.b); // "6"

var obj = {
  a: 0,
  b: 1
}
for (var prop in obj) {
  console.log(`obj.${prop} = ${obj[prop]}`);
}

结果：
"obj.a = 0"
"obj.b = 1"

var obj = {
  a: 0,
  b: 1
}
Object.defineProperty(obj, 'b', {
  enumerable: false
})
for (var prop in obj) {
  console.log(`obj.${prop} = ${obj[prop]}`);
}

结果：
"obj.a = 0"

var obj = {
  a: 0
}
Object.defineProperty(obj, 'b', {
  value: 1
})
for (var prop in obj) {
  console.log(`obj.${prop} = ${obj[prop]}`);
}

结果：
"obj.a = 0"

/**
 * Define a property.
 */
export function def(obj: Object, key: string, val: any, enumerable?: boolean) {
  Object.defineProperty(obj, key, {
    value: val,
    enumerable: !!enumerable,
    writable: true,
    configurable: true
  });
}

var o = {
  a: 0
};

Object.defineProperty(o, "b", {
  get: function() {
    return this.a + 1;
  },
  set: function(value) {
    this.a = value / 2;
  }
});

var des = Object.getOwnPropertyDescriptor(o, "b");
console.log(des);
console.log(des.get);

// 观察者构造函数
function Observer(value) {
  this.value = value;
  this.walk(value);
}

// 递归调用，为对象绑定getter/setter
Observer.prototype.walk = function(obj) {
  var keys = Object.keys(obj);
  for (var i = 0, l = keys.length; i < l; i++) {
    this.convert(keys[i], obj[keys[i]]);
  }
};

// 将属性转换为getter/setter
Observer.prototype.convert = function(key, val) {
  defineReactive(this.value, key, val);
};

// 创建数据观察者实例
function observe(value) {
  // 当值不存在或者不是对象类型时，不需要继续深入监听
  if (!value || typeof value !== "object") {
    return;
  }
  return new Observer(value);
}

// 定义对象属性的getter/setter
function defineReactive(obj, key, val) {
  var property = Object.getOwnPropertyDescriptor(obj, key);
  if (property && property.configurable === false) {
    return;
  }

  // 保存对象属性预先定义的getter/setter
  var getter = property && property.get;
  var setter = property && property.set;

  var childOb = observe(val);
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter() {
      var value = getter ? getter.call(obj) : val;
      console.log("访问：" + key);
      return value;
    },
    set: function reactiveSetter(newVal) {
      var value = getter ? getter.call(obj) : val;
      if (newVal === value) {
        return;
      }
      if (setter) {
        setter.call(obj, newVal);
      } else {
        val = newVal;
      }
      // 对新值进行监听
      childOb = observe(newVal);
      console.log("更新：" + key + " = " + newVal);
    }
  });
}

let data = {
  user: {
    name: "zhaomenghuan",
    age: "24"
  },
  address: {
    city: "beijing"
  }
};
observe(data);

console.log(data.user.name);
// 访问：user
// 访问：name

data.user.name = "ZHAO MENGHUAN";
// 访问：user
// 更新：name = ZHAO MENGHUAN

const arrayProto = Array.prototype;
const arrayMethods = Object.create(arrayProto);

function def(obj, key, val, enumerable) {
  Object.defineProperty(obj, key, {
    value: val,
    enumerable: !!enumerable,
    writable: true,
    configurable: true
  });
}

// 数组的变异方法
["push", "pop", "shift", "unshift", "splice", "sort", "reverse"].forEach(
  function(method) {
    // 缓存数组原始方法
    var original = arrayProto[method];
    def(arrayMethods, method, function mutator() {
      var i = arguments.length;
      var args = new Array(i);
      while (i--) {
        args[i] = arguments[i];
      }
      console.log("数组变动");
      return original.apply(this, args);
    });
  }
);

let skills = ["JavaScript", "Node.js", "html5"];
// 原型指针指向具有变异方法的数组对象
skills.__proto__ = arrayMethods;

skills.push("java");
// 数组变动
skills.pop();
// 数组变动

const hasProto = "__proto__" in {};
const arrayKeys = Object.getOwnPropertyNames(arrayMethods);

// 观察者构造函数
function Observer(value) {
  this.value = value;
  if (Array.isArray(value)) {
    var augment = hasProto ? protoAugment : copyAugment;
    augment(value, arrayMethods, arrayKeys);
    this.observeArray(value);
  } else {
    this.walk(value);
  }
}

// 观察数组的每一项
Observer.prototype.observeArray = function(items) {
  for (var i = 0, l = items.length; i < l; i++) {
    observe(items[i]);
  }
};

// 将目标对象/数组的原型指针__proto__指向src
function protoAugment(target, src) {
  target.__proto__ = src;
}

// 将具有变异方法挂在需要追踪的对象上
function copyAugment(target, src, keys) {
  for (var i = 0, l = keys.length; i < l; i++) {
    var key = keys[i];
    def(target, key, src[key]);
  }
}

// 实现继承
var extend = function(Child, Parent) {
  // 拷贝Parent原型对象
  Child.prototype = Object.create(Parent.prototype);
  // 将Child构造函数赋值给Child的原型对象
  Child.prototype.constructor = Child;
};

// 实例
var Parent = function() {
  this.name = "Parent";
};
Parent.prototype.getName = function() {
  return this.name;
};
var Child = function() {
  this.name = "Child";
};
extend(Child, Parent);
var child = new Child();
console.log(child.getName());

/**
 * 观察者对象
 */
function Watcher(vm, expOrFn, cb) {
  this.vm = vm;
  this.cb = cb;
  this.depIds = {};
  if (typeof expOrFn === "function") {
    this.getter = expOrFn;
  } else {
    this.getter = this.parseExpression(expOrFn);
  }
  this.value = this.get();
}

/**
 * 收集依赖
 */
Watcher.prototype.get = function() {
  // 当前订阅者(Watcher)读取被订阅数据的最新更新后的值时，通知订阅者管理员收集当前订阅者
  Dep.target = this;
  // 触发getter，将自身添加到dep中
  const value = this.getter.call(this.vm, this.vm);
  // 依赖收集完成，置空，用于下一个Watcher使用
  Dep.target = null;
  return value;
};

Watcher.prototype.addDep = function(dep) {
  if (!this.depIds.hasOwnProperty(dep.id)) {
    dep.addSub(this);
    this.depIds[dep.id] = dep;
  }
};

/**
 * 依赖变动更新
 *
 * @param {Boolean} shallow
 */
Watcher.prototype.update = function() {
  this.run();
};

Watcher.prototype.run = function() {
  var value = this.get();
  if (value !== this.value) {
    var oldValue = this.value;
    this.value = value;
    // 将newVal, oldVal挂载到MVVM实例上
    this.cb.call(this.vm, value, oldValue);
  }
};

Watcher.prototype.parseExpression = function(exp) {
  if (/[^\w.$]/.test(exp)) {
    return;
  }
  var exps = exp.split(".");

  return function(obj) {
    for (var i = 0, len = exps.length; i < len; i++) {
      if (!obj) return;
      obj = obj[exps[i]];
    }
    return obj;
  };
};

let uid = 0;

function Dep() {
  this.id = uid++;
  this.subs = [];
}

Dep.target = null;

/**
 * 添加一个订阅者
 *
 * @param {Directive} sub
 */
Dep.prototype.addSub = function(sub) {
  this.subs.push(sub);
};

/**
 * 移除一个订阅者
 *
 * @param {Directive} sub
 */
Dep.prototype.removeSub = function(sub) {
  let index = this.subs.indexOf(sub);
  if (index !== -1) {
    this.subs.splice(index, 1);
  }
};

/**
 * 将自身作为依赖添加到目标watcher
 */
Dep.prototype.depend = function() {
  Dep.target.addDep(this);
};

/**
 * 通知数据变更
 */
Dep.prototype.notify = function() {
  var subs = toArray(this.subs);
  // stablize the subscriber list first
  for (var i = 0, l = subs.length; i < l; i++) {
    // 执行订阅者的update更新函数
    subs[i].update();
  }
};

function Compile(el, value) {
  this.$vm = value;
  this.$el = this.isElementNode(el) ? el : document.querySelector(el);
  if (this.$el) {
    this.compileElement(this.$el);
  }
}

Compile.prototype.compileElement = function(el) {
  let self = this;
  let childNodes = el.childNodes;
  [].slice.call(childNodes).forEach(node => {
    let text = node.textContent;
    let reg = /\{\{((?:.|\n)+?)\}\}/;
    // 处理element节点
    if (self.isElementNode(node)) {
      self.compile(node);
    } else if (self.isTextNode(node) && reg.test(text)) {
      // 处理text节点
      self.compileText(node, RegExp.$1.trim());
    }
    // 解析子节点包含的指令
    if (node.childNodes && node.childNodes.length) {
      self.compileElement(node);
    }
  });
};

Compile.prototype.compile = function(node) {
  let nodeAttrs = node.attributes;
  let self = this;
  [].slice.call(nodeAttrs).forEach(attr => {
    var attrName = attr.name;
    if (self.isDirective(attrName)) {
      let exp = attr.value;
      let dir = attrName.substring(2);
      if (self.isEventDirective(dir)) {
        compileUtil.eventHandler(node, self.$vm, exp, dir);
      } else {
        compileUtil[dir] && compileUtil[dir](node, self.$vm, exp);
      }
      node.removeAttribute(attrName);
    }
  });
};

Compile.prototype.compileText = function(node, exp) {
  compileUtil.text(node, this.$vm, exp);
};

Compile.prototype.isDirective = function(attr) {
  return attr.indexOf("v-") === 0;
};

Compile.prototype.isEventDirective = function(dir) {
  return dir.indexOf("on") === 0;
};

Compile.prototype.isElementNode = function(node) {
  return node.nodeType === 1;
};

Compile.prototype.isTextNode = function(node) {
  return node.nodeType === 3;
};

// 指令处理集合
var compileUtil = {
  text: function(node, vm, exp) {
    this.bind(node, vm, exp, "text");
  },
  html: function(node, vm, exp) {
    this.bind(node, vm, exp, "html");
  },
  model: function(node, vm, exp) {
    this.bind(node, vm, exp, "model");

    let self = this,
      val = this._getVMVal(vm, exp);
    node.addEventListener("input", function(e) {
      var newValue = e.target.value;
      if (val === newValue) {
        return;
      }
      self._setVMVal(vm, exp, newValue);
      val = newValue;
    });
  },
  bind: function(node, vm, exp, dir) {
    var updaterFn = updater[dir + "Updater"];
    updaterFn && updaterFn(node, this._getVMVal(vm, exp));
    new Watcher(vm, exp, function(value, oldValue) {
      updaterFn && updaterFn(node, value, oldValue);
    });
  },
  eventHandler: function(node, vm, exp, dir) {
    var eventType = dir.split(":")[1],
      fn = vm.$options.methods && vm.$options.methods[exp];

    if (eventType && fn) {
      node.addEventListener(eventType, fn.bind(vm), false);
    }
  },
  _getVMVal: function(vm, exp) {
    var val = vm;
    exp = exp.split(".");
    exp.forEach(function(k) {
      val = val[k];
    });
    return val;
  },
  _setVMVal: function(vm, exp, value) {
    var val = vm;
    exp = exp.split(".");
    exp.forEach(function(k, i) {
      // 非最后一个key，更新val的值
      if (i < exp.length - 1) {
        val = val[k];
      } else {
        val[k] = value;
      }
    });
  }
};

var updater = {
  textUpdater: function(node, value) {
    node.textContent = typeof value == "undefined" ? "" : value;
  },
  htmlUpdater: function(node, value) {
    node.innerHTML = typeof value == "undefined" ? "" : value;
  },
  modelUpdater: function(node, value, oldValue) {
    node.value = typeof value == "undefined" ? "" : value;
  }
};

/**
 * @class 双向绑定类 MVVM
 * @param {[type]} options [description]
 */
function MVVM(options) {
  this.$options = options || {};
  // 简化了对data的处理
  let data = (this._data = this.$options.data);
  // 监听数据
  observe(data);
  new Compile(options.el || document.body, this);
}

MVVM.prototype.$watch = function(expOrFn, cb) {
  new Watcher(this, expOrFn, cb);
};

<div id="app">
    <h3>{{user.name}}</h3>
    <input type="text" v-model="modelValue">
    <p>{{modelValue}}</p>
</div>
<script>
    let vm = new MVVM({
        el: '#app',
        data: {
            modelValue: '',
            user: {
                name: 'zhaomenghuan',
                age: '24'
            },
            address: {
                city: 'beijing'
            },
            skills: ['JavaScript', 'Node.js', 'html5']
        }
    })

	vm.$watch('modelValue', val => console.log(`watch modelValue ：${val}`))
</script>