jQuery vs ES6 (似乎 ES6 已經包含了大部分 jQuery 的主要功能)

書摘自 Traversy Media (https://www.youtube.com/watch?v=pk3tsynNZ0w)

  • DOM Selection
    jQuery ES6
    $(‘.someclass’) document.querySelector(‘.someclass’)
      document.querySelectorAll(‘.someclass’)
  • DOM manipulation
    jquery ES6
    $element.remove() element.remove()
    $element.prepend(otherElement) element.prepend(otherElement)
    $element.before(otherElement) element.before(otherElement)
    $element.addClass(‘someclass’) element.classList.add(‘someclass’)
    $element.removeClass(‘someclass’) element.classList.remove(‘someclass’)
    $element.toggleClass(‘someclass’) element.classList.toggle(‘someclass’)
    const parent = $element.parent() const parent = element.parentNode
    const cloned = element.clone() const cloned = element.cloneNode(true)
  • Events
    jQuery ES6
    $someElement.on(‘click’, function() {}) someElement.addEventListener(‘click’, () => {})
  • Http request (ajax)
    ES6 axios
    fetch(‘http://api.some.com’) axios.get(‘http://api.som.com’)
    .then(res=>res.json()) .then(res => console.log(res.data))
    .then(data => console.log(data))  
  • Utilities
    jQuery ES6
    $.isArray(someValue) Array.isArray(someValue)
    $.inArray(item, anArray) someArray.indexOf(item) > -1
    $.each(someArray, (value, index) => {}) someArray.forEach((value, index) => {})
    $.map(someArray, (value, index) => {}) someArray.map((value, index) => {})
    $.grep(someArray, (value, index) => {}) someArray.filter((value, index) => {})
    $.parseJson(str) JSON.parse(str)
  • Animation
    • 在純粹 Javascript 做 Animation 還是比 jQuery 麻煩,但是已經可以使用以下來幫助
      • CSS Transition/keyframes
      • Web Animation API
      • 3rd party library Greensock
Notice: compact(): Undefined variable: limits in /var/www/html/wp-includes/class-wp-comment-query.php on line 853 Notice: compact(): Undefined variable: groupby in /var/www/html/wp-includes/class-wp-comment-query.php on line 853

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *