【前端模板之路】一、重構的兄弟說：我才不想看你的代碼！把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的源碼剖析，請見后續文章～～

寫在后面

本文通過一個場景的場景，引出我們為什么要使用前端模板，至於前端模板的設計這里暫時不提及，留待后續文章展開。

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