39-mini-vue 实现解析 text 功能
2026/9/25 0:08:10 网站建设 项目流程

实现解析 text 功能

  1. 测试
describe("text",()=>{it("simple text",()=>{constast=baseParse("some text")expect(ast.children[0]).toStrictEqual({type:NodeTypes.TEXT,content:"some text"})})})
  1. 思路:
    * 如果没有命中插值和元素的话,默认就走 Text 类型
    * 如果是 Text 类型,我们取出 content 值,然后推进 some text,也就是删除 some text
  2. 功能实现
// compiler-core/parse.tsfunctionparseChildren(context){constnodes:any[]=[]letnode:anyconsts=context.sourceif(s.startsWith('{{')){node=parseInterpolation(context)}elseif(s[0]==='<'){if(/[a-z]/i.test(context.source[1])){node=parseElement(context)}}if(!node){// ✅ text类型node=parseText(context)}nodes.push(node)returnnodes}functionparseText(context:any){// ✅ 解析过程// 1. 获取 contentconstcontent=parseTextData(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// ✅}

需要专业的网站建设服务?

联系我们获取免费的网站建设咨询和方案报价,让我们帮助您实现业务目标

立即咨询