0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

DSL模板怎么动起来的?

汽车电子技术 来源:程序猿搬砖 作者:坏人 2023-03-03 10:17 次阅读

一、为什么要使用到编译器前端技术?

跨平台模板需要根据不同的规则得到不同的展示结果,这就需要对数据进行运算。

一开始是考虑使用一门脚本语言来实现数据的运算,如javascript通过嵌入的js引擎如QuickJS来执行JS脚本语言达到数据运算的结果。

但考虑到运算表达式的要求没有那么复杂,加之以前对编译器前端技术的了解也没有一个合适的场景去落地。刚好有这么一个契机,就打算自己实现一个DSL来运算模板中的动态数据。

二、思路与原理

实现一个DSL有几个步骤:

第一步: 词法分析

第二步: 语法分析

第三步: 语义分析

在词法分析的时候,需要用到一种叫 有限自动机 的一个计算机模型。

它通过在不同状态之间的迁移变换分析我们给定的字符串中的词语(Token),将字符串按我们指定的规则切分成多个Token。

词法分析完成之后,开始进行语法分析。与词法分析一样,按我们指定的规则将一个或多个Token组合在一起形成一个一个的表达式。

比如加减乘除表达未,比较表达未,三目运算表达式。通过指定运算符之前的优先级与左右结合优先级,最后生成一个树,我们叫它抽象语法树(AST). 通过对AST进行深度优先遍历,得到最终表达式的结果。

当前的DSL并不是一个完整的脚本语言,我们按需要实现特定的运算功能即可。、

有了这些表达式,我们就可以实现数据的动态计算绑定,但这还不够。最基础的版本至少还需要实现类似vue或者微信小程序中的for与if语句。

最终我们将呈现如下的DSL模板语言:

<View>
  <Label id="label1" text="{{ a * b > 100 ? "a * b比100大" : "a * b比100小"  }}">class="hljs-keyword"Label>
  <Label id="label2" if="{{ a > b }}">class="hljs-keyword"Label>
  <Label id="label3" for="item in items" text="item.name">class="hljs-keyword"Label>
class="hljs-keyword"View>

通过这个布局模板我们要得到什么样的结果呢?

1.label1 标签中的text运算得到最终显示的结果,而a 与 b则是我们上下文中给定的变量或者是字典中的key

2.label2 通过计算if中的表达式得到此Label是否需要显示

3.label3 则通过循环items得到多个标签

通过自定义DSL我们可以按我们自己的指定的规则来计算出想要的各种表达式了。

接下来,我们就从第一步词法分析开始吧。

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • 数据
    +关注

    关注

    8

    文章

    6790

    浏览量

    88722
  • JS
    JS
    +关注

    关注

    0

    文章

    78

    浏览量

    18050
  • javascript
    +关注

    关注

    0

    文章

    515

    浏览量

    53743
收藏 人收藏

    评论

    相关推荐

    让PMSM简单的动起来的话,需要调用哪些头文件?

    让PMSM简单的动起来的话,需要调用那些头文件,最好解释下作用。手头有控制器,但代码太多是在看不明白。先谢过各位大佬了
    发表于 04-26 07:34

    如何用STM32F051把开关磁阻电机驱动起来啊?

    什么样的PWM波形呢?有没有大神指导一下啊~只要动起来就行,不需要闭环什么的呢,求程序啊啊啊
    发表于 05-07 06:32

    请问怎么使无刷电机动起来,就单单动起来

    本人是51单片机学习者,刚刚接触无刷电机,但是连怎么让它动起来都搞不明白,各位可以分享一下吗?不胜感激啊,我现在就想让它动起来先而已
    发表于 04-24 00:55

    【Landzo C1试用体验】+第二篇 :动起来,生活才更精彩!

    经过不懈努力,终于完善了组装,现在可以上机器人小车动起来了,动起来,才有美感家成就感。下面上图,本来要上传视频的,但是不怎么到怎么弄,要先传到优酷,在链接网址好像。下次有空再搞视频上传。在这里说两个
    发表于 06-02 18:55

    怎么把自定义时间像时钟一样动起来

    自定义之后的时间就停在定的时间那 不会像时钟一样动起来 怎么加循环让它动起来
    发表于 09-06 16:48

    如何让智能小车动起来?怎样去编写其程序?

    如何让智能小车动起来?怎样去编写其程序?怎样去选择智能小车的硬件?智能小车的硬件是如何进行连接的?如何从零开始用51单片机去实现智能小车的控制?
    发表于 07-14 06:48

    如何让无刷直流电动机动起来

    如何安排PWM序列极对数是4的电机的定转子磁极排布式如何的呢?如何让无刷直流电动机动起来?有哪些步骤?
    发表于 08-03 06:48

    如何从零开始制作51单片机控制的智能小车让它动起来

    如何从零开始制作51单片机控制的智能小车让它动起来
    发表于 10-21 07:43

    Debian69系统启动起来有点卡怎么解决?

    Debian 69系统启动起来有点卡
    发表于 09-12 07:50

    苹果新机拉货PCB软板双雄动起来

    苹果新机预计9月上市,相关供应链已经开始动起来,PCB软板双雄臻鼎-KY、台郡一致表示,随着大客户新机拉货,营运自7月起增温,并可望一路旺到11月左右,但仍需关注美中贸易战对客户拉货与终端市场买气的影响。
    的头像 发表于 07-11 17:17 3093次阅读

    让汽车仪表组上的指针动起来

    让汽车仪表组上的指针动起来
    发表于 10-31 08:23 0次下载
    让汽车仪表组上的指针<b class='flag-5'>动起来</b>

    你知道操作系统是如何启动起来的吗

    操作系统被称为“第一个程序”,the first programme,原因很简单,只有当操作系统启动起来后才能运行我们编写的程序,那么你有没有想过这个问题:操作系统是怎样启动起来的呢? 实际上这个过程就像发射火箭一样有趣 ,看完这篇你就明白啦。
    的头像 发表于 03-31 15:45 756次阅读
    你知道操作系统是如何启<b class='flag-5'>动起来</b>的吗

    BeagleBone AI-64、Servo Cape和让电机动起来

    电子发烧友网站提供《BeagleBone AI-64、Servo Cape和让电机动起来.zip》资料免费下载
    发表于 07-12 10:51 0次下载
    BeagleBone AI-64、Servo Cape和让电机<b class='flag-5'>动起来</b>

    步进电机如何让动起来?步进电机转动原理

    42步进电机的步距角为1.8°,是由定子和转子的齿数共同决定的,定子有48齿,转子有50齿,具体是怎么算的,感兴趣的同学可以自行学习,今天的重点是让步进电机如何让动起来
    发表于 04-01 10:40 1884次阅读
    步进电机如何让<b class='flag-5'>动起来</b>?步进电机转动原理

    e络盟互动社区发起“动起来”设计大赛

    安富利旗下全球电子元器件产品与解决方案分销商e络盟发起了“Start a Movement动起来”设计挑战赛,将选出 20 名工程师构建包含运动组件的自选项目。20名挑战者将获得由Analog
    的头像 发表于 09-23 10:30 272次阅读
    e络盟互动社区发起“<b class='flag-5'>动起来</b>”设计大赛