AngularJS:没有$ watch的观察变量

时间:2015-01-26 11:09:42

标签: javascript angularjs

我最近发现了' Javascript是" Call by sharing" (维基百科解释)语言,意味着本质上,一切都是通过值传递的,但是对象的原始内容仍然可以改变。一个简单的例子:

function changeObjectProperties(obj) {
    obj.p = 20;
}

var obj = { p: 10; }
changeObjectProperties(obj);
console.log(obj.p); // will print 20; it's changed!

这让我想知道这是否可以在Angular中用于观看'不使用$ scope的变量。$ watch。以下作品。

controllers.js:

.controller('Listener', function($scope, UserService) {
    $scope.user = UserService.getUser();
})

.controller('Changer', function($scope, UserService) {

    // let's imagine the UI has some button that changes the e-mailadres
    $scope.buttonClick = function() {
        UserService.setEmail('foo@bar.com');
    }
});

services.js:

.factory('UserService', function() {
    var user = {
        name: 'Foo',
        email: 'example@example.com'
    };

    return {
        getUser: function() { return user; }
        setEmail: function(email) { user.email = email; }
    };
});

当用户点击$scope.user控制器中的按钮时,Listener控制器中的Changer变量会更新。如果此变量显示在HTML中,则此更改可见。

当然最明显的缺陷是对象本身无法更改,因为对象引用随后被更改,Listener控制器正在侦听错误的引用。

我已经四处寻找,以确定是否正在进行,以及它是否被认为是良好的编码。我还没有找到任何东西,可能是因为我不知道正确的使用条款。那么,这种技术是否被积极使用?它被认为是一种好习惯,还是有一些我不知道的陷阱?

1 个答案:

答案 0 :(得分:0)

您当然可以使用基本语言来避免过度观看。请记住,没有办法完全避免观看,因为手表从根本上说是Angular跟踪模型的方式。换句话说,如果你不做任何其他事情,将一些东西放在范围上将导致Angular观察它,以便它们知道何时更新渲染的UI。这是摘要循环的本质。在某种程度上,您可以围绕此摘要循环的运行方式管理内部通信,您可以减少或消除外部观察者的开销。

因此,从本质上讲,您可以使用JavaScript优先方法来协调状态和内部对象转换,并避免显式观察者,因为Angular将通过自己的手表获取更改,这些手表是摘要循环的一部分。

我认为你所谈论的内容符合我在AngularJS开发人员犯下的第二个最常见的错误中所写的内容,即滥用$ watch:http://csharperimage.jeremylikness.com/2014/11/the-top-5-mistakes-angularjs-developers_28.html