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

我有一个单页应用程序，我正在其中变量x可以因多种原因而更改。我希望DOM（下面的div）中显示的值始终与javascript变量的值匹配。轻量级单向数据绑定的最佳解决方案

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

<script> 
    var x = 100 
    </script> 

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

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

bind(x,'#value_display')

来源

2016-08-26 corycorycory

没有针对此不超简单的解决方案..你可以看看这里：http://stackoverflow.com/问题/ 1759987 /监听变量更改在JavaScript或jQuery中，或者尝试一些轻量级框架，如：https://vuejs.org/guide/ –

如果您坚持通过简单分配对数据执行更新，你可以使用['Proxy']（https://developer.mozilla.org/en-US/docs/Web/ JavaScript/Reference/Global_Objects/Proxy）来监听更改，但[在许多浏览器中不支持]（http://caniuse.com/#feat=proxy）。否则，请考虑通过函数调用分配数据。 – zzzzBov

你问一个观察者模式的一个简单的实现（没有大的框架），理想只是通过提供变量的名称和作为参数元素的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以通过函数/方法（某种设置器）进行控制。如果您研究（谷歌）观察者模式或发布/子模式，您会发现简单的方法来执行此代码比大型框架代码少得多，但可能不像轮询方法那样轻量级。

来源

2016-09-01 19:38:30

我不得不不同意你最后的陈述，“不像投票方法那么轻量级”，以及它的建议 - 轮询在某种程度上是轻量级的。数十，数百，数千，甚至数百万次无用的函数调用，如果值不变，在我看来并不构成轻量级。但是你是对的，可以使用“某种形式的二传手”。请考虑以下https://repl.it/@dexygen/DemystifyingOneWayBinding，这仅仅是第一次尝试，但工作。对象构造函数可能看起来没有必要，但它是我在我自己的框架中使用的东西 –

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

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; 

};

用法：在的jsfiddle

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

x.set(100);

检查例子 - https://jsfiddle.net/maciejsikora/wrd14kwk/

来源

2016-09-01 20:30:02

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

回答

相关问题