Нарисуйте график в JS [duplicate]

Мое предложение состоит в создании специального класса для инкапсуляции этих переменных.

var ViewModel=function(selector){

  this.dom=document.querySelector(selector);//here DOM element
  this.value=null;

};

//method sets value
ViewModel.prototype.set=function(value){

   if (value===this.value)
   return;//the same value

   this.value=value;//new value


   this.dom.innerText=this.value; //most important changing in DOM

};

//method gets value
ViewModel.prototype.get=function(){

  return this.value;

};

Использование:

var x=new ViewModel("#selector");

x.set(100);

Пример проверки в jsFiddle - https://jsfiddle.net/maciejsikora / wrd14kwk /

Вы запрашиваете простую реализацию (без больших фреймворков) шаблона наблюдателя, в идеале просто предоставляя имя переменной и идентификатор элемента в качестве аргументов.

То, о чем вы просите, возможно, если мы определим функцию bind() для повторного опроса x, чтобы увидеть, изменилась ли она. Обратите внимание, что bind следует называть так:

bind('x','value_display');

Рабочий пример:

var x = 100;

function bind(varName, elementId){
  var lastValue;
  function check(){
    if(lastValue !== window[varName]){
      lastValue = window[varName];
      document.getElementById(elementId).innerHTML = lastValue; 
    }
  }
  //poll for changes every 50 milliseconds
  setInterval(check, 50); 
}

//bind x to value_display

bind('x','value_display');

//test function by changing x every 100th millisecond

setInterval(function(){
    x = +new Date;
  },
  100
);

<div id="value_display"></div>

Лично я предпочел бы облегченный модуль издателя / подписчика с использованием функции опроса, но для этого потребуется назначить переменной x для управления функцией / методом (какой-то сеттер). Если вы исследуете (google) шаблон наблюдателя или паб / подзаголовок, вы найдете простые способы реализации этого кода гораздо меньше, чем большая фреймворк, но, вероятно, не такой легкий, как подход к опросу.