0x00 概覽

lineup 項(xiàng)目地址（求贊求下載）：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

下面的代碼片段展示大多數(shù)的 lineup 特性

在你的 html 代碼中引用：
先在 dom 里 lineup 標(biāo)簽內(nèi)部寫入 lineup 代碼

再進(jìn)行 document 編譯

lineup 的基本語法是 元素名(參數(shù)) 內(nèi)容

0x01 新特性

省略元素名

將元素名變?yōu)榉潜剡x項(xiàng)。默認(rèn)為 span。

內(nèi)聯(lián)元素

有效解決了 lineup 代碼臃腫的問題。可以在行內(nèi)用花括號定義多個元素。

Python 膠水插件和更好的導(dǎo)入支持

之前的開發(fā)是使用 js module 作為標(biāo)準(zhǔn)。眾所周知 module 的 CORS 支持很差。故用 python 編寫了一個整合插件（link.py），可以直接以 lineup-min.js 導(dǎo)入。

直接作為編輯語言
之前的函數(shù)已經(jīng)滿足了作為開發(fā)語言的需求，本次補(bǔ)充的 compileHTML 和 compileXML 函數(shù)可以直接將 lineup 純代碼轉(zhuǎn)為完整的 html 文件。

0x02 實(shí)現(xiàn)原理

要理解以下原理，需首先掌握樹結(jié)構(gòu)的生成和遍歷算法。

任何編譯器的編譯原理大致為 原來的代碼 -> 語法樹 -> 編譯成的代碼。

所以需要一個 parse 函數(shù)生成語法樹，一個 compose 函數(shù)將語法樹遍歷并且重新寫成別的語言。

用這種算法簡單理解就是 順著代碼內(nèi)容推進(jìn)語法樹 套正則表達(dá)式。
生成出來的語法樹大概是這樣的

而組合的算法更加類似于翻譯

最后值得一題的是 python 的膠水代碼。短短 30 行代碼可以解決大多數(shù)的 module 轉(zhuǎn)純 js 代碼的問題。通過正則匹配來移除 import 和 export 語句，用 object 來實(shí)現(xiàn)類似命名空間的效果。