我正在寻找一个文档,其中包含所有 jQuery 函数及其在浏览器本机提供的 API 中的等价物。
有时我只需要一个特定的 jQuery 函数(.detach()
, .insertAfter()
, .on()
, ...),我只为此加载 jQuery。
我想停止我对 jQuery 的依赖,一个 jQuery 到非库的翻译器会对我有很大帮助(我想很多人)。
网络上的某个地方有这样的东西吗?
编辑 :
我找到了:http: //youmightnotneedjquery.com/
我正在寻找一个文档,其中包含所有 jQuery 函数及其在浏览器本机提供的 API 中的等价物。
有时我只需要一个特定的 jQuery 函数(.detach()
, .insertAfter()
, .on()
, ...),我只为此加载 jQuery。
我想停止我对 jQuery 的依赖,一个 jQuery 到非库的翻译器会对我有很大帮助(我想很多人)。
网络上的某个地方有这样的东西吗?
我找到了:http: //youmightnotneedjquery.com/
您只有在获得 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 中插入 After()?
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(){}));
如果您也在寻找相同的遗留支持,那么不,由于许多原因,没有这样的事情,例如:
但是,您可以通过在 github 上浏览源代码来提取单个方法并做出正确的 vanilla 实现:https ://github.com/jquery/jquery ,但这会非常耗时。
也就是说,许多 dom 操作非常简单,以至于您一开始就不需要 jQuery,例如添加一个类:
elem.className += 'class'
但是对 jQuery 进行逆向工程并不是摆脱 jQuery 依赖的明智方法。
也许您正在寻找 jQuery 源代码?
我从来没有见过一个。JQuery 处理了许多浏览器差异,因此要编写通常在 JQuery 中使用简单命令编写的内容,可能需要在普通的旧 JavaScript 中编写更多代码。
考虑到这一点,我认为您希望摆脱对 jQuery 的依赖并了解更多有关 JavaScript 原生方法的信息,这是令人钦佩的。
查看JQuery 背后的代码可能有助于您入门。否则,当您有特定问题时,为什么不回到这个网站。我相信这里的人可以告诉你关于.detach()
, .insertAfter()
,.on()
等的信息,但每个人可能都需要一个单独的问题和一些关于你首先要做什么的解释。
希望这会有所帮助(或至少是令人鼓舞的)。