AngularJS 源码分析4

angularjs之$compile

今天主要说说ng里的$compile,这是一个非常关键的服务,页面上的双向绑定,各个监听基本上都是在这里执行的.
源码部分还是引用angular1.2.4,链接在这里下载


compile的源头

ng里最开始引用$compile的地方就是把所有系统内建的指令添加到$CompileProvider里,由于代码太长,只写些关键部分的

$provide.provider('$compile', $CompileProvider).
        directive({
            a: htmlAnchorDirective,
            input: inputDirective,
            textarea: inputDirective,
            form: formDirective,
            script: scriptDirective,
            select: selectDirective,
            style: styleDirective,
            option: optionDirective,
            ngBind: ngBindDirective,
            ngBindHtml: ngBindHtmlDirective,
            ngBindTemplate: ngBindTemplateDirective,
            ngClass: ngClassDirective,
            ngClassEven: ngClassEvenDirective,
            ngClassOdd: ngClassOddDirective,
            ngCloak: ngCloakDirective,
            ngController: ngControllerDirective,
            ngForm: ngFormDirective,
            ngHide: ngHideDirective,
            ngIf: ngIfDirective,
            ngInclude: ngIncludeDirective,
            ngInit: ngInitDirective,
            ngNonBindable: ngNonBindableDirective,
            ngPluralize: ngPluralizeDirective,
            ngRepeat: ngRepeatDirective,
            ngShow: ngShowDirective,
            ngStyle: ngStyleDirective,
            ngSwitch: ngSwitchDirective,
            ngSwitchWhen: ngSwitchWhenDirective,
            ngSwitchDefault: ngSwitchDefaultDirective,
            ngOptions: ngOptionsDirective,
            ngTransclude: ngTranscludeDirective,
            ngModel: ngModelDirective,
            ngList: ngListDirective,
            ngChange: ngChangeDirective,
            required: requiredDirective,
            ngRequired: requiredDirective,
            ngValue: ngValueDirective
        }).
        directive({
          ngInclude: ngIncludeFillContentDirective
        }).
        directive(ngAttributeAliasDirectives).
        directive(ngEventDirectives);

此处的directive方法就是$CompileProvider里的registerDirective方法,主要就是把内建指令添加到内部的hasDirectives对象内,以方便后面在全局查找指令的时候进行匹配.

compile的启动

启动的方法在这里,只摘取关键代码.

injector.invoke(['$rootScope', '$rootElement', '$compile', '$injector', '$animate',
       function(scope, element, compile, injector, animate) {
        scope.$apply(function() {
          element.data('$injector', injector);
          compile(element)(scope);
        });
      }]
    );

上面的代码主要作用就是,初始化相关的依赖,然后执行全局编译,最后更新所有的$watch.

核心的代码就这一句

compile(element)(scope);

其实这里有两步

  • compile(element) 收集完整个页面内的指令,然后返回publicLinkFn函数

  • 执行publicLinkFn(scope) 此处的scope即为$rootScope

先来说说第一步

compile(element)

compile服务返回的是一个构造函数,名为compile,代码在这里

function compile($compileNodes, transcludeFn, maxPriority, ignoreDirective,previousCompileContext) {
        if (!($compileNodes instanceof jqLite)) {
          $compileNodes = jqLite($compileNodes);
        }
        forEach($compileNodes, function(node, index){
          if (node.nodeType == 3 && node.nodeValue.match(/\S+/)  ) {
            $compileNodes[index] = node = jqLite(node).wrap('<span></span>').parent()[0];
          }
        });
        var compositeLinkFn =
                compileNodes($compileNodes, transcludeFn, $compileNodes,
                             maxPriority, ignoreDirective, previousCompileContext);
        safeAddClass($compileNodes, 'ng-scope');
        return function publicLinkFn(scope, cloneConnectFn, transcludeControllers){
            // 代码太长,省略
        };
    }

从上面的代码可以看出,如果要查找的节点是文本元素,则包装一个span标签,然后执行compileNodes,这个方法主要是收集指令.

