jCT 在实战中洗礼，jCT会成为终极的javascript前台模板么?

achun.shx

SVN已经更新.下载jCT最新版本

写在前面
自从jCT 3以来，jCT的设计思路已经完全变成嵌入式javascript,也就是说像php和html混写的文法一样的去写javascript和html混写的前台模板。
现在正在用jCT 3来制作一个站点 www.91mh.net ,还没有做完，在制作的过程中发现：嵌入javascript的写法虽然很方便，可是当大量的javascript脚本和html混在一起的时候，看着就不舒服了，为了改进这个，我要想办法把javascript分离出来写，这样就变成了：
html代码，嵌入javasctipy模板代码，外部扩展javascript代码（对象）的结构，事实上当我改进的同时我也有了重大发现：

采取嵌入式javasctipy的模板，通过javascript的灵活运用，能更方便更干净的完成模板设计。

也就是说jCT的设计思路在嵌入式javascript的基础上又增加了力求方便干净的目标，于是就有了下面的新的jCT介绍。

写完后感觉现在的jCT：
彻底的嵌入式javascript模板
彻底的采用javascript语法
可以用外部对象进行方便的实例扩展
浏览得到视图前后和浏览模板源文件具有一致性
代码很简洁清晰可以自己定义文法标识
没有采用一个正则，速度有保障

有一种javascript模板技术走到终点的感觉，我想不到还有什么可以重大改进的地方（小的改进就不说了）。

jCT会成为终极的javascript前台模板么?



=====================================================================
jCT全称:

javaScript Common Templates  就是 javaScript 共用模板

属于WEB开发模板技术的一种.jCT用javaScript写成,通常工作于浏览器客户端.

基本功能:

作为模板技术,完成后台数据与htm模板(jCT模板)的组装,得到最终表现代码是jCT的基本功能.

设计理念:

作为模板技术,jCT仅仅负责把模板javaScript对象化.并提供数据组装文法.
从文法形式上看jCT的文法极其类似php,aps,jsp的文法,也就是嵌入html模板文法
这种文法,事实上是嵌入了javaScript脚本,采用完全与javaScript脚本一致的语法来书写模板,达到了与javaScript完全兼容.
因此jCT本身的功能并不直接参与获取后台数据.与如何实施表现.这些功能可以通过书写模板的时候直接写入进去,反正都是javaScript脚本.或者采取其他的手段从外部控制.
由于在实际的应用中业务行为可能很复杂,jCT提供了子模板对象的支持.从jCT对象的最终形式 javaScript 对象来说,这就形成了一棵对象树,而且这个对象树的组织完全是由模板代码决定.

调用:

jCT本身没有规定必须如何调用jCT,对应用来说,jCT就是一个根据提供的文本模板来生成jCT实例对象的模板编译器
而这个可以组织数据得到表现代码的实例对象具体都做了哪些和应用有关的动作,完全有模板的内容决定.毕竟所有的执行代码都在模板里,都是使用者自己写的.

var instance=new jCT(txt);//构建jCT对象,仅仅准备基础数据，txt就是模板源文件
instance.Build();//这才是真正的自构建执行 :
构建完成了，如何执行呢?事实上根本就不存在执行这个说法,因为所谓的执行就是去运行txt模板源代码里定义的方法，由于代码是使用者自己写的，都定义了什么方法，书写者是知道的，比如说模板源代码里定义了方法hello,要执行hello的话就
instance.hello();就行了。jCT是如何做到这样的，请继续看。



jCT是如何构建实例的:


事实上,jCT并不直接构建出完整的jCT实例,jCT仅仅是生成一个可以自构建的对象.这个对象什么时候需要构建,什么时候需要执行(装配数据得到表现代码),jCT并不负责,这就需要应用里有一个触发自构建对象进行构建和执行的开始.
jCT这样做的原因是考虑到实例有可能重新构建,所以干脆把这个构建的任务交由实例对象自己完成.


jCT实例如何运行:


因实例是自构建的,在实现上要保留一些成员函数和成员对象来满足自构建的需求.最重要的保留成员有:

• Fn      保留对象,供jCT实例使用,不能对Fn已有的属性修改
  
• Build   保留方法,模板构建方法
• GetView 保留方法,获取装配数据后的表现代码方法
• Extend  保留方法,递归扩展jCT对象和子jCT对象
• RunNow  特例方法,用户可以自实现这个方法,
        此方法在Build后,Extend中自动运行,
• ExecChilds(childs{},functionname String),保留方法提供了便捷的操作
        执行childs jCT对象,某个方法,默认是Exec方法
