精简事件和表达式

为了简化页面制作,进一步消除页面上的 Javascript 代码,root.js 提供了精简事件和事件表达式,还可以在目标上绑定事件。

精简事件

上例中的onclick-onchange-即为精简事件,其中的减号-表示“精简”的意思,以和原生的事件名称区分开来。而且,精简事件只能以属性形式写在标签上。精简事件支持所有客户端事件。

事件表达式

精简事件的值即为事件表达式。上例中reload: #Span1update-value: #TextBox1 <- $(#Select1),与之对应的 Javascript 代码为 onclick="$('#Span1').reload()"onchange="$('#TextBox1').update('value', $('#Select1').value)"

事件表达式格式为method: selector <- value,共分三部分:方法名、CSS 选择器和方法参数,其中methodselector之间使用冒号分隔:selectorvalue之间使用左向箭头号分隔<-,表示将参数应用到方法上。其中selectorvalue可以省略,省略selector表示调用对象本身的方法,省略value表示调用无参方法。特别说明:方法名各单词之间使用-分隔,最后一个-之后的值为方法的第一个参数。多个selectorvalue之间使用逗号分开,method不支持设置多个。多个表达式之间使用分号;分隔。value参数支持 Express 表达式

以下均为合法的表达式格式。

事件表达式的应用暂时比较少,会慢慢扩展到更多标签上。

上例实现了一个 SELECT 扩展标签的三级联动。

通用方法set

现在所有原生标签和扩展标签上都支持 set 方法,用于在事件触发时重新设置元素属性的值。

理论上可以使用set方法设置任意元素的任意属性,set方法的作用就是将属性赋值转化为方法来表述。上面value+为增强属性,请参阅增强属性

反向事件绑定

另一种方式是在目标标签上绑定事件监听,有时逻辑更加清晰。例如上面 SELECT 三级联动例子,可以这样写:

即属性名为方法名称加上-on后缀,属性中的表达式方法的位置换成事件名称,可以省略on前缀。后面部分与正向的事件表达式相同。每个扩展标签只有少量方法支持这么做,会在相应的标签文档中说明。事件名只支持一个,但是选择器支持多个,使用逗号分隔。更多示例:

服务器端事件的状态事件

服务器端事件中,执行完成后会触发几个客户端事件,例如onclick+对应的是onclick+successonclick+failureonclick+exceptiononclick+completion。这几个事件也支持精简格式,例如:

事件之间的关系

在 root.js 框架上,同一个事件名,会有不同的用法并衍生好几个状态事件,以onclick事件为例,总结如下:

除了服务器端事件onclick+外,每个客户端事件都有自己的精简格式,即在每个事件之后加一个减号-,也是本文主要介绍的内容,精简格式只能在属性上定义。


参考链接


微信公众号
码农老吴  |  星源工作室  |  开发月志  |  问题反馈
联系我们:wu@qross.io     手机/微信:18618171102
京 ICP 备 20027445 号
$(h1)!