function compileNodes(nodeList, transcludeFn, $rootElement, maxPriority, ignoreDirective,previousCompileContext) {
          var linkFns = [],
              attrs, directives, nodeLinkFn, childNodes, childLinkFn, linkFnFound;

          for (var i = 0; i < nodeList.length; i++) {
                attrs = new Attributes();
                directives = collectDirectives(nodeList[i], [], attrs, i === 0 ? maxPriority : undefined,ignoreDirective);

                nodeLinkFn = (directives.length)
                    ? applyDirectivesToNode(directives, nodeList[i], attrs, transcludeFn, $rootElement,null, [], [], previousCompileContext)
                    : null;

                if (nodeLinkFn && nodeLinkFn.scope) {
                  safeAddClass(jqLite(nodeList[i]), 'ng-scope');
                }

                childLinkFn = (nodeLinkFn && nodeLinkFn.terminal ||
                              !(childNodes = nodeList[i].childNodes) ||
                              !childNodes.length)
                    ? null
                    : compileNodes(childNodes,
                         nodeLinkFn ? nodeLinkFn.transclude : transcludeFn);

                linkFns.push(nodeLinkFn, childLinkFn);
                linkFnFound = linkFnFound || nodeLinkFn || childLinkFn;
                //use the previous context only for the first element in the virtual group
                previousCompileContext = null;
          }
          return linkFnFound ? compositeLinkFn : null;
          function compositeLinkFn(scope, nodeList, $rootElement, boundTranscludeFn) {
                // 代码省略
           }
    }

上面的编译节点的主要流程就是,先通过collectDirectives搜集当前节点的指令,然后找到了,则调用applyDirectivesToNode来应用指令,然后查找当前节点的子节点是否有指令,这是一个递归,最后把所有的函数添加到一个内部的linkFns数组中,这个将在最后链接的时候会用到.

先来看看collectDirectives方法,这个方法代码比较长,就不贴了,直接说代码逻辑

ng收集指令的时候,首先根据节点类型

  • element_node 1 先根据tagName来添加指令,然后loop节点的attrs来添加指令,最后通过className来添加指令

  • text_node 3 假如是文本节点的话,则调用addTextInterpolateDirective方法来构建指令

function addTextInterpolateDirective(directives, text) {
      var interpolateFn = $interpolate(text, true);
      if (interpolateFn) {
        directives.push({
          priority: 0,
          compile: valueFn(function textInterpolateLinkFn(scope, node) {
            var parent = node.parent(),
                bindings = parent.data('$binding') || [];
            bindings.push(interpolateFn);
            safeAddClass(parent.data('$binding', bindings), 'ng-binding');
            scope.$watch(interpolateFn, function interpolateFnWatchAction(value) {
              node[0].nodeValue = value;
            });
          })
        });
      }
    }

像这样的文本节点就会自动构建上面的指令,自动添加一个监听,通过修改原生方法来修改节点的值

<body>
    {{ feenan }}
</body>
  • comment 8 注释的节点也能自动的添加指令

上面的三种情况的添加指令方法是addDirective

function addDirective(tDirectives, name, location, maxPriority, ignoreDirective, startAttrName,endAttrName) {
      if (name === ignoreDirective) return null;
      var match = null;
      if (hasDirectives.hasOwnProperty(name)) {
        for(var directive, directives = $injector.get(name + Suffix),
            i = 0, ii = directives.length; i<ii; i++) {
          try {
            directive = directives[i];
            if ( (maxPriority === undefined || maxPriority > directive.priority) &&
                 directive.restrict.indexOf(location) != -1) {
              if (startAttrName) {
                directive = inherit(directive, {$$start: startAttrName, $$end: endAttrName});
              }
              tDirectives.push(directive);
              match = directive;
            }
          } catch(e) { $exceptionHandler(e); }
        }
      }
      return match;
    }

这里就会用到这个对象hasDirectives,这就是系统在初始化的时候添加的一个内健指令对象集合.
假如节点的名称在这个对象,则把指令添加到传递进来的tDirectives数组内.返回当前指令.

搜集完指令之后,就要开始使用了,接下来调用applyDirectivesToNode方法,这个方法将会生成最终链接时候调用的link函数

applyDirectivesToNode会对directives进行loop,依次检查指令的属性,这里以compile属性来说,当检测到指令有compile属性,则

if (directive.compile) {
              try {
                linkFn = directive.compile($compileNode, templateAttrs, childTranscludeFn);
                if (isFunction(linkFn)) {
                  addLinkFns(null, linkFn, attrStart, attrEnd);
                } else if (linkFn) {
                  addLinkFns(linkFn.pre, linkFn.post, attrStart, attrEnd);
                }
              } catch (e) {
                $exceptionHandler(e, startingTag($compileNode));
              }
            }

执行directive.compile方法,返回一个linkFn,然后调用addLinkFns添加到内部数组中,这里是postLinkFns数组,最终执行用户定义的linkFn或者系统自带的,都会访问这个数组的内容

最后applyDirectivesToNode返回的是一个内部函数nodeLinkFn,这个就是调用用户定义指令函数的发起者.

