词法fusioncharts

ACORN.
JS:原理与应王子龙美团-出行事业部-技术部-前端组目录关于我内容要点小结参考资料关于我王子龙2015.
12-2018.
4,美团-猫眼电影2018.
4-至今,美团出行事业部博客:https://borninsummer.
com/博客地址内容要点Acorn.
jsAST格式(ESTreeSpec)遍历(walktree)工作原理词法分析语法分析应用举例webpack,babel项目场景1:移除无用依赖项目场景2:路径替换图灵完备性与自举图灵完备(TuringComplete)JS就是一门图灵完备的语言绝大部分编程语言是图灵完备的自举(Bootstrap)一门语言可以实现自己的编译器,然后可以通过编译器生成可执行代码先有鸡还是先有蛋gcc自举通常出于推广目的考虑实现了自举的编程语言,意味着该语言比较成熟了TypeScript编译器实现了自举,TypeScript=>JavaScriptJavaScript有众多的语法分析器实现JS,你已经是个成熟的编程语言了该学会自己编译自己了ACORN.
JSJSCODEAcorn.
jsAST作者:MarijnHaverbeke,2012年开始开发博客地址:https://marijnhaverbeke.
nl/Asmall,fast,JavaScript-basedJavaScriptparser.
Github其他类似工具UglifyJS:自带一个parserEsprima.
js:http://esprima.
org/Babylon:Babel从Acorn.
jsfork出来并单独演化的TypeScript::已经用TypeScript实现了自己的ParserFlowParser:用OCaml实现的Espree,https://github.
com/eslint/espree,从Esprimafork出来的Acorn.
js、Esprima.
js、Babylon.
js等生成的AST遵从ESTreeSpec性能对比数据来源:https://marijnhaverbeke.
nl/acorn/test/bench/index.
htmlACORN.
JS-举个例子代码示例①:运行intro示例ACORN.
JS原理词法分析器源程序词法单元getNextToken语法分析器抽象语法树常见的编译器语法分析过程基本如下所示,Acorn.
js也是一样:ACORN.
JS-原理-词法分析词法分析:LexicalAnalysis,或lexing,或tokenization,也叫做"扫描"(scanning)过程如下:vara=1;vara=1;keywordidentieroperatorliteralseparator字符流词素(lexme)序列词法单元(token)序列代码:代码示例②:acorn.
js词法分析结果PS:一种更常见的形式如下[,,,,]词法分析的一些关键逻辑tokentype.
js:定义了一些类型对象identier.
js:定义了isIdentierStart、isIdentierChar等函数忽略空白字符(skipSpaces),包括空格、制表符、换行符this.
pos[Integer]:遍历输入的字符流时用到的游标两个JSAPI:String.
prototype.
charCodeAt():返回0到65535之间的整数String.
fromCharCode():返回Unicode值对应的字符代码示例③:isIdentierStart与isIdentierChar函数ACORN.
JS-原理-语法分析语法分析:SyntaxAnalysis,也称作"解析"(parsing)语法分析的目标结果是抽象语法树(AbstractSyntaxTree,AST)采用了自顶向下的方法对ECMAScript来说,社区有一个AST规范:ESTreeSpec在线实时查看AST:https://astexplorer.
net/演示=>GO抽象语法树的规范:ESTREE-SPEC简介AST节点按形如右侧接口定义:type的取值分类示例:声明(Declaration)FunctionDeclarationVariableDeclaration表达式(Expression)FunctionExpressionAssignmentExpression.
.
.
.
.
.
标识符Identifier字面量:Literal|RegExpLiteral程序,通常只有一个,即根节点:Program函数,包括函数声明和函数表达式:FunctionDeclarationFunctionExpression语句(Statement):ExpressionStatement(表达式)BlockStatement(块语句)EmptyStatement(空语句,例如单独的一个分号)DebuggerStatement(debugger)ReturnStatementIfStatementSwitchStatementSwitchCaseThrowStatementTryStatementCatchClause(catch字句)WhileStatementDoWhileStatementForStatementinterfaceNode{type:string;loc:SourceLocation|null;}更多示例=>文档ACORN.
JS-语法分析-部分源码解读node.
js:定义AST节点类state.
js:定义语法分析的主类Parserstatement.
js:定义了语句分析用到的原型方法Parser.
prototype.
parseTopLevel:启动分析Parser.
prototype.
parseStatement:分析语句查看acorn源码=>GO遍历、操作AST遍历AST:acorn-walkAST=>代码:escodegenACORN.
JS-应用举例-1-第三方库Webpack,使用acorn.
js作为自己的Parser的基础库Babel,babylon.
js:forkedfromacorn.
jsACORN.
JS-实际项目应用-1背景:mc项目从pc项目中拆分出来,只保留了src/page/ucActivity/目录下的页面于是,src/services目录下定义了浏览器端所有的ajax请求方法,大部分可以删除.
删除最大好处是减少$service上面挂载的属性,降低运行时浏览器内存占用问题:文件数量非常多,如何安全地删除无用的文件思路:静态分析,qcs.
fe.
mc/src/browser-service-parser.
js查看代码=>GOACORN.
JS-实际项目应用-2qbear处理vueentryESM中的相对路径=>绝对路径importVuefrom'vue';importAppfrom'${path}';import'.
/styles/common.
css';Vue.
config.
productionTip=falsenewVue({el:'#app',render:h=>h(App),});会使用src/page/**/*/index.
vue的绝对路径来替换,然后复制到一个临时目录里,引发问题:如果其他的import语句使用的是相对路径,该如何处理方法1:webpack配置alias方法2:进行静态分析,替换为绝对路径查看代码=>qbear的示例小结acorn.
js这类工具是处理代码的利器常用三件套:acorn,acorn-walk,escodegen延伸议题在acorn的基础上,如何实现webpack这样的打包工具如何根据AST生成代码(escodegen原理)或者,Babel原理ESLint工作原理参考资料https://github.
com/acornjs/acorn使用Acorn来解析JavaScript|掘金https://en.
wikipedia.
org/wiki/Lexical_analysishttps://en.
wikipedia.
org/wiki/ParsingAlfredV.
Aho,etc.
编译原理(第二版).
北京:机械工业出版社http://purplebamboo.
github.
io/2014/09/27/javascript-syntax-tree/https://github.
com/estree/estree/blob/master/es5.
mdQ&A