AngularJs $parse、$eval和$observe、$watch详解


Posted in Javascript onSeptember 21, 2016

$parse和$eval

$parse和$eval这两个函数都可以解析表达式的值.

它们的区别在于$parse是一个服务, 可以注入使用. $eval是scope对象上的一个方法, 我们只能在能访问scope的场景下使用它.

var getter = $parse('user.name');
var setter = getter.assign;
var context = {user: {name: 'John Doe'};
var locals = {user: {name: 'Doe John'};

getter(context); //John Doe
setter(context, 'new name');
getter(context); //new name
getter(context, locals); //Doe John

$parse服务接收一个表达式作为参数并返回一个函数. 这个函数可以被调用, 其中的参数是一个context对象, 通常来说是作用域.
另外, 这个函数有一个assign属性. 它也是一个函数, 可以用来在给定的上下文中改变这个表达式的值. 最后一行代码演示了如何使用locals来覆盖context对象.

$eval用起来要简单很多, 因为它的上下文已经被指定为scope对象.

var scope = $rootscope.$new(true);
scope.a = 1;
scope.b = 2;
scope.$eval('a + b')//3
scope.$eval(function(scope){
 return scope.a + scope.b;
});//3

关于$parse和$eval之间的关系, 我们能从Angular源码中看出来, 可以说$eval是为了让$parse在scope中使用更方便的语法糖.

$eval: function(expr, locals){
 return $parse(expr)(this, locals);
}

$eval还有个同胞兄弟, $evalAsync, 它并不会立刻计算表达式的值, 而是将表达式缓存起来, 等到下一次$digest ( 脏检查 ) 的时候执行. 以获取更好的性能.

$observe和$watch

$observe和$watch都可以监听表达式值的变化. 但有显著的不同.
$observe是angular指令中link函数第三个参数 ( attrs ) 的一个方法. 只能在指令的link函数中使用它. 它是通过$evalAsync函数实现监控的.

$watch是scope对象上的一个方法, watch表达式很灵活, 可以是一个函数, 可以是scope上的属性, 也可以是一个字符串形式的表达式. 监听scope上的属性名或表达式的时候, 会利用$parse服务将表达式转换成一个函数, 这个函数会在$digest中被调用. $watch的第三个参数"objectEquality", 指定比较对象的方式, 如果为true,则用angular.equals, 否则直接比较引用. 默认为false.

//html
<div book="{{book.name}}"></div>
//js
attrs.$observe('book', function(newValue){
 //just have one parameter, can't get old value
});
scope.$watch(attrs.book, function(newValue, oldValue){
 //get undefined
});

当你需要监听一个包含"{{}}"的DOM属性时, 使用$observe, 如果用$watch, 只能得到undefined. 反之, 就用$watch. 如果用$observe, 只能得到一个固定的字符串.

//html
<div book="book.name"></div>
//js
attrs.$observe('book', function(newValue){
 //always get 'book.name'
});
scope.$watch(attrs.book, function(newValue, oldValue){
});

有一个特殊的情况, 当你的指令使用了独立的作用域 ( scope:{} ) , 那些应用了"@"语法的DOM属性, 即使包含"{{ }}", 也可以被$watch.

因为@前缀标识符, 它的实现是通过$observe去监听DOM属性的变化, 这就是为什么@attr的值只能是字符串或是"{{}}", 而不能是scope上的属性, 所以最终$watch看到的表达式是没有"{{ }}"的. 而"="和"&"则是基于$watch实现. 所以=attr, &attr的值不能包含"{{ }}", 但可以直接使用scope上的属性.

$watchGroup和$watchCollection

$watchGroup是用来监听一组表达式. 数组中任意表达式的变化都会触发监听函数.

$scope.teamScore = 0;
$scope.time = 0;
$scope.$watchGroup(['teamScore', 'time'], function(newVal, oldVal) {
 //newVal and oldVal are both array
});

$watchCollection用来监听一个对象(包括数组), 当这个对象的任意属性发生变化时, 触发监听函数. 和$watch一样,第一次参数可以是一个返回一个对象的函数.

$scope.names = ['igor', 'matias', 'misko', 'james'];
$scope.dataCount = 4;

$scope.$watchCollection('names', function (newVal, oldVal) {
 $scope.dataCount = newVal.length;
});

$timeout(function(){
  $scope.names.pop();
},2000);

$observe, $watch, $watchGroup, $watchCollection都返回一个移除监听的函数. 当需要取消监听的时候, 直接调用.

var off = scope.$watch('name', function(newValue, oldValue){
});
off();

以上就是对AngularJs $parse、$eval和$observe、$watch的知识详解,谢谢大家对本站的支持!

Javascript 相关文章推荐
Jquery实战_读书笔记1—选择jQuery
Jan 22 Javascript
前端开发部分总结[兼容性、DOM操作、跨域等](持续更新)
Mar 04 Javascript
JavaScript 面向对象的之私有成员和公开成员
May 04 Javascript
采用call方式实现js继承
May 20 Javascript
JavaScript编程中的Promise使用大全
Jul 28 Javascript
js对象浅拷贝和深拷贝详解
Sep 05 Javascript
AngularJS $http模块POST请求实现
Apr 08 Javascript
vue路由导航守卫和请求拦截以及基于node的token认证的方法
Apr 07 Javascript
在vue中使用setInterval的方法示例
Apr 16 Javascript
解决vue-cli webpack打包开启Gzip 报错问题
Jul 24 Javascript
解决layui数据表格table的横向滚动条显示问题
Sep 04 Javascript
JavaScript设计模式--桥梁模式引入操作实例分析
May 23 Javascript
jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单
Sep 21 #Javascript
D3.js实现散点图和气泡图的方法详解
Sep 21 #Javascript
AngularJs ng-repeat 嵌套如何获取外层$index
Sep 21 #Javascript
D3.js实现饼状图的方法详解
Sep 21 #Javascript
angularJS Provider、factory、service详解及实例代码
Sep 21 #Javascript
JS实现图文并茂的tab选项卡效果示例【附demo源码下载】
Sep 21 #Javascript
AngularJS ngModel实现指令与输入直接的数据通信
Sep 21 #Javascript
You might like
初学者入门:细述PHP4的核心Zend
2006/09/05 PHP
PHP提取字符串中的手机号正则表达式怎么写
2017/07/17 PHP
PHP SFTP实现上传下载功能
2017/07/26 PHP
php 提交表单 关闭layer弹窗iframe的实例讲解
2018/08/20 PHP
js 实现css风格选择器(压缩后2KB)
2012/01/12 Javascript
javascript实现的DES加密示例
2013/10/30 Javascript
Javascript实现简单二级下拉菜单实例
2014/06/15 Javascript
对Web开发中前端框架与前端类库的一些思考
2015/03/27 Javascript
JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)
2015/12/13 Javascript
动态创建按钮的JavaScript代码
2016/01/29 Javascript
总结jQuery插件开发中的一些要点
2016/05/16 Javascript
vue2.0 keep-alive最佳实践
2017/07/06 Javascript
vue组件watch属性实例讲解
2017/11/07 Javascript
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
2017/11/19 Javascript
vue动画打包后失效问题的解决方法
2018/09/18 Javascript
傻瓜式vuex语法糖kiss-vuex整理
2018/12/21 Javascript
你了解vue3.0响应式数据怎么实现吗
2019/06/07 Javascript
JavaScript如何实现监听键盘输入和鼠标监点击
2020/07/20 Javascript
JavaScript 中的六种循环方法
2021/01/06 Javascript
[00:12]2018DOTA2亚洲邀请赛 Sccc亮相SOLO赛,今年他又会有什么样的战绩?
2018/04/06 DOTA
python生成指定尺寸缩略图的示例
2014/05/07 Python
python 自动化将markdown文件转成html文件的方法
2016/09/23 Python
Python元组拆包和具名元组解析实例详解
2018/03/26 Python
深入浅析Python中的迭代器
2019/06/04 Python
python中property和setter装饰器用法
2019/12/19 Python
实例讲解Python 迭代器与生成器
2020/07/08 Python
Michael Kors加拿大官网:购买设计师手袋、手表、鞋子、服装等
2019/03/16 全球购物
德国大型和小型家用电器网上商店:Energeto
2019/05/15 全球购物
瑞典多品牌连锁店:Johnells
2021/01/13 全球购物
双创工作实施方案
2014/03/26 职场文书
总经理人事任命书
2014/06/05 职场文书
违反工作规定检讨书范文
2014/12/14 职场文书
十岁生日答谢词
2015/01/05 职场文书
销售辞职信范文
2015/03/02 职场文书
请学会珍惜眼前,因为人生没有下辈子!
2019/11/12 职场文书
浅谈JS和Nodejs中的事件驱动
2021/05/05 NodeJs