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

实现解析 text 功能

  1. 测试
js 复制代码
describe("text", ()=>{
  it("simple text",()=>{
    const ast = baseParse("some text")
    expect(ast.children[0]).toStrictEqual({
      type: NodeTypes.TEXT,
      content: "some text"
    })
  })
})
  1. 思路:
    * 如果没有命中插值和元素的话,默认就走 Text 类型
    * 如果是 Text 类型,我们取出 content 值,然后推进 some text,也就是删除 some text
  2. 功能实现
js 复制代码
// compiler-core/parse.ts
function parseChildren(context) {
  const nodes: any[] = []
  let node: any
  const s = context.source
  if (s.startsWith('{{')) {
    node = parseInterpolation(context)
  } else if (s[0] === '<') {
    if (/[a-z]/i.test(context.source[1])) {
      node = parseElement(context)
    }
  }
  if (!node) { // ✅ text类型
    node = parseText(context)
  }
  nodes.push(node)
  return nodes
}
function parseText(context: any) { // ✅ 解析过程
  // 1. 获取 content
  const content = parseTextData(context, context.source.length)
  // 2. 推进
  advanceBy(context, content.length)
  return {
    type: NodeTypes.TEXT,
    content: "some text"
  }
}
// ✅ 函数抽离
function parseTextData(context:any, length: number) {
  return context.source.slice(0, length)
}

// src/ast.ts  
export const enum NodeTypes {
  INTERPOLATION,
  SIMPLE_EXPRESSION,
  ELEMENT,
  TEXT // ✅
}  
相关推荐
不简说2 小时前
这次真香!sv-print 可视化打印设计器更新:插件脚手架、Excel 导出、弹窗 API 三连发
前端·javascript·前端框架
无聊的老谢2 小时前
Web GIS 最佳实践:Vue 集成 Leaflet/OpenLayers 实现基站海量点位渲染
前端·javascript·vue.js
yingyima2 小时前
GCP Cloud Scheduler 核心语法与实战示例速查手册
前端
用户57350107252062 小时前
Elpis 项目阶段性总结 - 基于 vue3 完成领域模型架构建设
前端
东风破_2 小时前
V8 如何执行你的代码——编译、上下文与调用栈
javascript
假如让我当三天老蒯2 小时前
为什么 setData 能获取到 prev 参数?(自学用)
前端·react.js
AskHarries3 小时前
Workspace:文件系统、项目上下文和执行边界
java·服务器·前端
Aphasia3113 小时前
从内存模型看深浅拷贝
前端·javascript·面试
IT策士3 小时前
第45篇 k8s之实战:将 Web 应用迁移到 Kubernetes(下)
前端·容器·kubernetes
云水一下3 小时前
TypeScript 从零基础到精通(二):基础类型与类型系统
javascript·typescript