jQuery方法的本机JavaScript等效项：事件，Ajax和实用程序

这是我真的需要jQuery吗？系列文章的最后一部分。 在本文中，我们将研究jQuery提供的更高级方法的JavaScript等效项…

在页面加载时启动脚本

在黑暗和遥远的过去，开发人员会将脚本放在HTML head并使用window.onload = start; 启动初始功能。 它可以工作，但是window.onload仅在所有嵌入式文件（如图像）全部下载完后才触发； 您可能需要等待一段时间才能运行代码。

jQuery提供了一种更为有效的方法：

$(start)

HTML下载完成且DOM准备就绪后，将立即执行start（）函数，但它不会等待其他资产。 在幕后，它在IE6 / 7/8的jQuery 1.x中使用原生DOMContentLoaded事件和回退：

document.addEventListener("DOMContentLoaded", start);

我曾经为这种胡说八道而烦恼。 没必要：只需将脚本加载到页面底部的</body>标记之前，就可以知道DOM已经准备就绪。

每次

jQuery允许您在数组中的所有项目上运行自定义函数。 （这包括节点的集合。尽管它们可以作为NodeList开始使用，但是jQuery在返回它们之前将它们复制到类似数组的对象中）：

$("p").each(function(i) {
	console.log("index " + i + ": " + this);
});

当您将多种方法应用于jQuery链时， each方法都在内部使用。 此命令将使所有<p>节点循环两次：

$("p").addClass("newclass").css({color:"#f00"});

大多数浏览器（包括IE9 +）都支持本机forEach 。 但是，它仅适用于数组，因此我们需要通过遍历所有项或使用Array slice原型来转换NodeList。

Array.prototype.slice.call(document.getElementsByTagName("p"));

嗯 就个人而言，我更喜欢一个简短的自定义函数，该函数可以通过回调传递给数组，NodeList或对象。 它遍历所有项，并将每个项及其索引传递给该函数。 此示例在回调第一次返回false时自动取消进一步的处理：

function Each(obj, fn) {
	if (obj.length) for (var i = 0, ol = obj.length, v = obj[0]; i < ol && fn(v, i) !== false; v = obj[++i]);
	else for (var p in obj) if (fn(obj[p], p) === false) break;
};

大事记

在jQuery之前的日子里，事件处理非常糟糕。 IE6 / 7/8实现了一个不同的事件模型，甚至那些据说遵循W3C标准的浏览器也存在足够的不一致之处，从而使开发变得笨拙。 jQuery仍然使事件更易于理解：

$("#clickme").on("click", function(e) {
	console.log("you clicked " + e.target);
	e.preventDefault();
});

但是原生的等效并不难：

document.getElementById("clickme").addEventListener("click", function(e) {
	console.log("you clicked " + e.target);
	e.preventDefault();
});

这在IE6 / 7/8中将不起作用，但jQuery 2.x也将不起作用。 大多数库提供了一种解决方法，该方法使用oldIE attachEvent方法注册事件。 另外，如果您只需要节点上特定类型的一个事件，则只需应用跨浏览器的DOM1'on'方法，例如

document.getElementById("clickme").onclick = runSomething;

（不要忘记在处理程序函数的顶部包含e = e ? e : window.event;这样的行，以处理oldIE事件对象）。 请记住，如果您支持IE9 +，则不需要这些。

jQuery提供了非标准类型，例如'focusin'和'live'事件，即，通过将来的操作添加到页面的匹配元素也将应用该事件。 jQuery通过将处理程序附加到父元素（例如页面主体）并在事件对象冒泡通过DOM时对其进行分析来实现此目的。 您可以自己执行此操作-效率更高，使用的代码更少，并且是标准的JavaScript做法，例如，与其将悬停事件附加到每个表行，不如将其附加到表，分析对象并做出相应的反应。

如果您喜欢jQuery的语法，为什么不使用Remy Sharp的min.js ？ 它提供$选择器，链接on事件， trigger功能和forEach支持。 总重量：精简版为617个字符。

阿贾克斯

上一次开发需要XMLHttpRequest，脚本注入，GET请求，POST提交，JSON处理和图像加载的项目是什么时候？ jQuery处理许多情况，尽管它很灵活，但是您几乎不需要所有这些选项。 典型的jQuery Ajax代码：

$.ajax({
	url: "webservice",
	type: "POST",
	data: "a=1&b=2&c=3",
	success: function(d) {
		console.log(d);
	}
});

本机等效项：

var r = new XMLHttpRequest(); 
r.open("POST", "webservice", true);
r.onreadystatechange = function () {
	if (r.readyState != 4 || r.status != 200) return; 
	console.log(r.responseText);
};
r.send("a=1&b=2&c=3");

还有更多选项可供考虑-例如超时-因此我建议将本机代码包装在易于使用的函数中。 但是，您可以针对您的项目对其进行优化，并实现一些更好的XMLHttpRequest2功能，例如二进制数据，上传进度和跨域请求，而jQuery并未（直接）实现这些请求。

您应该使用jQuery吗？

只有您可以做出决定，但是将jQuery作为每个项目的默认起点不一定有效，也不会带来优美的代码。

jQuery非常有用，并且是前端开发重生的主要原因之一。 但是，与用于处理画布，SVG或其他重点任务的专家库不同，jQuery提供了一组通用工具-您将永远不需要它们。 浏览器供应商已经赶上了，除非您需要支持oldIE，否则jQuery不再是以前的必需资源。 为了说明这一点，如果您已迁移到jQuery 2.0，则可能不需要jQuery。

我将为您提供指向Vanilla JS的链接； 许多顶级Web公司使用的库，它具有模块化体系结构，并且比其所有竞争对手都要小。 该网站是开玩笑的，但很好地说明了这一点。

From: https://www.sitepoint.com/jquery-vs-raw-javascript-3-events-ajax/