为什么选择Handlebars.js

据了解,对于java开发,涉及到页面展示时,比较主流的有两种解决方案:

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>

   2. Json+ajax+拼html

这种方法一般是基于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);
});

造成这种问题的根本原因在于拼接html打乱了html原有的层次结构,看不出来哪里是哪里,没有了层次结构的代码,堆在那里就像是一坨垃圾。

el表达式构造html优点是能够保持html原有格式,js构造html优点是速度快省资源,为什么我们不能把二者的优点结合在一起呢?这就是Handlebars.js。

既然要在项目中引入js模版引擎,就必须进行技术选型,严格考核之后,才可以引入,就好像是木桶效应,不能让他成为项目中的短板。

Handlebars.js是一款基于Jquery的插件,以json对象为数据源,支持逻辑判断、循环等操作,同时具有非常好的扩展性,体积60KB左右,经过仔细的分析研究,这是一款不可多得的js模版引擎。

时间: 2024-10-31 23:02:51

为什么选择Handlebars.js的相关文章

js模版引擎handlebars.js实用教程

一.为什么选择Handlebars.js 据小菜了解,对于java开发,涉及到页面展示时,比较主流的有两种解决方案: 1. struts2+vo+el表达式. 这种方式,重点不在于struts2,而是vo和el表达式,其基本思想是:根据页面需要的信息,构造出一个实体,这个实体中包含了界面需要的所有属性,通常这个实体是由N个表中的字段构成的,俗称vo.由于vo的属性可以是String.List.Map等等等,又可以vo套vo,因此这种方式非常灵活,也非常好用. 在后台对vo进行赋值,通过strut

Handlebars.js的学习

写在开头的话: 在使用Ghost搭建自己的博客的时候,发现不会Handlebars.js寸步难行,所以本人决定学习下Handlebars.js,因此在此做个记录 为什么选择Handlebars.js 这里就直接引用别的博客内容了,写的还是非常不错的:地址是如下点我有惊喜哟 Handlebars.js的语法 <div>{{ content goes here }} </div> customerName变量在Handlebars编译函数运行时被插值: <div> Name

Handlebars.js循环中索引(@index)使用技巧(访问父级索引)

使用Handlebars.js过程中,难免会使用循环,比如构造数据表格.而使用循环,又经常会用到索引,也就是获取当前循环到第几次了,一般会以这个为序号显示在页面上. Handlebars.js中获取循环索引很简单,只需在循环中使用{{@index}}即可. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <META http-equiv=Content-Type content="text/html; charset=utf-

Handlebars.js 预编译(转)

Handlebars.js 官网上对预编译1是这样说的: 你需要安装 Node.js 你需要在全局环境中,通过 Npm 安装 handlebars 包 然后你就可以通过命令预编译你的 handlebars 模板文件: $ handlebars <input> --output <output> 假设我有一个模板文件,名称为 person.handlebars,内容很简单,如下: <table> <tr> <td>This is {{firstna

Handlebars.js 中文文档

Home  ?  前端   ?   Handlebars.js 中文文档 Handlebars.js 中文文档 Posted in 前端 By KeenWon On 2014年4月3日 Views: 33,200 使用Handlebars,你可以轻松创建语义化模板,Mustache模板和Handlebars是兼容的,所以你可以将Mustache导入Handlebars以使用 Handlebars 强大的功能. 开始 Handlebars模板看起来和HTML一样,只是嵌入了 handlebars

Handlebars.js入门教程

概述 刚接触前端的时候,师傅就给我推荐了Handlebars,自己也蛮喜欢它的语法.到现在,Handlebars都已经更新到3.0.3了,是时候重新过一遍文档了. 引入 要使用Handlebars,首先你得download,然后再页面引入,就像这样 <script src="script/lib/jquery.js"></script> <script src="script/lib/handlebars.js"></scr

JS 模板引擎 Handlebars.js 中文说明

Handlebars 为你提供了一个可以毫无挫折感的高效率书写 语义化的模板 所必需的一切. Mustache 模板和 Handlebars 是兼容的,所以你可以把Mustache模板拿来导入到Handlebars中,并开始使用Handlebars所提供的更丰富的功能. 开始 Handlebars模板看起来就像是正常的Html,并使用了嵌入的 handlebars 表达式. <div class="entry"> <h1>{{title}}</h1>

Handlebars.js模板

1,Handlebars是一个很好的前后端的分离的方案.通过对view和data的分离来快速构建Web模板.优点:在js中避免写入html代码,可读性好,易维护. 2,常用属性: {{home }} {{#if birth}} {{/if}} 判断 each {{#each arr}} {{this}} {{/each}} 遍历 with {{#with arr}} {{#each this}} {{this}} {{/each}} {{/with}} {{!----}} 注释 {{@index

使用handlebars.js來處理json template

使用json資料後的套版問題 我相信很多人在取得json資料後會用Jquery處理套版的問題: $.ajax({ ... .done(function(data) { var context = $("<ul></ul>"); $.each(data, function(i, v){ content.append('<li>' + v + '</li>'); ... }); }); }); 數量上面少還好,如果是很複雜的template,