Angularjs理解二

最新推荐文章于 2020-12-19 17:44:31 发布

前端漫谈

最新推荐文章于 2020-12-19 17:44:31 发布

阅读量9.4k

点赞数 1

分类专栏：前端脚本文章标签： angularjs

前端脚本专栏收录该内容

60 篇文章 1 订阅

订阅专栏

1.dom加载完毕，找寻ng-app，先从上到下找相关的指令，然后分两阶段执行。先找到所有的指令，完成编译，得到一个个链接函数，最后在链接到一个个controller上。（还是边编译边链接？？）
先执行：

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

关键就是编译完成，得到连接函数，然后链接。

function compile($compileNodes, transcludeFn, maxPriority, ignoreDirective, previousCompileContext) {  
  // 对于文本节点，使用<span>包装
  forEach($compileNodes, function(node, index) {
    if (node.nodeType == NODE_TYPE_TEXT && node.nodeValue.match(/\S+/) /* non-empty */ ) {
       $compileNodes[index] = jqLite(node).wrap('<span></span>').parent()[0];
    }
  });

  // 调用compileNodes编译当前节点，返回链接函数
  var compositeLinkFn = 
        compileNodes($compileNodes, transcludeFn, $compileNodes, maxPriority, ignoreDirective, previousCompileContext);

  // 添加scope class
  compile.$$addScopeClass($compileNodes);
  var namespace = null;
  return function publicLinkFn(scope, cloneConnectFn, options) {
    // 后面再看
  };

其中有个技巧：
forEach,查看
没有，[]与forEach，可以使用apply、call进行借用。但是ie不支持，chrome、ff支持。

if (!Array.prototype.forEach) {  
    Array.prototype.forEach = function(callback, thisArg) {  
        var T, k;  
        if (this == null) {  
            throw new TypeError(" this is null or not defined");  
        }  
        var O = Object(this);  
        var len = O.length >>> 0; // Hack to convert O.length to a UInt32  
        if ({}.toString.call(callback) != "[object Function]") {  
            throw new TypeError(callback + " is not a function");  
        }  
        if (thisArg) {  
            T = thisArg;  
        }  
        k = 0;  
        while (k < len) {  
            var kValue;  
            if (k in O) {  
                kValue = O[k];  
                callback.call(T, kValue, k, O);  
            }  
            k++;  
        }  
    };  
}

.可在css、注释中使用。
.jquery.wrap，就用后方的内容，包裹前方的内容。

其中编译，搜集本节点和父节点所有的指令，然后应用，然后得到指令的链接函数，然后在放到一个数组中。

function compileNodes(nodeList, transcludeFn, $rootElement, maxPriority, ignoreDirective, previousCompileContext) {  
  var linkFns = [],
    attrs, directives, nodeLinkFn, childNodes, childLinkFn, linkFnFound, nodeLinkFnFound;
  // 遍历当前层的所有节点
  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;
  // 添加scope class
  if (nodeLinkFn && nodeLinkFn.scope) {
     compile.$$addScopeClass(attrs.$$element);
  }
  // 如果父亲节点没有链接函数或者已终止（terminal）
  // 或者没有孩子节点
  // 孩子节点的链接函数就为null
  // 否则递归编译孩子节点
  childLinkFn = (nodeLinkFn && nodeLinkFn.terminal ||
          !(childNodes = nodeList[i].childNodes) ||
          !childNodes.length)
     ? null
     : compileNodes(childNodes,
       nodeLinkFn ? (
        (nodeLinkFn.transcludeOnThisElement || !nodeLinkFn.templateOnThisElement)
         && nodeLinkFn.transclude) : transcludeFn);
  // 将当前节点的链接函数和孩子节点的链接函数都插入到linkFns数组中
  if (nodeLinkFn || childLinkFn) {
     linkFns.push(i, nodeLinkFn, childLinkFn);
     linkFnFound = true;
     nodeLinkFnFound = nodeLinkFnFound || nodeLinkFn;
  }
  previousCompileContext = null;
  }
  // 如果有链接函数返回闭包（compositeLinkFn能访问linkFns）
  return linkFnFound ? compositeLinkFn : null;
  function compositeLinkFn(scope, nodeList, $rootElement, parentBoundTranscludeFn) {
  // 代码略，后面再说
  }
}

