【前端模闆之路】一、重構的兄弟說：我才不想看你的代碼！把HTML給我交出來！

随着前端領域的發展和社會化分工的需要，繼前端攻城濕之後，又一重要崗位橫空出世——重構攻城濕！所謂的重構攻城濕，他們的一大特點之一，就是精通css配置檔案的編寫。。。前端攻城濕跟重構攻城濕是一對好基友，你寫邏輯來，我寫樣式。

好吧，本文并不是介紹重構攻城濕這個職業的，而是通過一個簡單的場景來說說：

1. 在用前端模闆之前，我們是腫麼動态建立節點的

2. 為什麼要使用前端模闆

下面這張圖檔看着應該很眼熟吧？沒錯，是從mac qq的好友清單裡面截出來的。作為一名前端攻城濕，相信不少童鞋的第一反應是：需要用什麼樣的html結構來辨別它？樣式要怎麼寫？

好吧，就假設我們可以用下面的dom結構來辨別這個“好友”，不考慮其合理性，同時，樣式部分我們華麗麗地直接忽略

大家知道，我們的qq好友清單是不固定的，于是必須得進行“動态建立”。我們通常會腫麼做呢？

老濕曾經諄諄教誨我們說，不要通過innerhtml來建立節點，因為那會讓代碼變得混亂不堪。好歹也拿過優秀少先隊員的稱号，當然得聽老濕話了，于是我乖乖地寫下如下代碼：

筋疲力竭地敲完上面地代碼，我露出了滿足地微笑：老濕你坑我哪！ 就這麼幾個破節點，讓我敲這麼多代碼？

好吧，即使我們真的做到了“讓代碼為我們寫代碼”，看看上面人肉敲的那坨東西，有沒有發現什麼問題？

自言自語神馬的最讨論了，最大的問題在于：dom結構很不直覺，你壓根不知道你建立出來的節點結構是神馬樣子的！！

換别人接手你的代碼，第一件事就是得把上面的代碼跑一遍，然後耐着性子打開控制台把dom結構翻一遍，才能知道你上面那坨代碼究竟造了個什麼鬼東西出來。好吧，那我改。。。

總結下：費體力，不直覺

毛少将說過：innerhtml是個好屬性！看看換做innerhtml我們會腫麼做？var card = document.createelement('div');

哇！隻需要幾行代碼就搞定了，麻麻再也不用擔心我加班了！寫代碼，so easy！

一切似乎很美好，但是，慢着！假如我們現在要建立一批節點呢？上面把資料都寫死了不通用啊！

很簡單嘛，把動态變化的那幾個字段提取出來不就得了，如下代碼所示，瞬間高檔大氣上檔次

很好，字元串相加，一堆引号，似乎看出點問題來了。上面的場景算是很簡單的，動态變化的内容不過就頭像、昵稱、個性簽名三個，但現實世界遠比我們預料的要複雜得多。如果我們想把顯示的好友資料再擴充以下，加上線上狀态、是否會員、是否手機線上，那麼，上面的代碼可能變成這樣（隻是yy的）

顯然，代碼開始變得有點混亂了，再加上id、class以及其他屬性，相信我，絕對會很壯觀。。。

缺點總結：可維護性較差（解決方案在後文會說到）

上面簡單對比了createelement、innerhtml建立節點的兩種方式，細心的童鞋不難看出筆者的傾向性——innerhtml。

随着前端領域的發展和社會化分工的需要，繼前端攻城濕之後，又一重要崗位橫空出世——重構攻城濕！所謂的重構攻城濕，他們的一大特點之一，就是精通css配置檔案的編寫。。。

前端攻城濕跟重構攻城濕是一對好基友，你寫邏輯來，我寫樣式。

>>重構的兄弟說：把你的html交出來！

于是，我把之前的那段代碼給他，就是這貨

>>重構的兄弟：。。。誰要看你的代碼，我要看html結構！！

>>我：。。。要命有一條～～要不你把createcard 調用一下？

>>重構的兄弟怒了：想試試千年殺？！!

>>我：？？！！擦，别～～你騷等～～～

于是，我簡單倒騰了一下，給了它下面這東西，還是最開頭的那段html，隻不過把所有動态變化的内容，用$xx的形式代替了

重構的童鞋拿到他要的東西，心滿意足的就回去寫他的css去了，那我們呢？也很簡單，原來拼字元串，現在正則換變量，如下

這裡我們已經隐約看到了前端模闆的身影了，結構、樣式與邏輯分離的第一步已經實作了，重構的童鞋根據約定好的html模闆寫css樣式，前端的童鞋負責往模闆裡填内容、更新内容，綁定事件，處理使用者互動等，這樣做的好處很明顯：

1. 結構、表現、邏輯分離，便于重構、前端童鞋的分工配合

2. 更好的可維護性，再也不用被一堆createelement，或破碎的字元串之間繞暈了

前端模闆引擎的本質，就是變量替換而已。

看到這裡，你是不是覺得：原來這貨就是前端模闆引擎啊，不過如此嘛！如果你有這種感覺，那麼：

1. 你以為前端模闆引擎有多玄乎啊，本來繞來繞去，最終就是變量替換那麼回事

2. too young，to simple，sometimes, too naive. 前端模闆引擎做的事情，除了變量替換之外，還要處理邏輯判斷、循環、模闆嵌套、預渲染預處理等一堆東東，光有變量替換，實在不好意思說是前端模闆引擎。。

好了，之前還有個問題等着解決，ctrl+f找到下面這段代碼

這其實就是邏輯判斷要做的事情，假設用的是jquery tmpl，下面這樣寫就可以了

jquery tmpl的源碼剖析，請見後續文章～～

本文通過一個場景的場景，引出我們為什麼要使用前端模闆，至于前端模闆的設計這裡暫時不提及，留待後續文章展開。

想到哪寫到哪，邏輯略淩亂，包涵～碼字不易，請随手點推薦～～