當(dāng)我走進(jìn)這個(gè)著名的咖啡館，這里已經(jīng)有很多人了，我環(huán)顧四周，看到遠(yuǎn)處的JSP同學(xué)和ASP同學(xué)正聊得火熱，他倆，還有今天沒看見的Velocity同學(xué)每次都會(huì)占據(jù)最里邊的座位，似乎故意要逃避大家。

創(chuàng)新互聯(lián)專注于網(wǎng)站建設(shè)，為客戶提供做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)、網(wǎng)頁設(shè)計(jì)開發(fā)服務(wù)，多年建網(wǎng)站服務(wù)經(jīng)驗(yàn)，各類網(wǎng)站都可以開發(fā)，成都品牌網(wǎng)站建設(shè)，公司官網(wǎng)，公司展示網(wǎng)站，網(wǎng)站設(shè)計(jì)，建網(wǎng)站費(fèi)用，建網(wǎng)站多少錢，價(jià)格優(yōu)惠，收費(fèi)合理。

從他們的表情看，我就能猜出來這兩個(gè)家伙又在抱怨人心不古，世風(fēng)日下，沒有程序員使用他們了。

旁邊是jQuery和ExtJS， 他倆在低聲交談，時(shí)不時(shí)朝JSP和ASP方向看兩眼， 我估計(jì)jQuery又在宣傳他那DOM操作大法了。

幸好，還有一個(gè)靠窗的空桌，有兩個(gè)座位， 我走過去坐下，要了一杯咖啡，拿起一本雜志，邊喝邊看。 

代碼中混雜HTML

這時(shí)候又進(jìn)來一個(gè)年輕人，看到我這一桌還有空位，不客氣地坐下， 掏出一張紙，爬在桌子上刷刷刷地寫代碼。

我偷偷看了一眼，不由得大吃一驚: 怎么能在代碼中寫HTML呢？

 
 
 
 

  
  
  
  
function Welcome(props) {     
  
  
  
  
    return 
Hello, {props.name}
; 
  
  
  
  
} 
 
 
 
 

這時(shí)候服務(wù)員正好走過來送咖啡， 也注意到了這段代碼， 大叫道：“我賽，這都什么年代了，還在代碼里寫HTML ！”

這一下便炸了鍋，ASP, JSP, jQuery, ExtJS等紛紛圍過來看個(gè)究竟。

在代碼中寫HTML，我記得這是上個(gè)世紀(jì)90年代的事情，那時(shí)候連ASP,JSP都沒有，只好用C語言寫CGI代碼，HTML就混雜在C代碼中，類似這樣：

 
 
 
 

  
  
  
  
void main(){ 
  
  
  
  
    char content[MAXLINE]; 
  
  
  
  
    sprintf(content,""); 
  
  
  
  
    sprintf(content,""); 
  
  
  
  
    sprintf(content,""); 
  
  
  
  
    sprintf(content,"");  
  
  
  
  
    ......其他內(nèi)容略......  
  
  
  
  
    printf("Content-length : %d \r\n",(int)strlen(content)); 
  
  
  
  
    printf("Content-type:text/html \r\n\r\n"); 
  
  
  
  
    printf("%s",content); 
  
  
  
  
    fflush(stdout); 
  
  
  
  
    exit(0); 
  
  
  
  
} 
 
 
 
 

這種模式給修改界面和業(yè)務(wù)邏輯帶來了巨大的麻煩，等到ASP, JSP這樣的“模板”語言出現(xiàn)以后，變成了在HTML中寫代碼： 

UI設(shè)計(jì)師先把HTML頁面整體設(shè)計(jì)好，交給程序員再用<%..%>在其中填入動(dòng)態(tài)的部分， 這種方式可以讓設(shè)計(jì)師和程序員更好地合作。

 
 
 
 

  
  
  
  
<%@ Language="VBScript" %> 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
<% For i=3 to 5 %> 
  
  
  
  
 > 
  
  
  
  
    你好，歡迎來到我的主頁。 
  
  
  
  
  
  
  
  
  
<% Next %> 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
} 
 
 
 
 

現(xiàn)在又有人想在代碼中寫HTML，簡(jiǎn)直是瘋了！

模板 vs 組件

看到這么多人圍過來， 小伙子漲紅了臉：“我這不是HTML，我這個(gè)是JSX，是JavaScript的一個(gè)語法擴(kuò)展，你們仔細(xì)看看，其實(shí)和ASP的模板也很像的。”

Hello, {props.name}

“那你為什么不直接用模板，為什么要把HTML放到JavaScript當(dāng)中？這是我們?cè)缇蛼仐壍姆茨Ｊ?！? ASP問道。

“對(duì)啊，為什么不用模板？ ”  周圍的人也隨聲附和。

“因?yàn)槲矣X得模板難于復(fù)用！” 小伙子突然大聲說道。

說起復(fù)用，這一點(diǎn)我的體會(huì)太深了，在開發(fā)中，我通常把描述界面結(jié)構(gòu)的HTML，描述展示的CSS， 和操作DOM的JavaScript放在不同的文件當(dāng)中，在運(yùn)行時(shí)把他們結(jié)合起來， 但是這種分離只是技術(shù)層面分開管理而已，在邏輯上并沒有實(shí)現(xiàn)高耦合的組件，也就無法復(fù)用。

“我想了一個(gè)新的辦法，” 小伙子繼續(xù)說道，“組件化，我們可以創(chuàng)建一個(gè)個(gè)的組件，然后讓這些組件組合起來形成一個(gè)完整的Web界面。 就像我剛寫的組件Welcome，可以復(fù)用的，可以用在Web頁面的任何地方?！?/p>

“組件？ 這小子有點(diǎn)想法。” ASP說道，“我表哥Visual Basic 就有很多組件，奧，好像大家叫他控件，在開發(fā)一個(gè)應(yīng)用的時(shí)候，只需要把控件拖拽到表單界面上，設(shè)置屬性，編寫對(duì)事件的處理代碼就可以了，非常簡(jiǎn)單快速?！?/p>

“你怎么沒給我說過？” JSP表示不滿， 他和ASP在90年代打得你死我活，現(xiàn)在拋棄了門戶之見，成了好基友。

小伙子向ASP投去感激的目光，找到支持支持者了。

沒想到ASP馬上潑了一盆冷水：“不過控件是在桌面應(yīng)用使用的，在Web開發(fā)中我們不這么干，它和桌面應(yīng)用差別太大，實(shí)現(xiàn)不了。”

小伙子馬上反駁：“怎么實(shí)現(xiàn)不了，一個(gè)組件不就是一個(gè)可以復(fù)用的單元嗎？ 在Web頁面上， 這個(gè)組件要像桌面應(yīng)用那樣，負(fù)責(zé)自己的展示和行為，有屬性可以設(shè)置，有方法可以調(diào)用，對(duì)外可以響應(yīng)事件(Event)， 對(duì)內(nèi)可以維護(hù)組件狀態(tài)?！?/p>

我說道：“你說說你那個(gè)Welcome組件具體怎么復(fù)用？”

小伙子說： “很簡(jiǎn)單，在JSX中，那個(gè)Welcome組件就像普通的HTML標(biāo)簽一樣，直接就可以使用了！”

 
 
 
 

  
  
  
  
function App(props){ 
  
  
  
  
  return(