量添加數據時，需要動態添加html代碼。例如：添加規格。

本猿新手時期是這么做的：（主要看紅框中代碼）

字符與變量拼接，倒是簡單易行，就是容易出錯（比如：引號不成對），需要反復調試。

拼接字符串要是不講究， 那更是不便于我們人類閱讀，所以，要是 元素有改變 或者 新增了元素，維護起來自然不易。

要是像php模板引擎一樣，直接把變量塞進html代碼里面，不但不用糾結引號是否匹配、成對標簽是否缺失閉標簽，而且格式化，那多好-----嗯，這個可以有。

php有模板引擎，咱js也有，不但有，還百家爭鳴。

本猿機緣巧合之下，遇見了art-template.js。

先看一眼官方文檔。

于是，上文的動態添加html代碼需求可以這么實現：

想要查看art-template官方文檔的更多信息，可以這么做：

、坑爹的老板

“我X！這個項目是要商業應用的，你還想用easyUI,500美刀的授權費用。一個項目才賺多少錢！趕緊給我換了，明天去客戶那邊要做demo的，今天晚上必須給我趕出來！不懂的去問大雄”黃總對我又是一通大吼。

我容易嘛我，以前做CS架構系統的，現在突然讓我轉BS，前端開發實在太費力了。更要命的是還碰上一個SB坑爹的小老板。公司一共就三個人，老板（摳得要死，不知道怎么討到老婆的）、大雄（大濕級攻城濕，BS前端開發大牛）、我（屌絲碼農）。

二、開工搞起

好吧，老板都發話了，自己重做吧，啥都要搞免費的，怕侵犯別人版權，自己下的片全是正版的么？現在的人啊。。。發再多的牢騷也沒用，UI還是得自己寫，先弄個好看點的主界面吧，里面的功能隨便糊弄下數據庫都懶得連。。這次要做的demo是一個后臺管理系統，菜單導航做成手風琴的會顯得比較大方。那就做成手風琴的吧。經過網上一番搜索，我決定把菜單導航做成下面這個樣子

問題來了，上面這個界面是很好看，關鍵是我不會做呀！那我這個菜鳥只好向大雄大師求教了。

我：“大雄，這個導航菜單怎么做？”

大雄：“沒時間，我在改BUG。”

我：“老板讓我問你的。”

大雄：“我幫你把界面做好，你能幫我把這250個BUG和需求全改掉？明天就要，多謝你了”

我：“唉，我有個女同學讓我幫忙介紹個男朋友”

大雄：“剛好我現在有時間，我先幫你弄”

大雄過來看了一眼我同學的照片說：“網址不是都有了么，自己按F12，什么都有的，我忙去了。。。”

我了個去什么人呀，看人家長得抽象點就撂挑子了，那就F12吧，

擦！F12真是個好東西呀，按一下什么html標記、css樣式全有了。原來所謂的前端大濕也不過如此嘛！

不斷的ctrl+C、和ctrl+v后，自己再寫了點js腳本的我的界面出來啦！！！！完全實現了左側樹狀導航，點擊完導航在右側以選項卡的形式打開標簽。

這里跟大家分享一下主要思路：

1）每個菜單按鈕其實就是一個div,子菜單就是上級div里嵌套div。div真的是個好東西，里面什么東西都能放，菜單圖標，樣式都可以很好的控制。

2）右側以選項卡方式打開標簽其實是給div加了個onclick事件點擊以后在右側有兩個動作：1、加一個iframe,里面放頁面內容。2、加一個標簽跟頁面對應，可以控制頁面的顯示隱藏和關閉。

附打標簽選項卡代碼

//=================動態菜單tab標簽========================
function AddTabMenu(tabid, url, name, img, Isclose, IsReplace) {
SetSystemId(tabid);
if (url == "" || url == "#") {
url = "/ErrorPage/404.aspx";
}
var tabs_container = top.$("#tabs_container");
var ContentPannel = top.$("#ContentPannel");
if (IsReplace == 'true') {
top.RemoveDiv(tabid);
}
if (Isclose != 'false') { //判斷是否帶關閉tab
top.$(".navigation").hide();
} else {
top.$(".navigation").show();
}
if (top.document.getElementById("tabs_" + tabid) == null) { //如果當前tabid存在直接顯示已經打開的tab
Loading(true);
tabs_container.find('li').removeClass('selected');
ContentPannel.find('iframe').hide();
if (Isclose != 'false') { //判斷是否帶關閉tab
" + name + "
");

} else {
" + name + "
");

}
ContentPannel.append("");
}
else {
tabs_container.find('li').removeClass('selected');
ContentPannel.find('iframe').hide();
tabs_container.find('#tabs_' + tabid).addClass('selected');
top.document.getElementById("tabs_iframe_" + tabid).style.display = 'block';
}
}
//關閉當前tab
function ThisCloseTab() {
var tabs_container = top.$("#tabs_container");
top.RemoveDiv(tabs_container.find('.selected').attr('id').substr(5));
}
//關閉事件
function RemoveDiv(obj) {
var tabs_container = top.$("#tabs_container");
var ContentPannel = top.$("#ContentPannel");
tabs_container.find("#tabs_" + obj).remove();
ContentPannel.find("#tabs_iframe_" + obj).remove();
var tablist = tabs_container.find('li');
var pannellist = ContentPannel.find('iframe');
if (tablist.length > 0) {
tablist[tablist.length - 1].className = 'selected';
pannellist[tablist.length - 1].style.display = 'block';
}
if (tablist.length == '1') {
top.$(".navigation").show();
}
}

