首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 其他教程 > 开源软件 >

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

2014-01-09 
标签还是脚本?谈谈UI共通化的方式选择首先,推荐一下站里的这篇经典文章:http://struts2.group.iteye.com/g

标签还是脚本?谈谈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"(不设置时默认显示第一项)  protected 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();  }

?前端代码(非本文重点,略)

热点排行