jCT 第三版简要文档

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

更多信息请看我博客里的jCT专题 ，或者jCT开源主页示例 里面有最简单的例子，另外我更希望感兴趣的你能直接提出html代码和需求，我们讨论如何用jCT的方法写出.

 

========此版本已经废弃，新版文档======

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就是模板字符串,不是指模板的url地址,是内容
instance.Build();//这才是真正的自构建

执行 :

构建完成了，如何执行呢?事实上根本就不存在执行这个说法,因为所谓的执行就是去运行txt模板源代码里定义的方法，由于代码是使用者自己写的，都定义了什么方法，书写者是知道的，比如说 模板源代码里定义了方法hello,要执行hello的话就
instance.hello();就行了。jCT是如何做到这样的，请继续看。

jCT是如何构建实例的 :

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

jCT实例如何运行 :

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

1. Fn       保留对象,供jCT实例内部使用,不能对Fn已有的属性修改.
2. Build    保留方法,模板构建 方法.
3. GetView  保留方法,获取装配数据后的表现代码.
4. GetViewContinue 保留方法, 用于递归的调用情况, 写入 输出 缓存,不输出
            事实上GetView是先清空输出缓存,
            然后调用GetViewContinue
            最后输出缓存
   
5. Extend   保留方法,以参数对象 扩展jCT 实例 和子jCT对象.
6. ExtendTo 保留方法,扩展jCT实例到参数对象.
7. RunNow   特例方法 ,用户可以自实现这个方法,
            此方法在Build,Extend, ExtendTo 中自动运行
8. ExecChilds 保留方法,执行子jCT对象的某个方法,默认是Exec方法
9. Buildchilds 保留方法,执行 子 jCT对象的Build方法,默认所有的 子 jCT对象
   

RunNow 就是最重要的方法了,是实例开始运行的起点,可以在模板源代码里直接定义此方法来运行.由于这个方法是在Build后运行的,而且可以自定义,那所有复杂的变化都会围绕这个的用法发生变化
GetView 方法内部的代码就是经过jCT编译转化过来的使用者自己写的模板代码。当你实作一个jCT实例并Build() 后，你可以通过GetView.toString(),查看jCT到底把模板编译成了什么，同时也就明白了jCT的原理，明白jCT的方法具有很高的效率.

Extend/ ExtendTo 对jCT的影响也是巨大的, 原本jCT的文法虽然不算复杂,把嵌入式javascript语句和html混合的代码看上去很纷乱,引入Extend后,这些嵌入的javascript语句可以从html模板中分离出来。这样将形成这样的文件结构：

1. 嵌入 javasctipy代码的 jCT 模板 文件,通常就是html文件啦
      依照jCT的文法形式书写嵌入式 javasctipt 代码,
      这些代码经过jCT编译后会得到jCT实例对象
      重要的是里面含有 RunNow的定义，RunNow里有
      this.Extend(obj);
   
2. 用来扩展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类文法标记

1. block : 语句块,用来书写javascript语句，或者标示一个成员的界限
2. member: 成员定义,用来定义子jCT模板源码段或定义成员函数或普通的成员对象
   
3. exp   : 取值表达式,用来书写javascript值表达式
   
4. clear : 清理标记,用来完成一致性设计 ，
   一致性设计指的是在模板没有被解析并执行前,仅仅在浏览器上打开模板源文件,就可以看到和解析并执行后一致的样式效果
   

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

<!---/*+hello*/
alert('hello');
-->

下面是个普通成员对象定义 :

<!---/*+$hello*/
['hello']
-->

下面是个子jCT实例定义 ：要注意子实例 定义要有开始，有结束

<!---/*+@hello*/-->
<h1>hello</h1>
<!---/*-@hello*/-->

也就是说这3中不同的判断是通过'+'后面的第一个字符判断的.

事实上有了 Extend, ExtendTo 后 成员函数和成员对象的定义基本就用不到了

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

 

jCT API :

 

在经过上面 介绍的 概念后,这里给出jCT的内置API接口定义

1. jCT 调用
   格式: var jctInstance = new jCT(txt,path);
   参数:
       txt  可以为空 模板源代码,就是一个string,不是url地址 ,
       path 可以为空 模板源代码文件所在路径,这个是个实用便捷的参数,在笔者的应用里他被子模板使用,在你的应用里用不到的话,就忽视他就行了
   返回:jCT的实例,但是这个实例没有进行构建
   注 :jCT并不负责获取模板的内容,获取后台数据,装配视图到DOMTree中.
   根据应用和使用的其他框架,使用者自行 获取模板的内容,获取后台数据,并通过GetView获得视图,然后自己写代码把视图装配的 DOMTree.
