凯撒模板语法完全借鉴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}
用法:{if value} ... {/if}
只需要给元素加上属性:v-update="变量名"
请点击右边的按钮体验双向绑定
注意:在下面的例子中,变量a可以正常监听,但变量b是无法监听的(因为它不是全局变量)
核心肯定是通过Object.defineProperty进行监听,这个谁也跑不掉
为什么凯撒能在模板中混用全局变量?
模板语法只是一种书写方式,最终还是要将语法转换为JS原生语句进行执行,而转换为原生语句后是可以访问到全局变量的
为什么全局变量能被监听?
凯撒在解析模板语法的过程中,会通过正则表达式提取语法内所有可能的变量名(正则表达式不尽完善可能有bug),在最终执行原生语句同时对可能的每个变量进行拦截