编译节点的主要流程为两步，第一步通过 collectDirectives 搜集当前节点的指令，第二步调用 applyDirectivesToNode 来应用指令，最后调用 compileNodes 函数递归编译当前节点的子节点，最后把所有的函数添加到一个内部的 linkFns 数组中，这个数组将在最后链接的时候用到。

收集指令

Angular收集指令是根据节点类型来的，一共有三种类型：

1.element node：先根据tagName使用 addDirective 来添加指令，然后遍历节点的attrs使用 addAttrInterpolateDirective 和 addDirective 来添加指令，最后通过className使用 addDirective 来添加指令

2.text node：调用 addTextInterpolateDirective 方法来添加指令

3.comment node：匹配注释，使用 addDirective 添加指令

收集指令的过程主要用到了三个方法： addDirective 、 addAttrInterpolateDirective 和 addTextInterpolateDirective

首先来看 addDirective 方法：

function addDirective(tDirectives, name, location, maxPriority, ignoreDirective, startAttrName, endAttrName) {  
  // 是被忽略的指令，返回null
  if (name === ignoreDirective) return null;
  var match = null;
  // hasDirectives系统在初始化的时候添加的一个内健指令对象集合，$injector
  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数组中
           tDirectives.push(directive);
           match = directive;
         }
      } catch (e) { $exceptionHandler(e); }
    }
  }
  return match;
}
如果是文本节点就创建内部指令，监听scope变化然后设置节点的值

function addTextInterpolateDirective(directives, text) {  
  var interpolateFn = $interpolate(text, true);
  if (interpolateFn) {
    directives.push({
      priority: 0,
      compile: function textInterpolateCompileFn(templateNode) {
        var templateNodeParent = templateNode.parent(),
            hasCompileParent = !!templateNodeParent.length;

        if (hasCompileParent) compile.$$addBindingClass(templateNodeParent);

        return function textInterpolateLinkFn(scope, node) {
          var parent = node.parent();
          if (!hasCompileParent) compile.$$addBindingClass(parent);
          compile.$$addBindingInfo(parent, interpolateFn.expressions);
          scope.$watch(interpolateFn, function interpolateFnWatchAction(value) {
            node[0].nodeValue = value;
          });
        };
      }
    });
  }
}
像如下的文本节点就会自动添加上面的指令，自动添加一个监听，通过原生方法来修改节点的值

<body>  
    {{ feenan }}
</body>  
应用指令到当前节点

收集完所有指令之后，接下来就要调用 applyDirectivesToNode 方法来将指令应用到当前节点上了，这个方法将会生成用于链接阶段的link函数。

这个函数比较复杂，我们拆开来看，其主体如下：

// 遍历当前节点的每个指令
for (var i = 0, ii = directives.length; i < ii; i++) {  
  // 1.判断scope类型
  // 2.判断是否需要有controller
  // 3.transclude的处理
  // 4.template的处理
  // 5.templateurl的处理
  // 6.compile处理
  // 7.terminal处理
}
// return 收集到的信息-nodeLinkFn
下面逐步来看看编译的完整过程，首先说明一下：当前节点 $compileNode -即要编译的节点

1.判断scope类型

if (directiveValue = directive.scope) {  
  // 跳过需要异步处理的指令，模板加载完成之后再处理
  if (!directive.templateUrl) {
    // scope属性为对象，例如{}，则需要创建独立作用域
    if (isObject(directiveValue)) {
      newIsolateScopeDirective = directive;
    }
  }
  newScopeDirective = newScopeDirective || directive;
}
2.判断是否需要controller

// 同样，跳过要异步处理的指令，模板加载完成之后再处理
if (!directive.templateUrl && directive.controller) {  
  directiveValue = directive.controller;
  // 收集当前节点上所用要创建的controller
  controllerDirectives = controllerDirectives || createMap();
  controllerDirectives[directiveName] = directive;
}
3.transclude的处理

if (directiveValue = directive.transclude) {  
  hasTranscludeDirective = true;
  // element
  if (directiveValue == 'element') {
    hasElementTranscludeDirective = true;
    terminalPriority = directive.priority;
    $template = $compileNode;
    // 删除当前节点，替换为注释
    $compileNode = templateAttrs.$$element =
        jqLite(document.createComment(' ' + directiveName + ': ' + templateAttrs[directiveName] + ' '));
    compileNode = $compileNode[0];
    replaceWith(jqCollection, sliceArgs($template), compileNode);

    // 编译当前节点
    childTranscludeFn = compile($template, transcludeFn, terminalPriority,  replaceDirective && replaceDirective.name, { nonTlbTranscludeDirective: nonTlbTranscludeDirective});
  } else { // true
    // 复制当前节点内容
    $template = jqLite(jqLiteClone(compileNode)).contents();
    // 清空当前节点
    $compileNode.empty();
    // 编译复制的内容
    childTranscludeFn = compile($template, transcludeFn);
  }
}
4.template的处理

