【JavaScript】相容IE6的JS模板化
所謂的JS模板化並不是什麼遙遠的東西，在Ajax運用越來越多的今天，這基本都快成為了一種基本訴求了。這東西離前端工程師們並不遙遠，舉個例子。
如下的一個簡單不能再簡單的效果，這個a=2，其中這個2的資料來自於Ajax返回。至於不知道什麼是Ajax的同學，可以參考《【Servlet】Servlet3.0與純javascript通過Ajax互動》（點選開啟連結）。
你打算怎麼寫程式碼？
相信很多人腦子中浮現的是類似這樣的一串HTML：
行吧，反正我精通《【JavaScript】網頁節點的增刪改查》（點選開啟連結）就能開始給人寫前端了，在JS中的到資料，不就再獲取要在HTML中新增的節點，然後組織一段HTML再擺上去不就得了嗎？<!DOCTYPE html> <html> <head> <title>Template_Js</title> </head> <body> <div id="wp"></div> </body> <script> var a=2;//假設這裡a是ajax返回的資料，無法直接擺上上面的html程式碼段 var html="<h1>a="+a+"</h1>"; document.getElementById('wp').innerHTML = html; </script> </html>
這樣做確實一點問題都沒有，也是Ajax資料在前端網頁中最簡單的資料形式之一，但是，你想想，這裡僅僅是拼接一個簡單的<h1></h1>都寫得如此艱難。在日常的實踐中，Ajax返回來的資料和樣式絕對和這個例子不是一樣量級的。因此，前端涉及Ajax的程式碼，常常就會演變成這樣情況：
而可怕的是，這段東西，常常會被IDE認為是Javascript程式碼，你讓一些連自己開一個新的HTML都寫不好的前端MM怎麼維護？
別說只會寫前端的程式萌妹子，我相信連始作俑者過一段時間之後都未必知道自己當時到底做了什麼，腦袋是不是給蠢驢踢了。
於是乎，JS模板化的訴求就應運而生了。
當時JS模板化的最著名貌似是artTemplate，但這傢伙貌似不相容IE6，應該說是IE8以下都不能相容，貌似是因為他通篇用的是HTML5的程式碼，什麼的console.log()函式，這東西沒有HTML5效果的瀏覽器基本不認。
所以我選用了template.js使JS模板化。這東西親測能相容IE6+。
一、template.js的配置安裝
然後解壓之後取走裡面的template.js到你的網站目錄之下，則配置完成。
二、JS模板化
接下來憑藉著這個JS，則可以開始JS模板化。讓你凌亂的前端程式碼，尤其那些大部分依靠Ajax傳遞資料生成的前端程式碼，整潔起來。最重要的是，讓該在HTML的部分回到HTML。至少讓IDE可以識別，極大地提高你的維護效率。與所有程式設計一樣，就是三種結構順序、條件、迴圈，說白點，就是一行一行讀下來的程式碼和if、for。
1、順序結構
拿回上面的錯誤示範來說明。
通過template.js你可以寫成這樣：
<!DOCTYPE html>
<html>
<head>
<title>Template_Js</title>
</head>
<body>
<div id="wp"><!--一般要渲染的部分給個id-->
<script id="tpl" type="text/html"><!--指明需要被template.js渲染的部分-->
<h1>a=<%:=a%></h1>
</script>
</div>
</body>
<script src="template.js"></script><!--引入的template.js，這裡的引入必須在body節點之下，否則可能無法對上面的模板渲染-->
<script>
var a=2;//假設這裡a是ajax返回的資料，無法直接擺上上面的html程式碼段
var html = template(document.getElementById('tpl').innerHTML, {
a:a
});//左邊的a是指上面html的<%:=a%>右邊的a是指javascript也就是上面那行的var a=2;
document.getElementById('wp').innerHTML = html;//渲染上面的wp節點
</script>
</html>這樣寫作的好處是，以後你要維護css樣式，這裡是<h1>節點，你該成<h2><b>節點什麼的，非常直觀具體，不用在下面的script程式碼段找死人。
也可以將下面script的部分直接扔的一個js檔案下面，真正實現html與javascript分離，而不是雜糅。
如果說css是讓使用者覺得你寫網頁好看，那麼這個JS模板化是讓我們程式猿自己寫的網頁好看。
2、條件結構
上面是template.js最簡單的應用，那麼如果我們需要判斷下輸出那種樣式呢？此時，你就需要用IF了。
也很簡單，大家直接看下面的HTML程式碼就懂了。弄懂上面的原理，也就大同小異了。
<!DOCTYPE html>
<html>
<head>
<title>Template_Js</title>
</head>
<body>
<div id="wp">
<script id="tpl" type="text/html">
<%if (a>0) {%>
<h1>a是正數！</h1>
<%}%>
</script>
</div>
</body>
<script src="template.js"></script>
<script>
var html = template(document.getElementById('tpl').innerHTML, {
a:2
});
document.getElementById('wp').innerHTML = html;
</script>
</html>
看到這裡或許有人會異想天開，有if能不能有else呢？抱歉，這template.js沒有這樣的功能。比如如下程式碼是錯誤的！
<!DOCTYPE html>
<html>
<head>
<title>Template_Js</title>
</head>
<body>
<div id="wp">
<script id="tpl" type="text/html">
<%if (a>0) {%>
<h1>a是正數！</h1>
<%}%>
<%else {%>
<h1>a不是正數！</h1>
<%}%>
</script>
</div>
</body>
<script src="template.js"></script>
<script>
var a=-2;
var html = template(document.getElementById('tpl').innerHTML, {
a:a
});
document.getElementById('wp').innerHTML = html;
</script>
</html>執行結果是這樣的：
這個template.js不提供if~else結構，只提供if很正常，如果你需要對Ajax資料進行判斷，請你放在javascript部分，具體如下，這也符合html部分只放樣式展示程式碼，不放資料運算程式碼的思想是一致的。
<!DOCTYPE html>
<html>
<head>
<title>Template_Js</title>
</head>
<body>
<div id="wp">
<script id="tpl" type="text/html">
<h1><%=str%></h1>
</script>
</div>
</body>
<script src="template.js"></script>
<script>
var a=-2;
if(a>0){
var str="a是正數！";
}
else{
var str="a不是正數！"
}
var html = template(document.getElementById('tpl').innerHTML, {
str:str
});
document.getElementById('wp').innerHTML = html;
</script>
</html>
3、迴圈結構
for結構在平常的網頁程式設計也很常見的，因為Ajax返回來的東西，很多情況下絕對不是上面兩種情況這麼簡單，而是一個數組。
那麼對於一個數組，在template.js自然有相應的處理方式，先來看一個基本的javascript基本陣列數字1~5，具體HTML程式碼如下：
<!DOCTYPE html>
<html>
<head>
<title>Template_Js</title>
</head>
<body>
<div id="wp">
<script id="tpl" type="text/html">
<%for(var i = 0; i < list.length; i++) {%>
<li><%=list[i]%></li>
<%}%>
</script>
</div>
</body>
<script src="template.js"></script>
<script>
var list=[1,2,3,4,5];
var html = template(document.getElementById('tpl').innerHTML, {
list:list
});
document.getElementById('wp').innerHTML = html;
</script>
</html>執行結果如下：
而對於一個典型的Ajax返回陣列，你可以這樣寫：
<!DOCTYPE html>
<html>
<head>
<title>Template_Js</title>
</head>
<body>
<div id="wp">
<script id="tpl" type="text/html">
<%for(var i = 0; i < list.length; i++) {%>
<li>name=<%=list[i].name%>,num=<%=list[i].num%></li>
<%}%>
</script>
</div>
</body>
<script src="template.js"></script>
<script>
var list=[{name: "a",num:1},{name: "b",num:2},{name: "c",num:3}];//典型的ajax格式
var html = template(document.getElementById('tpl').innerHTML, {
list:list
});
document.getElementById('wp').innerHTML = html;
</script>
</html>執行結果如下：
大家可以看到，經歷過這樣的JS模板化之後，以後你維護樣式，比如這裡，你覺得我這個<li>節點實在太醜，你就直接可以在HTML部分，改成<li class="xx">，無須在javascript找來找去。再也不會出現，這樣的一坨啥了！-_-！
相關推薦
【JavaScript】相容IE6的JS模板化
所謂的JS模板化並不是什麼遙遠的東西，在Ajax運用越來越多的今天，這基本都快成為了一種基本訴求了。這東西離前端工程師們並不遙遠，舉個例子。 如下的一個簡單不能再簡單的效果，這個a=2，其中這個2的資料來自於Ajax返回。至於不知道什麼是Ajax的同學，可以參考《【Serv
【Javascript】二、IE/FF的JS相容寫法
做BS開發就難免會用到javascript，而每個瀏覽器對javascript的支援有不同。這就需要我們程式設計師去相容他們下面是相容IE和FF的js指令碼做法和分解，希望對大家有幫助。 /*以下以 IE 代替 Internet Explorer，以 MF/FF 代替 M
【JavaScript】讓事件支持先發布後訂閱
class 問題 想要 png trigger 很快 9.png area ++ 之前寫過一個的事件管理器，就是普通的先訂閱後發布模式。但實際場景中我們需要做到後訂閱的也能收到發布的消息。比如我們關註微信公眾號，還是能看到歷史消息的。類似於qq離線消息，我先發給你，你登錄了
【JavaScript】js02
mode oninput on() tag tle blur replace absolute padding 正則對象。 聲明： //var reg = new RegExp(‘‘, ‘‘);// i,g 修正符。
【Javascript】call 和aplly
方法的參數 call ava apply 調用 javascrip bsp 方法 rip apply和call是Function類型的原型函數。所有的函數都會自動繼承這兩個方法。 func.apply(thisArg, [argsArray])func.call(thisA
【JavaScript】插件參數的寫法
log var [0 gin script ams selector lpar cti 就是實現復制的一個過程 (function() { var Explode = function(container, params) { ‘use stric
【JavaScript】explode動畫
lte ctu 起點 運動 max cnblogs pic 位置 raw 這是一個js實現的粒子聚合文字或圖片的動畫特效 部分程序如下 n.container = n.container[0] || n.container; /*有且僅有一個cont
【JavaScript】富文本編輯器
bject repl active last rri file data 樣式 current 這是js寫的富文本編輯器，還存在一些bug，但基本功能已經實現，通過這個練習，鞏固了js富文本編輯方面的知識，裏面包含顏色選擇器、全屏、表情、上傳圖片等功能，每個功能實際對應的就
【JavaScript】particle
page 循環 通過 and die 不支持 rst window inner 這是js實現的粒子動畫，有兩種模式，分別是zoom和line，它們對應的效果不同，但是原理都相同，具體分析如下： 部分程序如下： var p = this;
【JavaScript】筆記01——Making Stuff Happen？？？
文件 eight tin clas 快捷 strong init chrome scrip While, generally speaking, HTML is for content and CSS is for presentation, JavaScript is
【JavaScript】時間戳轉日期格式
number cnblogs 數據 style .ajax con etime subst new 時間戳： 1480570979000 $.ajax({ url : "getOrderMsg?ship
【JavaScript】離開頁面前提示
bin clas 什麽 || pos 窗體 art 提示 java 離開頁面前的提示不能夠用onunload去做，由於它僅僅是兼容IE，你要兼容Google與FireFox就蛋疼了。 並且這個事件還是關閉之後才會觸發的。 取而代之能夠用onbeforeunloa
【javascript】詳解javascript閉包 — 大家準備好瓜子，我要開始講故事啦~~
重要 參數 銷毀 弘揚 它的 bject 標題 多層嵌套 早就 前言： 在這篇文章裏，我將對那些在各種有關閉包的資料中頻繁出現，但卻又千篇一律，且曖昧模糊得讓人難以理解的表述，做一次自己的解讀。或者說是對“紅寶書”的《函數表達式/閉包》的那一章節所寫
【JavaScript】JavaScript(V8)實現輸入輸出
https func split 舉例 tps blog turn 輸出 ret 首先看牛客網的樣例：https://www.nowcoder.com/questionTerminal/dae9959d6df7466d9a1f6d70d6a11417 計算a+b的和，每行包
【bzoj4966】總統選舉 隨機化+線段樹
編號 並且 bsp 出現 ++ for 條件 amp 描述 題目描述 黑惡勢力的反攻計劃被小C成功摧毀，黑惡勢力只好投降。秋之國的人民解放了，舉國歡慶。此時，原秋之國總統因沒能守護好國土，申請辭職，並請秋之國人民的大救星小C欽定下一任。作為一名民主人士，小C決定舉行全民大
【JavaScript】read_line()、print()實現輸入輸出
包含 col line div () parseint 一個 print split /*輸入 輸入的第一行為一個正整數T，表示有T組測試數據。隨後的T行中，每行為一組測試數據。 每組測試數據包含由3個正整數構成，分別為N、M和a，其中1<=N, M, a <
【javascript】異步編年史，從“純回調”到Promise
條件 one org 場景 存在 gofunc ges 語句 += 異步和分塊——程序的分塊執行 一開始學習javascript的時候， 我對異步的概念一臉懵逼， 因為當時百度了很多文章，但很多各種文章不負責任的把籠統的描述混雜在一起，讓我對
【BZOJ4375】Selling Tickets 隨機化
line 賣出 ets -s 每次 感到 mil 分隔 針對 【BZOJ4375】Selling Tickets Description 廚師在一次晚宴上準備了n道豐盛的菜肴，來自世界各地的m位顧客想要購買宴會的門票。每一位顧客都有兩道特別喜愛的菜，而只要吃到了至少
【javascript】slice()的用法
spl 定位 .html 指定位置 gree 只需要 相等 綜合應用 個數 js splice()的用法 在javascript中splice()方法有如下3種方式： 刪除——可以刪除任意數量的項，只需要指定2個參數：要刪除的第一項的位置和要刪除項的項數。 例如，s
【javascript】JavaScript數組常用方法
map return 函數調用 turn 就會 開頭 滿足 函數 沒有 JavaScript數組常用方法 一、數組創建 1.（1）使用Array創建數組： 1 var arr1 = new Array(); //創建一個空數組 2 var arr2 = new Array