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

标签 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');
    }
});

服务.js:

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

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

Listener Controller 中的 $scope.user 变量在用户单击 Changer Controller 中的按钮时更新。如果此变量显示在 HTML 中,此更改是可见的。

当然,最明显的陷阱是对象本身无法更改,因为对象引用随后发生更改,Listener Controller 正在监听错误的引用。

我四处搜索以了解是否正在这样做,以及它是否被认为是好的编码。我找不到任何东西,可能是因为我不知道要使用的正确术语。那么,这种技术是否正在被积极使用?它被认为是一种好的做法还是存在一些我不知道的陷阱?

最佳答案

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

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

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

关于javascript - AngularJS:在没有 $watch 的情况下观察变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28148979/

相关文章:

javascript - Angular.js - 如何访问 ng-repeat 中 ng-model 的值

angularjs - Node.js 和 AngularJS 实现身份验证和授权机制的最快、最简单的方法

javascript - 是否可以将 JQuery attr 绑定(bind)到 js 变量?

javascript - 优化我的 javascript REGEX 以格式化短名称

javascript - Highstocks - 在日期时间轴上使用 tickmarkPlacement "between"(无类别)

javascript - 在 ng-repeat 中显示字符串输出

angularjs - Angular UI Bootstrap - 模态不会在第一次点击时弹出

javascript - 使用 AJAX 更新我的列状态

javascript - ISO 8601 日期 JS 解释差异 - IE/FF 与 Chrome

angularjs - 需要在 Angular if 语句中选中复选框