Question

我正在处理一个单页应用程序，其中变量x可能因多种原因而发生变化。我希望DOM中显示的值（下面的div）始终与javascript变量的值匹配。

我理解像angular这样的框架对此有好处，但我正在寻找一种更轻量级和简单的解决方案。我已经在页面上使用了JQuery和underscore.js，如果这有帮助的话。

 <script>
    var x = 100
    </script>

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

理想情况下，我想要一些我需要提供变量和元素作为参数的东西。例如：

bind(x,'#value_display')

Answer 1

我的主张是创建一个特殊的类来封装那些变量。这是一个非常轻量级的解决方案，没有间隔和价值观察。

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/

Answer 2

您要求一个观察者模式的简单实现（没有大型框架），理想情况下只需提供变量名称和元素的id作为参数。

如果我们定义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以由函数/方法（某种类型的setter）控制。如果你研究（谷歌）观察者模式或发布/子模式，你会发现在比大框架更少的代码中实现这一点的简单方法 - 但可能不像轮询方法那样轻量级。

轻量级单向数据绑定的最佳解决方案

2 个答案: