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数组内的链接函数,这些都是在第一步收集好的

核心代码如下

// PRELINKINGfor(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);// POSTLINKINGfor(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