zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    Http中的patch
    如何实现腾讯地图的路径规划功能?
    各类数据库分页SQL语法
    ABC222F
    ABC222 G
    LG5308 [COCI2019] Quiz(wqs二分+斜率优化DP)
    [USACO21OPEN] Portals G(Kruskal)
    【做题笔记】SP27379 BLUNIQ
    【做题笔记】CF938C Constructing Tests
    CSP-J/S2021 自闭记
  • 原文地址:https://www.cnblogs.com/hellohello/p/7920949.html
Copyright © 2011-2022 走看看