Question

我正在尝试学习jQuery和javascript，所以请耐心等待。我有一个jQuery函数，可以在resize上添加和删除类。 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函数重新创建为vanilla 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;
});

您可以阅读有关去抖动和它的好处here，或者您可以查看_.debounce() from lodash。

学习jQuery和Vanilla JavaScript之间差异的绝对最佳方式（IMO）是：

阅读jQuery源代码，了解它们如何实现API。因为jQuery只是一个JavaScript库，所以你可以看到jQuery在“幕后”使用的vanilla JavaScript来实现所有的魔力。
当你正在开发jQuery项目或功能时，作为练习，尝试在没有jQuery的情况下实现相同的项目/功能，你将很快了解jQuery如此有用的原因，但是你将学习更多关于DOM和浏览器中的vanilla 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函数，我可以向您推荐：You Might Not Need jQuery

在JavaScript中调整大小时添加/删除类

2 个答案: