zoukankan      html  css  js  c++  java
  • 多段HTML拼接的优化处理

    基础的系统中有个地方需要传一个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>&nbsp;</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>&nbsp;</td></tr>';
      html = html + '<tr><td>&nbsp;</td></tr>';

    个人觉得太凌乱代码可读性和可维护性太差,于是改成下面这样:

    var addhtml='<div><table><tbody><tr><td><div class="component EditorLabel"><label class="PageTitle">Address Suggestions</label></div></td></tr><tr><td>&nbsp;</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>&nbsp;</td></tr><tr><td>&nbsp;</td></tr><tr class="add1"><td><div class="component EditorRadio"><input  class="rad1" title="Please select address." value="0" type="radio" name="ASEL" onclick="CustomScript.SetAddrSugest(this);"/><span class="required"></span></div></td></tr><tr class="add1"><td>&nbsp;</td></tr><tr class="add2"><td><div class="component EditorRadio"><input class="rad2" title="Please select address." value="0" type="radio" name="ASEL" onclick="CustomScript.SetAddrSugest(this);"/><span class="required"></span></div></td></tr><tr class="add2"><td>&nbsp;</td></tr><tr class="add3"><td><div class="component EditorRadio"><input class="rad3" title="Please select address." value="0" type="radio" name="ASEL" onclick="CustomScript.SetAddrSugest(this);"/><span class="required"> </span></div></td></tr><tr class="add3"><td>&nbsp;</td></tr><tr><td>&nbsp;</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");

    个人感觉清晰了很多。

  • 相关阅读:
    centos6.5+mono+nginx跑asp.net
    YYHS-手机信号
    NOIP2017提高组初赛
    BZOJ-4915-简单的数字题
    BZOJ-5055-膜法师(离散化+树状数组)
    YYHS-Super Big Stupid Cross(二分+扫描线+平衡树)
    BZOJ-1008-[HNOI2008]越狱(快速幂)
    BZOJ-1192-[HNOI2006]鬼谷子的钱袋
    POJ-2417-Discrete Logging(BSGS)
    BZOJ-1010-[HNOI2008]玩具装箱toy(斜率优化)
  • 原文地址:https://www.cnblogs.com/wancy86/p/html_concat.html
Copyright © 2011-2022 走看看