AngularJS:在没有$watch的情况下观察变量

AngularJS: Watching variables without $watch

本文关键字：情况下 观察 变量 watch AngularJS      更新时间：2023-09-26

我最近"发现"Javascript是一种"共享调用"（维基百科解释）语言，这意味着本质上，一切都是通过值传递的，但是对象的原始内容仍然可以更改。举个简单的例子：

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。以下作品。

控制器.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');
    }
});

服务.js：

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

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

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

我已经四处搜索以查找是否正在执行此操作以及它是否被认为是良好的编码。我找不到任何东西，可能是因为我不知道要使用的正确术语。那么，这种技术是否正在被积极使用？这被认为是一种好的做法，还是有一些我不知道的陷阱？

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

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

我认为您所说的与我在 AngularJS 开发人员犯的第二个最常见的错误中所写的内容一致，即滥用$watch：http://csharperimage.jeremylikness.com/2014/11/the-top-5-mistakes-angularjs-developers_28.html

相关文章：