什么是 dry-lang
dry-lang 是一个基于 JavaScript 的模板引擎,可以自定义模板语言,支持模板热替换、模块化、局部模板等特性,非常适合前端开发使用。
如何安装
npm install dry-lang
如何使用
单文件模板
在单文件中定义模板。
<!-- index.html --> <section class="article"> <h1>{{ title }}</h1> <article>{{ content }}</article> </section>
多文件模板
使用 partial
指令加载局部模板。
-- -------------------- ---- ------- ---- ----------- --- ------- --------------- ------ ----- ------- ----- -- ----------------- -- ------------------ -- -------------------- ------ ---------
<!-- index.html --> {{partial('header.html')}} <section class="article"> <article>{{ content }}</article> </section>
自定义模板指令
-- -------------------- ---- ------- -------------------- --------------- - ----- - ---- ------ - - -------- ------ --- -------------------------- - -------- - -------------------- ------ --- - - ---
在模板中使用自定义指令。
{{ log "Hello, World!" }}
示例代码
-- -------------------- ---- ------- ----- --- - -------------------- -------------------- --------------- - ----- - ---- ------ - - -------- ------ --- -------------------------- - -------- - -------------------- ------ --- - -- --- ----- -------- - - --------- ----- ------ ------ --------- ----- ---------- ------- ------ -------------------------- ----- ------------- -- --- ------ --------- ---- --------- -- ------ -------- --- -- ---- -------- ---- -- --- - -- ----- -- ------ - ------- -- ------ -- ----- -- --- ------- --------- ---- --------- -- ------- -------------------------- ------- ------- -- --- -------- - --- ---------------------- - ------- - ------ -------- -- ---------- --------- -------- ----- -------- ------ ------- ------ ------ -- ----- ---- --- -------------------------------------- - ----------------------------------------------------------- -------- ----------------------------------------------------------------------------------