iceView模板引擎
iceView是一套用于构建用户界面的渐进式JavaScript模板引擎,易于上手,性能强悍,吸取了Vue和微信小程序的优点,能通过简单的API来实现双向数据绑定,某个变量改变,并不会重新渲染整个视图,而是对应的「局部」视图发生改变,这保证了页面数据交互时的丝滑,而不会导致页面卡顿和闪烁。如果你用惯了vue或微信小程序的话,那么使用她的时候会非常顺手。在编写她之前我努力的研究了Vue的底层设计,最后编写出iceView,不过iceView更加干净高效,我修改了一些编写方式,向微信小程序靠拢了很多,也使其编写更加自由,一切花括号内皆为js原生表达式,你可以按照你的习惯随意编写逻辑和输出内容,无论条件判断,还是变量输出、函数输出都能满足你的要求。
iceView名字依然惯用了ICEUI其它插件的命名方式,小驼峰书写方式,ice为前缀,而使用过程中所有的前缀皆为 i- ,i代表着ice的首字母,就像vue中的 v- 是一个道理,请熟知。
如何使用
运行代码
模板语法
数据绑定最常见的形式就是使用 {{...}}(双大括号)的文本插值,不仅可以放置变量,也可以放置函数,以及三元运算,在大括号中皆为表达式!你可以用你最喜欢的原生方式来写,没有任何局限性,但是一定要记住,要有返回值,返回值为最后一个变量或者字符串,不然将以false返回。
下面的使用方式是完全合法的,重要的事情说三遍,双大括号中皆为表达式,原生逻辑随意写。
注意:定义变量或者函数的名称第一位不能为$
运行代码
条件语句
条件判断使用i-if指令,根据返回值true 或 false来判断是否显示,也可以使用i-show,两者的区别在于if的显示隐藏是通过增删node节点完成的,而show只是通过样式的display来控制现实隐藏。
运行代码
循环语句
循环使用i-for指令,绑定一个object或者array,默认数组的当前项的下标变量名默认为index,可通过i-index指令来重新命名;数组当前项的变量名默认为item,可通过i-item指令来重新命名;循环支持无限嵌套,也支持条件语句,支持宽松模式,花括号不是必须的,但是尽量写上。
运行代码
绑定事件
绑定事件使用i-onclick指令,该on指令支持原生的所有on事件,i-onmouseover、i-onmouseout……同时支持.stop阻止冒泡和.prevent阻止默认事件,语法为:i-onclick.stop。
绑定值可以为函数,也可以为表达式,请注意,如果为自定义函数,
运行代码
表单数据绑定
使用i-model指令来实现双向数据绑定,支持input、textarea、radio、checkbox、select等元素。
提示:iceView的i-model十分强大,不仅可以直接绑定多维数组,也可以在for循环中直接通过item动态绑定自身变量,这是小程序和vue所不具有的,至少你无需再通过监听事件来获取数组的索引值然后再修改数据,请看下面的示例。
除了i-model指令,还有一个i-bind指令,目前仅支持select元素,用于绑定一个数组来格式化select下拉选择项,这会十分方便,至少你不需要再select下写option的i-for循环了,而i-bind指令上还附带两个属性,i-value和i-name,i-value用于指定数组对象的字段名,这个字段名对应的字段值会放入option的value中,i-name同理,会将值放入option中,用于展示下拉选择项的名称,如果不指定i-value和i-name,会使用数组对象中的value和name值,具体请看下面的示例。
运行代码
生命周期
生命周期为onload函数,这个函数是由用户自定义的,可传可不传,onload会在程序初始结束后开始调用,常用于写异步获取数据接口。
运行代码
代码示例