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

寫在前面

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

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

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

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

一個簡單的情境

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

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

<div>    <img src="http://www.example.com/img/bg.png" />    <h3>小卡的測試號</h3>    <div>大家好，我是個性簽名</div></div>

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

老濕說：createElement神馬的是王道

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

var card = document.createElement('div');var avatar = document.createElement('img');  // 頭像avatar.src = 'http://www.example.com/img/header.png';card.appendChild(avatar);var nick = document.createElement('h3');  // 暱稱var nickTxt = document.createTextNode('小卡的測試號');nick.appendChild(nickTxt);card.appendChild(nick);var signature = document.createElement('div');  // 個性簽名var signatureTxt = document.createTextNode('大家好，我是個性簽名');signature.appendChild(signatureTxt);card.appendChild(signature);

createElement的問題

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

好吧，後來我才知道我錯怪老濕了，他讓我用createElement地方式來建立節點，但沒說過讓我人肉敲啊。人類進步的源動力之一就是懶，電腦存在的很大價值就是為瞭解放生產力，幹嘛不換個思路，讓代碼來幫我們產生代碼呢？代碼產生代碼？聽著好玄乎，其實並不難，請看《【前端模板之路】二、人肉非智舉，讓代碼幫我們寫代碼才是王道》

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

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

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

總結下：費體力，不直觀

那些年，我們一起用過的innerHTML

毛少將說過：innerHTML是個好屬性！看看換做innerHTML我們會腫麼做？

var card = document.createElement('div');card.innerHTML = '<img src="http://www.example.com/img/bg.png" />' +                    '<h3>小卡的測試號</h3>' +                    '<div>大家好，我是個性簽名</div>';

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

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

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

function createCard(avatarURL, nick, signature){    var card = document.createElement('div');    card.innerHTML = '<img src="'+ avatarURL +'" />' +                        '<h3>'+ nick +'</h3>' +                        '<div>'+ signature +'</div>';        return card;    }createCard('http://www.example.com/img/bg.png', '小卡的測試號', '大家好，我是個性簽名');

innerHTML的問題

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

function createCard(avatarURL, nick, signature, onlineState, isVIP, isMobileOnline){        var onlineTxt = '';    switch(onlineState){        case 0:            onlineTxt = '線上';            break;        case 1:            onlineTxt = '離線';            break;        case 0:            onlineTxt = '忙碌';            break;        default:            case 0:            onlineTxt = '線上';            break;    }    var card = document.createElement('div');    // 有效能潔癖的兄弟看到下面的代碼錶拿磚頭砸我    card.innerHTML = '<img src="'+ avatarURL +'" />' +    // 頭像                        '<h3>'+ nick +'</h3>' +    // 暱稱                        '<div>'+ onlineTxt +'</div>' +    // 線上狀態                        '<div>'+ (isVIP ? '會員' : '非會員') +'</div>';    // 是否會員    if(isMobileOnline){        card.innerHTML += '<div>'+ (isMobileOnline ? '手機線上' : '') +'</div>';    // 是否手機線上    }    card.innerHTML += '<div>'+ signature +'</div>';    // 個性簽名    return card;}

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

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

重構的童鞋說：我不想看你的代碼！

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

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

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

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

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

    var card = document.createElement('div');    card.innerHTML = '<img src="'+ avatarURL +'" />' +                        '<h3>'+ nick +'</h3>' +                        '<div>'+ signature +'</div>';        return card;   

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

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

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

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

於是，我簡單倒騰了一下，給了它下面這東西，還是最開頭的那段HTML，只不過把所有動態變化的內容，用$XX的形式代替了

<div id="my_tmpl">    <div>        <img src="${avatar}" />        <h3>${nick}</h3>        <div>${signature}</div>    </div></div>

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

var data = {    avatar: 'http://www.example.com/img/bg.png',    nick: '小卡的測試號',    signature: '大家好，我是個性簽名'};var html = document.getElementById('my_tmpl').innerHTML;html = html.replace(/\$\{(.+?)\}/g, function(all, $1){ // 將${XX}替換成data[XX]    return data[$1]; });

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

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

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

原來就是這貨：前端模板引擎的本質

看著前面的${avatar}、${nick}等，很多童鞋應該有似曾相似之感。沒錯，這裡用的替換標識，跟jQuery Tmpl的變數替換標識是一樣的，可參考https://github.com/BorisMoore/jquery-tmpl

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

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

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

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

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

    if(isMobileOnline){        card.innerHTML += '<div>'+ (isMobileOnline ? '手機線上' : '') +'</div>';    // 是否手機線上    }

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

<div>{{if isMobileOnLine}}手機線上{{/if}}</div>

jQuery Tmpl的用法，這裡不打算展開，可參考：http://www.cnblogs.com/think8848/archive/2011/07/17/2108570.html

jQuery Tmpl的源碼剖析，請見後續文章～～

寫在後面

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

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