Handlerbar.js——Ajax组装html的超强模板工具学习实践

最新推荐文章于 2024-08-10 07:10:30 发布

Q-Borfy

最新推荐文章于 2024-08-10 07:10:30 发布

阅读量1.9k

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/qiubaihong/article/details/45695947

版权

本文介绍了Handlerbar.js作为Ajax组装HTML的模板工具的优势，它结合了保持HTML格式和快速响应的优点。内容包括Handlerbar.js的基础使用，如each循环和if判断，以及Helper方法注册。此外，还提供了学习资源链接，帮助开发者进一步掌握Handlerbar.js。

摘要由CSDN通过智能技术生成

一、背景介绍

在JSP页面开发中，关于页面中html代码的组建方式有两种：

1、在JSP页面使用jsp<%%>语言或<c:each>等标签进行组建，优点：保持html原有格式，缺点：占用大量服务器资源，而且速度缓慢；

2、通过Ajax请求返回json对象，for循环等进行html代码组建，优点：反应速度非常快，用户体验非常好，缺点：无法html原有格式

在这里，推荐后者，因为服务器端只需要提供一个json串，由客户端完成解析，因此服务器承受的压力很小，目前的电脑配置都较高，客户端的浏览器解析js脚本很快，因此页面体验效果好。

然而，后者在组装html代码字符串的时候，会十分痛苦，如下：

 1 var contractTextHtml="";
 2 $.each(jsonObject.cl,function(i,n){
 3   
 4   contractTextHtml="";
 5   
 6   //插入合同文本数据
 7   contractTextHtml+="<div title='出借人信息---"+hiddenNull(n.cm.lenderName)+"' style='overflow:auto;padding:5px;'>";
 8   contractTextHtml+="<table class='ui-table ui-table-noborder'>";
 9   contractTextHtml+="<tbody>";
10   contractTextHtml+="<tr><td>合同编号：</td><td><p>"+hiddenNull(n.cm.contractId)+"</p></td></tr>";
11   contractTextHtml+="<tr class='ui-table-split'><td>出借人姓名：</td><td><p>"+hiddenNull(n.cm.lenderName)+"</p></td></tr>";
12   contractTextHtml+="<tr><td>出借人证件类型：</td><td&g