三、舉一反三

我：“大雄，原來做前端就是這么簡單呀，套套js和樣式，P兩張好看點的圖，找幾張圖片，什么樣的界面出不來呀”

大雄：“可不就是這么簡單么，只是你太SB而已，到現在才明白”

好吧！你牛，我TM把你以前那兩套UI前端界面也仿出來，不就是F12么，我js好歹還是會點的。半小時后。。。

四、動態加載

“哦耶耶，你之前弄的那幾套風格的界面都讓我扒過來了”

大雄：“喲！我穿過的，都讓你給扒了，不錯嘛，名師出高徒呀”

我：“狗P名濕，你教我啥啦？”

大雄：“F12呀，對了你那個菜單能動態加載嗎？”

我：“動態加載？html的怎么動態加載？”

大雄：“你SB呀，你不知道用JS從后臺獲取菜單數據，然后自動拼接出菜單來，再加載，不就動態了么？會個F12就這么囂張了”

我：“JS里面可以拼接html,你怎么不早講，什么東西都藏著掖著的”

大雄：“我這么忙，你不問我，我怎么知道你想要什么，你當我是websocket時不是還給你那個消息推送啊。”

好吧，還是得自己來做，那個清高的大濕只會罵我的時候話多一點。。。

動態加載要做到以下幾步：

1、要在數據庫里建立菜單，表結構如下：

主要字段介紹：

ParentID:父級主鍵，正確的帶出多級下拉菜單。

Img:圖片路徑，前臺加載時根據路徑加載菜單圖標，使菜單看起來更加漂亮。

SortCode:菜單顯示的順序。

2、通過jquery調用ajax調用數據庫，從數據庫中把菜單的父節點，圖片地址、排序方式等調出來，這種后臺代碼大家都熟就不做詳細描述了。

3、頁面載入時動態加載，根據ajax方法返回的json數據動態拼接html代碼，就跟我們平時寫C#代碼一樣，就是拼接個動態字符串，代碼如下

function resizeLayout() {
resizeU();
$(window).resize(resizeU);
function resizeU() {
var accordion_head = $('.accordion > li > a'),
accordion_body = $('.accordion li > .sub-menu');
$(".sub-menu").css('height', $(".navigation").height() - 19 - accordion_head.length * accordion_head.height() - accordion_head.length + 'px');
accordion_head.first().addClass('active').next().slideDown('normal');
accordion_head.on('click', function (event) {
event.preventDefault();
if ($(this).attr('class') != 'active') {
accordion_body.slideUp('normal');
$(this).next().stop(true, true).slideToggle('normal');
accordion_head.removeClass('active');
$(this).addClass('active');
}
});
}
}
//手風琴導航菜單
var AccordionMenuJson = "";
function GetAccordionMenu() {
var index = 0;
var html = "";
getAjax("Frame.ashx", "action=LoadFirstMenu", function (data) {
AccordionMenuJson = eval("(" + data + ")");
$.each(AccordionMenuJson, function (i) {
if (AccordionMenuJson[i].ParentId == '9f8ce93a-fc2d-4914-a59c-a6b49494108f') {
if (index == 0) {
<a style="\"border-top:" 0px="" solid="" #ccc;\"="">" + AccordionMenuJson[i].FullName + "";

} else {
" + AccordionMenuJson[i].FullName + "";

}
html += GetSubmenu(AccordionMenuJson[i].MenuId);
html += "";
index++;
}
});
})
$(".accordion").append(html);
}
//子菜單
function GetSubmenu(MenuId) {
var html = "";
html += "
";
$.each(AccordionMenuJson, function (i) {
if (AccordionMenuJson[i].ParentId == MenuId) {
}
});
html += "";
return html;
}

后臺的拼接出這些代碼以后，就跟我們按F12鍵以后得到的結果是一樣的。

運行一下，咦，怎么界面上啥東西都沒有？我擦，忘了在數據庫里添加幾個測試菜單，當然是空的了。

三分鐘后。。。

“大雄，大雄！！！好啦！可以啦。”

怎么沒人了？一看時間兩點多了。。。還得加幾個功能頁面進去才可以做demo

唉，苦逼的程序猿傷不起呀。。。。。

JS中拼接html字符串，遇到的坑往往是由書寫格式引起的

注意以下幾點：

1. 單雙引號需嵌套使用；
2. 傳入 JSON 對象需要使用 JSON.stringify() 序列化為一個 JSON 字符串，并且更需要注意單雙引號嵌套問題。

示例：

let html = "";
for(var i=0;i<data.length;i++){
 html += '<tr>'+
 '<td>'+ data[i].appName +'</td>'+
 '<td>'+ '<button type="button" onclick="edit('+JSON.stringify(data[i]).replace(/\"/g,"'")+')">按鈕1</button>'+'</td>'+
 '<td>'+ "<button type='button' onclick='del("+JSON.stringify(data[i])+")'>按鈕2</button>"+'</td>'+
 +'</tr>'
}

上述代碼中，使用了兩種不同的引號嵌套格式。按鈕1外層使用單引號，因此需要將JSON字符串中所有雙引號轉化成單引號，比較繁瑣。從語法角度考慮，JavaScript 字符串與 JSON 字符串的最大區別在于，JSON 字符串必須使用雙引號（單引號會導致語法錯誤），因此不推薦此寫法。

推薦第二種寫法，直接在外層嵌套雙引號，無需進行額外操作。