利用Velocity内核简化Ajax开发
发表于：2007-08-29 | 零回复

　　这两年火的东西有很多，在技术方面有Ajax、RoR，在开发方法方面有TDD、DDD、Agile等等。对于Web开发人员来说，没有用过或开发过Ajax很可能被人鄙视。呵呵~~这也许就是技术人吧。

　　用Ajax开发最令人头痛的一件事即要写DOM。由于客户端调试不容易，加上各大浏览器标准不兼容，开发效率和出错几率可想而知。为了提高开发效率避免不必要的错误，很多朋友喜欢将原本客户端的程序写到服务器端，例如：

  1. String str = "张三"; 
  2. StringBuffer sb = new StringBuffer(); 
  3. sb.append("<div id=’abc’>"); 
  4. sb.append(str); 
  5. sb.append("</div>"); 

　　这样做虽然可以避免写过多的DOM，可是，程序中会出现过多的字符串。要知道过多的字符串会使你的程序很难读。当模板要进行更改时，必需修改我们的后台程序。并且java中的String是对象，过多的字符串会在内存中生成大量的字符串对象，影响性能。（例子中使用了相对String更好的做法 — StringBuffer，但仍然不是个好方法。）还有的人喜欢将写在文件中，从程序中读取该文件，并替换其中定义好的关键字，如 template.txt文件的内容如下：

<div id=’abc’>$name</div>

　　在程序中读入该文件后，利用正则表达式替换掉$name。这种方法比前面那种方法要好一些，将模板与代码分离，但仍然要在程序中写复杂的表达式来替换值。遇到有条件显示某段代码时，会力不从心。如：当名称不存在时，显示年龄。那么除了以上两种方法，还有什么更好的方法呢？今天就为大家介绍一个个人认为比较好的方案－－VelocityEngine。

　　VelocityEngine是Velocity的核心，可以从Apache上下载。利用VelocityEngine解析事先定义好的vm模板，并将结果发送到客户端即可。以下是articleTemplate.vm模板文件，主要用来显示用户发表的文章。

  1. <div id="article"> 
  2.  <div id="title"> 
  3.   ## 用户头像存在时 
  4.   #if(${userImage}) 
  5.    <img src="$!{userImage}" title="$!{userName}"/> 
  6.   #else 
  7.    <img class="hp" src="./images/tycho_img.jpg" title="$!{userName}"/> 
  8.   #end 
  9.   ## 用户名称 
  10.   $!{userName} 
  11.  </div> 
  12.  <div id="content"> 
  13.   $!{content} 
  14.  </div> 
  15. </div> 

以下为ArticleService.java文件，主要负责利用dao读取到的数据，生成article模板字符串返回view层。

  1. /** 
  2.  * 取文章 
  3.  * @return String 文章 
  4.  * @throws Exception 
  5.  */ 
  6. public String getArticle() throws Exception { 
  7.  // 取所有文章 
  8.  List<TArticle> list = this.articleDao.getAll(); 
  9.  // 文章存在的场合 
  10.  if (!isEmpty(list)) { 
  11.   // 结果 
  12.   StringBuffer result = new StringBuffer(); 
  13.   for (TArticle article : list) { 
  14.    // 生成赋值map 
  15.    Map map = new Hashtable(); 
  16.    // 取文章的作者 
  17.    TUser user = article.getUser(); 
  18.    // 将头像和名称以及文章放入map 
  19.    map.put("userImage", user.getImage()); 
  20.    map.put("userName", user.getName()); 
  21.    map.put("content", article.getContent()); 
  22.  
  23.    // 解析并将结果置入结果buffer 
  24.    result.append(VelocityEngineUtils.mergeTemplateIntoString( 
  25.      this.velocityEngine, "template文件的路径，/WEB-INF/……" MyUtilFactory 
  26.        .getInfo().getEncoding(), map)); 
  27.   } 
  28.   return result.toString(); 
  29.  } 
  30.  return null; 
  31. } 

js页面：

  1. var text = result.responseText; 
  2. if (text != null && text != undefined) { 
  3.  // 生成新的div 
  4.  var newComment = document.createElement("div"); 
  5.  newComment.innerHTML = result.responseText; 
  6.  // 将新div加入文章列表 
  7.  var article = document.getElementById("article"); 
  8.  article.appendChild(newComment); 
  9. } 

完成。

　　可以看到，利用VelocityEngine，我们不用再写复杂的DOM，而后台程序中也不会出现过多的字符串，以及复杂的正则。我们只要定义好模板，在模板中加入条件等我们想要的逻辑语句（当然你也可以不写），只要在程序中生成对应的map，就可以完成这一系列的事情，方便开发，提高效率。

评论留言