缩短此代码的最佳方法是什么？答案

【问题标题】：What is the best way to shorten this code?缩短此代码的最佳方法是什么？
【发布时间】：2017-08-07 15:27:46
【问题描述】：

使用 DRY 方法，我想知道缩短此代码的最佳方法是什么。在我看来，那里的重复太多了。

function back(){
    $('.back').click(function(){ 
        if($(this).hasClass('back_3')){
            $('.screen3').addClass('hidden');
            $('.screen1').removeClass('hidden');
        }else if ($(this).hasClass('back_2')){
            $('.screen2').addClass('hidden');
            $('.screen1').removeClass('hidden');
        }else if($(this).hasClass('back_4')){
            $('.screen4').addClass('hidden');
            $('.screen3').removeClass('hidden');
        }else if($(this).hasClass('back_5')){
            $('.screen5').addClass('hidden');
            $('.screen3').removeClass('hidden');
        }else if($(this).hasClass('back_6')){
            $('.screen6').addClass('hidden');
            $('.screen3').removeClass('hidden');

        }
    });
}

【问题讨论】：

codereview.stackexchange.com
for 循环看起来足够了 ...
在发布之前还包括相关的html结构
我在这里没有看到强烈的模式。是什么决定了该类删除了哪个元素？此外，如果您制作一个可运行的示例并将其发布在 Code Review 上可能会更好。该站点主要用于修复损坏的代码。
假定的逻辑是什么？很难识别一种模式...

标签： javascript jquery dry

【解决方案1】：

干燥此代码的最佳方法是使用data-* 属性将按钮链接到要隐藏/显示的内容

例如（对于第一个if 分支）

<button class="back" data-hide=".screen3" data-show=".screen1">Back_3</button>

然后是这个

$('.back').click(function(){ 
    var $this = $(this);
    $($this.data("hide")).addClass("hidden");
    $($this.data("show")).removeClass("hidden");
});

相同的处理程序适用于任何具有data-hide 和data-show 属性的.back 按钮。

【讨论】：

我不会向 DOM 元素添加路由逻辑...这是一个业务逻辑问题
@Hitmands DOM 中没有“路由逻辑”，有属性信息。任何路由逻辑都在 jquery 中。无论如何，如果 OP 想要其路由逻辑，他们应该使用无数路由库之一。
hide screen 3 AND show screen 4 是路由逻辑。是的，它应该实现了某种路由...

【解决方案2】：

Simpy 提取类的 id，然后隐藏/显示各自的类：

 $('.back').click(function(){ 
  var id = this.className.split(" ").find(clss => clss.includes("back_")).split("_")[1];
  $(".screen"+id).addClass("hidden");
  $(".screen"+id>3?3:1).removeClass("hidden");
});

【讨论】：

它可以有多个类
@hitmands 仍然只会触发第一个。在 mys 和 ops 代码中。
@elyes10 很高兴为您提供帮助 ;)

【解决方案3】：

我会做这样的事情（未经测试）：

var arrScreens=[
   {hC:"back_3",screenShow:".screen3",screenHide:".screen1"]},
   {hC:"back_2",screenShow:".screen2",screenHide:".screen1"]},
]

function back(){
    $('.back').click(function(){ 
         var $this=$(this);
         $(arrScreens).each(function(i,obj) {
               if($this.hasClass(obj.hC)) {
                   $(obj.screenShow).addClass('hidden');
                   $(obj.screenHide).removeClass('hidden');
                   return false;                        
               }
         });
    });
}

【讨论】：

这不遵循else if排除
return 应该完成这项工作？！第一个匹配将退出循环。
api.jquery.com/jQuery.each return false 会中断迭代。更新了代码

【解决方案4】：

这就是我在你的情况下会做的。

const routes = [
  {id: 'back_3', hide: '.screen3', show: '.screen1' },
  {id: 'back_2', hide: '.screen2', show: '.screen1' },
  {id: 'back_4', hide: '.screen4', show: '.screen3' },
  {id: 'back_5', hide: '.screen5', show: '.screen3' },
  {id: 'back_6', hide: '.screen6', show: '.screen3' },
];

function back() {
  const hiddenCls = 'hidden';
  const $back = $('.back');

  return $back.click(event => {
    event.preventDefault();

    for(const route of routes) {
      const {id, hide, show} = route;

      if($(event.currentTarget).hasClass(id)) {

        $(hide).addClass(hiddenCls);
        $(show).removeClass(hiddenCls);

        break;
      }
    }

  });
}

【讨论】：