if (directive.template) {  
  hasTemplate = true;
  templateDirective = directive;

  // 如果template为函数，则函数返回值为模板内容
  // 否则就是字符串，那么字符串就是模板内容
  directiveValue = (isFunction(directive.template))
      ? directive.template($compileNode, templateAttrs)
      : directive.template;

  directiveValue = denormalizeTemplate(directiveValue);

  // 如果replace为true
  if (directive.replace) {
    replaceDirective = directive;
    if (jqLiteIsTextNode(directiveValue)) {
      $template = [];
    } else {
      $template = removeComments(wrapTemplate(directive.templateNamespace, trim(directiveValue)));
    }
    // 模板的第一个节点
    compileNode = $template[0];

    if ($template.length != 1 || compileNode.nodeType !== NODE_TYPE_ELEMENT) {
      // 没有要编译的内容或不是有效节点，报错
    }

    // 1.模板的第一个节点（compileNode）替换当前节点（$compileNode）
    replaceWith(jqCollection, $compileNode, compileNode);

    var newTemplateAttrs = {$attr: {}};

    // 2.收集模板的第一个节点（compileNode）的所有指令
    var templateDirectives = collectDirectives(compileNode, [], newTemplateAttrs);
    // 3.当前节点（$compileNode）剩余未编译的指令
    var unprocessedDirectives = directives.splice(i + 1, directives.length - (i + 1));

    if (newIsolateScopeDirective) {
      markDirectivesAsIsolate(templateDirectives);
    }
    // 4.$compileNode与compileNode的指令合并
    directives = directives.concat(templateDirectives).concat(unprocessedDirectives);
    // 5.将$compileNode与compileNode的属性合并
    mergeTemplateAttributes(templateAttrs, newTemplateAttrs);

    ii = directives.length;
  } else {
    // replace为false，直接将模板内容插入当前节点即可
    $compileNode.html(directiveValue);
  }
}
5.templateurl的处理

if (directive.templateUrl) {  
  hasTemplate = true;
  templateDirective = directive;

  if (directive.replace) {
    replaceDirective = directive;
  }

  // 和template的处理类似，只是在获取到模板之前，这些节点编译挂起
  // 等获取到模板内容之后再继续编译
  nodeLinkFn = compileTemplateUrl(directives.splice(i, directives.length - i), $compileNode,
      templateAttrs, jqCollection, hasTranscludeDirective && childTranscludeFn, preLinkFns, postLinkFns, {
        controllerDirectives: controllerDirectives,
        newIsolateScopeDirective: newIsolateScopeDirective,
        templateDirective: templateDirective,
        nonTlbTranscludeDirective: nonTlbTranscludeDirective
      });
  ii = directives.length;
}
6.compile处理

// 同样，跳过需要异步处理的指令
if (!directive.templateUrl && directive.compile) {  
  try {
    // 使用指令的compile函数编译指令
    linkFn = directive.compile($compileNode, templateAttrs, childTranscludeFn);

    // 如果返回的是函数，则该函数为post-link函数
    // 否则返回为对象，pre和post属性分别对应指令的pre-link和post-link函数
    if (isFunction(linkFn)) {
      addLinkFns(null, linkFn, attrStart, attrEnd);
    } else if (linkFn) {
      addLinkFns(linkFn.pre, linkFn.post, attrStart, attrEnd);
    }
  } catch (e) {
    $exceptionHandler(e, startingTag($compileNode));
  }
}
7.terminal处理

// 有终止属性的指令，优先级小于当前指令的不会被编译
if (directive.terminal) {  
  nodeLinkFn.terminal = true;
  terminalPriority = Math.max(terminalPriority, directive.priority);
}
编译阶段收集了足够的信息，最后返回 nodeLinkFn 函数及其属性，在链接过程中就可以使用了：

