javascript - 避免重复代码答案

【问题标题】：javascript - avoid repetable codejavascript - 避免重复代码
【发布时间】：2017-08-25 21:44:14
【问题描述】：

我有一个带有调用菜单模式的按钮的页面。该模式包含另外两个调用两个子菜单的按钮 - 每个按钮一个。看笔： https://codepen.io/t411tocreate/pen/yoxJGO

它确实有效。但是目前的问题是我重新编写了一个可重复的代码来调用每个子菜单：

$('.show-submenu-1').on('click', function () {
  $('.submenu-1.offcanvas').addClass('offcanvas--active');
})

$('.show-submenu-2').on('click', function () {
  $('.submenu-2.offcanvas').addClass('offcanvas--active');
})

这种方法似乎很愚蠢。我需要一个重复次数较少的解决方案，比如数组的 forEach 函数：

var menus = [
  '.show-submenu-1',
  '.show-submenu-2'
];

menus.forEach(function(menu){
  $(menu).on('click', function () {
    $(`${menu}.offcanvas`).addClass('offcanvas--active');
  })
});

当然，这种情况是行不通的。如何使我的代码干燥？

【问题讨论】：

我只是看了一眼codepen，所以我可能遗漏了一些东西，但是你不能对子菜单1和子菜单2使用相同的CSS类吗？它们的样式似乎相同，我认为这样可以避免您重复自己。也许只是一个类的子菜单？
您不能从数组项中删除.show- 并将其添加到执行绑定的选择器中吗？ $(`.show-${menu}`).on()

标签： javascript jquery user-interface dry

【解决方案1】：

使用标记：

<div class="submenu" data-index="1">
<div class="submenu" data-index="2">

<button class="show-submenu-button" data-submenu-index="1">
<button class="show-submenu-button" data-submenu-index="2">

然后：

$('.show-submenu-button').on('click', function () {
    var index = $(this).attr('data-submenu-index');
    $('.submenu[data-index="' + index + '"]').addClass('offcanvas--active');
})

使用非常具体的类名几乎没有价值，以至于它们可以单独识别页面上的每个元素。类名应该定义行为相同的元素的类。

【讨论】：

【解决方案2】：

您好，我希望我的问题是正确的，但是您可以将数据属性用于类似的事情。只需为 .show-submenu 设置一个通用类，并在 data-submenu=x 属性中用数字标记它们与菜单的连接。其中 x 是 .submenu-x 中的数字。然后你做这样的事情：请注意，我将 .show-submenu-1 更改为 .show-submenu。确保每个触发器都有这个类。还要为您要使用的每个子菜单添加一个 data-submenu=x。

$('.show-submenu').on('click', function () {
  var number = $(this).attr("data-submenu");
  var selector = '.submenu-' + number + '.offcanvas'
  $(selector).addClass('offcanvas--active');
})

所以数据子菜单用于配对触发器和模态。这样您就可以坚持使用易于阅读的 html 代码和一小段 jquery。

【讨论】：

【解决方案3】：

试试这个：

var menus = [1, 2];

menus.forEach(index => {
  $(`.show-submenu-${index}`).on('click', () => {
    $(`.submenu-${index}.offcanvas`).addClass('offcanvas--active');
  });
});

【讨论】：

您的解决方案很有趣，但我从未见过这种语法。它是否告诉将菜单项（在本例中为 1 和 2）引入 var 索引中的 foreach，然后用当前索引值填充 ${index} ？是否需要特殊的库或框架（当然除了 jquery）？
这个特性名称是模板字符串，javascript原生支持，从ES6开始https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Template_literals。
我查看了模板文字，它们看起来非常有用，谢谢您的详细说明:)
很高兴我的回答对您有所帮助。查看this github repo 描述了大部分 ES6 特性。

【解决方案4】：

你也可以使用它。

$('.show-submenu-1, .show-submenu-2').on('click', function (event) {
$(event.target).hasClass('show-submenu-1'){
   $('.submenu-1.offcanvas').addClass('offcanvas--active');
}else{
  $('.submenu-2.offcanvas').addClass('offcanvas--active');
} 
})

最好将你的 show-submenu-1(as showmenu) 和 submenu-1(as submenu) 放在同一个父元素中，这样你就可以使用closest() 方法并让生活变得轻松

例如：

$('.show-submenu').on('click', function (event) {
    $(event.target).closest('.submenu').addClass('offcanvas--active');
    })

【讨论】：

这会导致点击子菜单2影响子菜单1