使用频率 | 重要 |
所属模块 | Std.dom |
成员类型 | 静态行为函数对象 |
behaviorScript这个方法直接决定了script标签的执行方式.
可以把它理解成 "行为脚本",它可以让所有自定义type的script标签按照自定义的指定方式执行.
所有的script将会在DOM载入完成之后才会被加载.
StdJS内部默认有以下这些type类型的script标签行为:
type为text/std-animation的标签可以在内部放入css3 keyframe动画脚本, StdJS会将脚本解析,并且保存到Std.animation.data.keyframe中.
css中与Std.animation.keyframes模块可以直接使用.
(当然,这种方式还帮你解决了平台兼容性的问题.)
<script type="std-animation">
@keyframes animation1{
0%{
color:red;
background-color:blue;
}
50%{
color:black;
background-color:yellow;
}
100%{
color:rgb(112,32,342);
background-color:white;
}
}
@keyframes animation2{
from{
width:20px;
height:20px;
}
to{
width:80px;
height:20px;
}
}
</script>
当type为text/std-css-selector的时候,如果同时属性std-render-here为true的时候,StdJS会将这段包含css selector的script自动转换成html代码,并且替换这个script标签.
也就是说,如果你喜欢,你完全可以用css selector方式写来网页.
<script type="text/std-css-selector" std-render-here="true">
(.header>._left{left text}+._right{right text})+
(.body > ._content{body content})+
(.footer{footer text})
</script>
<div class="header">
<div class="_left">left text</div>
<div class="_right">right text</div>
</div>
<div class="body">
<div class="_content">body content</div>
</div>
<div class="footer">footer text</div>
当type值为text/std-template的时候,并且属性std-name不为空时,StdJS会自动将内容以模板方式解析并且储存到 Std.template.templates 中.
<script type="text/std-template" std-name="tpl1">
<span class="data1"><?=data1?></span>
<span class="data2"><?=data2?></span>
<span class="data3"><?=data3?></span>
</script>
Std.main(function(){
Std.template("tpl1").render({
data1:"hello",
data2:"StdJS",
data3:"------"
})
})
<span class="data1">hello</span>
<span class="data2">StdJS</span>
<span class="data3">-----</span>
当type为text/std-ui的时候,其内容也是以css selector形式存在的, 同时也会读取属性为std-name的值,script内容会自动被Std.ui.rule解析,然后根据std-name的值作为名称保存到Std.ui.rules中
现在你无需关心其中是如何运作的,如果需要了解Std.ui的css selector写法,可以参考 Std.ui模块的文档部分.
<script type="text/std-ui" std-name="demo">
(
HBoxLayout > Label.width_80{序号:} + SpinBox#IndexNumber[validator="Number"][invalidText="序号必须填写"]{999} + Label.width_80{模块名称:} + LineEdit[validator="String"][invalidText="名称必须填写"]#Name
),
(
HBoxLayout > Label.width_80{显示名称:} + LineEdit#ViewName[validator="String"][invalidText="显示名称"] + Label.width_80{Action类:} + LineEdit#ActionClassName[validator="String"][invalidText="Action类必须填写"]
),
(
HBoxLayout >
(
Label.width_80{所属分组:} + ComboBox#GroupID[validator="NonEmpty"][invalidText="所属分组必须选择"][valueMode="item"][textField="GroupName"][valueField="ID"]
)
+
(
Label.width_80{状态:} + HArrayLayout[level=3] > SwitchBox#ModuleStatus
)
),
(
HBoxLayout > Label.width_80{文本:} + LineEdit#ViewText
),
(
HBoxLayout > Label.width_80{描述:} + TextEdit#Description
)
)
</script>
当script标签type为text/std-read-file的时候,StdJS会使用ajax方法读取该标签上uri属性,等文件内容获取到之后,该script标签会被uri地址中文件内容替代.
(注意:该写法不适用于动态添加的script)
<script type="text/std-read-file" uri="/robot.txt"></script>
除了StdJS自带的几种行为脚本以外,还可以手动增加新的type类型,而且还非常容易.
唯一所需要做的就是在Std.dom.behaviorScript上增加一个静态函数即可,例如:
Std.dom.behaviorScript["text/my-behavior"] = function(type,element){
/*
* type 是 script标签的type属性
* element是script标签自身
*/
}
当网页中出现了type为text/my-behavior的script标签时候,以上函数就会被执行,具体怎么做?发挥你的想象力吧!