通过访问变量重构类似的函数答案

【问题标题】：refactoring similar functions with access to variables通过访问变量重构类似的函数
【发布时间】：2014-04-09 19:22:08
【问题描述】：

我有一个简单的索引页面，允许您单击一个按钮来更改背景圆形 div 上随机显示的颜色。我编写的代码运行良好，但确实重复；我为每个按钮编写了一个函数，除了它们访问的变量之外，这些函数看起来都一样。

我正在尝试将其重构为单个函数，但无法找到一种方法来允许单击的按钮访问正确的变量以更改背景颜色。例如，这里是第一个按钮的函数，它访问将颜色更改为灰度光谱的 colorList 变量：

var colorList1 = [//array of 20 colors]
var colorList2 = [//array of 20 colors]
var colorList3 = [//array of 20 colors]
var colorList4 = [//array of 20 colors]

// .choice-1 is the div class for the first button
$(".choice-1").on("click", function() {
    blankSlate();
    colorList = colorList1;
    $("[id^='nav']").css("background-color", colorList[1]);
    $("#colorChoice").css("background-color", colorList[1]);
});

我尝试编写一些可以访问类名中的数字并将其分配给主函数可以访问的变量的内容，如下所示：

var buttonVar = $("button").attr[0].nodeValue; // get full name of nodeValue
var btnChoice = buttonVar[buttonVar.length-1]; // access number at end of class name
$("button").on("click",function() {
    $('.choice' + btnChoice).on('click', function(){*/
    blankSlate();
    colorList = colorList + btnChoice;
    $("[id^='nav']").css("background-color", colorList[btnChoice]);
    $("#colorChoice").css("background-color", colorList[btnChoice]);
  });

...但我不确定这是否是正确的方法，并且我希望得到一些关于通常如何处理这种类型的重构的建议。

这是一个 Codepen 的链接，展示了它是如何工作的，并且所有的 html、css 和剩余的 JS 都是可见的。 http://codepen.io/a6ftcruton/full/Beizu

【问题讨论】：

标签： jquery html css refactoring parameter-passing

【解决方案1】：

您可以将data 属性添加到您将单击的元素，并在那里传递您想要的集合的名称。您还可以将数组存储在一个对象中，以便更轻松地引用它们：

var myData = {
  list1: [ ... ],
  list2: [ ... ],
  list3: [ ... ]
  // more if you need them...
};

您的可点击元素获得一个类和数据属性：

<a href="#" class="wow" data-list-name="list2">Click me</a>
<button class="wow" data-list-name="list3">No, Click me</button>

然后你可以像这样附加到一个事件监听器：

$('.wow').on('click', function () {
  var el = $(this);
  var my_list_name = el.data('list-name');
  var the_data = myData[my_list_name];
  // do stuff with your data
});

此处示例：http://jsfiddle.net/CVLma/

【讨论】：

我不知道如何使用数据方法，但经过反复试验得到了它。代码现在看起来更干净了。 codepen.io/a6ftcruton/pen/coDIx 谢谢！

【解决方案2】：

以上场景指出CSS要重构。我建议您选择以下之一：

SASS
LESS

它们都允许variables、mixins、functions 和许多其他技术，可以让您制作CSS，更多的是maintainable、themable 和extendable。

【讨论】：