2. 构建实例, 并执行 RunNow方法,如果有的话
   格式: jctInstance. Build(txt,path);
   参数:
       txt  可以为空 模板源代码 ,就是一个string,不是url地址
       path 可以为空 模板源代码文件所在路径,这个是个实用便捷的参数
   可以看到上面这两个调用有相同的参数,当然根据情况给出一次就行了
   除非要改变模板,也就是具有重构建的效果
   返回:jCT实例自身
3. 扩展 jCT实例 自身 , 并执行 RunNow方法,如果有的话
   格式: jctInstance. Extend(object)
   参数:
       object 要扩展的来源对象
   返回:jCT实例自身
   
4. 扩展 附加到其他对象上, 并执行 RunNow方法,如果有的话
   格式: jctInstance. ExtendTo(object)
   参数:
       object 要扩展的目标对象
   返回:jCT实例自身
5. 执行childs对象所列成员里的某个方法
   格式: jctInstance. ExecChilds(childsObjOrmethodName,methodName)
   参数:
       childsObjOrmethodName
              以{childName:argument}形式定义的
              {子jCT实例名:传入调用方法的参数}的对象
              如果是字符串的话,表示要执行的方法名
              并执行所有子jCT实例的次方法
       methodName
              要调用的方法名,如果为空调用 方法名为Exec
   返回:jCT实例自身
   
6. 构建子jCT对象,并执行 子jCT对象的 RunNow方法,如果有的话
   格式: jctInstance. BuildChilds(childs)
   参数:
       childs 要 构建 的子jCT对象,可以是数组或者以","分割的字符串
              默认是所有的子jCT对象
   返回:jCT实例自身
   
7. 得到装配数据后的html视图代码
   格式: jctInstance. GetView()或者jctInstance.GetViewContinue()
   参数:
       GetViewContinue 这个函数其实就是从使用者写的模板源代码里得到的,
       GetViewContinue 和 GetView的区别见前面的文档
       所以如果要传入参数的话, 模板源代码里可以通过类似这样定义
       var varName=arguments[n];
       来交换变量,通常传入的变量就是要带入的数据,当然也有其他方法来实现
   返回: 装配数据后的html视图代码
   

评论

21 楼 achun 2008-11-10  

Sunshow 写道

不知道有没有手工清理缓存的方法？使用中在IE6下出现奇怪的问题，怀疑是jct的原因方不方便加我联系方式：gtalk:[e-mail]:[e-mail]:1869265

jCT的缓存就是一个javascript的数组,也就是说一般的模板用的是字符串变量+=的形式,
jCT用的是:
this.Fn.V=[];
this.Fn.V.push(str);
最后才
return this.Fn.V.join('')进行输出的
因此这个缓存是无副作用的.

20 楼 Sunshow 2008-11-10  

大汗，测试了半天居然是jQuery的append和html方法的问题，还是朴实的用innerHTML了

19 楼 Sunshow 2008-11-10  

不知道有没有手工清理缓存的方法？
使用中在IE6下出现奇怪的问题，怀疑是jct的原因
方不方便加我联系方式：
gtalk:[e-mail]
msn:[e-mail]
qq:1869265

18 楼 talangniao 2008-11-07  

好,谢谢你的回复。
学习jquery的过程中尝试去使用

17 楼 achun 2008-11-06  

talangniao 写道

jCT本身的功能并不直接参与获取后台数据 .与如何实施表现上面这句根本不解。 不参数获取后台数据，怎样得到数据库数据？很希望能看到跟java结合的例子

因为获取后台数据的方法太多了,而且大家往往在用一些框架,比如
jquery,mootools,extjs等.
这些都有自己获取后台数据的方法,因此jCT不再费这个功夫了.
还有就是,这和使用jCT的应用有关,
如果是ajax获取数据,那就用那些方便的框架了,
如果是单页面,那可以直接把数据打到页面上,比如输出到javascript变量,pre的innerTEXT,textarea的value
同理,模板源代码,也可以通过ajax获取,或者在页面上设置一个DIV的id,源代码包进去,调用的时候获取innerHTML传给jCT就行了.
所以jCT的使用几乎是和后台无关的,不管你后台用的是什么语言.

16 楼 talangniao 2008-11-06  

jCT本身的功能并不直接参与获取后台数据 .与如何实施表现

上面这句根本不解。 不参数获取后台数据，怎样得到数据库数据？
很希望能看到跟java结合的例子

15 楼 talangniao 2008-11-06  

怎样跟java后台的数据结合？怎样进行传递？

14 楼 talangniao 2008-11-06  