nodeLinkFn = {  
  scope = newScopeDirective && newScopeDirective.scope === true
  transcludeOnThisElement = hasTranscludeDirective
  elementTranscludeOnThisElement = hasElementTranscludeDirective
  templateOnThisElement = hasTemplate
  transclude = childTranscludeFn
}
publicLinkFn(scope)

这里传进来的 scope 是 $rootScope ，这个方法主要是执行所有的链接函数，创建scope，添加监听函数：

function publicLinkFn(scope, cloneConnectFn, options) {  
  // 略去一大推
  if (cloneConnectFn) cloneConnectFn($linkNode, scope);
  if (compositeLinkFn) compositeLinkFn(scope, $linkNode, $linkNode, parentBoundTranscludeFn);
  return $linkNode;
};
这个函数实际调用的是 compositeLinkFn 函数，而 compositeLinkFn 函数是 compileNodes 函数的返回值，实际上它返回了一个闭包。 compositeLinkFn 函数操作的是 linkFns ， linkFns 包含两部分：当前节点的链接函数 nodeLinkFn 和子节点的链接函数 childLinkFn ，而 childLinkFn 本身也是一个 compositeLinkFn （在子节点上递归调用 compileNodes 的返回结果），所以实际的链接过程就是递归调用 nodelinkFn 函数：

// 1.创建独立scope
if (newIsolateScopeDirective) {  
   isolateScope = scope.$new(true);
}
// 2.创建控制器
if (controllerDirectives) {  
   elementControllers = setupControllers($element, attrs, transcludeFn, controllerDirectives, isolateScope, scope);

  for (i in elementControllers) {
    controller = elementControllers[i];
    var controllerResult = controller();
    // 略
  }
}

// 3.pre-link
for (i = 0, ii = preLinkFns.length; i < ii; i++) {  
  linkFn = preLinkFns[i];
  invokeLinkFn(linkFn,
    linkFn.isolateScope ? isolateScope : scope,
    $element,
    attrs,
    linkFn.require && getControllers(linkFn.directiveName, linkFn.require, $element, elementControllers),
    transcludeFn
  );
}

// 4.递归执行子节点的链接函数
var scopeToChild = scope;  
if (newIsolateScopeDirective && (newIsolateScopeDirective.template || newIsolateScopeDirective.templateUrl === null)) {  
   scopeToChild = isolateScope;
}
childLinkFn && childLinkFn(scopeToChild, linkNode.childNodes, undefined, boundTranscludeFn);

// 5.post-link
for (i = postLinkFns.length - 1; i >= 0; i--) {  
  linkFn = postLinkFns[i];
  invokeLinkFn(linkFn,
      linkFn.isolateScope ? isolateScope : scope,
      $element,
      attrs,
      linkFn.require && getControllers(linkFn.directiveName, linkFn.require, $element, elementControllers),
      transcludeFn
  );
}
执行流程为 preLinkFns -> childLinkFn -> postLinkFns ，这些信息都已经在第一步编译的时候收集好了，链接的时候使用即可。所以pre-link的执行顺序和文档节点顺序相同，而post-link是在递归回溯的过程中执行的，因此正好和文档节点顺序相反，后面会对编译连接过程给出一个小例子。

这里补充说一下如何获取节点上的所有控制器，看代码：

function setupControllers($element, attrs, transcludeFn, controllerDirectives, isolateScope, scope) {  
  var elementControllers = createMap();
  for (var controllerKey in controllerDirectives) {
    var directive = controllerDirectives[controllerKey];
    var locals = {
      $scope: directive === newIsolateScopeDirective || directive.$$isolateScope ? isolateScope : scope,
      $element: $element,
      $attrs: attrs,
      $transclude: transcludeFn
    };

    var controller = directive.controller;
    // 特殊处理ng-controller
    if (controller == '@') {
      controller = attrs[directive.name];
    }

    // 生成控制器实例，实际是返回已经注入依赖的工厂函数
    var controllerInstance = $controller(controller, locals, true, directive.controllerAs);

    // 含有 transclude 指令的元素是注释
    // jQuery不支持在注释节点设置data
    // 因此，暂时将controller设置在local hash中
    // 当 transclude 完成后，生成真正的节点之后，再将controller设置到data中
    elementControllers[directive.name] = controllerInstance;
    if (!hasElementTranscludeDirective) {
      $element.data('$' + directive.name + 'Controller', controllerInstance.instance);
    }
  }
  return elementControllers;
}

参考文献：http://www.tuicool.com/articles/3QjyMvm