我认为我的答案会更有技术含量，但不会像其他人用不同的技术呈现同样的东西那样不同。 所以，首先，这个问题的解决方案是使用一种被称为“观察者”的设计模式，它让你把数据从你的表示中分离出来，使一个东西的变化被广播给它们的侦听器，但在这种情况下，它是双向的。

对于DOM到JS的方式

为了将DOM中的数据绑定到js对象，你可以添加数据属性形式的标记(如果你需要兼容性，也可以添加类)，像这样:

<input type="text" data-object="a" data-property="b" id="b" class="bind" value=""/>
<input type="text" data-object="a" data-property="c" id="c" class="bind" value=""/>
<input type="text" data-object="d" data-property="e" id="e" class="bind" value=""/>

这样，它可以通过js使用querySelectorAll(或老朋友getElementsByClassName兼容)访问。

现在，您可以将事件监听更改的方式绑定在一起:每个对象一个监听器，或者容器/文档一个大监听器。绑定到文档/容器将为它或它的子容器中的每一个更改触发事件，它将占用更小的内存，但会产生事件调用。 代码看起来像这样:

//Bind to each element
var elements = document.querySelectorAll('input[data-property]');

function toJS(){
    //Assuming `a` is in scope of the document
    var obj = document[this.data.object];
    obj[this.data.property] = this.value;
}

