技术解析

渲染 node 的 value 时 如何分割多个花括号作为单独的 textnode,以方便下次的单节点局部渲染?
0
2021-08-09 23:54:43
idczone
(使用原因:我的 js 插件用虚拟 dom 重构遇到的渲染问题。)
如:{a} 是 {b}
为了追求性能,提取所有的花括号作为虚拟 dom 。
这样简单的场景比较好提取出 "{a}"、 " 是 " 、“{b}” ,然后 创建 3 个 textnode 虚拟 dom
当 a 更新时 只更新 {a}所在的 textnode 即可。


问题是当 a 变成一个语法 嵌套多层花括号,双引号,内部混淆了转译的花括号时,如何提取出真正的{a},场景如:

{'{{{{{a}+1}+1}+1}+1}'==1?"a":"b"} 不是 {b}

我想提取出 "{'{{{{{a}+1}+1}+1}+1}'==1?"a":"b"}" 、 " 不是 " 和 " {b}" 有点烧脑。
百度一下有人提问过,回答是:“匹配嵌套的括号需要用到正则表达式中的平衡组语法,但遗憾的是 javascript 中不支持平衡组语法,所以单用一条正则表达式实现不了,需要用循环逐个字符处理。”

求彦祖们给个思路如何解决或绕开这个难点。
参考答案
https://www.php.cn/js-tutorial-390656.html
为啥用 regex ?处理这个你不怕"{"这样的问题吗。。。
显然必须要手动写 parser 做 ast

解决了。灵感来源: https://github.com/zhangzhaoaaa/anyJavascript/blob/master/%E5%BC%A5%E8%A1%A5js%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F%E6%97%A0%E5%B9%B3%E8%A1%A1%E7%BB%84%E5%8A%9F%E8%83%BD.md
贴上我的代码:


数据地带为您的网站提供全球顶级IDC资源
在线咨询
专属客服