请严格把这个问题当作教育问题来对待。我仍然有兴趣听到新的答案和想法来实现这一点
博士tl;
如何用JavaScript实现双向数据绑定?
到DOM的数据绑定
通过数据绑定到DOM，我的意思是，例如，拥有一个带有属性b的JavaScript对象a。然后有一个<input> DOM元素(例如)，当DOM元素改变时，a也会改变，反之亦然(也就是说，我的意思是双向数据绑定)。
下面是AngularJS的一个图:
JavaScript是这样的:
var a = {b:3};
然后输入(或其他形式)元素，如:
<input type='text' value=''>
我希望输入的值是a.b的值(例如)，当输入文本发生变化时，我希望a.b也发生变化。当JavaScript中的a.b发生变化时，输入也会发生变化。
这个问题
在纯JavaScript中完成这个任务的基本技术是什么?
具体来说，我想要一个好的答案参考:
对象绑定是如何工作的?
倾听形式上的变化是如何起作用的?
是否有可能以一种简单的方式只在模板级别修改HTML ?我不想在HTML文档本身中跟踪绑定，而只在JavaScript中跟踪绑定(使用DOM事件，JavaScript保持对所使用的DOM元素的引用)。
我都试过什么?
我是一个大粉丝的胡子，所以我尝试使用它的模板。然而，我在尝试执行数据绑定本身时遇到了问题，因为Mustache将HTML处理为字符串，所以在我得到它的结果后，我没有引用到我的视图模型中的对象在哪里。我能想到的唯一解决办法是用属性修改HTML字符串(或创建DOM树)本身。我不介意使用不同的模板引擎。
基本上，我有一种强烈的感觉，我把手头的问题复杂化了，有一个简单的解决办法。
注意:请不要提供使用外部库的答案，特别是那些有数千行代码的答案。我用过(而且喜欢!)AngularJS和KnockoutJS。我真的不想要“使用框架x”这种形式的答案。最理想的情况是，我希望未来不知道如何使用许多框架的读者能够自己掌握如何实现双向数据绑定。我不期待一个完整的答案，但希望能让人理解。
在过去的7年里，情况发生了很大的变化，我们现在在大多数浏览器中都有本地web组件。在我看来，问题的核心是在元素之间共享状态，一旦你有了它，当状态改变时更新ui就很简单了，反之亦然。
为了在元素之间共享数据，你可以创建一个StateObserver类，并以此扩展你的web组件。一个最小的实现是这样的:
// create a base class to handle state
class StateObserver extends HTMLElement {
constructor () {
super()
StateObserver.instances.push(this)
}
stateUpdate (update) {
StateObserver.lastState = StateObserver.state
StateObserver.state = update
StateObserver.instances.forEach((i) => {
if (!i.onStateUpdate) return
i.onStateUpdate(update, StateObserver.lastState)
})
}
}
StateObserver.instances = []
StateObserver.state = {}
StateObserver.lastState = {}
// create a web component which will react to state changes
class CustomReactive extends StateObserver {
onStateUpdate (state, lastState) {
if (state.someProp === lastState.someProp) return
this.innerHTML = `input is: ${state.someProp}`
}
}
customElements.define('custom-reactive', CustomReactive)
class CustomObserved extends StateObserver {
connectedCallback () {
this.querySelector('input').addEventListener('input', (e) => {
this.stateUpdate({ someProp: e.target.value })
})
}
}
customElements.define('custom-observed', CustomObserved)
<custom-observed>
<input>
</custom-observed>
<br />
<custom-reactive></custom-reactive>
小提琴在这里
我喜欢这种方法，因为:
no dom traversal to find data- properties
no Object.observe (deprecated)
no Proxy (which provides a hook but no communication mechanism anyway)
no dependencies, (other than a polyfill depending on your target browsers)
it's reasonably centralised & modular... describing state in html, and having listeners everywhere would get messy very quickly.
it's extensible. This basic implementation is 20 lines of code, but you could easily build up some convenience, immutability, and state shape magic to make it easier to work with.
所以，我决定把我自己的溶液扔进锅里。这是一个工作的小提琴。注意，这只在非常现代的浏览器上运行。
它使用什么
这个实现非常现代——它需要一个(非常)现代的浏览器和用户两项新技术:
mutationobserver用于检测dom中的变化(事件监听器也被使用)
对象。观察以检测对象中的变化并通知dom。危险，由于这个答案已经被ECMAScript TC讨论并决定反对，考虑一个polyfill。
它是如何工作的
在元素上，放置一个domAttribute:objAttribute映射——例如bind='textContent:name'
在dataBind函数中读取它。观察元素和对象的变化。
当发生更改时，更新相关元素。
解决方案
下面是dataBind函数，注意它只有20行代码，可以更短:
function dataBind(domElement, obj) {
var bind = domElement.getAttribute("bind").split(":");
var domAttr = bind[0].trim(); // the attribute on the DOM element
var itemAttr = bind[1].trim(); // the attribute the object
// when the object changes - update the DOM
Object.observe(obj, function (change) {
domElement[domAttr] = obj[itemAttr];
});
// when the dom changes - update the object
new MutationObserver(updateObj).observe(domElement, {
attributes: true,
childList: true,
characterData: true
});
domElement.addEventListener("keyup", updateObj);
domElement.addEventListener("click",updateObj);
function updateObj(){
obj[itemAttr] = domElement[domAttr];
}
// start the cycle by taking the attribute from the object and updating it.
domElement[domAttr] = obj[itemAttr];
}
下面是一些用法:
HTML:
<div id='projection' bind='textContent:name'></div>
<input type='text' id='textView' bind='value:name' />
JavaScript:
var obj = {
name: "Benjamin"
};
var el = document.getElementById("textView");
dataBind(el, obj);
var field = document.getElementById("projection");
dataBind(field,obj);
这是一把能用的小提琴。注意，这个解决方案是相当通用的。对象。可以使用观察和突变观察器shimming。
将变量绑定到输入的一个简单方法(双向绑定)是直接访问getter和setter中的输入元素:
var variable = function(element){
return {
get : function () { return element.value;},
set : function (value) { element.value = value;}
}
};
在HTML中:
<input id="an-input" />
<input id="another-input" />
并使用:
var myVar = new variable(document.getElementById("an-input"));
myVar.set(10);
// and another example:
var myVar2 = new variable(document.getElementById("another-input"));
myVar.set(myVar2.get());
一个不需要getter/setter的更好的方法:
var variable = function(element){
return function () {
if(arguments.length > 0)
element.value = arguments[0];
else return element.value;
}
}
使用方法:
var v1 = new variable(document.getElementById("an-input"));
v1(10); // sets value to 20.
console.log(v1()); // reads value.
对象绑定是如何工作的?
倾听形式上的变化是如何起作用的?
更新两个对象的抽象
我认为还有其他技术，但最终我将拥有一个对象，该对象保存对相关DOM元素的引用，并提供一个接口，以协调对其自身数据及其相关元素的更新。
addeventlistener()为此提供了一个非常好的接口。您可以给它一个实现eventListener接口的对象，它将用该对象作为this值调用它的处理程序。
这使您可以自动访问元素及其相关数据。
定义对象
原型继承是实现这一点的好方法，当然不是必需的。首先，创建一个构造函数来接收元素和一些初始数据。
function MyCtor(element, data) {
this.data = data;
this.element = element;
element.value = data;
element.addEventListener("change", this, false);
}
因此，这里构造函数将元素和数据存储在新对象的属性上。它还将更改事件绑定到给定元素。有趣的是，它将new对象而不是函数作为第二个参数传递。但单靠这个是不行的。
实现eventListener接口
要做到这一点，您的对象需要实现eventListener接口。要做到这一点，只需给对象一个handleEvent()方法。
这就是继承的作用。
MyCtor.prototype.handleEvent = function(event) {
switch (event.type) {
case "change": this.change(this.element.value);
}
};
MyCtor.prototype.change = function(value) {
this.data = value;
this.element.value = value;
};
有许多不同的方法可以进行结构化，但是对于协调更新的示例，我决定让change()方法只接受一个值，并让handleEvent传递该值而不是事件对象。这样也可以在没有事件的情况下调用change()。
现在，当change事件发生时，它会更新元素和。data属性。在JavaScript程序中调用.change()时也会发生同样的情况。
使用代码
现在只需创建新对象，并让它执行更新。JS代码中的更新将出现在输入中，并且输入中的更改事件将对JS代码可见。
var obj = new MyCtor(document.getElementById("foo"), "20");
// simulate some JS based changes.
var i = 0;
setInterval(function() {
obj.change(parseInt(obj.element.value) + ++i);
}, 3000);
演示:http://jsfiddle.net/RkTMD/
