自制标记编程语言 – Lineup v2.2 新特性 && 原理
0x00 概览
lineup 项目地址(求赞求下载):https://gitee.com/albert_zhong/lineup
lineup 源文件 CDN(min 版本):http://lib.albertz.top/lineup/lineup-min.js
lineup 初代版本(markup)介绍视频:https://www.bilibili.com/video/BV1sW4y1L7a3
下面的代码片段展示大多数的 lineup 特性
在你的 html 代码中引用:
先在 dom 里 lineup 标签内部写入 lineup 代码
再进行 document 编译
lineup 的基本语法是 元素名(参数) 内容
0x01 新特性
省略元素名
将元素名变为非必选项。默认为 span。
内联元素
有效解决了 lineup 代码臃肿的问题。可以在行内用花括号定义多个元素。
Python 胶水插件和更好的导入支持
之前的开发是使用 js module 作为标准。众所周知 module 的 CORS 支持很差。故用 python 编写了一个整合插件(link.py),可以直接以 lineup-min.js 导入。
直接作为编辑语言
之前的函数已经满足了作为开发语言的需求,本次补充的 compileHTML 和 compileXML 函数可以直接将 lineup 纯代码转为完整的 html 文件。
0x02 实现原理
要理解以下原理,需首先掌握树结构的生成和遍历算法。
任何编译器的编译原理大致为 原来的代码 -> 语法树 -> 编译成的代码。
所以需要一个 parse 函数生成语法树,一个 compose 函数将语法树遍历并且重新写成别的语言。
用这种算法简单理解就是 顺着代码内容推进语法树 套正则表达式。
生成出来的语法树大概是这样的
而组合的算法更加类似于翻译
最后值得一题的是 python 的胶水代码。短短 30 行代码可以解决大多数的 module 转纯 js 代码的问题。通过正则匹配来移除 import 和 export 语句,用 object 来实现类似命名空间的效果。