依赖模型 | events |
复杂程度 | 高 |
使用频率 | 中 |
成员类型 | 静态模块 |
Std.template是一个模板模块,可以根据模板语法写一个模板区块,每次根据传入的数据而生成出对应HTML代码.
Std.template模板包含两种语法,一种是简写法,另一种是js本身的语法,当然,两者也可以混合使用.
简写语法可以满足大多操作,通常情况下都是使用这种写法,而JS语法则就和执行JS完全一样,可以进行任何操作,例如执行函数,定义变量等.
模板的标签以<? 作为开头,以?>作为结束,模板标签的首个字符代表了这个标签的作用,模板标签有以下这些类型:
字符 | 描述 |
= | = 符号表示直接输出传递数据中的某个变量,例如 <?=name?> 表示直接输出数据中的name变量 |
$ | $ 符号表示读取一个变量,例如 <?$abc?> 表示直接输出已经定义的变量 abc,如果这个变量没有定义,那么什么结果也不会获取到 |
# | # 符号表示这是一个简写语法的开头 |
/ | / 符号表示这是一个简写语法的结束 |
如果模板标签没有以上字符,那么表示这是一个原始JS语法.
模板中包含2个全局变量:
名称 | 描述 |
_print | 这个变量作用为保存要输出的字符串,当执行渲染模板的时候,_print 这个变量就决定了要输出的内容. |
_data | 这个变量为渲染模板时候的json数据. |
Object Std.template(String name);
Object Std.template(String name,String templateString);
new Std.template(Object option);
new Std.template(String templateString);
new Std.template(String name,String templateString);
名称 | 类型 | 描述 |
name | String | 模板的静态名称 |
templateString | String | 模板字符串内容 |
option | Object | 创建模板时候的参数选项 |
名称 | 类型 | 默认值 | 描述 |
text | String | null | 模板字符串 |
element | Object | null | 指定要从哪个DOM元素中读取内容作为模板字符串 |
url | String | null | 指定需要读取模板内容字符串的url地址 |
on | Object | null | 默认需要绑定的事件 |
名称 | 回调参数 | 描述 |
load | 无 | 当模板被载入的时候,load事件将会被触发. |
loadError | 无 | 当模板载入发生错误时候,loadError事件将会被触发. |
error | 错误文本 | 当模板进行分析或者编译时候,如果出现了错误,error事件将会被触发. |
1. 当直接使用静态方法Std.template的时候,如果传递的只有一个字符串参数, 那么就会返回之前保存的模板实例对象.
2. 如果直接使用静态方法Std.template的时候,如果传递的是2个参数, 并且两个都是字符串的时候,那么第二个字符串将会被当成模板字符串解析, 并且以第一个参数作为名称保存为静态模板,并且将其作为返回值返回.
获取变量:
<?=name?>
<?=value.data?>
<?$_data.name?>
if语句
<?#if name == "top"?>
<?=pageX?>
<?#elseif name == "left"?>
<?=pageY?>
<?#else?>
<?=pageN?>
<?/if?>
for语句
<?#for var i=0;i<10;i++?>
<?$i?>
<?/for?>
<?#for i=0;i<10;i++?>
<?#if i==5?>
<?#continue?>
<?#else?>
<?=i?>
<?/if?>
<?/for?>
while语句
<?#while size != 0?>
<?_data.size-=1?>
<?=size?>
<?/while?>
each语句
<?#each list?>
<?$index?>:<?$value?>
<?/each?>
<?#each list as index,value?>
<?$index?>:<?$value?>
<?/each?>
<?#each members as name,value?>
<?$name?>:<?$value?>
<?/each?>
获取变量
<?_print+=_data.name?>
<?_print+=_data.value.data?>
<?$_data.name?>
if语句
<?if(name == "top"){?>
<?_print += _data.pageX;?>
<?}else if(name == "left"){?>
<?_print += _data.pageY;?>
<?}else{?>
<?_print += _data.pageN;?>
<?}?>
for语句
<?for(var i=0;i<10;i++){?>
<?$i?>
<?}?>
<?for(var i=0;i<10;i++){?>
<?if(i==5){?>
<?continue;?>
<?}else{?>
<?$i?>
<?}?>
<?}?>
while语句
<?while(_data.size != 0){?>
<?_data.size-=1?>
<?=size?>
<?}?>
其他
<?
function abc(){
alert(123)
}
abc();
?>