在JavaScript中調整大小時添加/刪除類

Question

我正在嘗試學習jQuery和JavaScript，所以請多多包涵。 我有一個jQuery函數，可以在調整大小時添加和刪除類。 jQuery的：

 $(document).ready(function($) {
    var $window = $(window), $element = $('.test');

    function resize() {
      if ($window.width() < 768) {
        return $element.addClass('mobile');
      }    
      $element.removeClass('mobile');
    }

    $window.resize(resize).trigger('resize');
});

我想用JavaScript構建它，但是目前仍在學習它，卻迷失了方向。 我想看一個JavaScript示例，但是我只找到jQuery版本。 我正在嘗試了解差異。 一個例子將不勝感激！

Answer 1

要將jQuery函數重新創建為原始JavaScript函數，可以使用以下方法：

document.addEventListener("DOMContentLoaded", function(event) {
  var element = document.querySelector('.test');

  function resize() {
    if (window.innerWidth < 768) {
      element.classList.add('mobile');
    } else {
      element.classList.remove('mobile');
    }
  }
  // For performance reasons, this method should be 
  // "debounced" so that it doesn't have to execute 
  // on every resize event, only when you're done resizing.
  window.onresize = resize;
});

您可以在這里閱讀有關反跳的內容，也可以從中讀取它的好處，也可以從lodash中檢出_.debounce() 。

了解jQuery和Vanilla JavaScript之間的差異的最佳方法（IMO）是 ：

• 閱讀jQuery源代碼以了解它們如何實現其API。 由於jQuery只是一個JavaScript庫，因此您可以看到jQuery使用“幕后”實現所有神奇效果的原始JavaScript。
• 在練習jQuery項目或功能時，作為練習，嘗試在沒有jQuery的情況下實現相同的項目/功能，您將很快了解jQuery如此有用的原因，但您將在其中進一步了解DOM和原始JavaScript。瀏覽器。

請注意 ，由於此特定功能僅基於窗口的大小添加和刪除類，因此您可以在CSS中使用@media查詢來獲得相同的效果，這可能比上面的JavaScript實現更具性能。

例如，如果沒有這樣的JavaScript，則可以實現相同的結果：

@media screen and (max-width: 768px) {
    .test {
      background-color: red;
    }
  }

Answer 2

function ready(resize) {
  if (document.readyState != 'loading'){
    resize();
  } else {
    document.addEventListener('DOMContentLoaded', resize);
  }
}

上面的函數是$(document).ready()的替代方法

您的調整大小功能

function resize() {
  var elements = document.getElementsByClassName('test');
  var firstEl = elements[0];
  var className = 'mobile';
    if (window.innerWidth < 768) {
      // add Class
      if (firstEl.classList) {
            firstEl.classList.add(className);
        } else {
            firstEl.className += ' ' + className;
        }
      } else {
        // remove Class
        if (firstEl.classList) {
          firstEl.classList.remove(className);
        } else {
          firstEl.className = firstEl.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
        }
      } 
}

您可以看到，我只是采用了與className相匹配的第一個Element。 如果要將類添加到所有元素，請遍歷Array元素。

所以現在我們只需要添加事件監聽器以調整窗口大小並調用即可。

window.onresize = function(event) {
    resize();
};
ready(resize);

如果您不知道如何用純JavaScript編寫特定的jQuery函數，那么我建議您： 您可能不需要jQuery