Angular 1.x 框架原理
指令生命周期
compile阶段
对dom进行编译,首先(如果有的话)对template进行应用(这个过程只执行一次)。然后把当前指令(内部的指令还没被渲染)传递给iElement,接着执行compile(这个过程执行多次)。多个指令实例只会执行一次compile,所以只要我们在compile中对iElemet进行修改,虽然只执行了一次,却作用到了所有指令实例上。因为这个时候dom还没有进行作用域数据关联,所以对iElement进行大量的dom修改是很高效率的。
如果定义了compile函数,则DDO中的link会失效,所以如果要用到compile和link,只能在compile中返回link函数
例子:
<dx>
这是内层
</dx>
<dx a="3">
这是内层
</dx>
</body>
<script>
var app = angular.module('app',[]);
app.directive('dx',function(){
return {
compile:function(tElement,tAttrs,transclude){
tElement[0].innerHTML = 'qweqweqwe'
return function(scope,ele,attr){
if(attr.a == 3){
ele[0].innerHTML = 789;
}
}
}
}
});
</script>
运行结果:qweqweqwe 789
Link阶段
建立模型与视图之间的关系。 Postlink在link阶段结束时执行,,link阶段会连接scope,所以我们才可以在postlink中使用scope。Link阶段会把之前指令compile的结果应用上去,这里可以理解为,一个指令只有一个编译结果,在link阶段却被多个指令实例复制拿去用了。所以在link中对ele的修改,只会修改到自己的,而不会影响其他指令实例
Link和controller对比
两者都可获取到当前的作用域;
一般来说,controller里一般放业务逻辑代码,业务逻辑函数绑定到controller上;而link放监听事件如watcher等。其实link中也可以放逻辑代码,但尽量不要这么做,因为很容易造成污染【如继承了这个scope的子scope都可以访问到这些变量和方法,容易造成意想不到的后果】。对于父子指令之间需要沟通协作时,一般是用controller来通信【指令的require可以获取controller】或者把通信的代码抽取成一个服务,父子指令通过这个服务来通信。
ps:指令内部使用有名控制器,就会在作用域上创建一个对应的属性,可以直接在视图中访问了控制器了,如:
<body ng-app="app">
<div xx>
{{myController.data}}
</div>
</body>
<script>
var app = angular.module('app',[]);
app.directive('xx',function(){
return {
controllerAs:"myController",
controller:function(){
this.data = 123;
}
}
});
</script>
执行次序
all compile,由外向里 》 all controller由外向里 》 all prelink外向里 》全部postlink里向外
响应式原理:脏检测
当用户与浏览器进行了交互【点击、输入等】,浏览器会执行响应的回调函数。Angular拓展了浏览器的这个过程,当发生交互时(或者$setTimeout等),浏览器会通知angular框架,进入angular context执行环境,开始执行digest循环。【或者可以认为进入angular context,就等同于digest执行】
这也就是为什么在ngClick中触发digest,会报错。因为digest循环不能嵌套,执行ngClick的时候、digest没结束,又再次手动触发digest的话,就出现嵌套、则报错。
在digest循环中执行每个watch【执行表达式】,查看上一次的值跟这一次执行的值是否发生了变化、发生了变化就调用watch的回调函数,然后重新执行digest,直到执行的每个watch表达式的值都没发生变化为止。{{xx}}会创建一个xx表达式的watch,repeate会创建 1 + n * m 个watch【1:repeat数据源、n循环次数、m循环中的{{item.xx}}】。Digest循环上限重复运算10次,超过则报错。
报错的例子【不稳定的模型】:
<span>{{random()}}</span> // random函数定义如下:
$scope.random = Math.random;
以上的random函数会创建一个watch,但是每次执行watch表达式运算出来的结果都是和上次的不一致,则又重新执行digest,循环往复超过10次,报错
等循环结束,所有model都稳定了,才批量地更新UI
这里补充一个工作原理:http://www.cnblogs.com/penghongwei/p/3444601.html
Angular 1.x 框架原理的更多相关文章
- Angular杂谈系列1-如何在Angular2中使用jQuery及其插件
jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大 ...
- Angular企业级开发(5)-项目框架搭建
1.AngularJS Seed项目目录结构 AngularJS官方网站提供了一个angular-phonecat项目,另外一个就是Angular-Seed项目.所以大多数团队会基于Angular-S ...
- TypeScript: Angular 2 的秘密武器(译)
本文整理自Dan Wahlin在ng-conf上的talk.原视频地址: https://www.youtube.com/watch?v=e3djIqAGqZo 开场白 开场白主要分为三部分: 感谢了 ...
- angular实现统一的消息服务
后台API返回的消息怎么显示更优雅,怎么处理才更简洁?看看这个效果怎么样? 自定义指令和服务实现 自定义指令和服务实现消息自动显示在页面的顶部,3秒之后消失 1. 显示消息 这种显示消息的方式是不是有 ...
- div实现自适应高度的textarea,实现angular双向绑定
相信不少同学模拟过腾讯的QQ做一个聊天应用,至少我是其中一个. 过程中我遇到的一个问题就是QQ输入框,自适应高度,最高高度为3row. 如果你也像我一样打算使用textarea,那么很抱歉,你一开始就 ...
- Angular企业级开发-AngularJS1.x学习路径
博客目录 有链接的表明已经完成了,其他的正在建设中. 1.AngularJS简介 2.搭建Angular开发环境 3.Angular MVC实现 4.[Angular项目目录结构] 5.[SPA介绍] ...
- Angular企业级开发(4)-ngResource和REST介绍
一.RESTful介绍 RESTful维基百科 REST(表征性状态传输,Representational State Transfer)是Roy Fielding博士在2000年他的博士论文中提出来 ...
- Angular企业级开发(3)-Angular MVC实现
1.MVC介绍 Model-View-Controller 在20世纪80年代为程序语言Smalltalk发明的一种软件架构.MVC模式的目的是实现一种动态的程序设计,使后续对程序的修改和扩展简化,并 ...
- Angular企业级开发(2)-搭建Angular开发环境
1.集成开发环境 个人或团队开发AngularJS项目时,有很多JavaScript编辑器可以选择.使用优秀的集成开发环境(Integrated Development Environment)能节省 ...
随机推荐
- Selenium | 网上教程
java selenium (一) selenium 介绍 java selenium (二) 环境搭建方法一 java selenium (三) 环境搭建 基于Maven java selenium ...
- npm install error: MSBUILD : error MSB3428: 未能加载 Visual C++ 组件“VCBuild.exe”
When I tried to run angular 4 material2 demo on my windows server 2012, got a error message: node-pr ...
- RabbitMQ八:交换机类型Exchange Types--Topic介绍
前言 上一章节,我们说了两个类型,本章我们说一下其三:Topic Exchange Topic Exchange Topic Exchange – 将路由键和某模式进行匹配.此时队列需要绑定要一个模 ...
- AJPFX总结内部类
内部类:内部类的访问规则:1. 内部类可以直接访问外部类中的成员,包括私有 原因是内部类中持有了一个外部类的引用,格式:外部类.this2. 外部类要访问内部类,必须建立内部类对象访问格式:1. ...
- logging模块进阶
python利用logging模块来记录日志主要涉及四个类 logger提供了应用程序可以直接使用的接口 handler将logger创建的日志提供的输出发送到指定目的地. filter起到过滤作用, ...
- iphone x 高度:100%; 兼容设置
问题: iphone x 会遇到页面设置 height:100%;之后但是底部还有一定的高度没有覆盖 解决方法: 1.让客户端设置webview的高度为100%; 2.html代码里面添加 viewp ...
- <meta>详解
一.元数据和<meta> 元数据是描述以提供关于其他数据的数据,在<meta>中,html document是被描述的数据,meta标签中包括的数据是描述html docume ...
- VC++编译出错:LNK1123: 转换到 COFF 期间失败: 文件无效或损坏
解决方法: 1.搜索C盘下的cvtres.exe,结果得到类似这样的列表: C:\Program Files\Microsoft Visual Studio 10.0\VC\bin C:\Window ...
- UART协议
通用异步收发传输器(Universal Asynchronous Receiver/Transmitter,通常称作UART,读音/ˈjuːart/)是一种异步收发传输器,是电脑硬件的一部分,将资料由 ...
- findFile的用法
=============================================== @echo off echo **No Options: for /f %%a in (&q ...