原文地址：http://www.cnblogs.com/chyingp/archive/2013/06/30/front-end-tmplate-start.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的源碼剖析，請見后續文章～～

寫在后面

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

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

轉載于:https://www.cnblogs.com/fcsh820/p/3175047.html

總結

以上是生活随笔為你收集整理的（转）【前端模板之路】一、重构的兄弟说：我才不想看你的代码！把HTML给我交出来！...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。