JavaScript中的"可绑定"变量？

Question

根据我在Flex中的经验,我学习了Bindable变量,例如,文本元素的内容随着变量的值而变化.

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

放置它的另一种方法是,有没有办法onchange在变量而不是DOM元素上创建类似于自定义的事件处理程序？此处理程序可以根据需要更新标题.

编辑:我知道我可以使用a setInterval来检查变量"绑定"(在数组中定义)并根据需要进行更新,但这有点像hack-ish并且需要在响应性和对性能的影响之间进行折衷.

Answer 1

您可以在大多数主要浏览器中“观看”对象。这是一个垫片。这个想法本质上是有一个 setter（在该示例中是名为 的函数handler），该 setter 将在值更改时执行。我不确定浏览器支持的程度。

尽管说实话，拥有自己的 setter 方法听起来像是一个更简单的解决方案。要么将其变成一个对象（您可以轻松扩展此示例以使用handler始终更改标题的通用插图）：

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
}