目录

一: 概念简介

脏值检测，简单的说就是在MVC的构架中，视图会通过模型的change事件来更新自己。

脏值检测的核心代码是观察者模式的实现，其机制会执行digest循环，在特定UI组件的上下文执行注册的各种表达式。

那么脏值检测在单页应用扮演了什么角色呢？

为了支持单页SPA应用，angular1引入了指令的概念，能够扩展HTML标签并且封装相关的DOM逻辑，以此来构建组件，组件再组合成一个个网页。angular2也保留了指令的概念。那么angular2和1版本的区别在哪里呢？angular2的指令则是简化版的指令API，能通过属性型的指令给DOM标签添加行为。

而与此同时，组件则可以看做指令API的补充，既可以添加模板，也可以添加行为，组件继承自指令。

@Directive({

  selector: '[saTooltip]'

})

export class Tooltip {

 //略

}

二: angular1中的脏值检测

ch4-change-detection/angular1-demo/index.html:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="angular.js"></script>

    <!--引入版本为1.5.0-->

    <script>

        angular.module("app",[])

            .controller("mainCtrl",function($scope){

            $scope.label="hello world!";

        });

    </script>

</head>

<body ng-app="app" ng-controller="mainCtrl">

     <div>

         <span>label值:{{label}}</span>

         <br/>

         <input type="text" ng-model="label"/>

     </div>

</body>

</html>

浏览器结果

angular1的数据绑定，酷炫而神秘！可是它幕后实际发生了什么呢？

(1)首先，在指令ng-model和双大括号(实际上是ng-bind指令)内部绑定了多个watcher(监视器)。

(2)接下来，当指定的事件发生之后，angular循环遍历所有的监视器，并执行对应scope上下文的表达式。这里就是digest循环。

(3)最后，比对两次结果，如果不相同就调用回调函数。

但这种发生特定事件(有可能在框架管理范围内，也可能在范围外部)会调用digest循环有缺点。比如回调函数有setTimeOut定时器，定时器把绑定到Scope上的属性给修改了，那么angular就无法察觉对象的改变了。angular2解决这个问题。

二: angular2更优的脏值检测

1.zone.js库

zone.js是angular2的一个库，可以在javascript实现各种分区。分区代表一个执行上下文。angular2利用了zone.js来拦截浏览器中的各种异步事件，然后在正确的时机调用digest循环，完全消除了需要angular开发者显式调用digest循环的情况。

2.单向数据流

在第一章的例子里，label表达式在ng-model指令下发生改变，也会通知label的双大括号表达式改变值，这隐含了指令之间互相影响、有依赖关系。跨监视器的依赖会创建出各种纠缠不清的额数据流，导致最后可能很难追踪，进而导致难以预料的错误。

angular2保留了脏值检测的概念用来检测数据，但强制使用了单向数据流。

实现的方式:

禁止不同的监视器互相依赖，digest循环只要运行一次就好了。

单向数据流好处不仅仅于此，更简单的数据流，而且性能提高了

3.增强angular1的脏值检测

我们说到digest循环有比较的步骤，比较操作的最佳算法是根据表达式返回值的类型进行比较。angular1有的是浅比较，有的是深比较，而且开发者并不能自己预先决定使用哪种比较。angular2团队把比较功能分离到了differ(差异比较器)中，那么开发者就可以通过2个基础类扩展自定义算法了，从而有了对脏值检测机制的完全控制。

●KeyValueDiffer。键值对型差异比较器。

●IterableDiffer。迭代型差异比较器。

