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

只是继承了这个下拉菜单的功能，很难看，而且在一些浏览器（大多是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);
  })
}

函数mini\u cart\u populate（）{
var顺序；
$.get（'/get\u current\u order.json'，
功能（数据）{
$（“#迷你车缩略图”）.html（“”）；
order=data.order；
如果（order.order.line_items.length==1）{
$（'minicart_content'）.addClass（'single'）；
$（'.cart_下拉列表'）.addClass（'single'）；
$（'minicart'u footer'）.addClass（'single'）；
}否则{
$（“#minicart_content”）.removeClass（'single'）；
$（'.cart_pulldown'）.removeClass（'single'）；
$（'minicart'u footer'）.removeClass（'single'）；
}
if（order.order.line_items.length>0）{
$（“#cart_下拉”）.removeClass（'empty#u minicart'）；
$（“#微型购物车标题”）.show（）；
$（“#微型购物车内容”）.show（）；
$（“#微型购物车页脚”）.show（）；
$（'.clearleath'）.show（）；
对于（变量i=0；i”+variant.title+
“”+“
”+variant.description.slice（0，字符限制）+
（variant.description.slice（字符限制）。长度>0？…：“）+”
”；
//假设所有项目都有价格
项目字符串+=“
”+“$”+Math.round（variant.price）+“
”；
//检查不同尺寸和外来尺寸；如果有，则添加“|”
if（variant.variant_size）{item_string+=“|
”+variant.variant_size+“
”}
if（variant.foreign_size）{item_string+=“|
”+variant.foreign_size+“
”}
var delete_按钮_字符串=“”+
"" 
if（window.location.pathname.split（“/”[1]=“签出”）{
删除按钮\字符串=“”；
}
$（“#微型购物车缩略图”）.append（项目字符串+删除按钮字符串）
绑定删除按钮（）；
$（'minicart_info'）.show（）；
$（“#微型购物车缩略图”）.show（）；
}
}否则{
$（'.cart_pulldown'）.addClass（'empty_minicart'）；
$（“#minicart_info”）.hide（）；
$（“#微型购物车缩略图”）.hide（）；
$（“#mini#u empty_message”）.show（）；
$（“#微型购物车标题”）.hide（）；
$（“#minicart_content”）.hide（）；
$（“#微型购物车页脚”）.hide（）；
$（'.clearleath'）.hide（）；
}
设置产品页面变量状态（）；
var new_count=order.order.line_items.length+“item”；
如果（order.order.line_items.length>1）{new_count+=“s”}；
$（“#小项目计数”）.text（新项目计数）；
}).done（函数（）{
var item_total=parseFloat（order.order.item_total）；
var小计=固定的项目总数（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) {

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

---

一旦到了这里，就可以开始进行更高级的重构，调整整个流程和逻辑。但是，在你将流程和逻辑融入你的头脑之前这样做会带来痛苦。

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

例如：

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

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

---

一旦到了这里，就可以开始进行更高级的重构，调整整个流程和逻辑。但是，在你将流程和逻辑融入头脑之前这样做会带来痛苦。

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

• 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

整理实际代码的格式：将为您做一些工作，但您可能需要自己完成。对此众说纷纭，但我认为您应该在JS中使用变量名，尤其是在使用jQuery时（代码中的jQuery函数就是这样）。我发现一致性使JS更容易阅读

您可以使用jQuery构建HTML，或者您可以查看一个模板解决方案，或者如果您真的想对它进行分类，这看起来像是来自一个使用MVC库进行完整重构的项目（例如，或）

---

一开始它们可能有点令人望而生畏，但在未来的项目中，您将学习到更好的应用程序设计和可维护性实践。

首先，我将正确格式化代码并将其划分为逻辑部分