一、場景
在js中寫html簡直是噩夢，剛進新公司，在codereview的時候得知可以通過將html模板寫在jsp頁面，然后由js調取模板，利用replace()方法替換傳值的方式避免在js中拼接html代碼，嘗試后，成功利用這種方式完成一個模塊的增刪查改。
二、具體方式
1. 在jsp頁面編寫模板，以花括號放置待替換的值
注意定義模板type="text/template"
<body> <form id="MainDataBills" > <input type="hidden" id="mainId" value="${ceMainDataBillsVO.id}" /> <!-- headLegend模板 --> <script type="text/template" id="headTemplate"> <fieldset class="fieldset" id="headFieldset"> <legend id="mainLegend" class="mainLegend">數據單號：{databillsNo}</legend> </script> <script type="text/template" id="mainTemplate"> <div class="dlg-backbuttons" style="text-align: center"> <a class="easyui-linkbutton" id="submitButton" onclick="summitWholeDataBillsInCheck()" data-options="iconCls:'icon-redo'">提交</a> <a class="easyui-linkbutton" id="returnMainButton" onclick="rejectWholeDataBillsInCheck()" data-options="iconCls:'icon-undo'">整體駁回</a> </div> <table class="fieldsetMainTable" id="mainDataBillsTable"> <tr> <td class="fieldsetMainTableTd">:</td> <td id="countTdId">{count}</td> </tr> <tr> <td class="fieldsetMainTableTd">:</td> <td id="ceCorrSumTdId">{ceCorrSum}</td> </tr> <tr> <td class="fieldsetMainTableTd">:</td> <td>{planeno}</td> </tr> <tr> <td class="fieldsetMainTableTd">:</td> <td>{rcLevel}</td> </tr> <tr style="display:none"> <td id="subCountTdId">{subCount}</td> <td></td> </tr> </table> </script>
2. 在js文件中根據id獲取該模板，轉換為html格式，用raplace替換需要動態顯示的值
//獲取head模板，作為headHtml var headHtml = $("#headTemplate").html(); headHtml = headHtml.replace(/{databillsNo}/g,databillsNo); //獲取main模板，作為mainHtml var mainHtml = $("#mainTemplate").html(); mainHtml = mainHtml.replace(/{databillsNo}/g,databillsNo); mainHtml = mainHtml.replace(/{count}/g,count); mainHtml = mainHtml.replace(/{planeno}/g,planeno); mainHtml = mainHtml.replace(/{rcLevel}/g,rcLevel); mainHtml = mainHtml.replace(/{subCount}/g,subCount); mainHtml = mainHtml.replace(/{ceCorrSum}/g,ceCorrSum);
3. 將替換后的html格式的數據append到jsp頁面中，搞定
//全部模板相加 var sumHtml = headHtml + mainHtml + subHtmlSum + endHtml; $('#MainDataBills').append(sumHtml);
三、注意問題
1. 所用前段框架為easyui， 在替換后的jsp中，需要重新渲染，進行相應組件的顯示。
$.parser.parse($("#MainDataBills"));
四、存在不足
1. 該范例用了比較多獲取父元素、兄弟元素、子元素的語句，后期修改頁面結構容易造成錯誤。
var currentTab = parent.$("#tabs").tabs('getSelected'), $(e).parent().parent().nextAll().hide(); var iNum = $(e).parent().find('input').eq(0).val();