迈向angularjs2系列(4):脏值检测机制的更多相关文章

  1. Angularjs 脏值检测

    文章转自:http://www.ituring.com.cn/article/39865 构建自己的AngularJS,第一部分:Scope和Digest 原文链接:http://teropa.inf ...

  2. ionic3 双向数据绑定失效 脏值检测失效

    最近在使用ionic3过程中,使用了eval()方法进行字符串拼接成一个function使用 在eval()方法中,只能使用局部变量,全局变量无法使用,ionic3的this在eval中失效(unde ...

  3. 迈向angularjs2系列(6):路由机制

    目录1.angular-seed的路由2.路由机制的探索3.懒加载 一:angular-seed的路由 step1:安装种子项目    $ git clone --depth 1 https://gi ...

  4. 迈向angularjs2系列(1):typescript指南

    typescript指南 前言 typescript是angularjs2推荐使用的脚本语言.它由微软2012年首次发布. 一.    typescript和javascript的区别 1.从遵循的规 ...

  5. 迈向angularjs2系列(5):依赖注入

    一: 为什么要依赖注入 1.构造器引入依赖 假设一个类Car类依赖于Engine(引擎)类.Transition(变速箱)类,可使用构造器来完成. //类似如下代码 class Engine{} cl ...

  6. 迈向angularjs2系列(2):angular2指令详解

    一:angular2 helloworld! 为了简单快速的运行一个ng2的app,那么通过script引入预先编译好的angular2版本和页面的基本框架. index.html: <!DOC ...

  7. 迈向angularjs2系列(7):表单

    目录 一:校验表单的使用 1.搭建脚手架 2.校验表单的使用 3.select下拉列表的用法 一: 校验表单的使用 对于CRUD型的应用,表单是必备组件. 1.搭建脚手架 git clone http ...

  8. 迈向angularjs2系列(3):组件详解

    一: 以组件开发一个to-do list应用 todo组件分为导入.接口定义.顶层组件.控制器.启动5个部分. app.ts: //导入 import {Component} from '@angul ...

  9. 迈向angularjs2系列(8):angular cli和angular2种子项目

    文章目录 1.angular cli快速搭建项目 2.angular2-seed 3.手动配置 题外话:如何更好的阅读本篇文章 一: angular cli的安装 Angular-cli(命令行界面, ...

随机推荐

  1. CSS学习笔记一：css 画平面图形

    最近在学习CSS,先从CSS画点平面图形入手,发现除了正方形.长方形此类比较简单,只要有长宽设置恰当即可,画圆要涉及radius,然后恢复到做界面的最讨厌的状态了,不断的修改设值,调整数据,所幸并不多 ...

  2. Golang 基于libpcap/winpcap的底层网络编程——gopacket安装

    Go简介 Go是一种编译型语言,它结合了解释型语言的游刃有余,动态类型语言的开发效率,以及静态类型的安全性. 语法类似C/C++,但是又带有一点python的味道 其中个人认为最出色的特点就是他的包管 ...

  3. HDOJ2003-求绝对值

    Problem Description 求实数的绝对值.   Input 输入数据有多组,每组占一行,每行包含一个实数.   Output 对于每组输入数据,输出它的绝对值,要求每组数据输出一行,结果 ...

  4. JSON风格指南

    中文版:https://github.com/darcyliu/google-styleguide/blob/master/JSONStyleGuide.md 英文版:https://google.g ...

  5. Infer 在 Mac 上的安装和环境配置

    Infer 在 Mac 上的安装和环境配置 Infer 介绍 Infer 是一个静态分析工具.Infer 可以分析 Objective-C, Java 或者 C 代码,报告潜在的问题. 任何人都可以使 ...

  6. 关于Oracle连接超时的问题

    测试环境ORACLE 11.2.0. 如果连接池设置单个连接闲置时间大于数据库连接超时时间,则连接池中的连接发出数据请求时会出现Connect timeout occurred错误, 这是由于连接超时 ...

  7. [补档][Lydsy2017年4月月赛]抵制克苏恩

    [Lydsy2017年4月月赛]抵制克苏恩 题目 小Q同学现在沉迷炉石传说不能自拔.他发现一张名为克苏恩的牌很不公平. 如果你不玩炉石传说,不必担心,小Q同学会告诉你所有相关的细节.炉石传说是这样的一 ...

  8. 解决百度BMR的spark集群开启slaves结点的问题

    前言 最近一直忙于和小伙伴倒腾着关于人工智能的比赛,一直都没有时间停下来更新更新我的博客.不过在这一个过程中,遇到了一些问题,我还是记录了下来,等到现在比较空闲了,于是一一整理出来写成博客.希望对于大 ...

  9. nodejs 文件读取一行

    作者QQ:1095737364    QQ群:123300273     欢迎加入!   废话没有,直接上代码: app.get('/company', function (req, res, nex ...

  10. C#设计模式(3)-工厂方法模式

    引言 上一篇介绍了设计模式中的简单工厂模式-C#设计模式(2)-简单工厂模式,本篇将介绍工厂方法模式,在简单工厂模式下进行改造: 工厂方法模式简介 工厂方法(FactoryMethod)模式:定义一个 ...