javascript - JavaScript 中的 "Bindable"变量？

Question

从我对 Flex 的一点经验中，我了解了可绑定(bind)变量，例如，这样文本元素的内容会随着变量的值而改变。

我想知道是否可以在 JavaScript 中做这样的事情。例如，假设我有一个 <h1 id="big_title">我想包含文档的标题。这可以很容易地用 document.getElementById('big_title').innerHTML = document.title; 完成。 ，但是如果document.title怎么办？变化？我必须手动更新 big_title

换一种说法，有没有一种方法可以创建自定义 onchange - 像变量而不是 DOM 元素上的事件处理程序？此处理程序可以根据需要更新标题。

编辑:我知道我可以使用 setInterval检查变量“绑定(bind)”(在数组中定义)并根据需要进行更新，但这会有些 hack-ish 并且需要在响应性和对性能的影响之间做出折衷。

Answer 1

您可以在大多数主流浏览器中“观察”对象。 Here是垫片。这个想法本质上是有一个 setter (在那个例子中它是名为 handler 的函数)，当值改变时将执行它。我不确定浏览器支持的程度。

虽然老实说，拥有自己的 setter 方法听起来更容易。要么把它变成一个对象(你可以很容易地扩展这个例子来使用一个通用的 handler insetad 总是改变标题):

function Watchable(val) { // non-prototypal modelling to ensure privacy
   this.set = function(v){
      document.title=val=v;
   };
   this.get = function(){return val;};
   this.set(val);
}

var title = new Watchable("original title");

title.get(); // "original title"
title.set("second title"); // "second title"
title.get(); // "second title"

或者如果它不是您需要多次实例化的东西，一个简单的函数+约定就可以了:

function changeVal(newVal) {
   variableToWatch = newVal;
   // change some DOM content
}