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

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

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

bind()如果我们定义函数来重复轮询x以查看它是否已更改，则您的要求是可能的。请注意，bind必须这样调用：

bind('x','value_display');

一个工作示例：

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
);

就我个人而言，我更喜欢使用轻量级发布者/订阅者模块而不是使用轮询函数，但这需要分配给x由函数/方法（某种设置器）控制的变量。如果您研究（谷歌）观察者模式或发布/订阅模式，您会发现比大型框架用更少的代码来实现这一点的简单方法 - 但可能不如轮询方法那么轻量级。