原生javascript实现类似vue的数据绑定功能示例【观察者模式】

原生 Javascript 实现类似 Vue 的数据绑定功能可以使用观察者模式来实现。

观察者模式简介

观察者模式（Observer Pattern）是一种行为设计模式，它定义了一种一对多的依赖关系，让多个观察者对象同时监听某一个主题对象。当主题对象发生改变时，它会通知所有的观察者对象，使它们能够自动更新自己。

在 JavaScript 中，我们可以使用事件来实现观察者模式。当数据发生改变时，我们触发相应的事件，所有订阅了这个事件的对象都会接收到通知。

实现数据绑定功能的步骤

实现数据绑定功能可以分为以下几个步骤：

定义一个主题对象，用于存储和管理所有的数据，并提供一组 API 来修改和获取数据。
定义一个观察者对象，当主题对象的数据发生改变时，它可以自动更新自己。
将观察者对象订阅主题对象的事件，当主题对象的数据发生改变时，触发相应的事件，使得所有订阅了这个事件的观察者对象能够自动更新自己。

示例一

下面是一个简单的实现数据绑定功能的示例：

// 定义一个主题对象
var Subject = function() {
  this.data = {};
  this.handlers = {};
};

// 为主题对象添加订阅事件的方法
Subject.prototype.on = function(eventName, handler) {
  if (!this.handlers[eventName]) {
    this.handlers[eventName] = [];
  }
  this.handlers[eventName].push(handler);
};

// 为主题对象添加触发事件的方法
Subject.prototype.trigger = function(eventName, data) {
  if (this.handlers[eventName]) {
    for (var i = 0; i < this.handlers[eventName].length; i++) {
      this.handlers[eventName][i](data);
    }
  }
};

// 定义一个观察者对象
var Observer = function(data, key, element) {
  this.data = data;
  this.key = key;
  this.element = element;
  this.init();
};

// 为观察者对象添加初始化方法
Observer.prototype.init = function() {
  var self = this;
  this.element.oninput = function() {
    self.data[self.key] = this.value;
    self.data._observer.trigger(self.key + '_change', self.data[self.key]);
  };
  this.data._observer.on(this.key + '_change', function(value) {
    self.element.value = value;
  });
};

// 创建一个主题对象
var data = {
  name: '',
  age: '',
  _observer: new Subject()
};

// 创建两个观察者对象
var nameObserver = new Observer(data, 'name', document.getElementById('name'));
var ageObserver = new Observer(data, 'age', document.getElementById('age'));

在这个示例中，我们定义了一个 Subject 类和一个 Observer 类，分别用于管理数据和更新视图。每次数据发生变化时，我们都会手动调用 Subject 对象的 trigger 方法，触发相应的事件。所有订阅这些事件的 Observer 对象会自动更新视图。

示例二

下面是另一个实现数据绑定功能的示例：

// 定义一个主题对象
var Subject = function() {
  this.data = {};
  this.handlers = {};
};

// 为主题对象添加订阅事件的方法
Subject.prototype.on = function(eventName, handler) {
  if (!this.handlers[eventName]) {
    this.handlers[eventName] = [];
  }
  this.handlers[eventName].push(handler);
};

// 为主题对象添加触发事件的方法
Subject.prototype.trigger = function(eventName, data) {
  if (this.handlers[eventName]) {
    for (var i = 0; i < this.handlers[eventName].length; i++) {
      this.handlers[eventName][i](data);
    }
  }
};

// 定义一个实现数据劫持的方法
var defineReactive = function(data, key, value) {
  var subject = new Subject();
  Object.defineProperty(data, key, {
    get: function() {
      subject.on('get', function() { });
      return value;
    },
    set: function(newValue) {
      value = newValue;
      subject.trigger('set', value);
    }
  });
  Object.defineProperty(data, key + '_change', {
    get: function() {
      return subject;
    }
  });
};

// 定义一个观察者对象
var Observer = function(data, key, element) {
  this.data = data;
  this.key = key;
  this.element = element;
  this.init();
};

// 为观察者对象添加初始化方法
Observer.prototype.init = function() {
  var self = this;
  this.element.oninput = function() {
    self.data[self.key] = this.value;
  };
  this.data[self.key + '_change'].on('set', function(value) {
    self.element.value = value;
  });
  this.data[self.key + '_change'].trigger('get');
};

// 创建一个主题对象
var data = {};
defineReactive(data, 'name', '');
defineReactive(data, 'age', '');

// 创建两个观察者对象
var nameObserver = new Observer(data, 'name', document.getElementById('name'));
var ageObserver = new Observer(data, 'age', document.getElementById('age'));

在这个示例中，我们定义了一个 defineReactive 方法，用于实现数据劫持。当我们访问 data 对象的一个属性时，这个属性的 get 方法会被触发，这时我们订阅一个 get 事件，什么也不做。当数据发生改变时，我们手动触发 set 事件，所有订阅这个事件的 Observer 对象都会自动更新视图。

在 Observer 对象中，我们监听 data 对象的 key 和 key_change 属性的 set 事件，当数据发生改变时，自动更新视图。我们还手动触发一次 get 事件，使得 Subject 对象可以监听 get 事件。