标签还是脚本?谈谈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(); }
?前端代码(非本文重点,略)