首页 > 代码库 > .6-Vue源码之AST(2)
.6-Vue源码之AST(2)
上一节获取到了DOM树的字符串,准备进入compile阶段:
// Line-9326 function compileToFunctions(template,options,vm) { // 获取配置参数 options = options || {}; // ... // Go! var compiled = compile(template, options); // ... }
该函数接受两个参数,DOM树字符串、配置参数,如图:,进函数:
// Line-9287
function compile(template, options) {
var finalOptions = Object.create(baseOptions);
var errors = [];
var tips = [];
finalOptions.warn = function(msg, tip$$1) {
(tip$$1 ? tips : errors).push(msg);
};
// 合并参数
if (options) {
if (options.modules) {
finalOptions.modules = (baseOptions.modules || []).concat(options.modules);
}
if (options.directives) {
finalOptions.directives = extend(
Object.create(baseOptions.directives),
options.directives
);
}
for (var key in options) {
if (key !== ‘modules‘ && key !== ‘directives‘) {
finalOptions[key] = options[key];
}
}
}
// 核心编译函数
var compiled = baseCompile(template, finalOptions);
errors.push.apply(errors, detectErrors(compiled.ast));
// 提示与报错属性添加
compiled.errors = errors;
compiled.tips = tips;
return compiled
}
compile主要做了3件事:
1、参数合并
这里涉及到baseOptions与传进来的options,baseOptions是内置对象,与options合并后得到finalOptions作为参数传进第二步的函数。
// Line-9529 var baseOptions = { expectHTML: true, modules: modules$1, directives: directives$1, isPreTag: isPreTag, isUnaryTag: isUnaryTag, mustUseProp: mustUseProp, canBeLeftOpenTag: canBeLeftOpenTag, isReservedTag: isReservedTag, getTagNamespace: getTagNamespace, staticKeys: genStaticKeys(modules$1) };
这个对象十分复杂,涉及的时候再做讲解。
2、调用baseCompile函数
该函数接受2个参数:字符串、参数对象。
// Line-9261 function baseCompile(template, options) { // 解析字符串为AST var ast = parse(template.trim(), options); // 优化 optimize(ast, options); // var code = generate(ast, options); return { ast: ast, render: code.render, staticRenderFns: code.staticRenderFns } }
简单看一眼这个函数,3个调用都很简单暴力,后面一个一个讲解。
3、添加提示、报错属性并返回compiled值
将过程中出现的error与tips作为属性添加到compiled对象上,以便一次性输出。
跑流程的话,主要还是看第二步,理一理DOM树字符串是如何被解析和编译的,来看parse这个函数吧!
这函数太长了,分两部分来:
// Line-7982 function parse(template, options) { // 参数修正 warn$2 = options.warn || baseWarn; // 这几个属性都是原型链上面的 platformGetTagNamespace = options.getTagNamespace || no; platformMustUseProp = options.mustUseProp || no; platformIsPreTag = options.isPreTag || no; preTransforms = pluckModuleFunction(options.modules, ‘preTransformNode‘); transforms = pluckModuleFunction(options.modules, ‘transformNode‘); postTransforms = pluckModuleFunction(options.modules, ‘postTransformNode‘); // 这是自家的 值为undefined… delimiters = options.delimiters; // 变量声明 var stack = []; var preserveWhitespace = options.preserveWhitespace !== false; var root; var currentParent; var inVPre = false; var inPre = false; var warned = false; // 功能函数 function warnOnce(msg) { if (!warned) { warned = true; warn$2(msg); } } function endPre(element) { if (element.pre) { inVPre = false; } if (platformIsPreTag(element.tag)) { inPre = false; } } parseHTML( /*...*/ ); return root }
首先是获取options参数的属性,其中大部分都是定义在原型上,即baseOptions,所以没什么讲的。唯一涉及的函数就是pluckModuleFunction,比较简单,看一下内容:
// Line-5684 function pluckModuleFunction(modules, key) { // 返回modules[key]组成的数组 return modules ? modules.map(function(m) { return m[key]; }).filter(function(_) { return _; }) : [] }
简而言之,就是返回一个数组,内容是modules[key],这里返回空数组。
第一部分没什么讲的,主要是声明一些变量,第二部分才是核心:
// Line-7982 function parse(template, options) { // ...part-1 parseHTML(template, { warn: warn$2, expectHTML: options.expectHTML, isUnaryTag: options.isUnaryTag, canBeLeftOpenTag: options.canBeLeftOpenTag, shouldDecodeNewlines: options.shouldDecodeNewlines, start: function start(tag, attrs, unary) { /* code... */ }, end: function end() { /* code... */ }, chars: function chars(text) { /* code... */ } }); return root }
这部分就是一个函数的调用,第一个参数E为字符串,第二个参数是一个对象,包含多个属性与方法,属性内容如下:
// Line-7578 // 自闭合标签 var isUnaryTag = makeMap( ‘area,base,br,col,embed,frame,hr,img,input,isindex,keygen,‘ + ‘link,meta,param,source,track,wbr‘ ); // 可以省略闭合标签 var canBeLeftOpenTag = makeMap( ‘colgroup,dd,dt,li,options,p,td,tfoot,th,thead,tr,source‘ ); // 当前浏览器是否会对换行转义 var shouldDecodeNewlines = inBrowser ? shouldDecode(‘\n‘, ‘ ‘) : false; function shouldDecode(content, encoded) { var div = document.createElement(‘div‘); div.innerHTML = "<div a=\"" + content + "\">"; return div.innerHTML.indexOf(encoded) > 0 }
第一个expectHTML在baseOptions中是默认true的,其余几个是标签名数组与换行转义判断的集合。
剩余三个方法包括start、end、chars,单独讲不好讲,在parseHTML方法边跑边说。
暂时结束,parseHTML方法非常长,单独讲。
.6-Vue源码之AST(2)