Phân loại dựa trên nhiều lớp CSS và thiết kế mã với Jquery

Question

Câu hỏi này chủ yếu tập trung vào cách quản lý mã như bạn đang phát triển, làm cho nó có khả năng thích nghi cao. Hãy để tôi giải thích qua ví dụ này và sẽ có ý nghĩa hơn. 'Tôi sẽ thêm tiền thưởng, nếu tôi cần'.

Máy chủ của chúng tôi bị ràng buộc vì bộ nhớ và chúng tôi đang đẩy rất nhiều công việc phân loại lên phía máy khách với Javascript/Jquery, để giảm bớt những vấn đề đó. Đây là fiddle nếu bạn muốn làm theo cùng. https://jsfiddle.net/ydc6ywuz/23/

Sự cố đi kèm với mã này.

var sortSubSite = $('.AccessSitesLinks.False'); 
    var subArr = sortSubSite.map(function(_, o){ 
     return { 
      t: $(o).text(), 
      h: $(o).attr('href'), 
      c: $(o).attr('class') 
     }; 
     }).get(); 
     sortSubSite.each(function(i, o) { 
     var classList = $(o).attr('class').split(/\s+/); 


     $('.ContainingBox.AccessSitesLinks.True.'+ classList[2]).append($(o)); 
     $(o).wrap("<div class='ContainingBox2'></div>"); 
     $(o).text(subArr[i].t); 
     $(o).attr('href', subArr[i].h); 
     $(o).attr('class', subArr[i].c + classList[2]); 
     }); 

Mỗi trang Home sẽ có lớp AccessSitesLinks True [Num]. Vì vậy, tất cả các trang con của nó sẽ có AccessSitesLinks False [Num]. Tôi hiểu rằng sortSubSite và SubSite tương tự nhau và có thể được kết hợp để có thể mở rộng hơn, và đó là một phần của câu hỏi.

Yêu cầu kinh doanh mới là có thể sắp xếp SubSites theo thứ tự abc. Và đây là câu hỏi đặt ra. Làm cách nào để lấy mã hiện tại này và tái cấu trúc mã để liên tục đáp ứng các yêu cầu nghiệp vụ? Tôi có thể làm cho mã sắp xếp giống như tôi đã làm với Home Sites, nhưng, điều này dường như không thể mở rộng, chỉ cần tạo một hàm khác để được gọi ngay sau đó. Tôi có MOST của các biến, mảng và hàm để sắp xếp theo thứ tự bảng chữ cái. Có cái gì tôi đang thiếu từ một quan điểm thiết kế? Nó chỉ là thiếu kinh nghiệm đó là làm cho nó vì vậy tôi không thể xem làm thế nào để thiết kế này đúng?

EDIT

Tôi muốn làm rõ vấn đề hơn. Có, tôi có được đối tượng $(o) nhiều lần và điều đó có thể không hiệu quả. Câu hỏi này là nhiều hơn về làm thế nào để thiết kế lại trong khi mã hóa tiếp tục là không liên tục được mã mảnh-mealing.

Answer 1

