바닐라 JS에서이 jQuery를 수행 할 수 있습니까?

Question

나 모바일 장치에서이 작업있어하지만

$(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 바닐라 자바 ​​스크립트를 작성할 수 있습니다이 코드를 만들 수 있다면 때문에 jQuery를의 32킬로바이트의 gzip으로 ED의 궁금.

할 수 있습니까? 어디서부터 시작하겠습니까?

Answer 1

JQuery는 javascript/DOMscripting을 사용하여 프레임 워크를 만듭니다. JQuery가하는 모든 작업은 기본 스크립팅에서 수행 할 수 있습니다.

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

그리고 $menulink.toggleClass('active'); JQuery와 코드 이런 종류의 포장 이유

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+$/,''); 

같은 무언가로 예를 들어 $('body').addClass('js')는 다음과 같이 쓸 수 있습니다.

This jsfiddle에는 프레임 워크없이 자바 스크립트를 사용하는 작업 예제가 들어 있습니다. 그 외에도 자체 래퍼를 프로그래밍하는 방법을 보여줍니다.

어디서부터 시작해야할까요? 당신은 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); 
    } 
});