這個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; 
    }); 
}); 

可以在沒有圖書館dependany香草的JavaScript編寫。

可以這樣做嗎？我會在哪裏開始？

Answer 1

JQuery使用javascript/DOM腳本來創建其框架。 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的包裹這種代碼。

This jsfiddle包含一個使用JavaScript而沒有框架的工作示例。除此之外，它演示瞭如何編寫自己的元素包裝器。

從哪裏開始？你將不得不去dive into javascript我想。或者點擊此處SO-question

Answer 2

總是有classList（解決不兼容的瀏覽器的解決方法）。

Answer 3

var toggleClass = function (el, className) { 
    if(el) { 
    if(el.className.indexOf(className)) { 
     el.className = el.className.replace(className, ''); 
    } 

    else { 
     el.className += ' ' + className; 
    } 
} 
}; 

document.addEventListener('DOMContentLoaded', function() { 
    document.body.className += ' js'; 

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

    $menulink.addEventListener('click', function (e) { 

    toggleClass($menulink, 'active'); 
    toggleClass($wrap, 'active'); 
    e.preventDefault(); 
    }); 
}); 

Answer 4

僅適用於現代瀏覽器。 ®

document.addEventListener('DOMContentLoaded', function() { 
    document.body.classList.add('js'); 

    var wrap = document.getElementById('wrap'); 
    var menuLinks = Array.prototype.slice.call(document.getElementsByClassName('menu-link')); 

    var toggleActive = function(element) { 
     element.classList.toggle('active'); 
    }; 

    menuLinks.forEach(function(menuLink) { 
     menuLink.addEventListener('click', function(e) { 
      menuLinks.forEach(toggleActive); 
      toggleActive(wrap); 
     }, false); 
    }); 
}, false); 

Answer 5

絕對如此。由於jQuery是JavaScript的一個子集（完全用JavaScript編寫），所以你喜歡的任何函數都可以被複制。這是你想投入多少努力的問題。下面是我將如何在你的文章中複製jQuery的有限子集，並且它是合理的跨瀏覽器兼容的（如果稍微長一點...）。

var Vanilla; 
if (!Vanilla) { 
    Vanilla = {}; 
} 
//execute this now to have access to it immediately. 
(function() { 
    'use strict'; 
    Vanilla.addHandler = function (elem, event, handler) { 
     if (elem.addEventListener) { 
      elem.addEventListener(event, handler, false); 
     } else if (elem.attachEvent) { 
      elem.attachEvent('on' + event, handler); 
     } 
    }; 
    Vanilla.hasClass = function (elem, cssClass) { 
     var classExists = false; 
     // 
     if (elem && typeof elem.className === 'string' && (/\S+/g).test(cssClass)) { 
      classExists = elem.className.indexOf(cssClass) > -1; 
     } 
     // 
     return classExists; 
    }; 
    Vanilla.addClass = function (elem, cssClass) { 
     if (elem && typeof elem.className === 'string' && (/\S+/g).test(cssClass)) { 
      //put spaces on either side of the new class to ensure boundaries are always available 
      elem.className += ' ' + cssClass + ' '; 
     } 
    }; 
    Vanilla.removeClass = function (elem, cssClass) { 
     if (elem && typeof elem.className === 'string'&& (/\S+/g).test(cssClass)) { 
      //replace the string with regex 
      cssClass = new RegExp('\\b' + cssClass + '\\b', 'g'); 
      elem.className = elem.className.replace(cssClass, '').replace(/^\s+/g, '').replace(/\s+$/g, ''); //trim className 
     } 
    }; 
    Vanilla.toggleClass = function (elem, cssClass) { 
     if (Vanilla.hasClass(elem, cssClass)) { 
      Vanilla.removeClass(elem, cssClass); 
     } else { 
      Vanilla.addClass(elem, cssClass); 
     } 
    }; 
    Vanilla.getElementsByClassName = function (cssClass) { 
     var nodeList = [], 
      classList = [], 
      allNodes = null, 
      i = 0, 
      j = 0; 
     if (document.getElementsByClassName1) { 
      //native method exists in browser. 
      nodeList = document.getElementsByClassName(cssClass); 
     } else { 
      //need a custom function 
      classList = cssClass.split(' '); 
      allNodes = document.getElementsByTagName('*'); 
      for (i = 0; i < allNodes.length; i += 1) { 
       for (j = 0; j < classList.length; j += 1) { 
        if (Vanilla.hasClass(allNodes[i], classList[j])) { 
         nodeList.push(allNodes[i]); 
        } 
       } 
      } 
     } 
     return nodeList; 
    }; 
}()); 
//Now we have a proper window onload 
Vanilla.addHandler(window, 'load', function() { 
    'use strict'; 
    var body = document.body, 
     menu = document.getElementById('menu'), 
     menulink = [], 
     wrap = document.getElementById('wrap'), 
     i = 0, 
     menulinkClickHandler = function (e) { 
      var i = 0; 
      for (i = 0; i < menulink.length; i += 1) { 
       Vanilla.toggleClass(menulink[i], 'active'); 
      } 
      Vanilla.toggleClass(wrap, 'active'); 
      return false; 
     }; 
    Vanilla.addClass(body, 'js'); 
    menulink = Vanilla.getElementsByClassName('menu-link'); 
    for (i = 0; i < menulink.length; i += 1) { 
     Vanilla.addHandler(menulink[i], 'click', menulinkClickHandler); 
    } 
});