在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