JQuery Template Engine 簡介 1
現(xiàn)在的web開發(fā)用到j(luò)avascript越來與多,其中jquery已經(jīng)是事實上最流行的javascript library了
經(jīng)常我們會使用javascipt來操作 dom/html 例如 html="<a href='#'>test </a>";
不過這樣的代碼難以維護(hù)和閱讀
JQuery1.4.3 以及以上的版本已經(jīng)支持了template engine的功能 (當(dāng)然,還有很多第三方的實現(xiàn),例如microsoft template engine, 不過我還是喜歡build-in的功能,,不要額外下載js文件 不用擔(dān)心兼容性的問題)
說了這么多,還是盡快給一個demo讓大家對template engine有一個快速的印象吧
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
</head>
<body>
<script id="movieTemplate" type="text/x-jquery-tmpl">
<li><b>${Name}</b> (${ReleaseYear})</li>
</script>
<ul id="movieList">
</ul>
<script>
var movies = [
{ Name: "The Red Violin", ReleaseYear: "1998" },
{ Name: "Eyes Wide Shut", ReleaseYear: "1999" },
{ Name: "The Inheritance", ReleaseYear: "1976"}];
$("#movieTemplate").tmpl(movies).appendTo("#movieList");
</script>
</body>
</html>
1. 定義一個template ， 如上代碼中 id="movieTemplate" 所示
2. 使用數(shù)據(jù) movies 借由模板生成最終的html 然后
3. 將html附加到元素movieList內(nèi)
代碼簡潔優(yōu)雅， 不需要拼字符串，樣式和邏輯分割的比較徹底
浙公網(wǎng)安備 33010602011771號