javascript - 需要重构这个JS，不知道从哪里开始

Question

只是继承了下拉菜单的这个功能，它很难看，而且在几个浏览器(主要是旧版本的 safari)中似乎非常脆弱，但我什至不知道从哪里开始，任何建议将不胜感激。我觉得我需要将其分解为几个较小的函数，并删除硬编码的 html(不知道到底该怎么做)

有问题的代码:

function mini_cart_populate(){
  var order;
  $.get('/get_current_order.json',
  function(data) {
    $('#minicart-thumbnails').html('');
    order = data.order;
     if (order.order.line_items.length == 1) { 
      $('#minicart_content').addClass('single'); 
      $('.cart_pulldown').addClass('single'); 
      $('#minicart_footer').addClass('single');
    } else {
      $('#minicart_content').removeClass('single');
      $('.cart_pulldown').removeClass('single');
      $('#minicart_footer').removeClass('single');
    }
    if (order.order.line_items.length > 0) {
      $('#cart_pulldown').removeClass('empty_minicart');
      $('#minicart_header').show();
      $('#minicart_content').show();
      $('#minicart_footer').show();
      $('.clearBoth').show();
      for (var i = 0; i < order.order.line_items.length ; i ++ ) {
        var char_limit = 80;
        var variant = data.variant_information[i];
        var item_string = "<div class='minicart_item_wrapper'>";
        //image string
        item_string += "<a href='"+ variant.path +"'><img src='"+ variant.image_url +"'></a>";
        //assume title and description for all items
        item_string += "<div class='mini_item_detail'>"+
          "<p class='mini_item_description'><strong>"+variant.title+
          "</strong>"+"<br/>"+variant.description.slice(0,char_limit)+
          (variant.description.slice(char_limit).length > 0 ? "..." : "" ) + "</p>";
        //assume all items have price
        item_string += "<li>"+"$"+Math.round(variant.price)+"</li>";
        //check for variant measurements and foreign sizes; add '|' if there are
         if (variant.variant_size) { item_string += " | <li>"+variant.variant_size+"</li>"; }
        if (variant.foreign_size) { item_string += " | <li>"+variant.foreign_size+"</li>"; }
        var delete_button_string = "<div class='cart-item-delete minicart' data-hook='cart_item_delete'>" +
           "<a href='javascript:;' class='delete' id='delete_line_item_"+ 
          variant.line_item_id +"' line_item_id='" + 
          variant.line_item_id + "'>X</a></div></div></div>" 
        if (window.location.pathname.split("/")[1] == "checkout"){
          delete_button_string = ''; 
         }
        $('#minicart-thumbnails').append( item_string + delete_button_string )
        bind_delete_button();
        $('#minicart_info').show();
        $('#minicart-thumbnails').show();

       }
    } else {
      $('.cart_pulldown').addClass('empty_minicart');
      $('#minicart_info').hide();
      $('#minicart-thumbnails').hide();
      $("#mini_empty_message").show();
      $('#minicart_header').hide();
      $('#minicart_content').hide();
      $('#minicart_footer').hide();
      $('.clearBoth').hide();
    }
     set_product_page_variant_state();
     var new_count = order.order.line_items.length + " item";
     if (order.order.line_items.length > 1) { new_count += "s" };
     $("#mini-item-count").text(new_count);
  }).done(function(){

    var item_total = parseFloat(order.order.item_total);
    var subtotal = item_total.toFixed(2);
    $('#minicart_subtotal').text('$' + subtotal);
  })
}

Answer 1

开始重构这样的代码的一个好地方就是简单地将其拆分。找到其中一 block 看起来执行相关任务的 block ，并将其移至其自己的函数，然后调用该函数。

例如:

order = data.order;
if (order.order.line_items.length == 1) { 
  $('#minicart_content').addClass('single'); 
  $('.cart_pulldown').addClass('single'); 
  $('#minicart_footer').addClass('single');
} else {
  $('#minicart_content').removeClass('single');
  $('.cart_pulldown').removeClass('single');
  $('#minicart_footer').removeClass('single');
}
if (order.order.line_items.length > 0) {

因此，我们需要根据是否有一项或多于一项来以不同方式设置购物车。

var styleCarFortLineItemQty = function(order) {
  if (order.line_items.length == 1) { 
    $('#minicart_content').addClass('single'); 
    $('.cart_pulldown').addClass('single'); 
    $('#minicart_footer').addClass('single');
  } else {
    $('#minicart_content').removeClass('single');
    $('.cart_pulldown').removeClass('single');
    $('#minicart_footer').removeClass('single');
  }
}

现在我们可以重构你的巨大函数中的代码，如下所示:

order = data.order;
styleCarFortLineItemQty(order);
if (order.order.line_items.length > 0) {

这样做几次，直到您拥有一些具有描述性名称的函数，然后您将得到一个描述逻辑和流程的精益函数，而其他辅助函数则执行实际的操作和工作。

到达这里后，您可以开始进行更高级的重构，调整整体流程和逻辑。但在你适应头脑中的流程和逻辑之前这样做会导致痛苦。