是否有可能在JS中有一个事件，当某个变量的值发生变化时触发?JQuery被接受。
当前回答
请记住，最初的问题是针对变量的，而不是针对对象的;)
除了上面所有的答案，我创建了一个名为thewatch .js的小库， 在javascript中使用相同的方法来捕捉和回调普通全局变量的变化。
与JQUERY变量兼容，不需要使用object，如果需要，可以直接传递几个变量的ARRAY。
如果有帮助的话……： https://bitbucket.org/esabora/forthewatch基本上你只需要调用这个函数: watchIt(“theVariableToWatch”、“varChangedFunctionCallback”);
如果不相关，先说句抱歉。
其他回答
我搜索了JavaScript双向数据绑定库，发现了这个库。
我没有成功地使它在DOM到变量的方向上工作，但在变量到DOM的方向上它是工作的，这就是我们在这里需要的。
我稍微重写了一下，因为原始代码(对我来说)很难阅读。它使用 object。defineproperty，这是Eliot b给出的第二多赞的答案，至少有部分错误。
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
const dataBind = (function () {
const getElementValue = function (selector) {
let element = document.querySelectorAll(selector)[0];
return 'value' in element ? element.value : element.innerHTML;
};
const setElementValue = function (selector, newValue) {
let elementArray = document.querySelectorAll(selector);
for (let i = 0; i < elementArray.length; i++) {
let element = elementArray[i];
if ('value' in element) {
element.value = newValue;
if (element.tagName.toLowerCase() === 'select'){
let options = element.querySelectorAll('option');
for (let option in options){
if (option.value === newValue){
option.selected = true;
break;
}
}
}
} else {
element.innerHTML = newValue;
}
}
};
const bindModelToView = function (selector, object, property, enumerable) {
Object.defineProperty(object, property, {
get: function () {
return getElementValue(selector);
},
set: function (newValue) {
setElementValue(selector, newValue);
},
configurable: true,
enumerable: (enumerable)
});
};
return {
bindModelToView
};
})();
</script>
</head>
<body>
<div style="padding: 20%;">
<input type="text" id="text" style="width: 40px;"/>
</div>
<script>
let x = {a: 1, b: 2};
dataBind.bindModelToView('#text', x, 'a'); //data to dom
setInterval(function () {
x.a++;
}, 1000);
</script>
</body>
</html>
JSFiddle.
JSFiddle原始代码。
在提供的示例中，对象x的属性由setInterval更新，文本输入的值也会自动更新。如果这还不够，并且事件是你想要的，你可以在上面的输入中添加onchange监听器。如果需要，输入也可以被隐藏。
AngularJS(我知道这不是JQuery，但这可能有帮助。[纯JS只在理论上是好的]):
$scope.$watch('data', function(newValue) { ..
其中“data”是作用域内变量的名称。
这里有一个doc的链接。
正如Luke Schafer的回答(注意:这是指他的原始帖子;但是这里的整个观点在编辑之后仍然有效)，我还建议使用一对Get/Set方法来访问你的值。
然而，我想建议一些修改(这就是为什么我在这里发帖……)
这段代码的一个问题是对象myobj的字段A是可以直接访问的，所以可以在不触发侦听器的情况下访问/更改它的值:
var myobj = { a : 5, get_a : function() { return this.a;}, set_a : function(val) { this.a = val; }}
/* add listeners ... */
myobj.a = 10; // no listeners called!
封装
因此，为了保证监听器被实际调用，我们必须禁止直接访问字段a。如何做到这一点?使用闭包!
var myobj = (function() { // Anonymous function to create scope.
var a = 5; // 'a' is local to this function
// and cannot be directly accessed from outside
// this anonymous function's scope
return {
get_a : function() { return a; }, // These functions are closures:
set_a : function(val) { a = val; } // they keep reference to
// something ('a') that was on scope
// where they were defined
};
})();
现在您可以使用Luke建议的相同方法来创建和添加侦听器，但是您可以放心，没有可能的方法来读取或写入一个未被注意到的对象!
以编程方式添加封装的字段
继续Luke的思路，我现在提出一种简单的方法，通过简单的函数调用将封装的字段和各自的getter /setter添加到对象中。
注意，这只适用于值类型。为了与引用类型一起工作，必须实现某种深度复制(例如，请参阅这个)。
function addProperty(obj, name, initial) {
var field = initial;
obj["get_" + name] = function() { return field; }
obj["set_" + name] = function(val) { field = val; }
}
这与之前的工作相同:我们在函数上创建一个局部变量，然后创建一个闭包。
如何使用它?简单:
var myobj = {};
addProperty(myobj, "total", 0);
window.alert(myobj.get_total() == 0);
myobj.set_total(10);
window.alert(myobj.get_total() == 10);
请记住，最初的问题是针对变量的，而不是针对对象的;)
除了上面所有的答案，我创建了一个名为thewatch .js的小库， 在javascript中使用相同的方法来捕捉和回调普通全局变量的变化。
与JQUERY变量兼容，不需要使用object，如果需要，可以直接传递几个变量的ARRAY。
如果有帮助的话……： https://bitbucket.org/esabora/forthewatch基本上你只需要调用这个函数: watchIt(“theVariableToWatch”、“varChangedFunctionCallback”);
如果不相关，先说句抱歉。
一个相当简单和简单的解决方案是只使用函数调用来设置全局变量的值，而不要直接设置它的值。这样你就可以完全控制:
var globalVar;
function setGlobalVar(value) {
globalVar = value;
console.log("Value of globalVar set to: " + globalVar);
//Whatever else
}
没有办法强制执行，它只需要编程纪律……尽管你可以使用grep(或类似的东西)来检查你的代码没有直接设置globalVar的值。
或者你可以把它封装在一个对象和用户getter和setter方法中…只是一个想法。
