这个jQuery可以用vanilla JS完成吗？

Question

我有这个在移动设备上工作,但由于jQuery的32kb gzip-ed我想知道是否可以创建这个代码

$(document).ready(function() {
  $('body').addClass('js');

  var $menu = $('#menu'),
        $menulink = $('.menu-link'),
        $wrap = $('#wrap');

    $menulink.click(function() {
        $menulink.toggleClass('active');
        $wrap.toggleClass('active');
        return false;
    });
});

可以写在没有库依赖任何香草JavaScript.

可以吗？我从哪里开始？

Answer 1

JQuery使用javascript/DOMscripting来创建它的框架.JQuery所做的一切都可以在基本脚本中完成.例如$('body').addClass('js')可以写成:

document.querySelector('body').className += ' js';

而$menulink.toggleClass('active');作为像

var current     = $menulink.className.split(/\s+/)
   ,toggleClass = 'active'
   ,exist       =  ~current.indexOf(toggleClass)
;
current.splice(exist ? current.indexOf(toggleClass) : 0,
               exist ? 1 : 0,
               exist ? null : toggleClass);
$menulink.className = current.join(' ').replace(/^\s+|\s+$/,'');

这就是JQuery包装这种代码的原因.

这个jsfiddle包含一个使用javascript而没有框架的工作示例.除此之外,它还演示了如何编写自己的元素包装器.

从哪儿开始？我想你必须深入研究javascript.或者查看这个SO问题