【问题标题】：Get rid of jQuery code redundancy, that differs only with arguments摆脱 jQuery 代码冗余，仅与参数不同
【发布时间】：2017-11-22 22:35:38
【问题描述】：

问题描述

我希望我的网站在我单击元素时显示图表。

问题是 - 我有 4 个位置和 3 个间隔。那是 4*3 = 12 个地块：

var places = ['place1','place2','place3','place4']
var interval = [1,2,3]

对于每个间隔，我都有一个单独的数组数组，分别保存每个位置的样本

samples1[]
samples2[]
samples3[]

samples1[0] 表示“interval=1place1 的样本列表”

samples1[1] 表示“interval=1 样本列表place2”等。

情节本身是这样的：

<div id="plot-place1">
    <div class = interval-button id = "interval1">interval1</div>
    <div class = interval-button id = "interval2">interval2</div>
    <div class = interval-button id = "interval3">interval3</div>
    <div id = "place1"><!-- Plotly chart will be drawn inside this DIV --></div>
</div>

显示指定地点的默认绘图的函数如下所示：

/* Shows plot's container (div) for place1, interval=1 */

$(document).ready(function(){
    $(this).on('click', '.place1', function(){
        $('#plot-place1').fadeToggle('fast');
        showPlot(samples1[0], 'place1');
    });
});

然后我有一个函数，在单击间隔按钮后，将单个图更改为显示指定的间隔：

$(document).ready(function(){
    $('#plot-place1').on('click', '#interval2', function(){
        showPlot(samples1[3], 'sypialnia');
    });
});

所以对于 12 个图，我有 12 个相同的函数，它们会改变图的间隔并且仅在参数上有所不同。我还有 4 个几乎相同的函数来显示指定位置的绘图。

这看起来很糟糕！我想摆脱这种冗余，但我是 jQuery 新手，我知道应该有类似 java 模板函数的东西，但我不知道在哪里开始。

对此的假设模板是：

/* shows plot's container (div)*/
$(document).ready(function(){
    $(this).on('click', <plot's_place-based_id> , function(){
        $(<plot_container_id>).fadeToggle('fast');
        showPlot(<array_of_samples>, <place>);
    });
});

/* shows specified plot */
$(document).ready(function(){
    $(<plot_container_id>).on('click', <interval_button_id>, function(){
        showPlot(<array_of_samples>, <place>);
    });
});

问题

如何摆脱这种冗余？
是否清楚地理解了问题？
我到底有多烂？

【问题讨论】：

您可以在附加事件的元素中将 plot_container_id 设置为数据属性，并通过事件目标元素获取。

标签： javascript jquery frontend web-frontend

【解决方案1】：

不要使用 ID 来重复这样的模块...使用通用类。

您还可以使用数据属性或索引来协助处理诸如激活哪个按钮之类的事情

具有 2 个重复模块的示例：

var intervals = {
  'place1': [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
  ],
  'place2': [
    [11, 12, 13],
    [14, 15, 16],
    [17, 18, 19]
  ]
}

function showPlot($el, place, plotIndex) {
  // display place and interval array for demo
  $el.html(place + ' - ' + JSON.stringify(intervals[place][plotIndex]))
}

$('.interval-button').click(function() {
  // isolate place instance container based on `this`
  var $cont = $(this).closest('.plot-place'),
    place = $cont.data('place'),
    plotIndex = $cont.find('.interval-button').index(this),
    $plotEl = $cont.find('.place')
  showPlot($plotEl, place, plotIndex)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="plot-place" data-place="place1">
  <h4>Place 1</h4>
  <button class="interval-button">interval1</button>
  <button class="interval-button">interval2</button>
  <button class="interval-button">interval3</button>
  <div class="place"></div>
</div>

<div class="plot-place" data-place="place2">
  <h4>Place 2</h4>
  <button class="interval-button">interval1</button>
  <button class="interval-button">interval2</button>
  <button class="interval-button">interval3</button>
  <div class="place">
    <!-- Plotly chart will be drawn inside this DIV -->
  </div>
</div>

【讨论】：