AngularJS的scope.$apply

Category:
发表:
大纲
  1. 1. AngularJS 如何更新绑定?
    1. 1.1. 首先是脏检查的对象
    2. 1.2. 其次就是什么时候去脏检查
    3. 1.3. 再次就是如何脏检查

如果你写过angular程序,肯定对scope.$apply不会陌生,表面上,他的作用就是把改变同步绑定到界面上。但是它为什么存在呢?我们什么时候需要用到它呢?什么时候不需要呢?

要真正理解$apply, 就必须知道我们为什么需要它。

首先,javascript是单线程执行的,我们写的javascript代码不是一口气就执行完的,而且是很多周期中完成的。每一个周期从开始到结束是不会被中断的,当浏览器主线程的一个周期在执行一段代码时,其他的代码就不会执行,UI渲染进程也会被挂起,浏览器就不会干被的事,处于一中冻结状态,所以糟糕的javascript能将浏览器挂起。这就是为什么《高性能javascript》书中说到的“一个函数执行的时间绝对不能超过100ms”的原因,当然WebWorker另当别论,WebWorker是浏览器主线程之外的一个线程,它不是阻塞的,但WebWorker是不能操作dom节点的。

当运行耗时的周期时,像ajax请求,等待点击事件,或者是设置延时,通过设置回调函数结束当前的运行的周期,网络请求,用户输入,定时等会交给底层的操作系统,当Ajax请求完成时,点击被触发,或者是延时结束时,一个新的javascript运行周期被创建,回调函数的内容被执行,这个过程和操作系统底层 cpu进程的运行逻辑是一致的。

上面所说的周期在javascript里就是Event Loop,对应了一个事件队列,回调事件,用户输入事件等都会放入队列。dom渲染也是事件驱动的,当然也就有渲染事件,现在大部分浏览器的渲染事件队列和javascript事件队列使用的是同一个事件队列,这就意味着渲染和执行是不会同时进行的。

AngularJS 如何更新绑定?

angular的模板引擎允许我们把变量绑定到html模板中,而且还做到双向的绑定,它是如何做到的呢?angular怎么知道我们的变量改变了?angular又是怎么知道何时应该更新dom的呢?

先来说说,angular是怎么知道变量发生了改变。

要知道一个变量变了,方法不外乎两种:

  • 第一种,只能通过固定的接口才能改变变量的值,比如说只能通过 set() 设置变量的值,set被调用时比较一下就知道了。这中方法的缺点洗是写法繁琐,只能用obj.set(‘key’, ‘value’) 替代obj.key = ‘value’。EmberJS 和 KnockoutJS 都使用的是这种策略
  • 第二种, 脏检查,将原对象复制一份快照,在某个时间,比较现在对象与快照的值,如果不一样就表明发生变化。很明显,这个策略要保留两份变量,而且要遍历对象,比较每个属性,这样不会有性能问题吗?但偏偏angular使用的是这样方式,是google的程序员傻吗?angular没有性能问题吗?它是怎么做的呢?

我们先说这个好处,好处其实是给我们了,我们的任何对象都可以绑定,而且是可以随意赋值。

首先是脏检查的对象

angualar不会脏检查所有的对象,当对象被绑定到html中,这个对象添加为检查对象(watcher)。

angular不会脏检查所有的属性,同样当属性被绑定后,这个属性会被列为检查的属性。

我们可以结合源代码,看看大概的过程。下面是watcher的定义:

watcher = {
    fn: listener,          //监听回调函数
    last: initWatchVal,    //上一状态值
    get: get,              //取得监听的值
    exp: watchExp,         //监听表达式
    eq: !!objectEquality   //要不要比较引用
};

在angular程序初始化时,会将绑定的对象的属性添加为监听对象(watcher),也就是说一个对象绑定了N个属性,就会添加N个watcher。

其次就是什么时候去脏检查

angular在我们所写的绝大部分代码中都会触发比较事件。比如:controller初始化的时候,ng-click事件和所有以ng-开头的事件执行后,$http回调完成后,都会触发脏检查。

当然,触发脏检查的点实在函数执行完之后,但不表明异步调用也执行完成,所以,如果我们的功能是异步的,那你会发现我们的改变并没有更新到dom上。

来个demo?好,请看:

function Ctrl($scope) {
    $scope.message = "Waiting 2000ms for update";
    setTimeout(function () {
        $scope.message = "Timeout called!";
        // AngularJS unaware of update to $scope
    }, 2000);
}

dom上显示的message是 “Waiting 2000ms for update,永远都不是 “Timeout called!”

这就是$apply的应用场景,使用$scope.$apply()手动触发脏检查。其实angular还贴心的提供了一个$timeout,那$timeoutsetTimeout在功能上有什么区别吗?可以说没有,唯一的区别就是,使用$timeout异步完成之后,angular会自动触发$apply()

如果已经在一个具有$apply环境中,调用$apply()会抛出异常, 有空你可以试一试。

所以,如果我们的执行代码不在$apply环境中,比如我们查询sqlite的记录,结构是异步返回的,就需要用手动触发$apply()

$apply()接受一个function的参数,function中被绑定的对象会被脏检查,function不能是异步的哦,这个很好理解,如果让你去实现这个apply函数,$apply()不带参数时,会将当前作用域的所有监听对象都脏检查一遍,所以不带参数是有害的, 必然会做很多无用的脏检查,浪费性能。

再次就是如何脏检查

脏检查只要是由$digest()完成,$apply()被调用之后,最终会触发$digest(),$digest 主要代码如下:

if ((watchers = current.$$watchers)) {
    // process our watches
    length = watchers.length;

    while (length--) {
        try {
            watch = watchers[length];
            // Most common watches are on primitives, in which case we can short
            // circuit it with === operator, only when === fails do we use .equals
            if (watch
                && (value = watch.get(current)) !== (last = watch.last)
                && !(watch.eq ? equals(value, last) : (typeof value == 'number'
                    && typeof last == 'number' && isNaN(value) && isNaN(last)))) {
                dirty = true;
                watch.last = watch.eq ? copy(value) : value;
                watch.fn(value, ((last === initWatchVal) ? value : last), current);

                if (ttl < 5) {
                    logIdx = 4 - ttl;

                    if (!watchLog[logIdx]) {
                        watchLog[logIdx] = [];
                    }

                    logMsg = (isFunction(watch.exp)) ? 'fn: ' + (watch.exp.name || watch.exp.toString()) : watch.exp;
                    logMsg += '; newVal: ' + toJson(value) + ';oldVal: ' + toJson(last);
                    watchLog[logIdx].push(logMsg);
                }
            }
        } catch (e) {
            $exceptionHandler(e);
        }
    }
}

遍历watchers,比较监视的属性是否变化。