0x00 概览lineup 项目地址（求赞求下载）：https://gitee.com/albert_zhong/lineuplineup 源文件 CDN（min 版本）：http://lib.albertz.top/lineup/lineup-min.jslineup 初代版本（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 来实现类似命名空间的效果。