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

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

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

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

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

代碼中混雜HTML

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

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

 
 
 
 

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

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

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

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

 
 
 
 

  
  
  
  
void main(){ 
  
  
  
  
    char content[MAXLINE]; 
  
  
  
  
    sprintf(content,""); 
  
  
  
  
    sprintf(content,""); 
  
  
  
  
    sprintf(content,""); 
  
  
  
  
    sprintf(content,"");  
  
  
  
  
    ......其他內容略......  
  
  
  
  
    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è)務邏輯帶來了巨大的麻煩，等到ASP, JSP這樣的“模板”語言出現(xiàn)以后，變成了在HTML中寫代碼： 

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

 
 
 
 

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

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

模板 vs 組件

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

Hello, {props.name}

“那你為什么不直接用模板，為什么要把HTML放到JavaScript當中？這是我們早就拋棄的反模式！”  ASP問道。

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

“因為我覺得模板難于復用！” 小伙子突然大聲說道。

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

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

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

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

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

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

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

我說道：“你說說你那個Welcome組件具體怎么復用？”

小伙子說： “很簡單，在JSX中，那個Welcome組件就像普通的HTML標簽一樣，直接就可以使用了！”

 
 
 
 

  
  
  
  
function App(props){ 
  
  
  
  
  return(