前端js模板引擎，快速地動(dòng)態(tài)拼接html代碼

量添加數(shù)據(jù)時(shí)，需要?jiǎng)討B(tài)添加html代碼。例如：添加規(guī)格。

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

字符與變量拼接，倒是簡(jiǎn)單易行，就是容易出錯(cuò)（比如：引號(hào)不成對(duì)），需要反復(fù)調(diào)試。

拼接字符串要是不講究，那更是不便于我們?nèi)祟?lèi)閱讀，所以，要是元素有改變或者新增了元素，維護(hù)起來(lái)自然不易。

要是像php模板引擎一樣，直接把變量塞進(jìn)html代碼里面，不但不用糾結(jié)引號(hào)是否匹配、成對(duì)標(biāo)簽是否缺失閉標(biāo)簽，而且格式化，那多好-----嗯，這個(gè)可以有。

php有模板引擎，咱js也有，不但有，還百家爭(zhēng)鳴。

本猿機(jī)緣巧合之下，遇見(jiàn)了art-template.js。

先看一眼官方文檔。

于是，上文的動(dòng)態(tài)添加html代碼需求可以這么實(shí)現(xiàn)：

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

、坑爹的老板

“我X！這個(gè)項(xiàng)目是要商業(yè)應(yīng)用的，你還想用easyUI,500美刀的授權(quán)費(fèi)用。一個(gè)項(xiàng)目才賺多少錢(qián)！趕緊給我換了，明天去客戶那邊要做demo的，今天晚上必須給我趕出來(lái)！不懂的去問(wèn)大雄”黃總對(duì)我又是一通大吼。

我容易嘛我，以前做CS架構(gòu)系統(tǒng)的，現(xiàn)在突然讓我轉(zhuǎn)BS，前端開(kāi)發(fā)實(shí)在太費(fèi)力了。更要命的是還碰上一個(gè)SB坑爹的小老板。公司一共就三個(gè)人，老板（摳得要死，不知道怎么討到老婆的）、大雄（大濕級(jí)攻城濕，BS前端開(kāi)發(fā)大牛）、我（屌絲碼農(nóng)）。

二、開(kāi)工搞起

好吧，老板都發(fā)話了，自己重做吧，啥都要搞免費(fèi)的，怕侵犯別人版權(quán)，自己下的片全是正版的么？現(xiàn)在的人啊。。。發(fā)再多的牢騷也沒(méi)用，UI還是得自己寫(xiě)，先弄個(gè)好看點(diǎn)的主界面吧，里面的功能隨便糊弄下數(shù)據(jù)庫(kù)都懶得連。。這次要做的demo是一個(gè)后臺(tái)管理系統(tǒng)，菜單導(dǎo)航做成手風(fēng)琴的會(huì)顯得比較大方。那就做成手風(fēng)琴的吧。經(jīng)過(guò)網(wǎng)上一番搜索，我決定把菜單導(dǎo)航做成下面這個(gè)樣子

問(wèn)題來(lái)了，上面這個(gè)界面是很好看，關(guān)鍵是我不會(huì)做呀！那我這個(gè)菜鳥(niǎo)只好向大雄大師求教了。

我：“大雄，這個(gè)導(dǎo)航菜單怎么做？”

大雄：“沒(méi)時(shí)間，我在改BUG。”

我：“老板讓我問(wèn)你的。”

大雄：“我?guī)湍惆呀缑孀龊茫隳軒臀野堰@250個(gè)BUG和需求全改掉？明天就要，多謝你了”

我：“唉，我有個(gè)女同學(xué)讓我?guī)兔榻B個(gè)男朋友”

大雄：“剛好我現(xiàn)在有時(shí)間，我先幫你弄”

大雄過(guò)來(lái)看了一眼我同學(xué)的照片說(shuō)：“網(wǎng)址不是都有了么，自己按F12，什么都有的，我忙去了。。。”

我了個(gè)去什么人呀，看人家長(zhǎng)得抽象點(diǎn)就撂挑子了，那就F12吧，

擦！F12真是個(gè)好東西呀，按一下什么html標(biāo)記、css樣式全有了。原來(lái)所謂的前端大濕也不過(guò)如此嘛！

不斷的ctrl+C、和ctrl+v后，自己再寫(xiě)了點(diǎn)js腳本的我的界面出來(lái)啦！！！！完全實(shí)現(xiàn)了左側(cè)樹(shù)狀導(dǎo)航，點(diǎn)擊完導(dǎo)航在右側(cè)以選項(xiàng)卡的形式打開(kāi)標(biāo)簽。

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

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

2）右側(cè)以選項(xiàng)卡方式打開(kāi)標(biāo)簽其實(shí)是給div加了個(gè)onclick事件點(diǎn)擊以后在右側(cè)有兩個(gè)動(dòng)作：1、加一個(gè)iframe,里面放頁(yè)面內(nèi)容。2、加一個(gè)標(biāo)簽跟頁(yè)面對(duì)應(yīng)，可以控制頁(yè)面的顯示隱藏和關(guān)閉。

附打標(biāo)簽選項(xiàng)卡代碼

