做WEB应用中有一个问题就是数据和表现的分离,也就是大家讨论的MVC模型中的一个重要环节.在具体实现上普遍用的是模板技术,模板技术基本可以分成两大方向后台模板和前台模板,后台模板的模板优秀的很多,前台的好像优秀的只有JST(TrimPath Template)了.我在使用中发现JST在某些使用上不能满足我的需求,就动手写了一个javascript 的前台模板,已经用这个开发了一个小项目,自己还比较满意.这里先写个小文档向大家介绍一下这个模板.
...jCT模板...
=================================================================
关于jCT这个名字:
j: JavaScript ..........此模板是 JavaScript 的实现版本
CT: Comment Template ...注释模板
设计目标:
1. 表现 和 数据 分离
2. 具有模板 存储 设施,可反复使用存储的模板 也就是支持 AJAX
3. 浏览器中模板装配(执行)前后显示效果相同 一致性
语法元素:通过三种语法元素定义
1. +-值表达式-+ ...变量取值,可以使用函数
2. ....html的注释标记
3. 字符串 .........非上述的内容被认为是字符串
1,2的语法只能存在于 3.字符串 中
1,2的语法相互 '不能嵌套'
名词解释:
模板: 由jCT语法组成的文本/字符串
视图: 期望经jCT处理得到的结果
数据: 为生成视图准备的数据
解析: jCT通过 数据 和 模板 得到 视图 的过程
剔除: 剔除
因为加入了jCT语法后,文件没有通过 解析 前在普通浏览器上直接查看得不到
设计初衷的效果,因此,剔除用来在不 解析 的情况下得到浏览器的最佳查看效
果
存储: 存储分离存储原文输出
为了能输出包含jCT语法的字符串可以使用原文输出'暂时没有实现'
调用: jCT(todo,txt)
todo:参数为复用型,通过类型和值进行判断
typeof(todo):
string:
'!!':剔除
'parse':只解析不装配
object:用于得到视图的数据
txt: 模板
typeof(txt):
undefined:直接取 document.body.innerHTML 为 模板
string:视 txt 模板
返回值: {ok:bool,txt:string,fun:{id:function(dat),...}}
ok:执行是否成功
txt:返回 视图 代码
fun: 存储函数 列表
dat:数据参数
返回值:视图
语法定义:
保留字:
jCT内部需要使用的变量, 模板 和 数据 中不要起以下的名字
__CTD__
__CTV__
__CTA__
变量命名约定:
考虑到 数据库表字段的名字大多是小写 为了不造成冲突 模板 中采用全'大写变量'
语句: 语句包含在 之间
结构语句列表:由结构语句的首单词决定
end:.........结束一段代码块 比如 if/elseif/else/for/while都有一个块结束
enddo:.......do循环结束 end 结束的特例
do:..........do循环
while:.......while 循环
for:.........for 循环
continue:....循环中的 continue 语句
break:.......循环中的 break 语句
if:..........if
elseif:......else if 语法
else:........else
switch:......switch
case:........switch 中的 case
default:.....switch 中的 default
function:....自定义定义函数
with:........with
var:.........定义变量
run:.........直接运行的 javascript 代码
注释:
无法理解的结构语句视为 html 注释,另外'jCT语法'本身也支持注释注释,与
html 注释不同
1. 注释文字 可以在 剔除 中作为仿页面数据填充
2. 非 结构语句列表 中的语句被认为是 html 注释,当
然可以直接用作 jCT语法 注释
3. 小段的注释
例子:/*
此段落不会出现在 视图 中
此段落会出现在 视图 中
*/
剔除: 剔除
例子:/*
管理员
会员
*/
剔除后/*
管理员
*/
当然浏览器认为''是注释,效果等同/*
管理员
*/
存储:
1. 存储
管理员
存储
管理员
原文输出
例子:/*
管理员
*/
值表达式: +-值表达式-+ 由 变量,函数,运算符 组成
例子:/*
管理员:+-uinfo.name-+
用户:+-uinfo.name-+
*/
注释: +---值表达式-+ 也就是说开头两个字母为 -- 表示注释
==========================================================================
除了原文输出暂时没有实现实现外其他的都实现了,代码200行左右.原文输出实现并不复杂,不过由于现在没有这个需求,所以就不写了.需要的话可以随时写的.
要说的是上面描述中用到的 #,!,--,+-呀这些符号都是精心挑选的,几乎可以用的任何地方,保证不会有2异性问题,
相比之下{},[]等就不那么好使了.
其实按照JST的原理实现一个前台模板并不难.如果你感兴趣自己也可以实现一个.
阅读(1555) | 评论(0) | 转发(0) |
