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

开始重构这样的代码的好地方就是简单地拆分它。找到一个看起来预先形成相关任务的块，并将其移动到自己的函数，然后调用该函数。

例如：

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) {

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

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

Answer 2

我首先要正确格式化代码并将其分解为逻辑部分：

AJAX请求
执行DOM修改的单独函数
包含for循环的函数

所以你的功能可能会开始看起来像这样：

function mini_cart_populate() {
    // I find the longhand ajax form more readable
    $.ajax(
        type: "get",
        url: "/get_current_order.json"
    ).done(current_order);
}

function current_order(data) {
    var order = data.order;
    if (order.order.line_items.length == 1) {
        add_single();
    } else {
        remove_single();
    }
}

function add_single() {
    $('#minicart_content').addClass('single'); 
    $('.cart_pulldown').addClass('single'); 
    $('#minicart_footer').addClass('single');
}

// ...etc, hopefully you get the idea

也可以对实际代码的格式进行排序：http://jsbeautifier.org/会为您做一些工作，但您可能需要自己完成。意见分歧，但我认为你应该在JS中使用你的变量名，特别是如果你正在使用jQuery（因为你的代码中的jQuery函数会是这样的）。我发现一致性使得JS更容易阅读。

您可以使用jQuery构建HTML，或者您可以查看像Mustache这样的模板解决方案，或者如果您真的想要对其进行排序，这看起来像是来自可以处理的项目类型使用MVC库的完整重构（例如Angular.js或Ember.js）。

一开始看起来有些令人生畏，但您将在应用程序设计和未来项目的可维护性方面学到更好的实践。

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

2 个答案: