首页 教程 API文档

行为脚本

2015-11-16 15:57:15

属性

使用频率 重要
所属模块 Std.dom
成员类型 静态行为函数对象

描述

behaviorScript这个方法直接决定了script标签的执行方式.

可以把它理解成 "行为脚本",它可以让所有自定义type的script标签按照自定义的指定方式执行.

所有的script将会在DOM载入完成之后才会被加载.

StdJS内部默认有以下这些type类型的script标签行为:

std-animation:

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>

text/std-css-selector:

当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>

text/std-template:

当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>

text/std-ui:

当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>

text/std-read-file:

当script标签type为text/std-read-file的时候,StdJS会使用ajax方法读取该标签上uri属性,等文件内容获取到之后,该script标签会被uri地址中文件内容替代.

(注意:该写法不适用于动态添加的script)

例子


<script type="text/std-read-file" uri="/robot.txt"></script>

增加自定义的type类型方法:

除了StdJS自带的几种行为脚本以外,还可以手动增加新的type类型,而且还非常容易.

唯一所需要做的就是在Std.dom.behaviorScript上增加一个静态函数即可,例如: 


Std.dom.behaviorScript["text/my-behavior"] = function(type,element){
    /*
     * type 是 script标签的type属性
     * element是script标签自身
    */
}

当网页中出现了type为text/my-behavior的script标签时候,以上函数就会被执行,具体怎么做?发挥你的想象力吧!