在Jquery中添加大块HTML

Question

我的用户界面使用REST API并获取数据为json。我将这些数据添加到HTML中，但是我的脚本文件非常大，可读性较差。

所以我正在寻找一种将json数据导入到HTML的新方法。有没有办法用jQuery来做到这一点？

我听说过某事。与AngularJS，但我没有时间去学习另一个FW或图书馆。如果可能的话，我想用jQuery来做。

function publish_survey() { 
    $.ajax({ 
     url : URL_API + URL_POLL, 
     type : 'get', 
     data : {'user_id' : user_id}, 
     dataType: 'json', 
     success : function (response) { 
      console.log(response); 
      var html = ''; 
      for (var i = 0; i < response.data.length; i++) { 
       var date = new Date(response.data[i].created_at); 
       var formatted_date = date.getDay() + ' ' + G_MONTHS[date.getMonth()] + ', ' + date.getFullYear(); 

       html += '<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">' + 
          '<div class="mt-card-item" onclick="">' + 
           '<div class="mt-card-avatar mt-overlay-1">' + 
            '<img src="' + PATH_LAYOUT_IMAGES + '/poll_bg.png" />' + 
            '<div class="mt-overlay">' + 
             '<ul class="mt-info">' + 
              '<li>' + 
               '<a class="btn default btn-outline" href="javascript:void(0);" onclick="previewPoll(\''+response.data[i].id+'\');">' + 
                '<i class="fa fa-eye"></i>' + 
               '</a>' + 
              '</li>' + 
             '</ul>' + 
            '</div>' + 
           '</div>' + 
           '<div class="mt-card-content">' + 
            '<h3 class="mt-card-name">' + response.data[i].title + '</h3>' + 
            '<p style="font-size:10px;">' + formatted_date + '</p>' + 
            '<div class="mt-card-social">' + 
             '<button class="btn blue-hoki btn-block" onclick="selectPoll(this, \''+response.data[i].id+'\');">'+LANG.option.select+'</button>' + 
            '</div>' + 
           '</div>' + 
          '</div>' + 
         '</div>'; 

      } 

      $('#poll-publish > .row').append(html); 
     } 
    }); 
} 

Answer 1

很大程度上取决于您必须与哪些浏览器保持兼容。有些事情可以改进现有的代码，但最好的解决方案需要更新的浏览器（或转译器）。

首先，我建议您使用提取方法技术将服务器查询逻辑与格式化逻辑分开。 （这可以在任何浏览器中使用。）这样做的原因是，它至少隔离代码的“查询服务器”部分中的代码的“使HTML”部分，并且可以使代码更清晰，即使它仍然相当长。所以考虑这个重构：

function publish_survey() { 
    $.ajax({ 
     url : URL_API + URL_POLL, 
     type : 'get', 
     data : {'user_id' : user_id}, 
     dataType: 'json', 
     success : function (response) { 
      console.log(response); 
      var html = ''; 
      for (var i = 0; i < response.data.length; i++) { 
       html += make_html_for_card(response.data[i]); 
      } 

      $('#poll-publish > .row').append(html); 
     } 
    }); 
} 

function make_html_for_card(card) { 
    var date = new Date(card.created_at); 
    var formatted_date = date.getDay() + ' ' + G_MONTHS[date.getMonth()] + ', ' + date.getFullYear(); 

    return '<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">' + 
     '<div class="mt-card-item" onclick="">' + 
      '<div class="mt-card-avatar mt-overlay-1">' + 
       '<img src="' + PATH_LAYOUT_IMAGES + '/poll_bg.png" />' + 
       '<div class="mt-overlay">' + 
        '<ul class="mt-info">' + 
         '<li>' + 
          '<a class="btn default btn-outline" href="javascript:void(0);" onclick="previewPoll(\''+card[i].id+'\');">' + 
           '<i class="fa fa-eye"></i>' + 
          '</a>' + 
         '</li>' + 
        '</ul>' + 
       '</div>' + 
      '</div>' + 
      '<div class="mt-card-content">' + 
       '<h3 class="mt-card-name">' + card[i].title + '</h3>' + 
       '<p style="font-size:10px;">' + formatted_date + '</p>' + 
       '<div class="mt-card-social">' + 
        '<button class="btn blue-hoki btn-block" onclick="selectPoll(this, \''+card[i].id+'\');">'+LANG.option.select+'</button>' + 
       '</div>' + 
      '</div>' + 
     '</div>' + 
    '</div>'; 
} 

这不会从根本上改变代码的行为;它只是使publish_survey()更容易阅读和推理，因为它更短：所有的HTML格式的垃圾是在一个单一的功能，负责只是格式化HTML和别的什么都不做。如果你这样做了很多，你可以将所有的HTML格式化函数放在一起，甚至将它们移动到一个单独的JavaScript文件中，以便将应用程序逻辑与演示代码实际分开。

尽管该解决方案确实将HTML移开，但该解决方案没有解决的问题是如何使嵌入式HTML本身看起来不那么丑陋：编码的HTML很难看，而且很痛苦与工作和维护。当然，一定有更好的办法，我认为这真的是你的问题所在。

现代JavaScript（ES6）包括一个新的template literal（或模板字符串），这是一个旨在解决此问题的新JavaScript功能。使用反引号（`）来包装字符串，而不是撇号或双引号。在模板字符串内部，您可以正常使用换行符，并且可以使用大括号来嵌入内容。所以make_html_for_card()功能变得这样的事情，如果你有模板文本支持：

function make_html_for_card(card) { 
    var date = new Date(card.created_at); 
    var formatted_date = date.getDay() + ' ' + G_MONTHS[date.getMonth()] + ', ' + date.getFullYear(); 

    return ` 
     <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"> 
      <div class="mt-card-item" onclick=""> 
       <div class="mt-card-avatar mt-overlay-1"> 
        <img src="{PATH_LAYOUT_IMAGES}/poll_bg.png" /> 
        <div class="mt-overlay"> 
         <ul class="mt-info"> 
          <li> 
           <a class="btn default btn-outline" href="javascript:void(0);" onclick="previewPoll('{card[i].id}');"> 
            <i class="fa fa-eye"></i> 
           </a> 
          </li> 
         </ul> 
        </div> 
       </div> 
       <div class="mt-card-content"> 
        <h3 class="mt-card-name">{card[i].title}</h3> 
        <p style="font-size:10px;">{formatted_date}</p> 
        <div class="mt-card-social"> 
         <button class="btn blue-hoki btn-block" onclick="selectPoll(this, '{card[i].id}');">{LANG.option.select}</button> 
        </div> 
       </div> 
      </div> 
     </div> 
    `; 
} 

生成的代码是相当少的不愉快：这只是普通的HTML，包裹在反引号（'），并具有{大括号}围绕嵌入式内容。

不幸的是，并不是所有的浏览器都支持这一点。值得注意的是，IE并没有，但是Edge 13+，以及Chrome 41+，Firefox 34+和Safari 9.1+。 （浏览器支持的完整列表，请here。）

如果你必须有向后兼容不支持模板文本浏览器，那么你唯一的真正清理代码机会是使用transpiler （如BabelJS），它可让您编写使用模板文字等现代JS代码，然后转换器自动将代码转换为“旧”JS代码，以便无法处理新功能的浏览器。