目录引言解析 compilecompile 源码配置选项属性分别解析finalOptions添加warn 方法两个特殊的属性处理引言 在上篇文章 Vue编译器源码分析com
在上篇文章 Vue编译器源码分析compileToFunctions作用中我们介绍到了,在 compileToFunctions 方法中:
// compile
var compiled = compile(template, options);
而真正的编译工作是依托于 compile 函数,接下来我们详细解析 compile 。
上述代码在调用 compile ,其中模板字符串 template ,选项参数 options 第二个参数传递给 compile 函数,在章节三种我们知道,这里传递过去的options
如下:
{
shouldDecodeNewlines,
shouldDecodeNewlinesForHref,
delimiters,
comments,
warn
}
接下来我们看下 compile 的源码。
function createCompilerCreator(baseCompile) {
return function createCompiler(baseOptions) {
function compile(
template,
options
) {
var finalOptions = Object.create(baseOptions);
var errors = [];
var tips = [];
finalOptions.warn = function(msg, tip) {
(tip ? tips : errors).push(msg);
};
if (options) {
// merge custom modules
if (options.modules) {
finalOptions.modules =
(baseOptions.modules || []).concat(options.modules);
}
// merge custom directives
if (options.directives) {
finalOptions.directives = extend(
Object.create(baseOptions.directives || null),
options.directives
);
}
// copy other options
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
}
return {
compile: compile,
compileToFunctions: createCompileToFunctionFn(compile)
}
}
}
·首先可以看到:
var finalOptions = Object.create(baseOptions);
finalOptions 所有的配置选项最终都会挂载在这个对象上,baseOptions包含编译器在运作的时候所需的配置选项。
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)
};
var modules$1 = [
klass$1,
style$1,
model$1
];
var klass$1 = {
staticKeys: ['staticClass'],
transfORMnode: transformNode,
genData: genData
};
var style$1 = {
staticKeys: ['staticStyle'],
transformNode: transformNode$1,
genData: genData$1
};
var model$1 = {
preTransformNode: preTransformNode
};
我们用到了在细讲。
makeMap
生成的函数,该函数的作用是检测给定的标签是否是一元标签。props
进行绑定。现在我们粗略的介绍了下baseOptions 中各个属性的作用,当我们用到时候再来详细讲解他们的源码。
继续往下看:
var errors = [];
var tips = [];
finalOptions.warn = function(msg, tip) {
(tip ? tips : errors).push(msg);
};
很简单
在 finalOptions上添加了 warn 方法,该方法接收两个参数:
warn选项主要用在编译过程中的错误和提示收集,如果收集的信息是错误信息就将错误信息添加到前面定义的errors数组里,如果是提示信息就将其添加到 tips 数组里。
继续:
if (options) {
// merge custom modules
if (options.modules) {
finalOptions.modules =
(baseOptions.modules || []).concat(options.modules);
}
// merge custom directives
if (options.directives) {
finalOptions.directives = extend(
Object.create(baseOptions.directives || null),
options.directives
);
}
// copy other options
for (var key in options) {
if (key !== 'modules' && key !== 'directives') {
finalOptions[key] = options[key];
}
}
}
这段代码检查 options 是否存在,这里的 options 就是使用编译器编译模板时传递的选项参数,或者可以简单理解为调用 compileToFunctions 函数时传递的选项参数。
而baseOptions理解为编译器的默认选项或者基本选项,options 是用来提供定制能力的扩展选项。而上面这段代码的作用,就是将 options 对象混合到 finalOptions 中。
继续:
var compiled = baseCompile(template, finalOptions); {
errors.push.apply(errors, detectErrors(compiled.ast));
}
compiled.errors = errors;
compiled.tips = tips;
上面的代码调用了 baseCompile 函数,并分别将字符串模板(template),以及最终的编译器选项(finalOptions)传递了过去。
compiled 是 baseCompile 对模板的编译结果所以上面这段代码的作用是用来通过抽象语法树来检查模板中是否存在错误表达式的,通过 detectErrors 函数实现,将compiled.ast 作为参数传递给 detectErrors 函数,该函数最终返回一个数组,该数组中包含了所有错误的收集,最终通过这句代码将错误添加到errors。
将收集到的错误(errors)和提示(tips)添加到compiled
上并返回。
baseCompile 函数是在 createCompilerCreator 函数调用时传递的实参。
// `createCompilerCreator` allows creating compilers that use alternative
// parser/optimizer/codegen, e.g the SSR optimizing compiler.
// Here we just export a default compiler using the default parts.
var createCompiler = createCompilerCreator(function baseCompile(
template,
options
) {
var ast = parse(template.trim(), options);
if (options.optimize !== false) {
optimize(ast, options);
}
var code = generate(ast, options);
return {
ast: ast,
render: code.render,
staticRenderFns: code.staticRenderFns
}
});
从Vue编译器源码分析(一) 到 Vue编译器源码分析(四) 我们已经把编译器整体代码组织的结构讲分析了。
从下章节开始,就正式的进入到Vue编译器词法分析阶段,去看下模板对应的AST(抽象语法树)是怎么形成的。
Vue编译器源码AST 抽象语法树
以上就是Vue编译器解析compile源码解析的详细内容,更多关于Vue编译器compile解析的资料请关注编程网其它相关文章!
--结束END--
本文标题: Vue编译器解析compile源码解析
本文链接: https://www.lsjlt.com/news/34283.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0