elements.forEach(function(el){
    el.addEventListener('change', toJS, false);
}

//Bind to document
function toJS2(){
    if (this.data && this.data.object) {
        //Again, assuming `a` is in document's scope
        var obj = document[this.data.object];
        obj[this.data.property] = this.value;
    }
}

document.addEventListener('change', toJS2, false);

对于JS做DOM的方式

你需要两件事:一个元对象，它将持有DOM元素的引用，绑定到每个js对象/属性，以及一种方法来监听对象的变化。基本上是相同的方式:您必须有一种方法来侦听对象中的更改，然后将其绑定到DOM节点，因为您的对象“不能有”元数据，您将需要另一个对象以属性名称映射到元数据对象的属性的方式保存元数据。 代码是这样的:

var a = {
        b: 'foo',
        c: 'bar'
    },
    d = {
        e: 'baz'
    },
    metadata = {
        b: 'b',
        c: 'c',
        e: 'e'
    };
function toDOM(changes){
    //changes is an array of objects changed and what happened
    //for now i'd recommend a polyfill as this syntax is still a proposal
    changes.forEach(function(change){
        var element = document.getElementById(metadata[change.name]);
        element.value = change.object[change.name];
    });
}
//Side note: you can also use currying to fix the second argument of the function (the toDOM method)
Object.observe(a, toDOM);
Object.observe(d, toDOM);

希望我能帮上忙。

将变量绑定到输入的一个简单方法(双向绑定)是直接访问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.

这是一个非常简单的双向数据绑定在香草javascript....

<input type="text" id="inp" onkeyup="document.getElementById('name').innerHTML=document.getElementById('inp').value;">

<div id="name">

</div>

迟来的派对，特别是因为我在几个月/几年前写了两篇相关的lib，我以后会提到它们，但看起来仍然与我有关。简短地说，我选择的技术是:

模型观测的代理 用于跟踪DOM更改的MutationObserver(用于绑定原因，而不是值更改) 值的变化(从视图到模型流)通过常规的addEventListener处理程序来处理

恕我直言，除了OP之外，重要的是数据绑定实现将:

处理不同的应用生命周期情况(HTML先，然后JS, JS先，然后HTML，动态属性变化等) 允许模型深度绑定，这样就可以绑定user.address.block 数组作为模型应该得到正确的支持(移位、拼接等) 处理ShadowDOM 尽量简化技术替换，因此任何模板子语言都是一种不适合未来更改的方法，因为它与框架耦合得太紧密了

考虑到所有这些因素，在我看来不可能仅仅抛出几十行JS代码。我试着把它作为一种模式而不是自由——对我没用。

接下来，拥有Object。observe被删除了，但是考虑到模型的观察是至关重要的部分——这整个部分必须被关注——分离到另一个库中。现在说到我如何处理这个问题的原则——正如OP所问的那样:

模型(JS部分)

我对模型观察的看法是代理，恕我直言，这是唯一可行的方法。 功能齐全的观察者应该有自己的库，所以我开发了对象观察者库。

模型应该通过一些专用的API注册，这就是pojo变成可观察对象的地方，在这里看不到任何快捷方式。DOM元素被认为是绑定视图(见下文)，首先用模型的值更新，然后在每次数据更改时更新。

视图(HTML部分)

恕我直言，表达绑定最简洁的方式是通过属性。很多人以前这样做过，很多人以后也会这样做，所以这里没有新闻，这是一种正确的方法。在我的例子中，我使用了以下语法:<span data-tie="modelKey:path.to。data => targerProperty"></span>，但这并不重要。对我来说重要的是，HTML中没有复杂的脚本语法——这是错误的，再说一次，恕我直言。

首先要收集指定为绑定视图的所有元素。在我看来，从性能角度来看，管理模型和视图之间的一些内部映射是不可避免的，似乎是牺牲内存+一些管理来节省运行时查找和更新的正确情况。

视图首先从模型中更新(如果可用的话)，然后根据后来的模型更改进行更新，正如我们所说的。 而且，应该通过MutationObserver观察整个DOM，以便对动态添加/删除/更改的元素做出反应(绑定/取消绑定)。 此外，所有这些都应该复制到ShadowDOM中(当然是开放的)，以避免留下未绑定的黑洞。

具体细节还可以进一步列出，但在我看来，这些是实现数据绑定的主要原则，一方面是功能的完整性，另一方面是简单性。

因此，除了上面提到的对象观察器之外，我实际上还编写了数据层库，它按照上面提到的概念实现了数据绑定。

我想给我的预习添点什么。我建议使用一种稍微不同的方法，它允许您不使用方法而简单地为对象分配一个新值。但必须指出的是，特别是老版本的浏览器不支持这一点，IE9仍然需要使用不同的界面。

最值得注意的是，我的方法没有使用事件。

getter和setter

我的建议利用了getter和setter相对较年轻的特性，特别是仅使用setter。一般来说，突变器允许我们“自定义”某些属性如何赋值和检索的行为。

这里我将使用的一个实现是Object.defineProperty方法。它适用于火狐，谷歌浏览器，我想还有IE9。还没有测试其他浏览器，但由于这只是理论…

不管怎样，它接受三个参数。第一个参数是您希望为其定义新属性的对象，第二个参数是类似于新属性名称的字符串，最后一个“描述符对象”提供关于新属性行为的信息。

两个特别有趣的描述符是get和set。示例如下所示。注意，使用这两个描述符将禁止使用其他4个描述符。

function MyCtor( bindTo ) {
    // I'll omit parameter validation here.

    Object.defineProperty(this, 'value', {
        enumerable: true,
        get : function ( ) {
            return bindTo.value;
        },
        set : function ( val ) {
            bindTo.value = val;
        }
    });
}

现在使用这个有点不同:

var obj = new MyCtor(document.getElementById('foo')),
    i = 0;
setInterval(function() {
    obj.value += ++i;
}, 3000);

我想强调的是，这只适用于现代浏览器。

工作提琴:http://jsfiddle.net/Derija93/RkTMD/1/

绑定任何html输入

<input id="element-to-bind" type="text">

定义两个函数:

function bindValue(objectToBind) {
var elemToBind = document.getElementById(objectToBind.id)    
elemToBind.addEventListener("change", function() {
    objectToBind.value = this.value;
})
}

function proxify(id) { 
var handler = {
    set: function(target, key, value, receiver) {
        target[key] = value;
        document.getElementById(target.id).value = value;
        return Reflect.set(target, key, value);
    },
}
return new Proxy({id: id}, handler);
}

使用函数:

var myObject = proxify('element-to-bind')
bindValue(myObject);