$(document).ready(function() { 
 
    setFields(); 
 
}); 
 

 
function setFields() { 
 
    var sortSite = $('.AccessSitesLinks.True'); 
 
    var arr = sortSite.map(function(_, o) { 
 
    return { 
 
     t: $(o).text(), 
 
     h: $(o).attr('href'), 
 
     c: $(o).attr('class') 
 
    }; 
 
    }).get(); 
 
    arr.sort(function(o1, o2) { 
 
    return o1.t > o2.t ? 1 : o1.t < o2.t ? -1 : 0; 
 
    }); 
 

 
    sortSite.each(function(i, o) { 
 

 
    $(o).text('+'); 
 
    $(o).attr('href', arr[i].h); 
 
    $(o).attr('class', arr[i].c); 
 

 
    $(o).wrap("<div class='ContainingBox " + arr[i].c + "'></div>"); 
 
    /// arr[i]c is: AccessSitesLinks True 
 
    $(o).removeAttr('href'); 
 
    $(o).parent().append("<a href='" + arr[i].h + "' class='" + arr[i].c + "'>" + arr[i].t + "</a>"); 
 
    }); 
 

 
    var sortSubSite = $('.AccessSitesLinks.False'); 
 
    var subArr = sortSubSite.map(function(_, o) { 
 
    return { 
 
     t: $(o).text(), 
 
     h: $(o).attr('href'), 
 
     c: $(o).attr('class') 
 
    }; 
 
    }).get(); 
 
    // Changes started from here 
 
    subArr.sort(function(o1, o2) { 
 
    return o1.t > o2.t ? 1 : o1.t < o2.t ? -1 : 0; 
 
    }); 
 
    $.each(subArr, function(i, o) { 
 
    var a = $("." + o.c.split(" ").join(".") + '[href="' + o.h + '"]'); 
 
    var n = o.c.split(" ")[2]; 
 
    a.appendTo($('.ContainingBox.AccessSitesLinks.True.' + n)); 
 
    $(a).removeClass(n).addClass(n + n).wrap("<div class='ContainingBox2'></div>"); 
 

 
    // Changes ended here and below commented is your code 
 
    /*var classList = $(o).attr('class').split(/\s+/); 
 
     
 
    
 
     \t $('.ContainingBox.AccessSitesLinks.True.'+ classList[2]).append($(o)); 
 
     \t $(o).wrap("<div class='ContainingBox2'></div>"); 
 
     $(o).text(subArr[i].t); 
 
     $(o).attr('href', subArr[i].h); 
 
     \t $(o).attr('class', subArr[i].c + classList[2]);*/ 
 
    }); 
 
    $('.ContainingBox2').hide(); 
 
    $('.ContainingBox').click(function() { 
 
    $('.ContainingBox2', this).toggle(); // p00f 
 
    }); 
 

 
    $(".ContainingBox2").on({ 
 
    mouseenter: function() { 
 
     $(this).data('bg2', $(this).css("background-color")); 
 
     $(this).css("background-color", "#e5f2ff"); 
 
    }, 
 
    mouseleave: function() { 
 
     $(this).css("background-color", $(this).data('bg2')); 
 
    } 
 
    }); 
 
}

.ContainingBox2 { 
 
    padding: 2px 15%; 
 
} 
 
.AccessSitesLinks.True { 
 
    padding: 2px 2%; 
 
    font-size: 1.2em; 
 
    width: 80%; 
 
} 
 
.AccessSitesLinks { 
 
    text-decoration: none !Important; 
 
    font-family: "Segoe UI", "Segoe", Tahoma, Helvetica, Arial, sans-serif; 
 
    color: #444; 
 
    font-size: 1em; 
 
    width: 80%; 
 
    margin: 2px 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <a href="https://en.wikipedia.org" id="GUID" class="AccessSitesLinks True 1">Wikipedia Home</a> 
 
    <a href="https://en.wikipedia.org/wiki/Gold" id="GUID" class="AccessSitesLinks False 1">Wikipedia Gold</a> 
 
    <a href="https://google.com" id="GUID" class="AccessSitesLinks True 2">Google Home</a> 
 
    <a href="https://mail.google.com/" id="GUID" class="AccessSitesLinks False 2">Google Mail</a> 
 
    <a href="https://facebook.com/User1" id="GUID" class="AccessSitesLinks False 3">FaceBook User1</a> 
 
    <a href="https://facebook.com" id="GUID" class="AccessSitesLinks True 3">FaceBook Home</a> 
 
    <a href="https://facebook.org/about" id="GUID" class="AccessSitesLinks False 3">FaceBook About</a> 
 
    <a href="https://young.com" id="GUID" class="AccessSitesLinks False 2">zzzzzz</a> 
 
    <a href="https://younger.com" id="GUID" class="AccessSitesLinks True 0">A</a> 
 
    <a href="https://youngest.com" id="GUID" class="AccessSitesLinks False 0">zzzzzz</a> 
 
    <a href="https://facebook.com/a" id="GUID" class="AccessSitesLinks False 3">FaceBook a</a> 
 
</div>

Trong câu trả lời trên, chúng tôi đã thay đổi cách bạn đã cố gắng để sắp xếp các liên kết thứ cấp.

Tôi đã sắp xếp subArr trước và sau đó nối các liên kết theo thông tin trong subArr trong các liên kết mẹ tương ứng.

Tôi đã đánh dấu tập lệnh đã thay đổi bằng nhận xét.