可以在普通JS中完成此jQuery吗? [英] Can this jQuery be done in vanilla JS?

问题描述

我已经在移动设备上工作了，但是由于jQuery的32kb gzip版本，我想知道是否可以创建此代码

I've got this working on mobile devices, but because of the 32kb gzip-ed of jQuery I wonder if it's possible to create this code

$(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中编写.

can be written in no library dependany vanilla JavaScript.

可以做到吗?我将从哪里开始?

Can it be done? Where would I start?

推荐答案

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

JQuery uses javascript/DOMscripting to create its framework. Everything JQuery does, can be done in basic scripting. For example $('body').addClass('js') can be written as:

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包装此类代码的原因.

That's why JQuery wrapped this kind of code.

此jsfiddle 包含一个使用JavaScript的有效示例，但没有框架.除此之外，它还演示了如何对自己的元素包装器进行编程.

This jsfiddle contains a working example using javascript without a framework. Besides that it demonstrates how to program your own element wrapper.

从哪里开始?我想您必须深入研究.或检查此 SO问题

Where to start? You'll have to dive into javascript I suppose. Or check this SO-question

这篇关于可以在普通JS中完成此jQuery吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！