干燥窗口调整大小功能的最佳方法答案

【问题标题】：Best way to DRY up window resize function干燥窗口调整大小功能的最佳方法
【发布时间】：2017-12-12 08:20:29
【问题描述】：

这看起来并不干燥，我怎样才能更有效地重构它？

var headerHeight = $('header').outerHeight();
var sliderHeight = $('.slick-slider').outerHeight();
$('.slider-container').css('height', sliderHeight - headerHeight);

$(window).resize(function() {
  clearTimeout(window.resizedComplete);
  window.resizedComplete = setTimeout(function() {
    var headerHeight = $('header').outerHeight();
    var sliderHeight = $('.slick-slider').outerHeight();
    $('.slider-container').css('height', sliderHeight -
      headerHeight);
  }, 250);
});

【问题讨论】：

你可以在处理程序之外调用事件
你能举个例子吗？

标签： jquery function dry

【解决方案1】：

常用方式：制作并使用可复用函数：

function doHeightStuff() {
    var headerHeight = $('header').outerHeight();
    var sliderHeight = $('.slick-slider').outerHeight();
    $('.slider-container').css('height', sliderHeight - headerHeight);
}
doHeightStuff();
$(window).resize(function() {
  clearTimeout(window.resizedComplete);
  window.resizedComplete = setTimeout(doHeightStuff, 250);
});

【讨论】：

仍然没有我想的那么干燥，我会将$('header') 等存储在函数范围之外，这样 jQuery 就不必选择每个函数调用 :)
@Martijn：当然。这本身并不是一个真正的 DRY 问题，更多的是运行时/内存权衡（当然，存储和重用这些假设每次都是相同的 header、.slick-slider 和 .slider-container - 这似乎很可能但没有了解更多...）。由于这些仅用于调整大小（例如，很少），我可能不会存储它们。