javascript - 使用 jQuery .resize() 操作 DOM

Question

我想根据不同的浏览器大小更改 DOM 中元素的顺序。

我研究过使用 intention.js，但觉得它对于我的需要可能有点过分了(它取决于 underscore.js)。

所以，我正在考虑使用 jQuery 的 .resize()，但想知道您是否认为以下内容可以接受，并且符合最佳实践...

var layout = 'desktop';
$( window ).resize(function() {
    var ww = $( window ).width();
    if(ww<=767 && layout !== 'mobile'){
        layout = 'mobile';
        // Do something here
    }else if((ww>767 && ww<=1023) && layout !== 'tablet'){
        layout = 'tablet';
        // Do something here
    }else if(ww>1023 && layout !== 'desktop'){
        layout = 'desktop';
        // Do something here
    }
}).trigger('resize');

我将当前布局存储在 layout 变量中，以便仅在窗口进入下一个断点时触发函数。

Answer 1

媒体查询通常是首选。但是，如果我处于运行时有大量操作的单页应用程序中，我将使用 onresize() 代替。 Javascript 给了你更多的自由来动态设置断点(特别是当你使用诸如append()之类的东西在DOM树内移动元素时)。您的设置与我使用的非常接近:

function setWidthBreakpoints(windowWidth) {
    if (windowWidth >= 1200) {
        newWinWidth = 'lg';
    } else if (windowWidth >= 992) {
        newWinWidth = 'md';
    } else if (windowWidth >= 768) {
        newWinWidth = 'sm';
    } else {
        newWinWidth = 'xs';
    }
}

window.onresize = function () {

    setWidthBreakpoints($(this).width());

    if (newWinWidth !== winWidth) {
        onSizeChange();
        winWidth = newWinWidth;
    }
};

function onSizeChange() {
// do some size changing events here.
}

您未包含的被认为是最佳实践的一件事是 debouncing function ，例如 Paul Irish 提供的下面的一个，它可以防止在浏览器窗口中重复触发调整大小事件:

(function($,sr){

  // debouncing function from John Hann
  // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
  var debounce = function (func, threshold, execAsap) {
      var timeout;

      return function debounced () {
          var obj = this, args = arguments;
          function delayed () {
              if (!execAsap)
                  func.apply(obj, args);
              timeout = null;
          };

          if (timeout)
              clearTimeout(timeout);
          else if (execAsap)
              func.apply(obj, args);

          timeout = setTimeout(delayed, threshold || 100);
      };
  }
  // smartresize 
  jQuery.fn[sr] = function(fn){  return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };

})(jQuery,'smartresize');


// usage:
$(window).smartresize(function(){
  // code that takes it easy...
});

因此，将去抖器合并到您的调整大小功能中，您应该会很顺利。