Jquery函数在纯javascript中等效
我正在寻找一个包含所有jQuery函数的文档,以及它们在API本身由浏览器提供的等价物。
有时我只需要一个特定的jQuery函数( .insertAfter()
.on()
.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(){}));
如果您也在寻找相同的遗留支持,那么不,没有这样的事情有很多原因,例如:
- jQuery在内部重用了许多方法,因此您很难找到一个独立的api调用。
- 在为遗留支持应用回退之前,jQuery经常运行多个支持检查,浏览器是否本机支持方法。 你需要做同样的事情。
但是,您可以通过浏览github: https : //github.com/jquery/jquery上的源代码来提取单个方法并制作正确的vanilla实现,但这将非常耗时。
也就是说,许多dom操作非常简单,你首先不需要jQuery,比如添加一个类:
elem.className += 'class'
但逆向工程jQuery不是一种摆脱jQuery依赖的聪明方法。
也许你正在寻找jQuery源代码?
我从未见过一个。 JQuery处理了很多浏览器差异,因此在JQuery中使用简单命令编写通常编写的内容可能需要在普通的旧JavaScript中使用相当多的代码。
考虑到这一点,我认为你想让自己摆脱对jQuery的依赖,并了解更多有关JavaScript本机的方法,这是令人钦佩的。
查看JQuery背后的代码可能有助于您入门。 否则,当您有特定问题时,为什么不回到本网站。 我相信这里的人可以告诉你.insertAfter()
.on()
.insertAfter()
.on()
等等,但是每一个人可能都需要一个单独的问题和一些关于你要先做什么的解释。
希望这有助于(或至少鼓励)。