JS模板化技巧-优快云博客

本文链接：https://blog.youkuaiyun.com/u012009613/article/details/52138057

在Java Web开发中，后台页面开发技术使用JSP，有时候我们需要维护两份数据，一份是后台传递的数据，还有一份是js产生的数据，这两份数据维护起来还是比较麻烦的，

当一个新人接触一个已开发完的项目，现在他需要维护这些数据，需要做相应的修改，那么有两个麻烦：

a) 修改了一个却忘记修改另一个

b) 测试验证的时候需要做相应的操作才能验证是否修改正确

那么问题来了，如何解决这个问题呢？

根据要填充的数据设置一个html模板：这样可以避免直接在js中拼接html元素，造成后续的一个维护难度。

具体作法如下：

html模板：showdata.html

<tr>
    <!-- 自定义属性 -->
    <td>{name}</td>
    <td>{address}</td>
    <td>{age}</td>
    <td>
        <a οnclick="daleteStu('{name}')" href="javascript:void(0);">删除</a>
    </td>
</tr>

页面：testtemplate.jsp

<%@ page language="java" pageEncoding="utf-8"%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	
  </head>
  
  <body>

  	<script type="text/template_showdata">
  		<%@ include file="/htmltemplate/showdata.html" %>
  	</script>
  	
  	<table id="tableData"></table>
  </body>
  <script type="text/javascript" src="<%=basePath %>/js/jquery-1.7.2.js"></script>
  <script type="text/javascript" src="<%=basePath %>/js/testtemplate.js"></script>
</html>

js: testtemplate.js

$(function() {
	
	var html = $("script[type='text/template_showdata']").html();
	
	var dta = {
	    "rows": [{
	        "name": "李四",
	        "address": "湖南长沙市",
	        "age": 20
	    }, {
	    	"name": "张三",
	        "address": "北京朝阳区",
	        "age": 30
	    }, {
	    	"name": "王五",
	        "address": "浙江杭州市",
	        "age": 25
	    }]
	};
	
	 //定义一个数组，用来接收格式化合的数据  
    var arr = [];  
    //对数据进行遍历  
    $.each(dta.rows, function(i, o) {  
        //这里取到o就是上面rows数组中的值  
        arr.push(formatTemplate(o, html));  
    });  
    //好了，最后把数组化成字符串，并添加到table中去。  
    $('#tableData').append(arr.join(''));  
});

function formatTemplate(dta, tmpl) {
    //格式化内容，指定要格式化的字段名和格式化函数
    var format = {
        name: function(x) {
            return x
        }
    };
    return tmpl.replace(/{(\w+)}/g, function(m1, m2) {
        if (!m2)
            return "";
        return (format && format[m2]) ? format[m2](dta[m2]) : dta[m2];
    });
}

根据html模板，最后生成的html内容为：

<table id="tableData">
 <tr>
    <!-- 自定义属性 -->
    <td>李四</td>
    <td>湖南长沙市</td>
    <td>20</td>
    <td>
        <a οnclick="daleteStu('李四')" href="javascript:void(0);">删除</a>
    </td>
</tr>


  	
  <tr>
    <!-- 自定义属性 -->
    <td>张三</td>
    <td>北京朝阳区</td>
    <td>30</td>
    <td>
        <a οnclick="daleteStu('张三')" href="javascript:void(0);">删除</a>
    </td>
</tr>

  <tr>
    <!-- 自定义属性 -->
    <td>王五</td>
    <td>浙江杭州市</td>
    <td>25</td>
    <td>
        <a οnclick="daleteStu('王五')" href="javascript:void(0);">删除</a>
    </td>
</tr>
</table>

上述操作过后，以后在js中只需要设置相应的数据，进行填充就好了，样式的设置还是在html中，这样好维护一些