jCT 在實(shí)戰(zhàn)中洗禮，jCT會(huì)成為終極的javascript前臺(tái)模板么?

achun.shx

SVN已經(jīng)更新.下載jCT最新版本

寫在前面
自從jCT 3以來，jCT的設(shè)計(jì)思路已經(jīng)完全變成嵌入式j(luò)avascript,也就是說像php和html混寫的文法一樣的去寫javascript和html混寫的前臺(tái)模板。
現(xiàn)在正在用jCT 3來制作一個(gè)站點(diǎn) www.91mh.net ,還沒有做完，在制作的過程中發(fā)現(xiàn)：嵌入javascript的寫法雖然很方便，可是當(dāng)大量的javascript腳本和html混在一起的時(shí)候，看著就不舒服了，為了改進(jìn)這個(gè)，我要想辦法把javascript分離出來寫，這樣就變成了：
html代碼，嵌入javasctipy模板代碼，外部擴(kuò)展javascript代碼（對(duì)象）的結(jié)構(gòu)，事實(shí)上當(dāng)我改進(jìn)的同時(shí)我也有了重大發(fā)現(xiàn)：

采取嵌入式javasctipy的模板，通過javascript的靈活運(yùn)用，能更方便更干凈的完成模板設(shè)計(jì)。

也就是說jCT的設(shè)計(jì)思路在嵌入式javascript的基礎(chǔ)上又增加了力求方便干凈的目標(biāo)，于是就有了下面的新的jCT介紹。

寫完后感覺現(xiàn)在的jCT：
徹底的嵌入式j(luò)avascript模板
徹底的采用javascript語法
可以用外部對(duì)象進(jìn)行方便的實(shí)例擴(kuò)展
瀏覽得到視圖前后和瀏覽模板源文件具有一致性
代碼很簡(jiǎn)潔清晰可以自己定義文法標(biāo)識(shí)
沒有采用一個(gè)正則，速度有保障

有一種javascript模板技術(shù)走到終點(diǎn)的感覺，我想不到還有什么可以重大改進(jìn)的地方（小的改進(jìn)就不說了）。

jCT會(huì)成為終極的javascript前臺(tái)模板么?



=====================================================================
jCT全稱:

javaScript Common Templates  就是 javaScript 共用模板

屬于WEB開發(fā)模板技術(shù)的一種.jCT用javaScript寫成,通常工作于瀏覽器客戶端.

基本功能:

作為模板技術(shù),完成后臺(tái)數(shù)據(jù)與htm模板(jCT模板)的組裝,得到最終表現(xiàn)代碼是jCT的基本功能.

設(shè)計(jì)理念:

作為模板技術(shù),jCT僅僅負(fù)責(zé)把模板javaScript對(duì)象化.并提供數(shù)據(jù)組裝文法.
從文法形式上看jCT的文法極其類似php,aps,jsp的文法,也就是嵌入html模板文法
這種文法,事實(shí)上是嵌入了javaScript腳本,采用完全與javaScript腳本一致的語法來書寫模板,達(dá)到了與javaScript完全兼容.
因此jCT本身的功能并不直接參與獲取后臺(tái)數(shù)據(jù).與如何實(shí)施表現(xiàn).這些功能可以通過書寫模板的時(shí)候直接寫入進(jìn)去,反正都是javaScript腳本.或者采取其他的手段從外部控制.
由于在實(shí)際的應(yīng)用中業(yè)務(wù)行為可能很復(fù)雜,jCT提供了子模板對(duì)象的支持.從jCT對(duì)象的最終形式 javaScript 對(duì)象來說,這就形成了一棵對(duì)象樹,而且這個(gè)對(duì)象樹的組織完全是由模板代碼決定.

調(diào)用:

jCT本身沒有規(guī)定必須如何調(diào)用jCT,對(duì)應(yīng)用來說,jCT就是一個(gè)根據(jù)提供的文本模板來生成jCT實(shí)例對(duì)象的模板編譯器
而這個(gè)可以組織數(shù)據(jù)得到表現(xiàn)代碼的實(shí)例對(duì)象具體都做了哪些和應(yīng)用有關(guān)的動(dòng)作,完全有模板的內(nèi)容決定.畢竟所有的執(zhí)行代碼都在模板里,都是使用者自己寫的.

