基础的系统中有个地方需要传一个HTML代码,这个HTML又是动态生成拼接的,但基本的结构知道。
原始的代码使用的是下面这样的字符串拼接:
var html = ''; var SugCnt = JSONResult.SugCnt; var addlist= $("#sugAddressSet"); html = '<table>'; html = html + '<tr><td><DIV class="component EditorLabel"><LABEL class=PageTitle>Address Suggestions</LABEL></DIV></td></tr>'; html = html + '<tr><td> </td></tr>'; html = html + '<tr><td><DIV class="component EditorLabel"><LABEL class=AttentionColor>The Garage Address is incorrect. Please select one of the following options:</LABEL></DIV></td></tr>'; html = html + '<tr><td> </td></tr>'; html = html + '<tr><td> </td></tr>';
个人觉得太凌乱代码可读性和可维护性太差,于是改成下面这样:
var addhtml='<div><table><tbody><tr><td><div class="component EditorLabel"><label class="PageTitle">Address Suggestions</label></div></td></tr><tr><td> </td></tr><tr><td><div class="component EditorLabel"><label class="AttentionColor">The Garage Address is incorrect. Please select one of the following options:</label></div></td></tr><tr><td> </td></tr><tr><td> </td></tr><tr class="add1"><td><div class="component EditorRadio"><input class="rad1" title="Please select address." value="0" type="radio" name="ASEL" οnclick="CustomScript.SetAddrSugest(this);"/><span class="required"></span></div></td></tr><tr class="add1"><td> </td></tr><tr class="add2"><td><div class="component EditorRadio"><input class="rad2" title="Please select address." value="0" type="radio" name="ASEL" οnclick="CustomScript.SetAddrSugest(this);"/><span class="required"></span></div></td></tr><tr class="add2"><td> </td></tr><tr class="add3"><td><div class="component EditorRadio"><input class="rad3" title="Please select address." value="0" type="radio" name="ASEL" οnclick="CustomScript.SetAddrSugest(this);"/><span class="required"> </span></div></td></tr><tr class="add3"><td> </td></tr><tr><td> </td></tr></tbody></table></div>'; var jqdom=$(addhtml);var add1=jqdom.find(".add1").first().find("input"); var addsp1=jqdom.find(".add1").first().find("span"); add1.attr("sela","2709 Old Rosebud Rd"); add1.attr("selc","Lexington"); add1.attr("sels","KY"); add1.attr("selz","40509-8559"); addsp1.text("2709 Old Rosebud Rd Lexington KY 40509-8559"); var add2=jqdom.find(".add2").first().find("input"); var addsp2=jqdom.find(".add2").first().find("span"); add2.attr("sela","2709 Old Rosebud Rd"); add2.attr("selc","Lexington"); add2.attr("sels","KY"); add2.attr("selz","40509-8559"); addsp2.text("2709 Old Rosebud Rd Lexington KY 40509-8559"); var add3=jqdom.find(".add3").first().find("input"); var addsp3=jqdom.find(".add3").first().find("span"); add3.attr("sela","2709 Old Rosebud Rd"); add3.attr("selc","Lexington"); add3.attr("sels","KY"); add3.attr("selz","40509-8559"); addsp3.text("2709 Old Rosebud Rd Lexington KY 40509-8559");
个人感觉清晰了很多。