Question

我可以使用getter / setter对观察者执行类似的任务吗？

因此，例如，如果我将getter / setter的实例分配给多个对象，这些都将是引用，因此如果任一对象导致getter更改相同的代码将运行正确？

我尝试过以下代码：

var obj = {
  value: null,
  get val() {
    return this.value;
  },
  set val(x) {
    console.log('set');
    if (this.value !== x) {
      console.log('value has been changed, do stuff!');
    }
    this.value = x;
  }
}
var one = {
  name: 'object 1',
  value: obj /* Reference object */
}
var two = {
  name: 'object 2',
  value: obj /* Reference object */
}
var three = {
  name: 'object 3',
  value: obj /* Reference object */
}

然后运行应该触发控制台日志的one.value.value = 2。但是我只是在控制台中输出2而没有console.log。

修改

刚刚看到我出错的地方，我应该做one.value.val = 2，这已经开始工作了，坚持下去。

修改2

不太确定这是否会按照我期望的方式运作。我将尝试分解我正在尝试做的事情。

我有一个对象数组如下：

var images = [ 
  { index: 0, object: HTMLElement, src: String, active: Object, alt: String },
  { index: 1, object: HTMLElement, src: String, active: Object, alt: String },
  { index: 2, object: HTMLElement, src: String, active: Object, alt: String },
  { index: 3, object: HTMLElement, src: String, active: Object, alt: String },
  { index: 4, object: HTMLElement, src: String, active: Object, alt: String },
  { index: 5, object: HTMLElement, src: String, active: Object, alt: String },
  { index: 6, object: HTMLElement, src: String, active: Object, alt: String } 
];

在我的脚本中，此对象将重复几次，但活动状态需要在所有实例中保持不变。

我是如何复制对象的：

var newList = [];
for (var i = 0; i < _.images.length; i++) {
   // Create new instances of the images
   var img = document.createElement('img');
   img.src = images[i].object.src;
   img.classList.add('responsive-img');
   img.alt = images[i].alt;

   var span = document.createElement('span');
   span.appendChild(img);

   if (i === current) img.parentNode.classList.add('active');

   var newImage = {
      object: img,
      index: i,
      src: images[i].src,
      active: images[i].active, // Use reference to old list
      alt: images[i].alt
   };
   newList.push(newImage);

   // Add each image to the gallery DOM
   _.gallery.main.appendChild(span);
}

现在基本上我需要发生的是，如果在任一引用中更改了active值，那么代码应该执行并从该实例中的object添加/删除一个类。

这有意义吗？

因此，如果运行以下内容

images[0].active.val = 1

然后执行newList[0].object.classList.Add('active');和images[0].object.classList.Add('active');。

有更多的代码应该执行但是让我们一步一步。我之前使用的是Polyfill for Observer，但它对于我想要做的事情来说太重了，而且在Internet Explorer上也存在问题。

我认为执行此操作的最佳方法可能是setter的某种回调，因此我可以为此对象所在的每个实例运行唯一代码？

Answer 1

感觉有点hackish但是添加一个getter来激活以设置你引用的对象应该有效：

var active = {
	_value : null,
  object : null,
  set value(v) {
  	_value = v;
    this.object.style.display = v;
  }
}

var images = [
  {img : document.querySelector('.div1'), _active : active, get active () {this._active.object = this.img; return this._active}
  },
  {img : document.querySelector('.div2'), _active : active, get active () {this._active.object = this.img; return this._active}
  }
]

images[0].active.value = 'none';
images[1].active.value = 'block';

<div class = 'div1'>div 1</div>
<div class = 'div2' style = 'display:none'>div 2</div>

当getter / setting改变时运行代码

1 个答案: