0

ドロップダウンメニュー用にこの機能を継承しただけで、それは罪のように醜く、いくつかのブラウザ（ほとんどがサファリの古いバージョン）ではかなり壊れやすいようですが、どこから始めればいいのかわからないので、どんな提案でも大歓迎です。これをいくつかの小さな関数に分割し、ハードコードされた 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) {

そのため、アイテムが 1 つであるか複数であるかに基づいて、カートを別の方法で設定する必要があります。

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/がいくつかの作業を行いますが、自分で仕上げる必要がある場合があります。意見は分かれていますが、特にjQueryを使用している場合は、JSで変数名をキャメルケースにする必要があると思います（コード内のjQuery関数はそのようになります）。一貫性があると、JS が読みやすくなります。

jQuery を使用して HTML を構築するか、またはMustacheのようなテンプレート ソリューションを検討するか、または本当に整理したい場合は、MVC ライブラリを使用して完全なリファクタリングを行うことができる種類のプロジェクトからのもののようです。 (例: Angular.jsまたはEmber.js )。

最初は少し難しそうに見えるかもしれませんが、アプリケーションの設計と将来のプロジェクトの保守性に関するより良い方法を学ぶことができます。

于 2013-08-10T00:25:55.827 に答える