如何将此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's answer，了解jQuery值得一试的实际示例

使用jQuery的CDN版本，如Google's，您将使用您的用户可能已经缓存的jQuery，因此不必再次下载。jQuery UI也可以以相同的方式提供服务。请参阅本文：http://encosia.com/2008/12/10/3-reasons-why-you-should-let-google-host-jquery-for-you/

编辑

进一步阅读你的问题“我不太擅长javaScript”是坚持使用jQuery的更多理由。让它为你做所有的起重工作吧。然而，不要用jQuery作为借口不去学习更多关于javaScript的知识，你对javaScript了解得越多，你就能从jQuery中学到更多。

Answer 2

我的解决方案是支离破碎的，它不完整，我不期望这个答案的分数。这是我尝试在普通JS中复制jQuery的代码，纯粹是为了对您的问题进行科学公正的解释。我认为自己擅长JavaScript，但即使是我也知道自己的局限性和时间限制。我在这个星球上只有一次生命，老实说，不值得我花时间为你的Wordpress站点写标签、插件和动画。

看看代码的区别就知道了。如果你真的害怕人们下载，你应该问问自己，是什么让你的网站与成千上万的网站有如此大的不同？数以百万计的人访问的其他网站呢？

写这些东西很乏味，这就是为什么如果我必须做这些事情，我会使用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);

代码稍微更现代一些...但是jeesh还是看了看所有的代码

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);