• Buildchilds(childs[]), 保留方法提供了便捷的操作
        执行childs jCT对象的Build方法,默认所有的childs jCT对象

RunNow就是最重要的方法了,是实例开始运行的起点,可以在模板源代码里直接定义此方法来运行.由于这个方法是在Build后运行的,而且可以自定义,那所有复杂的变化都会围绕这个的用法发生变化
GetView 方法内部的代码就是经过jCT编译转化过来的使用者自己写的模板代码（非成员部分）。当你实作一个jCT实例并Build()后，你可以通过GetView.toString(),查看jCT到底把模板编译成了什么，同时也就明白了jCT的原理，明白jCT的方法具有很高的效率.
Extend 对jCT的影响也是巨大的,原本jCT的文法虽然不算复杂,把嵌入式javascript语句和html混合的代码看上去很纷乱,引入Extend后,这些嵌入的javascript语句可以从html模板中分离出来。这样将形成这样的文件结构：

• 嵌入javasctipy代码的jCT模板文件,通常就是html文件啦
     依照jCT的文法形式书写嵌入式javasctipy代码,
     这些代码经过jCT编译后会得到jCT实例对象
     重要的是里面含有RunNow的定义，RunNow里有
     this.Extend(obj);
  
• 用来扩展jCT实例对象的javascript文件
     因为jCT实例对象有自扩展方法Extend，所以这种文件里面直接写下一个期望得到jCT实例对象就行了，这个对象就是上面this.Extend(obj);里的obj，例如：
  var obj={
    RunNow:function(){alert('hello jCT');},
    Exec:function(D){document.body.innerHTML=this.GetView(D);}
  }

jCT就是通过这样的方法完成扩展.

jCT文法定义:

首先jCT的语法标记是可以自己定义的，当然jCT已经为您预先定义了3种最常用的语法标记,Fn.Tags定义了这个，具体代码如下：
Tags:{//几种不同的模板定义风格
        comment:{//注释标签风格
                block:{begin:'<!---',end:'-->'},//语法块标记
                exp:{begin:'+-',end:'-+'},//取值表达式
                member:{begin:'/*+',end:'*/'},//定义成员语法标记
                memberend:{begin:'/*-',end:'*/'},//定义成员结束语法标记
                clean:{begin:'<!--clean',end:'/clean-->'}//清理标记
        },
        script:{//脚本标签风格
                block:{begin:'<script type="text/jct">',end:'</script>'},
                exp:{begin:'+-',end:'-+'},
                member:{begin:'/*+',end:'*/'},
                memberend:{begin:'/*-',end:'*/'},
                clean:{begin:'<!--clean',end:'/clean-->'}
        },
        code:{//code标签风格
                block:{begin:'<code class="jct">',end:'</code>'},
                exp:{begin:'+-',end:'-+'},
                member:{begin:'/*+',end:'*/'},
                memberend:{begin:'/*-',end:'*/'},
                clean:{begin:'<!--clean',end:'/clean-->'}
        }
}


也就是说jCT的有4类文法标记

• 语句块block:  用来书写javascript语句，或者标示一个成员的界限
• 成员定义member:用来定义jCT实例对象的成员函数或者子jCT实例对象
  
• 取值表达式exp: 用来书写javascript值表达式
  
• 清理标记clear:用来完成一致性设计，参见早期文档

由于member在定义子jCT实例对象的时候需要一个结束位置定义,才有了memberend,并且member和memberend必须包括在block标记内。而exp是不应该出现在block内的。通过这些标记，就可以写javascript代码，定义成员函数，定义子jCT实例。这整个就是在用另一种排版写javascript代码，当然是全兼容javascript了.
由于成员函数和子jCT实例对象都是采用的同一个标记，为了区分他们的不同，简单的在实例名称的前面加一个符号@以示区分,下面是个函数定义:
<!---/*+hello*/
alert('hello');
-->

下面是个子jCT实例定义：要注意子实例定义要有开始，有结束
<!---/*+@hello*/-->
<h1>hello</h1>
<!---/*-@hello*/-->

并且在jCT编译模板阶段会自动根据第一个出现的block去自动判断采用那个文法风格标记
如果你有自己的想法，那就自己定义一个风格吧。

例子：
请看我博客里的http://achun.javaeye.com/category/33268 jCT专题，里面有最简单的例子，另外我更希望感兴趣的你能直接提出html代码和需求，我们讨论如何用jCT的方法写出.


===============================================
由于是边改边发，并且通过实战检验，所以例子暂时就不写了，如果感兴趣，可以看一下 www.91mh.net/91mh/index.html 的模板源代码。

[ 本帖最后由 achun.shx 于 2008-9-7 22:01 编辑 ]

2gua