//=================動(dòng)態(tài)菜單tab標(biāo)簽========================
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') { //判斷是否帶關(guān)閉tab
top.$(".navigation").hide();
} else {
top.$(".navigation").show();
}
if (top.document.getElementById("tabs_" + tabid) == null) { //如果當(dāng)前tabid存在直接顯示已經(jīng)打開(kāi)的tab
Loading(true);
tabs_container.find('li').removeClass('selected');
ContentPannel.find('iframe').hide();
if (Isclose != 'false') { //判斷是否帶關(guān)閉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';
}
}
//關(guān)閉當(dāng)前tab
function ThisCloseTab() {
var tabs_container = top.$("#tabs_container");
top.RemoveDiv(tabs_container.find('.selected').attr('id').substr(5));
}
//關(guān)閉事件
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();
}
}

三、舉一反三

我：“大雄，原來(lái)做前端就是這么簡(jiǎn)單呀，套套js和樣式，P兩張好看點(diǎn)的圖，找?guī)讖垐D片，什么樣的界面出不來(lái)呀”

大雄：“可不就是這么簡(jiǎn)單么，只是你太SB而已，到現(xiàn)在才明白”

好吧！你牛，我TM把你以前那兩套UI前端界面也仿出來(lái)，不就是F12么，我js好歹還是會(huì)點(diǎn)的。半小時(shí)后。。。

四、動(dòng)態(tài)加載

“哦耶耶，你之前弄的那幾套風(fēng)格的界面都讓我扒過(guò)來(lái)了”

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

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

大雄：“F12呀，對(duì)了你那個(gè)菜單能動(dòng)態(tài)加載嗎？”

我：“動(dòng)態(tài)加載？html的怎么動(dòng)態(tài)加載？”

大雄：“你SB呀，你不知道用JS從后臺(tái)獲取菜單數(shù)據(jù)，然后自動(dòng)拼接出菜單來(lái)，再加載，不就動(dòng)態(tài)了么？會(huì)個(gè)F12就這么囂張了”

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

大雄：“我這么忙，你不問(wèn)我，我怎么知道你想要什么，你當(dāng)我是websocket時(shí)不是還給你那個(gè)消息推送啊。”

好吧，還是得自己來(lái)做，那個(gè)清高的大濕只會(huì)罵我的時(shí)候話多一點(diǎn)。。。

動(dòng)態(tài)加載要做到以下幾步：

1、要在數(shù)據(jù)庫(kù)里建立菜單，表結(jié)構(gòu)如下：

主要字段介紹：

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

Img:圖片路徑，前臺(tái)加載時(shí)根據(jù)路徑加載菜單圖標(biāo)，使菜單看起來(lái)更加漂亮。

SortCode:菜單顯示的順序。

2、通過(guò)jquery調(diào)用ajax調(diào)用數(shù)據(jù)庫(kù)，從數(shù)據(jù)庫(kù)中把菜單的父節(jié)點(diǎn)，圖片地址、排序方式等調(diào)出來(lái)，這種后臺(tái)代碼大家都熟就不做詳細(xì)描述了。

3、頁(yè)面載入時(shí)動(dòng)態(tài)加載，根據(jù)ajax方法返回的json數(shù)據(jù)動(dòng)態(tài)拼接html代碼，就跟我們平時(shí)寫(xiě)C#代碼一樣，就是拼接個(gè)動(dòng)態(tài)字符串，代碼如下

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');
}
});
}
}
//手風(fēng)琴導(dǎo)航菜單
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;
}

后臺(tái)的拼接出這些代碼以后，就跟我們按F12鍵以后得到的結(jié)果是一樣的。

運(yùn)行一下，咦，怎么界面上啥東西都沒(méi)有？我擦，忘了在數(shù)據(jù)庫(kù)里添加幾個(gè)測(cè)試菜單，當(dāng)然是空的了。

三分鐘后。。。

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

怎么沒(méi)人了？一看時(shí)間兩點(diǎn)多了。。。還得加幾個(gè)功能頁(yè)面進(jìn)去才可以做demo

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

JS中拼接html字符串，遇到的坑往往是由書(shū)寫(xiě)格式引起的

注意以下幾點(diǎn)：

單雙引號(hào)需嵌套使用；
傳入 JSON 對(duì)象需要使用 JSON.stringify() 序列化為一個(gè) JSON 字符串，并且更需要注意單雙引號(hào)嵌套問(wèn)題。

示例：

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>'
}

上述代碼中，使用了兩種不同的引號(hào)嵌套格式。按鈕1外層使用單引號(hào)，因此需要將JSON字符串中所有雙引號(hào)轉(zhuǎn)化成單引號(hào)，比較繁瑣。從語(yǔ)法角度考慮，JavaScript 字符串與 JSON 字符串的最大區(qū)別在于，JSON 字符串必須使用雙引號(hào)（單引號(hào)會(huì)導(dǎo)致語(yǔ)法錯(cuò)誤），因此不推薦此寫(xiě)法。

推薦第二種寫(xiě)法，直接在外層嵌套雙引號(hào)，無(wú)需進(jìn)行額外操作。

在線咨詢

上一篇：HTML使用Canvas繪制動(dòng)畫(huà)時(shí)鐘
下一篇：Python每日一練-用Python制作mini翻譯器

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商

前端js模板引擎，快速地動(dòng)態(tài)拼接html代碼

JS中拼接html字符串，遇到的坑往往是由書(shū)寫(xiě)格式引起的

您的項(xiàng)目需求