手撕Vue-编译模板数据

经上一篇编译指令数据后,我们已经可以将指令数据编译成具体需要展示的数据了,上一篇只是编译了指令数据,还没有编译模板数据,这一篇我们就来编译模板数据。

也就是 {{}} 这种模板的形式我们该如何编译,其实和指令数据编译的思路是一样的,废话不多说,直接上代码。

改造一下 buildText 方法,让它支持编译模板数据,调用 CompilerUtil content 方法,传入模板数据,返回编译后的数据,然后再将编译后的数据替换到文本节点中。

CompilerUtil['content'](node, content, this.vm);

在 CompilerUtil 中添加 content 方法,该方法和指令数据编译的思路是一样的,只是编译的数据不一样,指令数据是 v-text 这种,而模板数据是 {{}} 这种。

/**
 * 处理模板字符串
 * @param node 当前元素
 * @param value 指令的值
 * @param vm Nue 的实例对象
 */
content: function (node, value, vm) {
    // console.log(value); // {{ name }} -> name -> $data[name]
    node.textContent = this.getContent(vm, value);
}

getContent 方法我单独拿出来,我先贴代码,然后再解释。

/**
 * 获取指定模板字符串的内容
 * @param vm Nue 的实例对象
 * @param value 指令的值
 */
getContent(vm, value) {
    const reg = /\{\{(.+?)\}\}/gi;
    return value.replace(reg, (...args) => {
        // 第一次执行 args[1] = name
        // 第二次执行 args[1] = age
        return this.getValue(vm, args[1]);
    });
},

getContent 方法中,我们先定义了一个正则表达式,用来匹配模板字符串,/\{\{(.+?)\}\}/gi 这个正则表达式的意思是匹配 {{}} 里面的内容,g 表示全局匹配,i 表示忽略大小写,(.+?) 表示匹配任意字符,+ 表示匹配一次或多次,? 表示非贪婪模式,也就是匹配到第一个 }} 就结束匹配。() 表示分组,args[1] 就是分组匹配到的内容。

在方法当中,我们调用了 getValue 方法,该方法的作用是获取模板字符串的值,在运行测试代码的时候,我发现, {{ name }} 这种模板编译出来是 undefined 所以我们需要在 getValue [obj][key] 的时候,去一下空格:

return data[currentKey.trim()];

这样就可以了,我们再来看一下测试代码:

<p>{{ name }}</p>
<p>{{age}}</p>
<p>{{time.h}}</p>
<p>{{name}}-{{age}}</p>

发现 {{name}}-{{age}} 这种也可以编译了,那么可以我们来看看我们 getContent 源码的执行效果,如果是 {{name}}-{{age}}, value 等于 {{name}}-{{age}} 进入 replace 循环,第一次执行 args[1] 等于 name,第二次执行 args[1] 等于 age,第一次循环已经将我们的 {{name}}-{{age}} 替换为了 BNTang-{{age}},第二次循环将 {{age}} 替换为了 age,所以最终的结果就是 BNTang-33

posted @   BNTang  阅读(46)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· AI技术革命,工作效率10个最佳AI工具
  1. 1 总会有人离开 王巨星
  2. 2 月亮 孟凡明
  3. 3 迟里乌布
  4. 4 我只能离开 颜人中
  5. 5 达尔文 蔡健雅
  6. 6 夜色滚烫 叶明净
  7. 7 你的星环 路飞文
  8. 8 不再说话 三块木头
  9. 9 黄昏 粥粥和小伙/粥粥
  10. 10 爱不单行 刘大拿
  11. 11 心动贩卖机 PIggy
  12. 12 别来无恙 苏星婕
  13. 13 我们的歌 刘大拿
  14. 14 一直很安静 王贰浪
  15. 15 去有风的地方 清音
  16. 16 雪 Distance Capper/罗言
  17. 17 坏女孩 徐良/小凌
  18. 18 乐园 沧桑Cang333/虎皮蛋/曲甲
  19. 19 Ayo(Explicit) Chris Brown/Tyga
  20. 20 我的美丽feat.海洋Bo 海洋Bo/高睿
  21. 21 世事可爱 粥粥和小伙/粥粥
  22. 22 我记得 赵雷
  23. 23 我想牵着你的手 许嵩
  24. 24 人们都不懂 刘诺然
  25. 25 寻一个你(电视剧《苍兰诀》温情主题曲) TTTTTeehom
  26. 26 子莫格尼 杉和
  27. 27 Cat Cafe Shoffy
  28. 28 风停了雨停了我们还拥抱着 Superluckyqi
  29. 29 寂寞沙洲冷 于潼
  30. 30 三国恋 王巨星
  31. 31 达尔文 林俊杰
  32. 32 有些 颜人中
  33. 33 小模样 张小只ya
  34. 34 是否 程响
  35. 35 楼顶上的小斑鸠 队长
  36. 36 笑场 薛之谦
  37. 37 还是分开 张叶蕾
  38. 38 修炼爱情 林俊杰
  39. 39 二零三 毛不易
  40. 40 雅俗共赏 许嵩
  41. 41 Serendipity 古瑞斯Graps/Zakiya晴子
  42. 42 就让这大雨全都落下·2023 刘大拿
  43. 43 老男孩 筷子兄弟
  44. 44 有何不可 许嵩
  45. 45 缓缓 杜宣达
  46. 46 好久不见 陈奕迅
  47. 47 爱的魔法(Cover 金莎) 封茗囧菌
  48. 48 在你的身边 盛哲
  49. 49 带我去找夜生活 告五人
  50. 50 假面舞会 很美味
  51. 51 STAY The Kid LAROI/Justin Bieber
  52. 52 我好想睡觉的 无敌西红柿
  53. 53 日不落(温柔版)
  54. 54 恋爱画板 锦零
  55. 55 7710 好乐无荒/尹露浠
  56. 56 给你呀(又名:for ya) 蒋小呢
  57. 57 Love Story Taylor Swift
  58. 58 Plain Jane(Remix 13z) 鱼幼微
  59. 59 晚风 7opy/BT07
  60. 60 拜托 孙晨
  61. 61 乌梅子酱 李荣浩
  62. 62 南半球与北海道 范倪Liu
  63. 63 星河万里 Rom邢锐
拜托 - 孙晨
00:00 / 00:00
An audio error has occurred, player will skip forward in 2 seconds.

作词 : 孙晨/朱贺

作曲 : 朱贺

巷口的那只猫还依然没着落

眼神还是一样迷茫的路过

那个想他的女人在异地漂泊

被命运束缚着他年少的轻狂呢

他想要飞拜托别让他受太多的罪

他又不是没有勇气去面对那么卑微

他想去追就放下该放的让他去追

他说如果那样一定很美

拜托别让他一番努力后换来是奢求

对他好点吧他舍得让你走

拜托别让他整夜都想着怎么才能够

别等他老了都不敢回头

他想要飞拜托别让他受太多的罪

他又不是没有勇气去面对那么卑微

他想去追就放下该放的让他去追

他说如果那样一定很美

拜托别让他一番努力后换来是奢求

对他好点吧他舍得让你走

拜托别让他整夜都想着怎么才能够

别等他老了都不敢回头

拜托别让他一番努力后什么都没有

他说就拼吧干了这杯酒

拜托别让他整夜都想着怎么才能够

来生做春风 流浪又自由

点击右上角即可分享
微信分享提示