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就是模板源文件
      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:''},//语法块标记
                      exp:{begin:'+-',end:'-+'},//取值表达式
                      member:{begin:'/*+',end:'*/'},//定义成员语法标记
                      memberend:{begin:'/*-',end:'*/'},//定义成员结束语法标记
                      clean:{begin:''}//清理标记
              },
              script:{//脚本标签风格
                      block:{begin:'',end:''},
                      exp:{begin:'+-',end:'-+'},
                      member:{begin:'/*+',end:'*/'},
                      memberend:{begin:'/*-',end:'*/'},
                      clean:{begin:''}
              },
              code:{//code标签风格
                      block:{begin:'',end:''},
                      exp:{begin:'+-',end:'-+'},
                      member:{begin:'/*+',end:'*/'},
                      memberend:{begin:'/*-',end:'*/'},
                      clean:{begin:''}
              }
      }

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

      语句块block:  用来书写javascript语句，或者标示一个成员的界限
      成员定义member:用来定义jCT实例对象的成员函数或者子jCT实例对象

      取值表达式exp: 用来书写javascript值表达式

      清理标记clear:用来完成一致性设计，参见早期文档
      由于member在定义子jCT实例对象的时候需要一个结束位置定义,才有了memberend,并且member和memberend必须包括在block标记内。而exp是不应该出现在block内的。通过这些

标记，就可以写javascript代码，定义成员函数，定义子jCT实例。这整个就是在用另一种排版写javascript代码，当然是全兼容javascript了.
      由于成员函数和子jCT实例对象都是采用的同一个标记，为了区分他们的不同，简单的在实例名称的前面加一个符号@以示区分,下面是个函数定义:

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

      hello

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

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

      ===============================================
      由于是边改边发，并且通过实战检验，所以例子暂时就不写了，如果感兴趣，可以看一下 www.91mh.net/91mh/index.html
      的模板源代码。
      搜索更多相关主题的帖子: jCT 实战 前台 javascript 洗礼
        UID488755 无忧币22  阅读权限20 在线时间0 小时 注册时间2008-9-24 最后登录2008-9-25 查看详细资料TOP
      维护论坛纯净人人有责，灌水严惩！举报有奖

 

 

 

 

 

 

 

 

对于上一篇文章 jCT 如何改造边想边发 ，jCT今天有所更新，涉及以下方面
1.模板语法
2.废除RunNow，增改为BRun,ERun
3.增加自动Build功能
这将造成与以前的版本不兼容

模板语法

 

针对于 jCT如何改造边想边 发 文内提出的原 /* 的注释模板书写不方便（需要shift键，两只手都要敲击键盘），改为 // 开头
功能名称　　　 　　 　 　jCT 3.8.xxx版 　　 　　 　 　　 　　 jCT 3.9.xx版
==================================================
GetView 参数名 　 　 　　 　　 不支持 　 　　 　 　　 　 　 <!---// arg1,arg2-->
子模板定义开始 　　 　<!---/*+@name*/--> 　　 　　 　 　 <!---///name-->
子模板定义结束 　　 　<!---/*-@name*/--> 　　 　　 　 　 <!---///name-->
子模板参数 　　 　 　　 　　 　 不支持 　　 　 　　 　 　　 　<!---///name arg1,arg2-->
成员对象 　 　 　 　 　 　<!---/*+$objname*/ 　 　 　 　 　 　 <!---//.objname
成员函数 　 　 　 　 　 　<!---/*+ funName*/ 　 　 　 　 　 　 <!---//. funName function(){}
成员结束 　 　 　 　 　 　 --> 　 　 　 　 　 　 　 　 　 　 　 　 　 　 -->

==================================================
新版优点：方便录入，更易于记忆，形式更符合javascript语法习惯,参数的传递更方便
其实有了扩展语法根本就不需要成员定义了,仅仅是继承下来了
说明 : 由于模板语法的变迁，自定义语法中的member，memberend对应也无效了

废 除RunNow，增改为BRun,ERun

因为原来的RunNow方法不能区别Build和Extend,ExtendTo的不同时期的差别，所以废除RunNow,改为
BRun:在Build后自动执行
ERun:在Extend/ExtendTo后自动执行

增加自动Build功能

笔者自己也发现总是显示的使用Build很不方便，就增加了自动Build功 能，自动Build发生在GetView/GetViewContinue执行时，当执行时jCT发现并没有Build时，会自动执行Build过程


看看 Example Online 是最快的了解方法


jCT 3.9.xxx 版文档 （不兼容3.8.xxx版本）

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实例对象的模板编译器

而这个可以组织数据得到表现代码的实例对象具体都做了哪些和应用有关的动作 ,完全由模板的内容决定.毕竟所有的执行代码都在模板里,都是使用者自己写 的.

var instance=new jCT(txt);//构建jCT对象,仅仅准备基础数据，txt就是模板字符串,不是指模板的url地址,是内容

