首页 > 代码库 > 前端框架之Angular(三)

前端框架之Angular(三)

 

这节说一下Angular的脏检查、功能和服务。

一、脏检查

Angular 内部通过 dirty check 来跟踪数据变化,这是双向数据绑定的实现基础。

所谓脏检查,就是 angular 会给每一个数据绑定一个 watcher,当到“特定检查阶段”时,angular就会逐个询问 watcher 它对应的数据有没有发生变化,如果有,则运行对应的监视器。直到没有任何脏数据为止。这个过程称为 digest 循环。

注意,并不是有一个定时线程来不停做脏检查。Angular 只有当特定的事件发生时才会进行脏检查。所以如果用户在input中进行输入,或者通过 $http 取回数据,angular当然直到此时数据可能会变化,会自动指定 digest 循环。但是如果像下面的代码这样,angular就无法知晓,因此DOM中显示的数据并不会变化。

.controller("dirty-check-test", function($scope) {
    var model = $scope.model = {
      time:1,
    };
    setInterval(function(){
        model.time ++; //错误,无法触发 digest 循环。
    }, 1000);

那么我们可以通过 $scope.$apply 方法来通知 Angular 需要进行 digest 循环了。

setInterval(function() {
      //正确的方式,通过 $apply 通知变化
      $scope.$apply(function() {
        model.time ++;
      });
    }, 1000);

我们可以通知 Angular 数据变化,也可以让Angular来告诉我们一个数据是否发生变化,通过 $scope.$watch 我们可以注册一个监听,当数据变化的时候立刻执行回调

 $scope.$watch(“model.time”, function() {//xx});

Angular 为什么要用脏检查,因为这样是兼容性最好并且对用法限制最少的实现方式。其实还有两种备选方案可以实现:

1. 通过 ES5 中定义的新的 getter setter 接口来观察数据是否变化,不过对不支持的浏览器就没办法了

2. 通过自定义的 getter setter 接口来改变数据,这样就对 $scope 有极大限制,必须通过 Angular 提供的接口来修改数据。

二、依赖注入

angular 提供了依赖注入的功能。有两种方式可以声明依赖,一个是通过参数名来声明,比如:

 .controller(“MyController”, function($scope, $http) {})

angular会通过 $http 这个参数名来推断出需要注入 $http 服务。不过这个方式有一个坏处就是,如果代码进行了压缩,那么参数名会被修改掉。此时我们应该用显示的声明:

 .controller(“MyController”, [“$scope”, “$http”, function($scope, $http) {} ]);

因为字符串常量是不会被压缩的,所以这种声明方式不会被代码压缩工具所影响。

三、服务

服务是在不同的控制器中共享数据并且在整个应用生命周期内保持一致的最好方式。

比如很多网站都需要登录,而登录用户的信息其实是贯穿整个Session的。那么我们可以创建一个 CurrentUser 服务。

 .factory(“CurrentUserService”, function() {});

当需要的时候,我们直接通过依赖注入把这个服务注入进来即可:

 .controller(“MyController”, [“$scope”, “CurrentUserService, function($scope, $user) {}]);

Angular中的服务都是单例的。并且angular也提供了 $http 这种内置的服务。

技术分享技术分享

 

前端框架之Angular(三)