如何忘却jQuery，开始使用JavaScript原生API

Rindia 发布于2019-08-19 14:25 / 2878人阅读

摘要：就在这里随时等候你的召唤，但是也许你还没有准备好如何使用他。但是我想讨论的是如果仅为使用个选择器或者类似的东西，是否真的有必要加载。假设咱不是为了简化，每个人用是因为它支持，动画处理和选择器函数。

JavaScript就在这里随时等候你的召唤，但是也许你还没有准备好如何使用他。为什么不用jQuery呢？因为他很慢并且你的网站真的不需要这些多余的负担。

我不是来这里争辩原生API和函数库的迥异，开发的时候很难不用到这些神奇的东东。但是我想讨论的是：如果仅为使用个选择器($)或者类似的东西，是否真的有必要加载jQuery。

假设咱不是为了简化，每个人用jSomething是因为它支持IE，动画处理和选择器函数。

原生等价物

选择元素

// jQuery
var els = $(".el");

// Native
var els = document.querySelectorAll(".el");

// Shorthand
var $ = function (el) {
  return document.querySelectorAll(el);
}

var els = $(".el");

// Or use regex-based micro-selector lib
// http://jsperf.com/micro-selector-libraries

创建元素

// jQuery
var newEl = $("");

// Native
var newEl = document.createElement("div");
Add event listener
// jQuery
$(".el").on("event", function() {

});

// Native
[].forEach.call(document.querySelectorAll(".el"), function (el) {
  el.addEventListener("event", function() {

  }, false);
});

Set/get属性

// jQuery
$(".el").filter(":first").attr("key", "value");
$(".el").filter(":first").attr("key");

// Native
document.querySelector(".el").setAttribute("key", "value");
document.querySelector(".el").getAttribute("key");
Add/remove/toggle class

// jQuery
$(".el").addClass("class");
$(".el").removeClass("class");
$(".el").toggleClass("class");

// Native
document.querySelector(".el").classList.add("class");
document.querySelector(".el").classList.remove("class");
document.querySelector(".el").classList.toggle("class");

附加

// jQuery
$(".el").append($(""));

// Native
document.querySelector(".el").appendChild(document.createElement("div"));

克隆

// jQuery
var clonedEl = $(".el").clone();

// Native
var clonedEl = document.querySelector(".el").cloneNode(true);

移除

// jQuery
$(".el").remove();

// Native
remove(".el");

function remove(el) {
  var toRemove = document.querySelector(el);

  toRemove.parentNode.removeChild(toRemove);
}

父元素

// jQuery
$(".el").parent();

// Native
document.querySelector(".el").parentNode;
Prev/next element
// jQuery
$(".el").prev();
$(".el").next();

// Native
document.querySelector(".el").previousElementSibling;
document.querySelector(".el").nextElementSibling;
XHR aka AJAX 

// jQuery
$.get("url", function (data) {

});
$.post("url", {data: data}, function (data) {

});
// Native

// get
var xhr = new XMLHttpRequest();

xhr.open("GET", url);
xhr.onreadystatechange = function (data) {

}
xhr.send();

// post
var xhr = new XMLHttpRequest()

xhr.open("POST", url);
xhr.onreadystatechange = function (data) {

}
xhr.send({data: data});

这些只是很少的一部分，你可以使用浏览器的 console 来发现更多的原生的东西或者读读MDN’s JS API reference or WPD’s DOM docs

当然你也可以使用库，看这里-轻量级库可以找到一些应对特定任务的库，但首先要确保如果不用这个库你就不能完成任务，否则-使用native JavaScript.

原文链接： romanliutikov 转自：伯乐在线 - 翻译：蔡蔡

GPU云服务器云服务器如何使用api 如何使用javascript javascript如何使用如何使用api接口

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/77970.html

抛弃jQuery，拥抱原生JavaScript

摘要：数据来源百度统计下面是国际上占有率，已经跌出前，比较多，还好支持他们并不难。前端发展很快，现代浏览器原生 API 已经足够好用。我们并不需要为了操作 DOM、Event 等再学习一下 jQuery 的 API。同时由于 React、Angular、Vue 等框架的流行，直接操作 DOM 不再是好的模式，jQuery 使用场景大大减少。因此我们项目组在双十一后抽了一周时间，把所有代码中...

testbird 2019-08-19 17:07 评论0 收藏0
2019 年了，为什么我还在用 jQuery？

摘要：无论是还是，对许多应用来说，这个大小都是完全可以接受的。但是为了不用，放弃向后兼容那我觉得还是用得了。自从年双十一正式上线，累计处理了亿错误事件，付费客户有金山软件百姓网等众多品牌企业。译者按：看来 jQuery 还是有一些用武之地的。原文: Why Im Still Using jQuery in 2019 译者: Fundebug 为了保证可读性，本文采用意译而非直译...

aikin 2019-08-23 17:56 评论0 收藏0
前端开发者手册2019

摘要：年，和前端开发者与应用程序前端开发者之间产生了巨大的分歧。开发最常见的解决方案有手机和平板的原生应用程序桌面应用程序桌面应用程序原生技术最后，前端开发者可以从浏览器开发中学习到，编写代码不需要考虑浏览器引擎的限制。前端开发者手册2019 Cody Lindley 编著原文地址本手册由Frontend Masters赞助，通过深入现代化的前端工程课程来提高你的技能。下载：PDF ...

church 2019-08-02 16:18 评论0 收藏0
前端开发者手册2019

摘要：年，和前端开发者与应用程序前端开发者之间产生了巨大的分歧。开发最常见的解决方案有手机和平板的原生应用程序桌面应用程序桌面应用程序原生技术最后，前端开发者可以从浏览器开发中学习到，编写代码不需要考虑浏览器引擎的限制。前端开发者手册2019 Cody Lindley 编著原文地址本手册由Frontend Masters赞助，通过深入现代化的前端工程课程来提高你的技能。下载：PDF ...

xiao7cn 2019-08-26 13:47 评论0 收藏0
前端开发者手册2019

摘要：年，和前端开发者与应用程序前端开发者之间产生了巨大的分歧。开发最常见的解决方案有手机和平板的原生应用程序桌面应用程序桌面应用程序原生技术最后，前端开发者可以从浏览器开发中学习到，编写代码不需要考虑浏览器引擎的限制。前端开发者手册2019 Cody Lindley 编著原文地址本手册由Frontend Masters赞助，通过深入现代化的前端工程课程来提高你的技能。下载：PDF ...

邹立鹏 2019-08-30 10:56 评论0 收藏0