Ordinamento basato su più classi CSS e progettazione di codice con Jquery

Question

Questa domanda si concentra principalmente su come gestire il codice mentre lo si sta sviluppando, rendendolo altamente adattabile ecc. Lasciatemi spiegare attraverso questo esempio e avrà più senso. 'Aggiungerò taglie, se ne avrò bisogno'.

Il nostro server è a corto di memoria, e stiamo spingendo un sacco di lavoro di smistamento sul lato client con Javascript/Jquery, per alleviare questi problemi. Ecco il violino se vuoi seguirlo. https://jsfiddle.net/ydc6ywuz/23/

Il problema si presenta con questo codice.

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]); 
     }); 

Ogni sito Home avrà la classe AccessSitesLinks True [Num]. Quindi tutti i suoi siti secondari avrebbero AccessSitesLinks False [Num]. Capisco che sortSubSite e SubSite sono simili e potrebbero essere combinati per essere più estendibili, e questo è parte della domanda.

Un nuovo requisito aziendale è poter ordinare in ordine alfabetico lo SubSites. Ed è qui che entra in gioco la domanda. Come posso prendere questo codice esistente e refactoring per soddisfare continuamente i requisiti aziendali? Posso rendere il codice molto simile a quello che ho fatto con Home Sites, ma questo non sembra estensibile, ma solo creando un'altra funzione da chiamare subito dopo. Ho MOST delle variabili, matrici e funzioni per ordinare in ordine alfabetico già. C'è qualcosa che mi manca dal punto di vista del design? È solo l'inesperienza che lo sta rendendo così che non riesco a vedere come progettarlo correttamente?

EDIT

voglio chiarire la questione più. Sì, sto ottenendo l'oggetto $(o) più volte e questo può essere inefficiente. Questa domanda è più su come ridisegnare mentre la codifica continua a non essere continuamente un codice pezzo-pasto.

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>

In risposta di cui sopra ho cambiato il modo in cui si è tentato di risolvere i collegamenti secondari.

Ho ordinato prima lo subArr e poi aggiunto i collegamenti in base alle informazioni in subArr nei rispettivi collegamenti padre.

Ho contrassegnato lo script modificato con i commenti.