0. “模板”
模板有点像<在职证明>之类的固定格式的文档, 同一个公司每个人的在职证明格式一样, 唯一的不同是姓名, 身份证和日期. 使用模板的好处是, 不需要再费时费力写在职证明, 只需要找一份在职证明的模板, 然后把自己的姓名填写上去, 找人事盖章就完事了.
在网页中, 任何一个页面都可以使用模板. 比如, 一个新闻页面, 模板定义好哪里是标题, 哪里是正文, 哪里是评论区. 剩下的只需要去数据库搂数据填空就行.
解决方案有两个: jquery的tmpl, angularjs和vuejs的双向绑定
今天主要讲的就是jquery的tmpl来实现更新网页数据的同时不刷新整个页面
1. 完整代码
以下代码转自https://www.cnblogs.com/qixuejia/p/5188505.html
<!DOCTYPE html>
<html>
<head>
<title>jquery template demo</title>
<link rel="stylesheet" href="content/site.css" type="text/css" />
<link rel="stylesheet" href="content/jquery.ui.css" type="text/css" />
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/jquery.ui.js"></script>
<script type="text/javascript" src="scripts/jquery.tmpl.js"></script>
<script id="myTemplate" type="text/x-jquery-tmpl">
<tr><td>${ID}</td><td>${Name}</td></tr>
</script>
<script type="text/javascript">
$(function () {
var users = [{ ID: 'think8848', Name: 'Joseph Chan' }, { ID: 'aCloud', Name: 'Mary Cheung'}];
$('#myTemplate').tmpl(users).appendTo('#rows');
});
</script>
<style type="text/css">
body
{
padding: 10px;
}
table
{
border-collapse: collapse;
}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="3" border="1">
<tbody id="rows">
</tbody>
</table>
</body>
</html>2 重点
2.1 模板在哪里定义
其中${}是占位符, jquery负责把数据(一般是KeyValue的Map结构), 按Key填充到模板中
<script id="myTemplate" type="text/x-jquery-tmpl">
<tr><td>${ID}</td><td>${Name}</td></tr>
</script>2.2 js怎么把数据填空到模板中
$('#myTemplate').tmpl(users).appendTo('#rows');2.3 数据填空时, 怎么知道哪个数据填到哪个空?
定义模板时, 需要显示指定Key-Value的Key, 这样jquery就自动的按Key填空Value
<tr><td>${ID}</td><td>${Name}</td></tr>var users = [{ ID: 'think8848', Name: 'Joseph Chan' }, { ID: 'aCloud', Name: 'Mary Cheung'}];3 思考
“他强任他强, 老子jquery” – 佚名
jquery+jsp在过去10年里所向披靡, 如今, 随着web 2.0深入人心, 交互式网页越来越多, 同样的功能, jquery虽然能实现, 但是冗余的语法徒增了工作量.
和jquery的$(#templateId).tmpl().appendTo(#htmlId)相比, AngularJs和VueJs的双向绑定不仅能在第一次渲染时, 把数据填空到模板, 还支持js变量修改后页面同步刷新.
具体还是看业务场景, 如果明确是静态页面, 对jquery又很熟悉, 那就没必要上angularjs和vuejs. 一切为了业务, 不要做ROP (Resume Oriented Programming -“面向简历开发”)