«Связываемые» переменные в JavaScript?

Question

Из своего небольшого опыта в Flex я узнал о переменных Bindable, так что содержимое текстового элемента изменялось, например, в зависимости от значения переменной.

Мне интересно, возможно ли это сделатьвещь в JavaScript.Например, предположим, у меня есть <h1 id="big_title">, в котором я хочу указать заголовок документа.Это легко сделать с помощью document.getElementById('big_title').innerHTML = document.title;, но что, если document.title изменится?Мне бы тоже пришлось вручную обновить big_title.

Другой способ выразить это, есть ли способ создать пользовательский onchange -подобный обработчик событий для переменной, а не для элемента DOM?Этот обработчик может обновлять заголовок по мере необходимости.

РЕДАКТИРОВАТЬ: я знаю, что мог бы использовать setInterval для проверки переменных "привязок" (определенных в массиве) и обновлять при необходимости, но это было бы несколько взломи требует компромисса между отзывчивостью и влиянием на производительность.

Answer 1

Вы можете «смотреть» объекты в большинстве основных браузеров. Здесь это прокладка.По сути, идея заключается в том, чтобы иметь установщик (в этом примере это функция с именем handler), которая будет выполняться при изменении значения.Я не уверен, какова степень поддержки браузера.

Хотя, если честно, звучит гораздо проще, если у вас есть собственный метод установки.Либо превратите его в объект (вы можете легко расширить этот пример, чтобы использовать общую 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
}

Answer 2

Лучший способ:

 (function (win) {
   function bindCtrl(id, varName) {
     var c = win.document.getElementById(id);
     if (!varName) varName = id;
     if (c) {
       Object.defineProperty(win, varName, {
         get: function () { return c.innerHTML; },
         set: function (v) { c.innerHTML = v; }
       });
     }

     return c;
   }

   win.bindCtrl = bindCtrl;
})(this);

// Bind control "test" to "x" variable
bindCtrl('test', 'x');

// Change value
x = 'Bar (prev: ' + x + ')';

<h1 id="test">Foo</h1>

Answer 3

Простой метод - сконцентрировать связанные элементы в одной переменной Javascript.Эта переменная имеет метод установки и связана с указанной пользователем функцией-обработчиком, которая вызывается при вызове метода установки.

function Binder(handler) {
    this._value = 0; // will be set 
    this._handler = handler;
}
Binder.prototype.set = function(val) {
    this._value = val;
    this._handler(this);
};
Binder.prototype.get = function() {
    return this._value;
};

Связыватель используется следующим образом:

<h1 id="h1">Title 0</h1>
<h2 id="h2">Title 0</h2>
<script type="text/javascript">
function titleHandler(variable) {
    var val = variable.get();
    document.getElementById("h1").innerHTML = val;
    document.getElementById("h2").innerHTML = "Sub" + val;
    document.title = val;
}
var title = new Binder(titleHandler);
title.set("Title 2");
</script>