39-mini-vue 实现解析 text 功能

📅 发布时间:2026/7/10 13:01:36 👁️ 浏览次数:
39-mini-vue 实现解析 text 功能
实现解析 text 功能测试describe(text,(){it(simple text,(){constastbaseParse(some text)expect(ast.children[0]).toStrictEqual({type:NodeTypes.TEXT,content:some text})})})思路* 如果没有命中插值和元素的话默认就走 Text 类型* 如果是 Text 类型我们取出 content 值然后推进 some text,也就是删除 some text功能实现// compiler-core/parse.tsfunctionparseChildren(context){constnodes:any[][]letnode:anyconstscontext.sourceif(s.startsWith({{)){nodeparseInterpolation(context)}elseif(s[0]){if(/[a-z]/i.test(context.source[1])){nodeparseElement(context)}}if(!node){// ✅ text类型nodeparseText(context)}nodes.push(node)returnnodes}functionparseText(context:any){// ✅ 解析过程// 1. 获取 contentconstcontentparseTextData(context,context.source.length)// 2. 推进advanceBy(context,content.length)return{type:NodeTypes.TEXT,content:some text}}// ✅ 函数抽离functionparseTextData(context:any,length:number){returncontext.source.slice(0,length)}// src/ast.tsexportconstenumNodeTypes{INTERPOLATION,SIMPLE_EXPRESSION,ELEMENT,TEXT// ✅}