我是一个入行不深的人，看到你的东西很想使用。
看到你用jquery+jct的。
最近在学习jquery
想结合你的使用，来开发一个内容管理，实现一个网站。。。
看来很多需要学习和深入使用！

13 楼 achun 2008-11-01  

talangniao 写道

应该有一些比较简单的，到复杂的demo或者教程，gt-grid就有不错，要有个渐渐的过程。新手根本就接受不了。

其实本文的最上面给出了最简单的demo链接.
那是最简单的用法了,可貌似大家

无法从这最简单的用法中看到jCT的使用价值.
无法从这些简单的demo中理解/认同jCT.

没有人呼应/交流/提出具体的需求,
我怎么会有写复杂demo的动力呢?

所谓誓为知己者死!

12 楼 talangniao 2008-11-01  

应该有一些比较简单的，到复杂的demo或者教程，gt-grid就有不错，要有个渐渐的过程。
新手根本就接受不了。

11 楼 achun 2008-10-30  

AlloVince 写道

不好意思，不小心看到了《jCT与AJAX七宗罪》一文，怎么说呢，源代码和实际看到的东西完全没有关系，这点究竟是好是坏暂且不论。只是设计的时候未免要对屏蔽js的情况单独做处理，工作量无形中翻倍了。

你的感觉和大多数人一样呀！
这就是前台模板不受欢迎的大原因！
大家都忽视了几个重点：
1.用jCT不是必须用ajax,就像我给出的例子都是嵌入式模板的。
2.模板可以解耦，而前台模板解耦度是最高的，可以做到完全解耦，而且有些像排序，数据重新整理等工作可以放到前台。
3.现代的浏览器不能运行javascript的比例能有多少呢？相比css/html代码兼容性好像更严重吧
4.如果用jCT+ajax,那搜索引擎优化是可以独立出来的，这个方法在《jCT与AJAX七宗罪》一文中,关键是大家都没有实际去实战一下，实战之后再来评判吧。
5.不能靠以往的经验来评估jCT,评估jCT必须要实际的操作一下.因为像jCT这样的东西太少了.以往大家的经验都不足以对她进行评估。
6.《jCT与AJAX七宗罪》一文正好是为了解决使用jCT+ajax这种方案中遇到的问题的，虽然原因不是有jCT本身造成的。但是不解决这些问题，我自己也不会用jCT的。就像现在我已经解决了，可是大家仍然不容易接受。
7.看看我另一篇文章
jCT 使用教程之[可视化组件]Tree
jCT做UI的方便和高度可制定吧

10 楼 AlloVince 2008-10-30  

不好意思，不小心看到了《jCT与AJAX七宗罪》一文，怎么说呢，源代码和实际看到的东西完全没有关系，这点究竟是好是坏暂且不论。只是设计的时候未免要对屏蔽js的情况单独做处理，工作量无形中翻倍了。

9 楼 AlloVince 2008-10-30  

其实我想说的是，这个东西做web app还行，如果用来做网站的话，就等于拒绝了所有搜索引擎的收录……

8 楼 achun 2008-09-27  

talangniao 写道

初学者提问，怎样跟后台结合？作到动态获取数据库数据

jCT本身是不负责获取数据的,获取数据都是使用者自己根据应用自己写.
如果是动态获取的话当然是用ajax获取JSON格式的数据最方便了.
这个实现起来方法很多,建议你使用现有的框架来做比如用jQuery
可以看看

降低前后台业务逻辑上的耦合度,前后台细粒度数据通讯的方法

这篇文章.

7 楼 talangniao 2008-09-16  

初学者提问，怎样跟后台结合？作到动态获取数据库数据

6 楼 xiaocon 2008-09-08  

不知道jct支持不支持这样的写法

var instance=new jCT(txt,tblName);//构建jCT对象,仅仅准备基础数据，txt就是模板源文件  
instance.Build(tblName);//这才是真正的自构建 
这个Build可以重复多次，比如我的表格重新下载了，要重新根据数据展示，那应该要rebuild一下

5 楼 achun 2008-09-08  

谢谢各位的鼓励,不过好像无法前进了,jct已经发展到这个地步,
我已经没有更多的思路了,估计长期都不会再更新了,
以后也就是做些应用,发写技巧什么的了.

4 楼 ham 2008-09-08  

关注中....加油啊~`

3 楼 jasongreen 2008-09-08  

又更新啦，支持

2 楼 achun 2008-09-07  

那不是出错误了。
jCT在设计初期就有一个一致性的目标,就是要改变

数据没有装配前无法预览到希望的结果

这个常规模板的大缺陷，
这是jCT为什么采用

<!----->

的原因。这个注释语法根本就是透明的。
也就是说浏览源模板，和浏览编译执行后的视图，都可以看到一致性的样式设计。