angularjs源码解析之scope资源-CSDN文库

angular

angularjs

101 浏览量 2020-11-22 16:14:17 上传评论收藏 103KB PDF 举报

资源推荐

资源详情

资源评论

angularjs 源码解析之源码解析之scope

简介简介

在ng的生态中scope处于一个核心的地位，ng对外宣称的双向绑定的底层其实就是scope实现的，本章主要对scope的watch机

制、继承性以及事件的实现作下分析。

监听监听

1. $watch

1.1 使用

// $watch: function(watchExp, listener, objectEquality)

var unwatch = $scope.$watch('aa', function () {}, isEqual);

使用过angular的会经常这上面这样的代码，俗称“手动”添加监听，其他的一些都是通过插值或者directive自动地添加监听，但

是原理上都一样。

1.2 源码分析

function(watchExp, listener, objectEquality) {

var scope = this,

// 将可能的字符串编译成fn

get = compileToFn(watchExp, 'watch'),

array = scope.$$watchers,

watcher = {

fn: listener,

last: initWatchVal, // 上次值记录，方便下次比较

get: get,

exp: watchExp,

eq: !!objectEquality // 配置是引用比较还是值比较

};

lastDirtyWatch = null;

if (!isFunction(listener)) {

var listenFn = compileToFn(listener || noop, 'listener');

watcher.fn = function(newVal, oldVal, scope) {listenFn(scope);};

}

if (!array) {

array = scope.$$watchers = [];

}

// 之所以使用unshift不是push是因为在 $digest 中watchers循环是从后开始

// 为了使得新加入的watcher也能在当次循环中执行所以放到队列最前

array.unshift(watcher);

// 返回unwatchFn, 取消监听

return function deregisterWatch() {

arrayRemove(array, watcher);

lastDirtyWatch = null;

};

}

从代码看 $watch 还是比较简单，主要就是将 watcher 保存到 $$watchers 数组中

2. $digest

当 scope 的值发生改变后，scope是不会自己去执行每个watcher的listenerFn，必须要有个通知，而发送这个通知的就是

$digest

2.1 源码分析

整个 $digest 的源码差不多100行，主体逻辑集中在【脏值检查循环】(dirty check loop) 中，循环后也有些次要的代码，如

postDigestQueue 的处理等就不作详细分析了。

脏值检查循环，意思就是说只要还有一个 watcher 的值存在更新那么就要运行一轮检查，直到没有值更新为止，当然为了减少

不必要的检查作了一些优化。

代码：

// 进入$digest循环打上标记，防止重复进入

beginPhase('$digest');

lastDirtyWatch = null;

// 脏值检查循环开始

do {

dirty = false;

current = target;

// asyncQueue 循环省略

traverseScopesLoop:

do {

if ((watchers = current.$$watchers)) {

length = watchers.length;

while (length--) {

try {

watch = watchers[length];

if (watch) {

// 作更新判断，是否有值更新，分解如下

// value = watch.get(current), last = watch.last

// value !== last 如果成立，则判断是否需要作值判断 watch.eq?equals(value, last)

// 如果不是值相等判断，则判断 NaN的情况，即 NaN !== NaN

if ((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发生改变

lastDirtyWatch = watch;

// 缓存last值

watch.last = watch.eq ? copy(value, null) : value;

// 执行listenerFn(newValue, lastValue, scope)

// 如果第一次执行，那么 lastValue 也设置为newValue

watch.fn(value, ((last === initWatchVal) ? value : last), current);

// ... watchLog 省略

if (watch.get.$$unwatch) stableWatchesCandidates.push({watch: watch, array: watchers});

}

// 这边就是减少watcher的优化

// 如果上个循环最后一个更新的watch没有改变，即本轮也没有新的有更新的watch

// 那么说明整个watches已经稳定不会有更新，本轮循环就此结束，剩下的watch就不用检查了

else if (watch === lastDirtyWatch) {

dirty = false;

break traverseScopesLoop;

}

} catch (e) {

clearPhase();

$exceptionHandler(e);

}

// 这段有点绕，其实就是实现深度优先遍历

// A->[B->D,C->E] // 执行顺序 A,B,D,C,E

// 每次优先获取第一个child，如果没有那么获取nextSibling兄弟，如果连兄弟都没了，那么后退到上一层并且判断该层是否有

兄弟，没有的话继续上退，直到退到开始的scope，这时next==null，所以会退出scopes的循环

if (!(next = (current.$$childHead ||

(current !== target && current.$$nextSibling)))) {

while(current !== target && !(next = current.$$nextSibling)) {

current = current.$parent;

}

剩余10页未读，继续阅读

评论收藏

内容反馈

weixin_38694336

粉丝: 3
资源: 951

angularjs 源码解析之scope

最新资源

angularjs 源码解析之scope

angularjs 源码解析之injector

并行程序设计导论课后答案_2.7z

加速度积分求速度和位移的c语言算法程序

T5L与PC上位机modbus通信

数据结构课设用C、C++写旅游区景点导游系统头文件(用文件存储，DFS，DIJ算法），完全免费！没有要积分，能多给我点点赞吗？

DeepLearning之LSTM模型输入参数：time_step, input_size, batch_size的理解

Vulkan编程指南.pdf

python自动化办公——python操作Excel、Word、PDF集合大全

数据结构课设用C、C++写旅游区景点导游系统函数文件(用文件存储，DFS，DIJ算法），完全免费！没有要积分，能多给我点点赞吗？

C#40000字全套精华教程！！！从入门到精通，一篇就够了！！！

C++并发编程实战（全书和源码）.zip

stm32f103c8t6驱动ADS1256程序已经验证

Qt移植：Ubuntu18.04 交叉编译qt5.12.7详细教程配置编译qt-everywhere-src-5.12.7

STM32音频采集播放.....zip

npm ERR! code EPERM npm ERR! syscall open npm ERR! path C:\Program Files\nodejs\node_cache\_cacache\

充电桩和bms协议c封装

基于STM32F103C8T6--通过HAL库实现STM32的ADC+DMA

source insight4.0暗黑主题【仿VS code】

基于51单片机的温控系统

C/C++开发工具 - MinGW

编译原理 - LR(1)分析法：C/C++实现

CEC2021基础测试函数(matlab和C两个版本)

解决 github项目clone报错 Failed connect to github.com:443; Connection

详解Tomcat出现404的解决方法

M0G3507MPU6050

从根源上解决libc.so.6版本问题 /lib64/libc.so.6:version ‘GLIBC_XXX’ not found

Cplex中文教程全.pdf

python读取excel数据绘制简单曲线图的完整步骤记录

最新资源