Angular 1.x 框架原理

时间 2019-11-18

原文原文链接

指令生命周期

compile阶段

　　对dom进行编译，首先（若是有的话）对template进行应用（这个过程只执行一次）。而后把当前指令（内部的指令还没被渲染）传递给iElement，接着执行compile（这个过程执行屡次）。多个指令实例只会执行一次compile，因此只要咱们在compile中对iElemet进行修改，虽然只执行了一次，却做用到了全部指令实例上。由于这个时候dom尚未进行做用域数据关联，因此对iElement进行大量的dom修改是很高效率的。html

　　若是定义了compile函数，则DDO中的link会失效，因此若是要用到compile和link，只能在compile中返回link函数浏览器

例子：app

<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的修改，只会修改到本身的，而不会影响其余指令实例dom

Link和controller对比

二者均可获取到当前的做用域；函数

通常来讲，controller里通常放业务逻辑代码，业务逻辑函数绑定到controller上；而link放监听事件如watcher等。其实link中也能够放逻辑代码，但尽可能不要这么作，由于很容易形成污染【如继承了这个scope的子scope均可以访问到这些变量和方法，容易形成意想不到的后果】。对于父子指令之间须要沟通协做时，通常是用controller来通讯【指令的require能够获取controller】或者把通讯的代码抽取成一个服务，父子指令经过这个服务来通讯。post

ps：指令内部使用有名控制器，就会在做用域上建立一个对应的属性，能够直接在视图中访问了控制器了，如：ui

<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里向外this

响应式原理：脏检测

　　当用户与浏览器进行了交互【点击、输入等】，浏览器会执行响应的回调函数。Angular拓展了浏览器的这个过程，当发生交互时（或者$setTimeout等），浏览器会通知angular框架，进入angular context执行环境，开始执行digest循环。【或者能够认为进入angular context，就等同于digest执行】spa

　　这也就是为何在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