var instance=new jCT(txt);//構(gòu)建jCT對(duì)象,僅僅準(zhǔn)備基礎(chǔ)數(shù)據(jù)，txt就是模板源文件
instance.Build();//這才是真正的自構(gòu)建執(zhí)行 :
構(gòu)建完成了，如何執(zhí)行呢?事實(shí)上根本就不存在執(zhí)行這個(gè)說法,因?yàn)樗�謂的執(zhí)行就是去運(yùn)行txt模板源代碼里定義的方法，由于代碼是使用者自己寫的，都定義了什么方法，書寫者是知道的，比如說模板源代碼里定義了方法hello,要執(zhí)行hello的話就
instance.hello();就行了。jCT是如何做到這樣的，請(qǐng)繼續(xù)看。



jCT是如何構(gòu)建實(shí)例的:


事實(shí)上,jCT并不直接構(gòu)建出完整的jCT實(shí)例,jCT僅僅是生成一個(gè)可以自構(gòu)建的對(duì)象.這個(gè)對(duì)象什么時(shí)候需要構(gòu)建,什么時(shí)候需要執(zhí)行(裝配數(shù)據(jù)得到表現(xiàn)代碼),jCT并不負(fù)責(zé),這就需要應(yīng)用里有一個(gè)觸發(fā)自構(gòu)建對(duì)象進(jìn)行構(gòu)建和執(zhí)行的開始.
jCT這樣做的原因是考慮到實(shí)例有可能重新構(gòu)建,所以干脆把這個(gè)構(gòu)建的任務(wù)交由實(shí)例對(duì)象自己完成.


jCT實(shí)例如何運(yùn)行:


因?qū)嵗�是自�?gòu)建的,在實(shí)現(xiàn)上要保留一些成員函數(shù)和成員對(duì)象來滿足自構(gòu)建的需求.最重要的保留成員有:

• Fn      保留對(duì)象,供jCT實(shí)例使用,不能對(duì)Fn已有的屬性修改
  
• Build   保留方法,模板構(gòu)建方法
• GetView 保留方法,獲取裝配數(shù)據(jù)后的表現(xiàn)代碼方法
• Extend  保留方法,遞歸擴(kuò)展jCT對(duì)象和子jCT對(duì)象
• RunNow  特例方法,用戶可以自實(shí)現(xiàn)這個(gè)方法,
        此方法在Build后,Extend中自動(dòng)運(yùn)行,
• ExecChilds(childs{},functionname String),保留方法提供了便捷的操作
        執(zhí)行childs jCT對(duì)象,某個(gè)方法,默認(rèn)是Exec方法
• Buildchilds(childs[]), 保留方法提供了便捷的操作
        執(zhí)行childs jCT對(duì)象的Build方法,默認(rèn)所有的childs jCT對(duì)象

RunNow就是最重要的方法了,是實(shí)例開始運(yùn)行的起點(diǎn),可以在模板源代碼里直接定義此方法來運(yùn)行.由于這個(gè)方法是在Build后運(yùn)行的,而且可以自定義,那所有復(fù)雜的變化都會(huì)圍繞這個(gè)的用法發(fā)生變化
GetView 方法內(nèi)部的代碼就是經(jīng)過jCT編譯轉(zhuǎn)化過來的使用者自己寫的模板代碼（非成員部分）。當(dāng)你實(shí)作一個(gè)jCT實(shí)例并Build()后，你可以通過GetView.toString(),查看jCT到底把模板編譯成了什么，同時(shí)也就明白了jCT的原理，明白jCT的方法具有很高的效率.
Extend 對(duì)jCT的影響也是巨大的,原本jCT的文法雖然不算復(fù)雜,把嵌入式j(luò)avascript語句和html混合的代碼看上去很紛亂,引入Extend后,這些嵌入的javascript語句可以從html模板中分離出來。這樣將形成這樣的文件結(jié)構(gòu)：

• 嵌入javasctipy代碼的jCT模板文件,通常就是html文件啦
     依照jCT的文法形式書寫嵌入式javasctipy代碼,
     這些代碼經(jīng)過jCT編譯后會(huì)得到jCT實(shí)例對(duì)象
     重要的是里面含有RunNow的定義，RunNow里有
     this.Extend(obj);
  
