文章出處
文章列表
之前看了一篇文章《我們為什么要嘗試前后端分離》，深有同感，并有了下面的評論：
我最近也和前端同事在討論這個問題，比如有時候前端寫好頁面給后端了，然后后端把這些頁面拆分成很多的 views，有時候還會在這些 view 中寫一些 c# 代碼，突然有一天前端頁面的樣式出錯了，但前端那里并沒有問題，然后后端把前端叫過來，說你在我這里調吧，因為你沒有后端的調試環境，然后前端就會很不爽，然后。。。你懂的！
其實理想的情況，就像你說的那樣，前端寫好頁面，關于動態數據都用 ajax 的方式進行加載，這些動態數據在前端那里先 mock 出來，但數據的格式要有一定的規范，前端弄好這些之后，后端不能去修改這些頁面，而是給前端一些數據接口，前端直接把接口替換掉 mock 就行了，如果頁面出了問題，前端直接修復就行了，各司其職的工作效率會非常高。
總的來說，就是前端和后端要有一定的規范和接口，彼此不干預對方的工作內容（比如后端在前端寫好的頁面里面寫后端代碼）。
今天偶然發現了一個 jQuery 插件，可以部分解決上面的問題，就是 jQuery.template.js，我們首先定義好 html 模版，然后使用這個插件在對應的模版中填充數據。
簡單示例：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="jquery.js"></script>
<script src="jquery.tmpl.js"></script>
</head>
<body>
<div id="div_template1"></div><br />
<ul id="div_template2">
</ul>
<script id="template1" type="text/x-jquery-tmpl">
<a href="${Link}" target="_blank">${Text}</a>
</script>
<script id="template2" type="text/x-jquery-tmpl">
<li>${ID}.<span>${Name}</span></li>
</script>
<script type="text/javascript">
$(function () {
var link = { Text: '蟋蟀', Link: 'http://www.cnblogs.com/xishuai/' };
var users = [{ ID: '1', Name: 'xishuai1' }, { ID: '2', Name: 'xishuai2' }];
$('#template1').tmpl(link).appendTo('#div_template1');
$('#template2').tmpl(users).appendTo('#div_template2');
});
</script>
</body>
</html>生成的 html 代碼：
<div id="div_template1"><a href="http://www.cnblogs.com/xishuai/" target="_blank">蟋蟀</a></div><br>
<ul id="div_template2">
<li>1.<span>xishuai1</span></li>
<li>2.<span>xishuai2</span></li>
</ul>會根據 json 數據的類型，進行單個顯示還是循環顯示，當然，也可以在 ajax 請求數據之后進行操作：
$.get("url", function (data) {
$('#template1').tmpl(data).appendTo('#div_template1');
});當然，jQuery.template.js 的功能不僅如此，具體參考：
文章列表
全站熱搜
留言列表