当前节点指令处理完之后,然后开始查找子节点的指令,基本上跟父节点规则一样,最后返回compositeLinkFn函数给compositeLinkFn内部变量,这个下面会用到,最后整个compile函数返回publicLinkFn函数

到这里compile(element)就执行完了,再来说说第二步,最终进行指令链接

publicLinkFn(scope)

首先scope是根作用域,这个方法主要是执行所有的链接函数,添加监听函数.

function publicLinkFn(scope, cloneConnectFn, transcludeControllers){
    assertArg(scope, 'scope');
    var $linkNode = cloneConnectFn
      ? JQLitePrototype.clone.call($compileNodes) // IMPORTANT!!!
      : $compileNodes;

    forEach(transcludeControllers, function(instance, name) {
      $linkNode.data('$' + name + 'Controller', instance);
    });

    // Attach scope only to non-text nodes.
    for(var i = 0, ii = $linkNode.length; i<ii; i++) {
      var node = $linkNode[i],
          nodeType = node.nodeType;
      if (nodeType === 1  || nodeType === 9 ) {
        $linkNode.eq(i).data('$scope', scope);
      }
    }

    if (cloneConnectFn) cloneConnectFn($linkNode, scope);
    if (compositeLinkFn) compositeLinkFn(scope, $linkNode, $linkNode);
    return $linkNode;
};

把当前作用域保存到元素的data里,然后调用第一步里的compositeLinkFn函数,传递根作用域和根节点

这个会调用compileNodes里的compositeLinkFn方法,此时闭包属性linkFns属性里保存了两个项nodeLinkFn, childLinkFn,根节点的nodelinkFn为空,childlinkFn有值,它的值本身也是一个compositeLinkFn函数,然后传递根节点的子节点进去,最终当nodelinkFn有值的时候,会调用applyDirectivesToNode内部的nodeLinkFn方法,上面说了,这个调用所有链接函数的发起者.

nodeLinkFn代码比较长,就不贴了,这里主要做了以下几件事

  • 根据指令的scope属性来构建作用域信息

  • 是否需要构建控制器,此时会调用控制器的初始化信息

  • 执行prelinkfns,postlinkfns数组内的链接函数,这些都是在第一步收集好的

核心代码如下

// PRELINKING
for(i = 0, ii = preLinkFns.length; i < ii; i++) {
  try {
    linkFn = preLinkFns[i];
    linkFn(linkFn.isolateScope ? isolateScope : scope, $element, attrs,
        linkFn.require && getControllers(linkFn.require, $element, elementControllers), transcludeFn);
  } catch (e) {
    $exceptionHandler(e, startingTag($element));
  }
}

// RECURSION
// We only pass the isolate scope, if the isolate directive has a template,
// otherwise the child elements do not belong to the isolate directive.
var scopeToChild = scope;
if (newIsolateScopeDirective && (newIsolateScopeDirective.template || newIsolateScopeDirective.templateUrl === null)) {
  scopeToChild = isolateScope;
}
childLinkFn && childLinkFn(scopeToChild, linkNode.childNodes, undefined, boundTranscludeFn);

// POSTLINKING
for(i = postLinkFns.length - 1; i >= 0; i--) {
  try {
    linkFn = postLinkFns[i];
    linkFn(linkFn.isolateScope ? isolateScope : scope, $element, attrs,
        linkFn.require && getControllers(linkFn.require, $element, elementControllers), transcludeFn);
  } catch (e) {
    $exceptionHandler(e, startingTag($element));
  }
}

执行流程为preLinkFns -> childLinkFn -> postLinkFns

最终执行链接的函数在这里

linkFn(linkFn.isolateScope ? isolateScope : scope, $element, attrs,
        linkFn.require && getControllers(linkFn.require, $element, elementControllers), transcludeFn);

这里就会执行用户自定义的指令内容,以及系统自带的指令内容,像上面文本节点对应的指令内容,像下面的这个

function textInterpolateLinkFn(scope, node) {
    var parent = node.parent(),
        bindings = parent.data('$binding') || [];
    bindings.push(interpolateFn);
    safeAddClass(parent.data('$binding', bindings), 'ng-binding');
    scope.$watch(interpolateFn, function interpolateFnWatchAction(value) {
      node[0].nodeValue = value;
    });
}

指令内容里可以添加监听,写一些DOM操作的代码,都是可以的

总结

以上只是对编译服务的一些简单理解,有啥错误的希望大家指出来,一起进步,以后有空再分析下业务相关的Provider.

欢迎转载,转载请注明作者和出处:feenan