• 用來擴(kuò)展jCT實(shí)例對(duì)象的javascript文件
     因?yàn)閖CT實(shí)例對(duì)象有自擴(kuò)展方法Extend，所以這種文件里面直接寫下一個(gè)期望得到j(luò)CT實(shí)例對(duì)象就行了，這個(gè)對(duì)象就是上面this.Extend(obj);里的obj，例如：
  var obj={
    RunNow:function(){alert('hello jCT');},
    Exec:function(D){document.body.innerHTML=this.GetView(D);}
  }

jCT就是通過這樣的方法完成擴(kuò)展.

jCT文法定義:

首先jCT的語法標(biāo)記是可以自己定義的，當(dāng)然jCT已經(jīng)為您預(yù)先定義了3種最常用的語法標(biāo)記,Fn.Tags定義了這個(gè)，具體代碼如下：
Tags:{//幾種不同的模板定義風(fēng)格
        comment:{//注釋標(biāo)簽風(fēng)格
                block:{begin:'<!---',end:'-->'},//語法塊標(biāo)記
                exp:{begin:'+-',end:'-+'},//取值表達(dá)式
                member:{begin:'/*+',end:'*/'},//定義成員語法標(biāo)記
                memberend:{begin:'/*-',end:'*/'},//定義成員結(jié)束語法標(biāo)記
                clean:{begin:'<!--clean',end:'/clean-->'}//清理標(biāo)記
        },
        script:{//腳本標(biāo)簽風(fēng)格
                block:{begin:'<script type="text/jct">',end:'</script>'},
                exp:{begin:'+-',end:'-+'},
                member:{begin:'/*+',end:'*/'},
                memberend:{begin:'/*-',end:'*/'},
                clean:{begin:'<!--clean',end:'/clean-->'}
        },
        code:{//code標(biāo)簽風(fēng)格
                block:{begin:'<code class="jct">',end:'</code>'},
                exp:{begin:'+-',end:'-+'},
                member:{begin:'/*+',end:'*/'},
                memberend:{begin:'/*-',end:'*/'},
                clean:{begin:'<!--clean',end:'/clean-->'}
        }
}


也就是說jCT的有4類文法標(biāo)記

• 語句塊block:  用來書寫javascript語句，或者標(biāo)示一個(gè)成員的界限
• 成員定義member:用來定義jCT實(shí)例對(duì)象的成員函數(shù)或者子jCT實(shí)例對(duì)象
  
• 取值表達(dá)式exp: 用來書寫javascript值表達(dá)式
  
• 清理標(biāo)記clear:用來完成一致性設(shè)計(jì)，參見早期文檔

由于member在定義子jCT實(shí)例對(duì)象的時(shí)候需要一個(gè)結(jié)束位置定義,才有了memberend,并且member和memberend必須包括在block標(biāo)記內(nèi)。而exp是不應(yīng)該出現(xiàn)在block內(nèi)的。通過這些標(biāo)記，就可以寫javascript代碼，定義成員函數(shù)，定義子jCT實(shí)例。這整個(gè)就是在用另一種排版寫javascript代碼，當(dāng)然是全兼容javascript了.
由于成員函數(shù)和子jCT實(shí)例對(duì)象都是采用的同一個(gè)標(biāo)記，為了區(qū)分他們的不同，簡(jiǎn)單的在實(shí)例名稱的前面加一個(gè)符號(hào)@以示區(qū)分,下面是個(gè)函數(shù)定義:
<!---/*+hello*/
alert('hello');
-->

下面是個(gè)子jCT實(shí)例定義：要注意子實(shí)例定義要有開始，有結(jié)束
<!---/*+@hello*/-->
<h1>hello</h1>
<!---/*-@hello*/-->

并且在jCT編譯模板階段會(huì)自動(dòng)根據(jù)第一個(gè)出現(xiàn)的block去自動(dòng)判斷采用那個(gè)文法風(fēng)格標(biāo)記
如果你有自己的想法，那就自己定義一個(gè)風(fēng)格吧。

例子：
請(qǐng)看我博客里的http://achun.javaeye.com/category/33268 jCT專題，里面有最簡(jiǎn)單的例子，另外我更希望感興趣的你能直接提出html代碼和需求，我們討論如何用jCT的方法寫出.


===============================================
由于是邊改邊發(fā)，并且通過實(shí)戰(zhàn)檢驗(yàn)，所以例子暫時(shí)就不寫了，如果感興趣，可以看一下 www.91mh.net/91mh/index.html 的模板源代碼。

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

2gua