如何將此 jQuery 代碼重寫為 Javascript？

Question

我使用的 WordPress 主題只有大約 10 行 jQuery，但它使用的是 90kb jQuery 文件。 我想把這個jQuery代碼改成Javascript，但是我不太擅長Javascript：

jQuery('body #main-tabbed-area a, body .wp-pagenavi a, body .pagination a').live("click", function () {
  $href = jQuery(this).attr('href');
  $contentArea.fadeTo('fast', 0.2).load($href + ' #main-area', function () {
    $contentArea.fadeTo('fast', 1);
  });
  return false;
});


var $tabbed_area = jQuery('div#tabbed');
if ($tabbed_area.length) {
  $tabbed_area.tabs({
    fx: {
      opacity: 'toggle'
    }
  });
};

提前致謝！

Answer 1

我個人會堅持使用 jQuery。 盡管“只有大約 10 行 jQuery”，但它所做的卻是相當可觀的。 當您重新創建 jQuery 在這里為您提供的許多內容時，您將擁有相當不錯的 javaScript 板進行調試和維護。 這就是 jQuery 的美妙之處，引用他們的標語“少寫，多做”請記住，使用 jQuery，您將消除許多惱人的跨瀏覽器怪癖。

編輯：請參閱tbranyen 的回答，了解為什么 jQuery 值得的實際示例

使用 jQuery 的 CDN 版本，如Google 的，您將使用 jQuery，您的使用可能已經緩存，因此不必再次下載。 jQuery UI 也可以以相同的方式提供服務。 見這篇文章： http://encosia.com/2008/12/10/3-reasons-why-you-should-let-google-host-jquery-for-you/

編輯

進一步閱讀您的問題“我不太擅長 javaScript”是堅持使用 jQuery 的更多理由。 讓它為你做所有的舉重。 HOWEVER don't use jQuery as an excuse not to learn more about javaScript, the more you learn about javaScript the more you will be able to get out of jQuery.

Answer 2

我的解決方案是零散的，它不完整，我不希望這個答案得到分數。 這是我嘗試在 vanilla JS 中復制 jQuery 的代碼，純粹是為了對您的問題進行科學公正。 我認為自己擅長 JavaScript，但即使我知道自己的局限性和時間限制。 我在這個星球上只有一個生命，老實說，我不值得花時間為您的 Wordpress 站點寫一個標簽插件和 animation。

只需看一下代碼差異。 如果你真的害怕人們下載，你應該問問自己是什么讓你的網站與成千上萬的網站有如此大的不同？ 數百萬人訪問的其他網站？

寫這些東西很乏味，這就是為什么如果我必須做這些事情，我會使用 jQuery。 但是，假設您不關心較舊的瀏覽器支持。 你沒有提到這一點，我在最底層有一個解決方案，它可以做更多的事情，但不會與舊瀏覽器或工作期一起使用。

原本的

很少的代碼可以做非常復雜的事情。

jQuery('body #main-tabbed-area a, body .wp-pagenavi a, body .pagination a').live("click", function () {
  $href = jQuery(this).attr('href');
  $contentArea.fadeTo('fast', 0.2).load($href + ' #main-area', function () {
    $contentArea.fadeTo('fast', 1);
  });
  return false;
});

嘗試從頭開始寫

// Not even close to finished solution
(function(window, document) {
  var tabbed = document.getElementById('tabbed');

  // Semi-normalized event handling, not even a fraction as good as jQuery's
  function attachEvent(node, type, callback) {
    if(node.attachEvent) {
      return node.attachEvent('on'+type, function() {
        callback.apply(window.event.target, arguments);
      });
    }

    return node.addEventListener(type, function(e) {
      callback.apply(e.target, arguments);
    }, true);
  }

  // Semi-delegation again, not even a fraction of what jQuery offers
  attachEvent(document, 'click', function(e) {
    var href = this.href;
    var body = document.body;
    var elements = [];
    var slice = [].slice;
    var concat = elements.concat;

    // This is just the start of what it would take to emulate what jQuery is doing to match all those items
    // Without a reliable selector engine like querySelectorAll (not even that reliable) you'd need to match.
    elements = concat(slice.call(body.getElementById('main-tabbed-area').getElementsByTagName('a')));
    elements = concat(slice.call(body.getElementsByTagName('...');

    // Not even going to attempt fading
    // jQuery again does all this
  });

  if(tabbed && tabbed.tagName === 'div') {
    // No idea what tabs is? A plugin? Good luck!
  }

})(this, this.document);

代碼稍微更現代一些......但仍然看到所有這些代碼

function xhr(url, callback) {
  var request = new window.XMLHttpRequest();
  request.open('GET', url, true);
  request.onreadystatechange = function(e) {
    if(e.readyState === 4) {
      callback(e.responseXML);
    }
  };
  request.send(null);
}

// No idea what contentArea is
var contentArea = ...???;

(function(window, document) {
  var tabbed = document.getElementsById('tabbed');

  document.addEventListener('click', function(e) {
    var href;
    var elements = document.querySelectorAll('body #main-tabbed-area a, body .wp-pagenavi a, body .pagination a');
    var match = false;

    elements.forEach(function(element) {
      if(this === element) {
        match = true;
      }
    });

    if(match) {
      href = e.target.href;

      // Some CSS3 class that does a fade out
      contentArea.classList.add('fadeOut');

      xhr(href, function(data) {
        var data = data.getElementById('main-area').innerHTML;
        contentArea.innerHTML = data;

        contentArea.classList.remove('fadeOut');

        // Some CSS3 class that does a fade in
        contentArea.classList.add('fadeIn');
      });

      return false;
    }
  }, true);

  if(tabbed && tabbed.tagName === 'div') {
    // Still no idea what tabs is? A plugin? Good luck!
  }
})(this, this.document);