Javascript 如何在HTML元素中显示JS对象属性，并在属性/属性发生变化时立即更新HTML

目前，我正在编写一个应用程序，它由数百个在后台异步更新的JS对象组成。使用iFrame创建的多个面板可用于可视化HTML中的各种对象

挑战：一旦对象更新，显示更新属性/属性的相应HTML元素就会自动更新自身。HTML元素发生的更改应该/不一定会影响对象！我见过的许多双向数据绑定库对于我的需求来说都是言过其实了

是否可以使用Object.observe编写高效的内容？目前，我尝试了以下方法（有效），但对性能来说很糟糕，在HTML被删除（面板被关闭或新对象被打开）后，对象不断被观察到：

main.html：

<iframe src="panel.html"></iframe>
<script>
var module = function(){ // constructor
    var obj = this;
    obj.param1 = "foo";
    obj.param2 = "bar";
    obj.id = 123;   
};
module.prototype = {};
var mod = new module(); // create the object
</script>

var module=function（）{//构造函数
var obj=这个；
obj.param1=“foo”；
obj.param2=“bar”；
obj.id=123；
};
module.prototype={}；
var mod=新模块（）；//创建对象

---

panel.html

<script>
// jquery extension to observe attribute and set/update value
$.fn.extend({
  vbind: function(object,parameter) {
    var el = this; // get current element instance

    $(el).html(object[parameter]); // set current value of parameter

    // observe object of interest
    Object.observe(object, function(changes){
        // This asynchronous callback runs
        changes.forEach(function(change) {
            $(el).html( object[change.name] ); // set new value of parameter
        });
    });
    return el;
  }
});


$(function(){
// create 1000 elements all listening for changes in object
for(var i = 0; i < 1000; i++){
        $("<div>").vbind(parent.mod,"param1").appendTo("body");
    }
});
</script>

//用于观察属性和设置/更新值的jquery扩展
$.fn.extend({
vbind：函数（对象、参数）{
var el=this；//获取当前元素实例
$（el）.html（对象[参数]；//设置参数的当前值
//观察感兴趣的对象
观察（对象、功能（变化）{
//此异步回调将运行
更改。forEach（函数（更改）{
$（el.html（对象[change.name]）；//设置参数的新值
});
});
返回el；
}
});
$（函数（）{
//创建1000个元素，所有元素都侦听对象中的更改
对于（变量i=0；i<1000；i++）{
$（“”）.vbind（parent.mod，“param1”）.appendTo（“body”）；
}
});

在main.html的控制台中设置“obj.param1=0；”将导致所有元素完全按照我需要的方式更改。 有没有更优雅的方法来实现这一点，特别是在不断创建和删除元素的情况下

提前感谢您的评论和想法

---

编辑：对于那些遇到类似挑战的人，我最终编写了一个小型库，解决了我的大部分问题：github.com/weltwinkel/.b

您说过双向绑定库对于您的目的来说过于夸张了，但坦率地说，您的用例似乎正是它们的用途。仅6.2k缩小和压缩，并为您处理所有这些管道。（不是背书，例如。）还要注意，

Object.observe

是ES.next的一项功能（可能是2016年或2017年），虽然有些引擎有它（好吧，Chrome的V8有），但它是。（请注意，如果这对您的项目很重要的话，铆接依赖于IE8所没有的东西。）感谢您对铆接t.J.Crowder的评论，我会仔细看看。该系统旨在只在专用网络中的Chrome上运行，因此支持所有浏览器幸运地不是问题。您已经说过双向绑定lib对于您的目的来说被夸大了，但坦率地说，听起来您的用例正是它们的用途。仅6.2k缩小和压缩，并为您处理所有这些管道。（不是背书，例如。）还要注意，

Object.observe

是ES.next的一项功能（可能是2016年或2017年），虽然有些引擎有它（好吧，Chrome的V8有），但它是。（请注意，如果这对您的项目很重要的话，铆接依赖于IE8所没有的东西。）感谢您对铆接t.J.Crowder的评论，我会仔细看看。该系统打算只在专用网络中的Chrome上运行，因此幸运的是，支持所有浏览器不是问题。