空文档运行
打开IDE
模板语法介绍

写在前面

凯撒模板语法完全借鉴VUE的原理,但在语法特性上更易用,它可以实现动态数据监听,数据的双向绑定

支持在模板中使用全局变量、全局函数,数据监听只能在一个对象上才能发挥作用,所以当变量是一个全局string时,并不会被监听

如需绑定事件,请使用参考事件文档介绍.on()、.click()...手动绑定

如何使用

$('div').tpl(data); 请点击右边按钮体验

data必须是一个object对象!

整个渲染过程是同步的,所以你可以在渲染语句后面继续写其他js代码

变量名

用法:${value}

支持三元运算:${value ? value : 'test'}

支持函数:${function()}

末尾不能加 ; ,复杂的语法必须使用括号

遍历数据

用法1:{loop list value} ... {/loop}
用法2:{loop list key value} ... {/loop}

loop不能用在标签属性中

if 判断类用法

用法:{if value} ... {/if}

if不能用在标签属性中

数据双向绑定

只需要给元素加上属性:v-update="变量名"

请点击右边的按钮体验双向绑定

全局变量监听踩坑注意

注意:在下面的例子中,变量a可以正常监听,但变量b是无法监听的(因为它不是全局变量)

数据监听原理

核心肯定是通过Object.defineProperty进行监听,这个谁也跑不掉

为什么凯撒能在模板中混用全局变量?

模板语法只是一种书写方式,最终还是要将语法转换为JS原生语句进行执行,而转换为原生语句后是可以访问到全局变量的

为什么全局变量能被监听?

凯撒在解析模板语法的过程中,会通过正则表达式提取语法内所有可能的变量名(正则表达式不尽完善可能有bug),在最终执行原生语句同时对可能的每个变量进行拦截