1

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

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

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

主.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>

面板.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>

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

提前感谢您的评论和想法！

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

4

0 回答 0