源码角度理解 Angular 变更检测

声明

本文作为 Angular 变更检测原理源码级的探索文章,涉及到了 View 、Zone.js 这两个重要问题。建议对此不熟悉的读者翻看我之前的两篇文章:Angular 中 View 的那些事儿Zone.js 入门

前言

Angular 作为一个 MVVM 框架,由 View Model 层与 View 层配合实现数据绑定。具体来说,在 Angular 中,NgZone(Zone.js 的封装)负责劫持了所有的 Web 事件和异步函数(比如定时器等),并在其回调函数执行完毕后通知 Angular 对 View 树进行变更检测操作。变更检测通过比对 View 中绑定数据在事件前后的变化,来决定是否需要通过操作 DOM 的方式来更改页面上的绑定数据。一个简单的流程如下图所示。在下一节,我会从源码角度分析变更检测的原理。

继续阅读源码角度理解 Angular 变更检测

Angular 中 View 的那些事儿

Photo by Toa Heftiba on Unsplash

声明

Angular 视图是个神奇的存在,因为在官方文档中你很难寻觅到 View 这的身影,但是阅读源码,你却会发现 View 是 Angular 中举足轻重的一个概念。本文通过 MVVM 概念入手,讲解 View 在 MVVM 中的作用,以及在源码级别,Angular 如何实现它。

MVVM 架构

Angular 作为一套 MVVM 框架,通过 View 层来实现页面元素与数据的绑定,并由 ViewModel 层自动将数据的变化反应到视图上。

其中 ViewModel 层是由变化检测机制与 View 层配合实现的。而 View 作为一个中间结构,通过关联页面元素与数据让 ViewModel 层在变更检测阶段,对页面上绑定的数据进行更新。

阅读更多

Angular 指令快速入门

Photo by Daniel Radford on Unsplash

声明

本文重点不再讨论 Angular 中内置指令以及如何自定义指令。而是想让读者知道 Angular 中指令的作用,它解决了什么问题,以及指令与组件的区别。

何为指令

Angular 中指令是一个非常特殊的存在,从使用方法来看,指令类似元素的一个自定义属性,为元素或者组件提供特定的功能。在大多数场景下,指令不对作用的宿主元素本身的类型做任何假设,它无需知道宿主元素中包含了那些内容,宿主元素上有哪些属性,也不依赖宿主上的其他功能。换句话说,若我们想给 HTML 元素或者组件拓展某项功能,且这项功能相对独立,就可以采用指令来实现。

继续阅读Angular 指令快速入门

Angular 动态创建嵌入式视图

Photo by James Coleman on Unsplash

声明

本篇为 Angular 中相对高级的教程,涉及到了结构性指令、生命周期重要概念。建议这块不熟悉的读者可以看看 Angular 结构型指令 NgIf 原理 ,这篇文章中我结合源码对 Angular 指令中的黑魔法做了解析。

视图

Angular 中视图是一个重要的概念。从源码角度来看,Angular 中的视图是包含页面结点(DOM)与在此之上的绑定(数据)的结构体,通过视图 Angular 将变量与页面结点进行关联,从而可以在执行变更检测等操作时实现控制层数据与页面结点的联动,这也也是绑定 (binding)这一术语的由来。

继续阅读Angular 动态创建嵌入式视图

Angular 指令之 NgFor 教程

声明

NgFor 内建指令可以帮助开发者快速迭代某个数组来创建多个 DOM 元素。在实际开发中,我发现全面掌握 NgFor 的用法可以很好地帮助我们应对更加复杂的场景,甚至能实现性能的提升。此教程中涉及到了 Angular 变化检测机制的内容,对于这一部分感兴趣的朋友可以参看我其他的博文

继续阅读Angular 指令之 NgFor 教程

理解 CSS 中 height 与 width

Photo by Peter Thomas on Unsplash

CSS 中 height 与 width 是初学者比较容易误用的属性。在实际使用这过程中,我发现其实它们的用法涉及到了两个基本的概念:盒子模型与元素类型。对于开发者来说,只有明确了这两个概念的定义,才能掌握 height 与 width 的用法。

继续阅读理解 CSS 中 height 与 width

搭建最简单的 HTTP 代理服务器

Photo by Wengang Zhai on Unsplash

HTTP/HTTPS 代理本质上是正向代理的一种。和反向代理最大的不同之处在于,正向代理必须在客户端进行设置,客户是有感知的,比如客户在客户端安装 VPN 软件接入内网就是正向代理的一种。而反向代理在服务器端配置,客户是没有感知。常用于后端应用的配置中。

在本文中,我尝试了在 Windows 环境下搭建 HTTP 代理服务器的两种方法:Nginx 和 GoProxy,希望能给你一点启发。

继续阅读搭建最简单的 HTTP 代理服务器

浅谈 Angular 变更检测机制

Photo by Roman Kraft on Unsplash

声明

变化检测(Change Detection)也叫脏值检测(Dirty Detection),都是指 Angular 中检测组件中数据变化的机制。由于变化检测与 Angular 若干生命周期有很强的关联,本文会结合两者做出说明。

继续阅读浅谈 Angular 变更检测机制

Zone.js 源码初探

声明

本文假设读者已经了解 Zone.js 的基本用法,明白 Zone.js 需要解决的问题。需要学习或复习的读者可以参看我的另一篇文章 Zone.js 入门

初识 Zone.js

Angular 仓库下的那个 Zone.js 中的例子有点小小的问题。因此这边,我 fork了一份原作者的仓库进行学习研究。Zone.js 本身是由 TypeScript 写就,通过Gulp + Rollup 的方式进行构建,这块应用比较复杂,这里我们只需重点关注 dist 文件夹下最终编译合并后的 zone.js 。这份代码对应了源码中多个不同的 TS 文件,我们可以参考一个简单的例子,来共同探寻 Zone.js 源代码的秘密。

继续阅读Zone.js 源码初探