本文探讨了两种主流的Web前端展示方案：struts2+vo+EL表达式及Json+Ajax+拼接HTML的方法。针对后者存在的问题，介绍了Handlebars.js模板引擎的应用，展示了其在提高开发效率和用户体验方面的优势。
web前端JS整理
引入
对于java web开发，涉及到页面展示时，比较主流的有两种解决方案
1. struts2+vo+el表达式。
这种方式，重点不在于struts2，而是vo和el表达式，其基本思想是：根据页面需要的信息，构造出一个实体，这个实体中包含了界面需要的所有属性，通常这个实体是由N个表中的字段构成的，俗称vo。由于vo的属性可以是String、List、Map等等等，又可以vo套vo，因此这种方式非常灵活，也非常好用。
在后台对vo进行赋值，通过struts2封装到request中，然后在界面用el表达式，通常是${}、forEach标签什么的，即可构造出界面。
但这种方式小菜却不是很看好。因为这种利用标签控制html，依然是把表现和控制混杂在一起，html里边混杂了大量el控制标签，很不美观。
当然，小菜不可能因为这么简单的理由拒绝这种方式，读者仔细思考可以发现，利用el表达式生成html代码，这是一个在服务器端执行的动作，在服务器端解析完成之后，才发送到客户端浏览器上，这样做会占用大量服务器资源，而且速度缓慢。
示例代码：
<c:forEach var='bm' items="${contractAuditVo.borrowerModels}">
<table>
<tbody>
<tr>
<td>借款人编号：</td>
<td>
<p>
${bm.borrowerId }
</p>
</td>
</tr>
<tr>
<td>客户编号：</td>
<td>
<p>
${bm.customerId }
</p>
</td>
</tr>
<tr>
<td>曾用名：</td>
<td>
<p>
${bm.usedName }
</p>
</td>
</tr>
</tbody>
</table>
</c:forEach>这种方法一般是基于ajax请求，要求服务器端返回一个json类型的json字符串，这个json串中包含了界面所需的所有信息，界面拿到json串后，构造出html，完成界面展示。
小菜推荐这种方法，通过这种方式编写的页面，反应速度非常快，用户体验非常好。
因为服务器端只需要提供一个json串，由客户端完成解析，因此服务器承受的压力很小，目前的电脑配置都较高，客户端的浏览器解析js脚本很快，因此页面体验效果好。
解析的过程大致是通过Jquery的each方法，进行遍历。
但是小菜利用这种方式时，犯了一个致命的错误，小菜是通过原始的拼接html的方式，页面中写了大量html+=”<div>”;，这种写法使页面变得非常凌乱，几乎不可以维护。
示例代码：
var contractTextHtml="";
$.each(jsonObject.cl,function(i,n){
contractTextHtml="";
//插入合同文本数据
contractTextHtml+="<div title='出借人信息---"+hiddenNull(n.cm.lenderName)+"' style='overflow:auto;padding:5px;'>";
contractTextHtml+="<table class='ui-table ui-table-noborder'>";
contractTextHtml+="<tbody>";
contractTextHtml+="<tr><td>合同编号：</td><td><p>"+hiddenNull(n.cm.contractId)+"</p></td></tr>";
contractTextHtml+="<tr class='ui-table-split'><td>出借人姓名：</td><td><p>"+hiddenNull(n.cm.lenderName)+"</p></td></tr>";
contractTextHtml+="<tr><td>出借人证件类型：</td><td><p>"+hiddenNull(n.cm.lenderIdType)+"</p></td></tr>";
contractTextHtml+="<tr class='ui-table-split'><td>出借人证件号：</td><td><p>"+hiddenNull(n.cm.lenderIdNum)+"</p></td></tr>";
contractTextHtml+="<tr><td>出借金额：</td><td><p>"+hiddenNull(n.cm.lenderAmount)+"</p></td></tr>";
contractTextHtml+="<tr class='ui-table-split'><td>出借人编号：</td><td><p>"+hiddenNull(n.cm.lenderNo)+"</p></td></tr>";
contractTextHtml+="<tr><td>出借人银行帐号：</td><td><p>"+hiddenNull(n.cm.lenderBankAccount)+"</p></td></tr>";
contractTextHtml+="<tr class='ui-table-split'><td>撮合编号：</td><td><p>"+hiddenNull(n.cm.makeMatchNo)+"</p></td></tr>";
contractTextHtml+="</tbody>";
contractTextHtml+="</table>";
contractTextHtml+="</div>";
$("#textList").append(contractTextHtml);
});
Handlebars 是 JavaScript 一个语义模板库，通过对view和data的分离来快速构建Web模板。它采用"Logic-less template"（无逻辑模版）的思路，在加载时被预编译，而不是到了客户端执行到代码时再去编译， 这样可以保证模板加载和运行的速度。Handlebars兼容Mustache，你可以在Handlebars中导入Mustache模板
Handlebars.js是一款基于Jquery的插件，以json对象为数据源，支持逻辑判断、循环等操作，同时具有非常好的扩展性，体积60KB左右，经过小菜仔细的分析研究，这是一款不可多得的js模版引擎。
如何使用：引用
<script type="text/javascript" src="script/handlebars-1.0.0.beta.6.js"></script>
<!DOCTYPE html>
<html>
<head>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<title>each-基本循环使用方法 - by 杨元</title>
</head>
<body>
<h1>each-基本循环使用方法</h1>
<!--基础html框架-->
<table>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody id="tableList">
</tbody>
</table>
<!--插件引用-->
<script type="text/javascript" src="script/jquery.js"></script>
<script type="text/javascript" src="script/handlebars-1.0.0.beta.6.js"></script>
<!--Handlebars.js模版-->
<!--Handlebars.js模版放在script标签中，保留了html原有层次结构,模版中要写一些操作语句-->
<!--id可以用来唯一确定一个模版,type是模版固定的写法-->
<script id="table-template" type="text/x-handlebars-template">
{{#each student}}
<tr>
<td>{{name}}</td>
<td>{{sex}}</td>
<td>{{age}}</td>
</tr>
{{/each}}
</script>
<!--进行数据处理、html构造-->
<script type="text/javascript">
$(document).ready(function() {
//模拟的json对象
var data = {
"student": [
{
"name": "张三",
"sex": "0",
"age": 18
},
{
"name": "李四",
"sex": "0",
"age": 22
},
{
"name": "妞妞",
"sex": "1",
"age": 18
}
]
};
//注册一个Handlebars模版，通过id找到某一个模版，获取模版的html框架
var myTemplate = Handlebars.compile($("#table-template").html());
//将json对象用刚刚注册的Handlebars模版封装，得到最终的html，插入到基础table中。
$('#tableList').html(myTemplate(data));
});
</script>
</body>
</html>
<script id="IDX_ASS_INFO" type="text/x-handlebars-template">
<thead>
<tr style="background-color:#f4fbff">
<th style="padding-right:8px;padding-left:8px"><input id="th_checkbox" type="checkbox" onclick="Idx_Assemble.checkButtonEvent.allCheck(this);"></th>
<th>指标名称</th>
<th>指标分类</th>
<th>指标版本</th>
<th>操作</th>
</tr>
</thead>
{{#if this.length}}
<tbody>
{{#each this}}
<tr>
{{#if_eq checkFlag compare="1"}}
<td style="padding-right:8px;padding-left:8px"><input id={{idxId}} value={{versionCodes}} name="childCheckbox" onclick="Idx_Assemble.checkButtonEvent.getChiCheck(this);" checked="true" type="checkbox"></td>
{{else}}
<td style="padding-right:8px;padding-left:8px"><input id={{idxId}} value={{versionCodes}} name="childCheckbox" onclick="Idx_Assemble.checkButtonEvent.getChiCheck(this);" type="checkbox"></td>
{{/if_eq}}
<td>{{idxName}}</td>
<td>{{idxFolderPath}}</td>
<td>
<div class="select_w120">
<select class="select_w120" id=seloption{{idxId}} style="display: block">
{{#with versionCodes}}
{{#each this}}
<option>{{this}}</option>
{{/each}}
{{/with}}
</select>
</div>
</td>
<td>
<button type="button" onclick="Idx_Assemble.checkButtonEvent.deleteOne({{idxId}})" class="button_dashed_blue">删除</button>
</td>
</tr>
{{/each}}
</tbody>
{{/if}}
</script>
扫一扫
21
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
