再谈angularJS数据绑定机制及背后原理—angularJS常见问题总结 (6)

防止滥用$scope的$watch,$on,$broadcast方法。可能刚刚就有人想问了,不依赖$scope我怎么watch一个model,怎样广播和响应事件。答案是没法弄,这些事还真是只有$scope能干。但很多时候在controller里watch一个model是很多余的,这样做会明显的降低性能。所以,当你本来就依赖$scope的时候,你会习惯性的调用这些方法来实现自己的逻辑。但当使用controller as的时候,由于没有直接依赖$scope,使用watch前你会稍加斟酌,没准就思考到了别的实现方式了呢。

定义route时也能用controller as。除了在DOM中显式的指明ng-controller,还有一种情况是controller的绑定是route里定义好的,那这时能使用controller as吗?答案是肯定的,route提供了一个controllerAs参数。这样在模板里就可以直接使用别名home啦。

个人觉得还是偏向于使用controller as的,当然有一点要澄清,使用contoller as并没有什么性能上的提升,仅仅是一种好的习惯罢了。

 

无论定义controller时有没有直接依赖$scope,DOM中的scope是始终存在的。即使使用controller as,双向绑定还是通过$scope的watch以及digest来实现的。

 

请简述$compile的用法?

angularjs里比较重要但又很少手动调用的要属$compile服务了,通常在写组件或指令时,都是angularjs自动编译完成的,但有时我们可能需要手动编译,比如封装一个table组件,根据参数实现自定义渲染,增加一列复选框或者一列按钮啥的,这是就需要用到$compile了。

$compile,在Angular中即“编译”服务,它涉及到Angular应用的“编译”和“链接”两个阶段,根据从DOM树遍历Angular的根节点(ng-app)和已构造完毕的 \$rootScope对象,依次解析根节点后代,根据多种条件查找指令,并完成每个指令相关的操作(如指令的作用域,控制器绑定以及transclude等),最终返回每个指令的链接函数,并将所有指令的链接函数合成为一个处理后的链接函数,返回给Angluar的bootstrap模块,最终启动整个应用程序。

 

先解说下angular中页面处理

ng对页面的处理过程:

浏览器把HTML字符串解析成DOM结构

ng把DOM结构给$compile,返回一个link函数

传入具体的scope调用这个link函数

得到处理后的DOM,这个DOM处理了指令,连接了数

 

$compile是个编译服务。编译服务主要是为指令编译DOM元素。

编译一段HTML字符串或者DOM的模板,产生一个将scope和模板连接到一起的函数。

$compile用法: $compile(element,transclude,maxPriority);

element:将要被编译和插入模板的元素或者HTML字符串

transclude:指令内有效的函数。Function(angular.Scope,cloneAttachFn=)

maxPriority:只有在指令比给定的优先级低时应用。只影响根元素,不影响子元素

 .controller('MyController', function ($scope, $compile) {                 // 创建编译函数                 var compileFn = $compile('<p>{{appCtrl.msg}}</p>');                 // 传入scope,得到编译好的dom对象(已封装为jqlite对象)                 // 也可以用$scope.$new()创建继承的作用域                 var $dom = compileFn($scope);                 // 添加到文档中                 $dom.appendTo('body');             })

通过$compile服务可以编译html字符串或dom对象或jqLite对象,然后得到一个编译函数,再传入$scope,就会在当前作用域进行编译,返回编译好的jqLite对象,这时就可以直接添加到文档中了(也可以先添加到文档再编译)。

编译的实质其实就是对dom对象解析,使dom对象与scope进行耦合,通过绑定可以实现数据的更新,像Vue其实也是一样的过程。

 

$compile解说推荐看《Angular中$compile源码分析》

 

这篇是对angularJS的一些疑点回顾,文章的问题大多是从网上搜集整理而来,如有不妥之处或不远被引用,请通知本人修改,谢谢!

首发于周陆军个人网站,转载注明来源:《再谈angularJS数据绑定机制及背后原理—angularJS常见问题总结》

参考文章:

温故而知新-AngularJS 1.x 小记 (angularJS各个模块系统概述)

关于 AngularJS 的数据绑定(黄腾飞的个人网站)

AngularJS 脏检查深入分析

理解Angular中的$apply()以及$digest()(翻译:原文地址)

MVVM的简单实现-脏检测

Angular系列(徐飞博客:由浅入深地阐释了angularJS)

Angular 1 深度解析:脏数据检查与 angular 性能优化

用$scope还是用controller as

Controller As与$scope的区别($scope篇)

《用AngularJS开发下一代Web应用》读书笔记②:AngularJS应用骨架

AngularJs $compile编译服务与指令

玩转Angular1(14)--使用$compile编译指令

Angular中$compile源码分析

angularjs使用$compile编译模板后如何获取编译后的模板内容并将其转成字符串

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zywzxj.html