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视图代码
   

评论

1 楼 xiaocon 2008-09-07  

能给个demo的范例看看吗？