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>
</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.