“可绑定” JavaScript中的变量？ [英] "Bindable" variables in JavaScript?

问题描述

我从Flex中的littleexperience在Flex中学到了Bindable变量，以便文本元素的内容以变量的值变化。我想知道是否可以在JavaScript中做这样的事情。例如，假设我要包含文档标题的< h1 id =big_title> 这可以很容易地用 document.getElementById（'big_title'）。innerHTML = document.title; 完成，但如果 document.title 更改？我必须手动更新 big_title 。

另一种方法是，有一种方法在变量而不是DOM元素上创建自定义 onchange 类事件处理程序？这个处理程序可以根据需要更新标题。

编辑：我知道我可以使用 setInterval 来检查变量绑定（在数组中定义）并根据需要进行更新，但这将是一些hack-ish，并且需要在响应性和对性能的影响之间进行折衷。

解决方案

您可以在大多数主要浏览器中观看对象。 这里是一个垫片。这个想法本质上是一个setter（在这个例子中是$ code> handler 的函数），当值改变时，它将被执行。我不知道浏览器的支持程度是多少。

虽然说实话，这听起来像是一个更容易的解决方案来拥有自己的设置器方法。或者将它变成一个对象（你可以很容易地扩展这个例子来使用总是改变标题的通用的处理程序 insetad）：

  function Watchable（val）{//非原型建模以确保隐私
 this.set = function（v）{
 document.title = val = v; 
}; 
 this.get = function（）{return val;}; 
 this.set（val）; 
} 
 
 var title = new Watchable（original title）; 
 
 title.get（）; //原始标题
 title.set（second title）; //second title
 title.get（）; //second title
  

或者如果不是需要多次实例化的东西，简单函数+约定将执行：

  function changeVal（newVal）{
 variableToWatch = newVal; 
 //更改某些DOM内容
} 
  

From my littleexperience in Flex, I learned about Bindable variables, so that the content of a text element changed with th value of a variable, for example.

I'm wondering if it's possible to do such a thing in JavaScript. For instance, suppose I have an <h1 id="big_title"> that I want to contain the document's title. That can easily be done with document.getElementById('big_title').innerHTML = document.title;, but what if document.title changes? I'd have to manually update big_title as well.

Another way of putting it, is there a way to create a custom onchange-like event handler on a variable rather than a DOM element? This handler could update the title as needed.

EDIT: I know I could use a setInterval to check for variable "bindings" (defined in an array) and update as needed, but this would be somewhat hack-ish and would require a compromise between responsiveness and impact on performance.

解决方案

You can "watch" objects in most major browsers. Here is a shim. The idea essentially is to have a setter (in that example it's the function called handler) that will be executed when the value changes. I'm not sure what the extent of browser support is.

Although to be honest it sounds like a much easier solution to have your own setter method. Either make it into an object (you can easily extend this example to use a generic handler insetad of always changing the title):

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"

Or if it isn't something you need to instantiate multiple times, a simple function + convention will do:

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

这篇关于“可绑定” JavaScript中的变量？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！