使对象可观察

Question

我最近一直在研究诸如Angular和Meteor之类的JavaScript框架,我想知道他们如何知道对象属性何时发生了变化,以便他们可以更新DOM.

我有点惊讶Angular使用普通的旧JS对象,而不是要求你调用某种getter/setter,以便它可以挂钩并进行必要的更新.我的理解是他们只是定期轮询对象以进行更改.

但随着JS 1.8.5中getter和setter的出现,我们可以做得更好,不是吗？

作为一个小概念证明,我把这个脚本放在一起:

(编辑:更新代码以添加依赖属性/方法支持)

function dependentProperty(callback, deps) {
    callback.__dependencies__ = deps;
    return callback;
}

var person = {
    firstName: 'Ryan',
    lastName: 'Gosling',
    fullName: dependentProperty(function() {
        return person.firstName + ' ' + person.lastName;
    }, ['firstName','lastName'])
};

function observable(obj) {
    if (!obj.__properties__) Object.defineProperty(obj, '__properties__', {
        __proto__: null,
        configurable: false,
        enumerable: false,
        value: {},
        writable: false
    });
    for (var prop in obj) {
        if (obj.hasOwnProperty(prop)) {
            if(!obj.__properties__[prop]) obj.__properties__[prop] = {
                value: null,
                dependents: {},
                listeners: []
            };
            if(obj[prop].__dependencies__) {
                for(var i=0; i<obj[prop].__dependencies__.length; ++i) {
                    obj.__properties__[obj[prop].__dependencies__[i]].dependents[prop] = true;
                }
                delete obj[prop].__dependencies__;
            }
            obj.__properties__[prop].value = obj[prop];
            delete obj[prop];
            (function (prop) {
                Object.defineProperty(obj, prop, {
                    get: function () {
                        return obj.__properties__[prop].value;
                    },
                    set: function (newValue) {
                        var oldValue = obj.__properties__[prop].value;
                        if(oldValue !== newValue) {
                            var oldDepValues = {};
                            for(var dep in obj.__properties__[prop].dependents) {
                                if(obj.__properties__[prop].dependents.hasOwnProperty(dep)) {
                                    oldDepValues[dep] = obj.__properties__[dep].value();
                                }
                            }
                            obj.__properties__[prop].value = newValue;
                            for(var i=0; i<obj.__properties__[prop].listeners.length; ++i) {
                                obj.__properties__[prop].listeners[i](oldValue, newValue);
                            }
                            for(dep in obj.__properties__[prop].dependents) {
                                if(obj.__properties__[prop].dependents.hasOwnProperty(dep)) {
                                    var newDepValue = obj.__properties__[dep].value();
                                    for(i=0; i<obj.__properties__[dep].listeners.length; ++i) {
                                        obj.__properties__[dep].listeners[i](oldDepValues[dep], newDepValue);
                                    }
                                }
                            }
                        }
                    }
                });
            })(prop);
        }
    }
    return obj;
}

function listen(obj, prop, callback) {
    if(!obj.__properties__) throw 'object is not observable';
    obj.__properties__[prop].listeners.push(callback);
}

observable(person);

listen(person, 'fullName', function(oldValue, newValue) {
    console.log('Name changed from "'+oldValue+'" to "'+newValue+'"');
});

person.lastName = 'Reynolds';

哪些日志:

名称由"Ryan Gosling"改为"Ryan Reynolds"

我看到的唯一问题是定义方法,例如fullName()在person对象上,这取决于其他两个属性.这需要在对象上添加一些额外的标记,以允许开发人员指定依赖项.

除此之外,这种方法有什么缺点吗？

的jsfiddle

Answer 1

JS 1.8.5 中 getter 和 setter 的出现 - 这种方法有什么缺点吗？

• 除了观察到的属性更改之外，您不会捕获任何属性更改。当然，这对于建模实体对象来说已经足够了，对于我们可以使用代理的任何其他东西。
• 它仅限于支持 getter/setter 甚至代理的浏览器。但是嘿，谁关心过时的浏览器呢？:-) 在受限环境（Node.js）中，这根本不成立。
• 访问器属性（带有 getter 和 setter）比真正的 get/set 方法慢得多。当然，我不期望它们在关键部分中使用，并且它们可以使代码看起来更漂亮。然而你需要把这一点牢记在心。此外，花哨的代码可能会导致误解 - 通常您会期望属性分配/访问是一个简短的 ( O(1)) 操作，而对于 getters/setters 可能会发生更多的事情。您需要注意不要忘记这一点，并且使用实际方法可能会有所帮助。

因此，如果我们知道自己在做什么，是的，我们可以做得更好。

尽管如此，我们需要记住一个重要的点：同步/异步（也可以看看这个优秀的答案）。Angular 的脏检查允许您在下一个事件循环轮次中触发事件之前立即更改一堆属性。这有助于避免语义上无效的状态（传播）。

但我也认为同步 getter/setter 是一个机会。它们确实允许我们声明属性之间的依赖关系并由此定义有效状态。它将自动确保模型的正确性，而我们一次只需更改一个属性（而不是一直更改firstName就fullName足够firstName了）。然而，在解决依赖关系期间，这可能不成立，因此我们需要关心它。

因此，与依赖关系管理无关的侦听器应该异步触发。只是setImmediate他们的循环。