标签还是脚本?谈谈UI共通化的方式选择

首先,推荐一下站里的这篇经典文章：
http://struts2.group.iteye.com/group/wiki/1463-taglib-the-eternal-debate-topic

文中的许多观点到现在还是非常有参考价值。文章写于2009年，又是4年多过去，一些外部环境发生了变化。
>Spring MVC超越了Struts 成为了MVC框架的首选。
>对于前端使用JSP的应用来说，JSTL+EL表达式混合使用是开发的“标准方式”。
>自定义标签的应用依然非常广泛。

按上文的观点，标签分为 逻辑控制类，数据输出类，页面组件类 。
前两种相对简单，本文主要涉及应用中较复杂的 页面组件类标签。
个人认为开发中需要提取共通UI代码应根据实际需求按以下顺序考虑实现。

框架标签 > 标签文件 > taglib标签 > 脚本方式

●框架标签
优点：稳定可靠，代码维护性好。 （相比来说SpringMVC对标签的支持远不如Strus）
缺点：无法与后台交互。
应用例：一般用于简化通用标签的书写

●标签文件
优点：特别适用于复杂的自定义UI封装。
缺点：和框架标签一样，没有给后台的入参，也不适用于动态应用。
应用例：比如分页，排序一类标签（http://duanhengbin.iteye.com/admin/blogs/1998017）

●taglib标签
优点：封装性较好，装载数据全在标签代码中。
          标签入参可以根据需要自定义，也就是前端可以“影响”后台的实现。
缺点：代码的开发和调试都比较繁琐，还需要做 tld文件。
          只能用于页面初期展示阶段，对于“纯前端”的动作无能为力了。
应用例：数据字典下拉框 （见下文）

●脚本方式
优点：JS提共通较为简单，灵活性最高，可以应对几乎任何需求
缺点：前端代码会多些。主要是后台做数据加载也比较麻烦，所需数据通过页面自己加载，即相关的所有Controller层代码都需要修改，代码通用性和维护性都比较差。不是特殊需求不建议使用这种方式。
应用例：比如需要将 数据字典下拉框动态加入到table中，只有通过JS拼装的方式
    
【taglib标签 实现通用数据字典展示例子】
●taglib类（推荐继承SimpleTagSupport，代码比较简洁）

import java.io.IOException;
import java.util.Iterator;
import java.util.List;

import javax.servlet.ServletContext;
import javax.servlet.jsp.JspContext;
import javax.servlet.jsp.JspException;
import javax.servlet.jsp.JspWriter;
import javax.servlet.jsp.PageContext;
import javax.servlet.jsp.tagext.SimpleTagSupport;

import org.apache.commons.jxpath.JXPathContext;
import org.springframework.web.context.WebApplicationContext;
import org.springframework.web.context.support.WebApplicationContextUtils;

import cn.com.intasect.ots.dto.DictionaryDTO;
import cn.com.intasect.ots.service.IDictionaryService;

public class DictorySelectTag2 extends SimpleTagSupport {

  private String id;       //必设项目：设置select的id
  private String typecode; //必设项目：对应数据字典中"字典类型类型"
  private String name;     //必设项目：form提交用
  private String typeid;   //对应数据字典中"字典ID"(不设置时默认显示第一项)

  private static List<DictionaryDTO> dictionaryList = null;
  
  /**
   * 缓存数据字典 
   */
  private void loadDictionaryList(){
    if ( dictionaryList==null){
      ServletContext servletContext = ((PageContext) this.getJspContext()).getServletContext();
      WebApplicationContext wac = WebApplicationContextUtils.getRequiredWebApplicationContext(servletContext);
      IDictionaryService dictoryService = (IDictionaryService) wac.getBean("dictionaryServiceImpl");
      dictionaryList = dictoryService.selectAll();
    }
  }
  
  @Override
  public void doTag() throws IOException, JspException {
    loadDictionaryList();
      JspContext jspContext = getJspContext();
      JspWriter out = jspContext.getOut();
      StringBuffer sb = new StringBuffer();
      //拼装select项目内容
      sb.append("\n<select")
        .append(" id='").append(id).append("'")
        .append(" name='").append(name).append("'")
        .append(" value='").append(typeid==null?"":typeid).append("'")
        .append(">\n");
      //此处使用 Commons JXPath 做对象查询
      String condition = ".[cDictTypeCode='"+ typecode +"']";
      JXPathContext context = JXPathContext.newContext(dictionaryList);
      sb.append("<option value=null>--请选择--</option>\n");
      //拼装option项目内容
      for(@SuppressWarnings("rawtypes")Iterator iter = context.iterate(condition); iter.hasNext();){
        DictionaryDTO dto = (DictionaryDTO)iter.next();
        sb.append("<option")
          .append(" value='").append(dto.getnDictid()).append("'")
          .append(dto.getnDictid().equals(typeid)?" selected='selected'":"")
          .append(">")
          .append(dto.getcDictTypeName())
          .append("</option>\n");
      }
      sb.append("</select>\n");
      out.print(sb.toString());
    }
    
  public void setId(String id) {
    this.id = id;
  }
  public void setName(String name) {
    this.name = name;
  }
  public void setTypecode(String typecode) {
    this.typecode = typecode;
  }
  public void setTypeid(String typeid) {
    this.typeid = typeid;
  }
}

●tld文件

<?xml version="1.0" encoding="UTF-8"?>
<taglib xmlns="http://java.sun.com/xml/ns/j2ee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee web-jsptaglibrary_2_1.xsd"
    version="2.1">
    
    <description>dictionary tag</description>
    <tlib-version>1.0</tlib-version>
    <short-name>dictionary tag</short-name>

    <tag>
      <name>select</name>
      <tag-class>com.test.tags.DictorySelectTag</tag-class>
      <body-content>scriptless</body-content>
      <attribute>
        <name>id</name>
        <rtexprvalue>true</rtexprvalue>
        <type>java.lang.String</type>
      </attribute>
          <attribute>
        <name>name</name>
        <rtexprvalue>true</rtexprvalue>
        <type>java.lang.String</type>
      </attribute>
      <attribute>
        <name>typecode</name>
        <rtexprvalue>true</rtexprvalue>
        <type>java.lang.String</type>
      </attribute>
      <attribute>
        <name>typeid</name>
        <rtexprvalue>true</rtexprvalue>
        <type>java.lang.String</type>
      </attribute>
    </tag>
</taglib>

 

●应用代码

  JSP的头部加入引用

<%@ taglib prefix="tags" uri="/WEB-INF/tags-tld/dict_tags.tld" %>

  标签代码

<tags:select id='levelSelect' name='levelId' typecode='DICT_LEVEL'  typeid='${levelId}'/>

 

【脚本方式 实现通用数据字典展示例子】

后台代码，对于所有应用了该功能的相关Controller类需要加上以下代码

  @Resource
  private IDictionaryService dictoryService;
  
  @ModelAttribute("dict")
  public List<DictionaryDTO> getDictionary(){
    return dictoryService.selectAll();
  }

 前端代码非本文重点，略