0

刚刚继承了下拉菜单的这个功能，它丑陋无比，在几个浏览器（主要是旧版本的 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);
  })
}
4

2 回答 2

2

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

例如：

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

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

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

于 2013-08-10T00:14:02.570 回答
1

我将从正确格式化代码并将其分解为逻辑部分开始：

  • 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）。

起初它们可能看起来有点令人生畏，但您将在应用程序设计和未来项目的可维护性方面学习更好的实践。

于 2013-08-10T00:25:55.827 回答