据小菜了解，对于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代码，这是一个在服务器端执行的动作，在服务器端解析完成之后，才发送到客户端浏览器上，这样做会占用大量服务器资源，而且速度缓慢。

         示例代码：

1 
     
       2   
      
        3     
         4       
          5         
 6         
11       
12       
         13         
14         
19       
20       
         21         
22         
27       
28     
29   
       
        
         
借款人编号：
         
 7           
 8 ${bm.borrowerId } 9 
10         
        
        
         
客户编号：
         
15           
16 ${bm.customerId }17 
18         
        
        
         
曾用名：
         
23           
24 ${bm.usedName }25 
26         
        
       
      
30 
     

 

         2. Json+ajax+拼html。

         这种方法一般是基于ajax请求，要求服务器端返回一个json类型的json字符串，这个json串中包含了界面所需的所有信息，界面拿到json串后，构造出html，完成界面展示。

         小菜推荐这种方法，通过这种方式编写的页面，反应速度非常快，用户体验非常好。

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

         解析的过程大致是通过Jquery的each方法，进行遍历。

         但是小菜利用这种方式时，犯了一个致命的错误，小菜是通过原始的拼接html的方式，页面中写了大量html+=”<div>”;，这种写法使页面变得非常凌乱，几乎不可以维护。

         示例代码：

1 var contractTextHtml=""; 2 $.each(jsonObject.cl,function(i,n){ 3    4   contractTextHtml=""; 5    6   //插入合同文本数据 7   contractTextHtml+="
     
      "; 8   contractTextHtml+="
      
       "; 9   contractTextHtml+="
        ";10   contractTextHtml+="
";11   contractTextHtml+="
";12   contractTextHtml+="
";13   contractTextHtml+="
";14   contractTextHtml+="
";15   contractTextHtml+="
";16   contractTextHtml+="
";17   contractTextHtml+="
";18   contractTextHtml+="
";19   contractTextHtml+="
       
        
         
合同编号：
         
"+hiddenNull(n.cm.contractId)+"
        
        
         
出借人姓名：
         
"+hiddenNull(n.cm.lenderName)+"
        
        
         
出借人证件类型：
         
"+hiddenNull(n.cm.lenderIdType)+"
        
        
         
出借人证件号：
         
"+hiddenNull(n.cm.lenderIdNum)+"
        
        
         
出借金额：
         
"+hiddenNull(n.cm.lenderAmount)+"
        
        
         
出借人编号：
         
"+hiddenNull(n.cm.lenderNo)+"
        
        
         
出借人银行帐号：
         
"+hiddenNull(n.cm.lenderBankAccount)+"
        
        
         
撮合编号：
         
"+hiddenNull(n.cm.makeMatchNo)+"
        
       
      
";20   contractTextHtml+="
     
";21   $("#textList").append(contractTextHtml);22 });

 

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

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

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

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