基于jquery模板实现页面渲染

来源：互联网发布：网络带给我们的好处编辑：程序博客网时间：2024/06/05 22:46

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 -“面向简历开发”)

阅读全文

0 0