基于多个CSS类排序,并使用Jquery设计代码

Question

这个问题主要集中在如何在开发代码时管理代码,使其具有高适应性等.让我通过这个例子来解释,它会更有意义."如果我需要的话,我会加上赏金."

我们的服务器内存紧张,我们正在使用Javascript/Jquery将大量的排序工作推到客户端,以缓解这些问题.如果你想跟随,这就是小提琴.https://jsfiddle.net/ydc6ywuz/23/

这个代码带来了问题.

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

每个Home站点都有这个类AccessSitesLinks True [Num].所以它的所有子网都会有AccessSitesLinks False [Num].我理解sortSubSite和SubSite是相似的,可以组合起来以便更具可扩展性,这也是问题的一部分.

新的业务要求是能够SubSites按字母顺序排序.这就是问题发挥作用的地方.如何使用现有代码并重构它以不断满足业务需求？我可以像我一样使代码排序Home Sites,但是,这似乎不可扩展,只是创建另一个函数来调用.我有科技部的变量,数组和函数按字母顺序排序已.从设计角度来看,我有什么遗漏的东西吗？这只是缺乏经验,所以我无法看到如何正确设计？

编辑

我想更多地澄清这个问题.是的,我$(o)多次获得该对象,这可能效率低下.这个问题更多的是关于如何重新设计,而编码仍在继续,而不是持续的片断代码.

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+/);
      
    
      	$('.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]);*/
  });
  $('.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>

在上面的回答中,我改变了你尝试对二级链接进行排序的方式.

我对第subArr一个进行了排序,然后根据subArr相应父链接中的信息添加了链接.

我用注释标记了更改的脚本.