instance.Build();//手工代码进行构建，这才是真正的自构建，当然您也可以省略不写，因为

var htmlsrc=instance.GetView();//如果没有进行Build,这里内部会自动进行Build过程

视 图 :

构建完成了，如何执行获取模板视图呢?

就是GetView 了，这个是用来的到模板执行后的html代码--也就是视图.
就像上面的代码，htmlsrc 就是文本形式的视图，把这个htmlsrc加载到页面的什么地方由你根据应用需要决定，比如

document.body.innerHTML=htmlsrc;//整个页面就都刷新了

jCT是 如何构建实例的 :

事实上,jCT并不 直接构建 出完整的jCT实例 ,jCT仅仅是生成 一个可以自构建的对象 .这个对象什么时候需要构建,什么时候需要执行(装配数据得到表现代码),由使用者的代码决定。
使用者写的模板源码最终会转换成为GetViewContinue方法的主体，GetView又调用了GetViewContinue.也就是说 GetViewContinue的主体结构和模板是一致的。
在 GetViewContinue 的内部实现中，jCT采用了一个输出缓存区数组，把所有的输出数据push进去，最后 再把数组值连接(join)成字符串输出，这样保持了较高的代码执行效率。

jCT实 例如何运行 :

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

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

GetView 方法就是调用 GetViewContinue 方法的，但是GetView一开始就清空了输出数组，因此递归的调用 GetView是不可靠的，因为前面的输出都丢失了。

GetViewContinue 独立出来的原因是GetViewContinue没有清空输出数组，因 此变通的支持了递归调用。

Extend/ ExtendTo   虽然jCT模板语法上可以定义成员对象和方法，不过总是写到模板中 ,把嵌入式javascript语句和html代码全都混合在一起看上去 很纷乱, 这两个方法可以改善这个状况 ,可以把 成员对象和方法定义 从html模板中分离出来，书写到标准的javascript文件里，以 标准javascript对象出现，通过Extend/ExtendTo 把jCT实例对象和标准对象融合在一起。这样将形成这样的文件结构：

1. 嵌入 javasctipy 代码的 jCT 模板 文件,通常就 是html文件。
      依照jCT的文法形式把子模板对象和直接的javascript代码写进去。
   
   
2. 把相关的成员 对象和方法书写进标准的javascript文件，并引入页面
   例如：
   
   

   var obj={
   
     RNow:function(){alert('hello jCT');},
   
     Exec:function(D){document.body.innerHTML=this.GetView(D);}
   
   }
   
   

3. 通过1里面的 模板得到jCT实例对象后，通过Extend/ExtendTo与上面的obj对象融合到一起：比如jCT实例对象是Ins
       Ins.ExtendTo(obj); 这样obj对象就被扩展了，具有jCT对象Ins的所有成员，当然也可以不显示的生产Ins这个对象，也可以：
      (new jCT(src)).ExtendTo(obj);
   

jCT文法定义 :

 

jCT的有3类文法标记

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

注意：exp 取值表达式 是不应该出现在block内的。
通过这些标记，就可以写javascript代码 ，定义成员函数 ，定义子jCT实例 。下面是个成员函数定义 :

<!---//.hello function(who){

alert('hello! '+who||'');

}

-->

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

<!---//.name

'xiao qiang'

-->

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

<!---///hello who-->

<h1>hello:+-who-+</h1>

<!---///hello-->

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

下面是个顶层jCT实例定义 ：注意 GetView参数 的定义方法，//后有一个空格，这样写的原因是顶层jCT实例是没有把对象名定义在模 板里，其实和上面的子实例定义是一样的，就是缺少了实例名称

<!---// who-->

<h1>hello:+-who-+</h1>

jCT编译模板阶段会自动根据第一个出现的block去自动判断采用那个文法风格
如果你有自己的想法，那就自己定义 一个风格吧。
风格在jCT.Instance.prototype.Tags 下定义 , 您可以自行修改/增添
不过block里面的//x语法是固定的,//写起来太方便了

Tags:{//几种不同的模板定义风格

	comment:{//注释标签风格

		block:{begin:'<!---',end:'-->'},//语法块标记

		exp:{begin:'+-',end:'-+'},//取值表达式

		clean:{begin:'<!--clean',end:'/clean-->'}//清理标记

	},

	script:{//脚本标签风格

		block:{begin:'<script type="text/jct">',end:'</script>'},

		exp:{begin:'+-',end:'-+'},

		clean:{begin:'<!--clean',end:'/clean-->'}

	},

	code:{//code标签风格

		block:{begin:'<code class="jct">',end:'</code>'},

		exp:{begin:'+-',end:'-+'},

		clean:{begin:'<!--clean',end:'/clean-->'}

	}

}

jCT API :

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

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

 

 

 

 

 

注：以上内容，均引用于网络，本人只是引用于学习之用