纯JavaScript中与Jquery函数等效的函数

Question

我正在寻找一份包含所有jQuery函数及其在浏览器原生提供的API中等效实现的文档。

有时我只需要一个特定的jQuery函数（例如.detach（），.insertAfter（），.on（）等），因此我仅加载jQuery以实现它们。

我想停止使用jQuery，而一个将jQuery转换为非库的工具会帮助我很多（我认为也会帮助许多人）。

是否有类似的工具可在网络上找到？

编辑：

我找到了这个网站：http://youmightnotneedjquery.com/

- Yukulélé

---

我已经删除了你对PURE的引用，因为它并不是你所认为的那样。 - Quentin

如果你问我，这是很多工作却没有实际的好处。 - JJJ

使用jQuery并没有本质的问题。在这些情况下，它非常轻便。实际上，Google CDN使得它如此方便，以至于你很难找到不使用它的理由。 - Blazemonger

这个问题没有意义。如果你想学习特定的jQuery函数如何工作，你需要学习本地DOM操作，研究jQuery的工作原理（通过查看其源代码），并构建自己的独立函数。jQuery源代码就是它如何工作的文档。没有单独的文档。 - jfriend00

jQuery 对我来说就像自行车的稳定轮，非常适合学习严肃的 JavaScript，但有时并不是必需的。在这里阅读更多信息：http://youmightnotneedjquery.com/ - Yukulélé

Answer 1

只有在获取了jQuery对象$(SELECTOR)之后，才能调用那些jQuery函数。如果你说你不需要jQuery选择器代码，只想要处理（可能是）HTML DOM元素的函数，那么你就必须从jQuery源代码(http://code.jquery.com/jquery-latest.js)中提取它，这个过程可能会很痛苦，因为它有依赖性，而且大小和复杂度都很高。

JS等价物：

.detach - .removeChild

var par = elm.parentNode;
par.removeChild(elm);

.insertAfter - .insertBefore 如何在JavaScript中使用.insertAfter()而不使用库来实现插入元素之后的操作？

function insertAfter(referenceNode, newNode) {
    referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

.on - addEventListener / attachEvent

if(elm.addEventListener)
    elm.addEventListener(EVENT_NAME, function() {}, false);
else
    elm.attachEvent('on' + EVENT_NAME, function() {});

现在，如果您想绑定事件，以便处理程序对特定对象具有THIS引用...

function bind( scope, fn ) {
    return function () {
        fn.apply( scope, arguments );
    };
}
if(elm.addEventListener)
    elm.addEventListener(EVENT_NAME, bind(SCOPE_OBJECT, function(){}), false);
else
    elm.attachEvent('on' + EVENT_NAME, bind(SCOPE_OBJECT, function(){}));

- Louis Ricci

---

+1. 就个人而言，我会先检查 fn.bind，然后再使用 fn.apply。 - Paul S.

Answer 2

如果你也在寻找相同的遗留支持，那么很遗憾，并没有这样的东西，有许多原因，比如：

1. jQuery 在内部重复使用了许多方法，所以你会很难找到一个独立的 API 调用。

2. jQuery 经常运行多个支持检查，无论浏览器是否本地支持方法，在应用遗留支持之前都需要进行相同的操作。

然而，你可能能够通过浏览 github 上的源代码来提取单个方法并制作正确的基础实现：https://github.com/jquery/jquery 但这需要相当长的时间。

话虽如此，许多 DOM 操作是非常简单的，你甚至不需要一开始就使用 jQuery，例如添加类。

elem.className += 'class'

但是，通过逆向工程jQuery并不是摆脱jQuery依赖的明智方式。

- David Hellsing

---

请注意，jQuery 检查了一些不太明显的边缘情况，例如 .addClass('class') 首先检查元素是否已经有该类，如果是则不添加。 - JJJ

@Juhana 说得好，这正是我的意思。如果你将 jQuery 方法“翻译”成原生 JS，你可能会得到不太可读的代码，而且还要检查一些根本不适用于你的情况。我认为放弃 jQuery 的整个重点在于，你可以编写更适合你的项目和编码风格的精简代码（尽管我个人不是原生粉丝）。 - David Hellsing

Answer 3

也许您正在寻找jQuery源代码？

http://docs.jquery.com/Source_Code

- beder

---

250千字节的代码不是文件，也不是有用的参考资料。 - Quentin

是的，但是某些 jQuery 函数使用其他 jQuery 的公共/私有函数，需要一些时间来解开并重新创建干净的原生 JS 函数。 - Yukulélé

如果你这样做，实际上就相当于重新创造了jQuery。这样的努力值得吗？ - Frédéric Hamidi

Answer 4

我从未见过这样的情况。JQuery处理了许多浏览器差异，因此用JQuery编写通常使用简单命令的代码可能需要更多的纯JavaScript代码。

考虑到这一点，我认为你想要摆脱对jQuery的依赖并学习更多JavaScript本地方法是值得称赞的。

查看JQuery背后的代码可能有助于您入门。否则，为什么不在您有具体问题时再回到这个网站呢？我相信这里的人们可以告诉您关于.detach()、.insertAfter()、.on()等内容，但每个问题可能都需要一个单独的问题和一些关于您首先要做什么的解释。

希望这能帮到您（或者至少是鼓励性的）。

- guypursey