解释一下为什么我很少用jQuery
这里声明一下,这不是反jQuery的文章,这里我想告诉大家,我持有的观点是在中小型的项目中建议能不用jQuery就不用。
背景知识
在所有的现代浏览器(IE9+)里,它们所提供的原生DOM API都是比jQuery快很多。为什么?
有一个东西,叫Vanilla JS,是一个快速、轻量级、跨平台的JavaScript框架。几乎所有著名的互联网企业都使用它。
同时,它也是这个世界上最轻量级的javascript框架(没有之一),它有多快? 如下
我们在HTML里引入Vanilla JS:
<script src="path/to/vanilla.js"></script>
比上面更快的方法是:
什么?没有代码?是的,就是没有代码,因为Vanilla JS实在太强了,以至于所有的浏览器在10年前内置了它。
所以,我们平时吹牛逼说的什么原生js的实现,用到什么原生API,都是来自于Vanilla JS
性能比较
在这里,我们用原生API和各种库进行性能对比,数据来源请看参考
框架 |
代码 |
---|---|
Vanilla JS |
document.getElementById('test-table'); |
Dojo |
dojo.byId('test-table'); |
Prototype JS |
$('test-table') |
Ext JS |
delete Ext.elCache['test-table'];Ext.get('test-table'); 997,562 |
jQuery |
$jq('#test-table'); |
MooTools |
document.id('test-table'); |
常用对比
下面是一些常用的jQuery方法,以及它们在原生JavaScript中的对应方法。
Document Ready
// jQuery
$(document).ready(readyCb);
or
$(readyCb);
// VanillaJs
function docReady(cb) {
if (document.readyState != 'loading'){
cb();
} else {
document.addEventListener('DOMContentLoaded', cb);
}
}
docReady(readyCb);
Selectors
更多Selector的性能表现请看这里:[][2]
或者你直接看下面的典型例子
Class Selector
// jQuery
const items = $('.item');
// VanillaJS
const items = document.getElementsByClassName('item');
ID Selector
// jQuery
const item = $('#item');
// VanillaJS
const item = document.getElementById('item');
Query Selector
// jQuery
const items = $('.list .item');
const lastItem = $('.item:last-item');
// VanillaJS
const items = document.querySelectorAll('.list .item');
const lastItem = document.querySelector('.item:last-item');
Each or forEach
// jQuery
$('.item').each(function(index, element) {
console.log(element);
});
// VanillaJS
function each(nodeList, cb) {
for(var i = 0; i < nodeList.length;i++) {
cb(nodeList[i], i, nodeList);
}
}
each(document.getElementsByClassName('item'), function(node, i) {
console.log(node);
});
// Another Vanilla forEach
Array.prototype.forEach.call(document.querySelectorAll('.item'), function(node, i){
console.log(node);
});
Adding/Removing Classes
// jQuery
const item = $('#item')
item.addClass('new-class');
item.removeClass('new-class');
// VanillaJS
const item = document.getElementById('item');
item.classList.add('new-class');
item.classList.remove('new-class');
Show/Hide Elements
// jQuery
const item = $('#item');
item.hide();
item.show();
// VanillaJS
const item = document.getElementById('item');
item.style.display = 'none';
item.style.display = '';
AJAX
代替$.ajax
你有下面几种方法
XMLHttpRequest
const xhr = new XMLHttpRequest();
xhr.addEventListener("load", function() {
// response can be used here
});
xhr.open('GET', 'url');
xhr.send();
其他
如果你需要查看更多例子,可以访问:here
结语
在浏览器野蛮生长的年代,jQuery作为一种工具在当时几乎是必需的。但随着浏览器们越来越标准化,浏览器之间的API差别也在减少,并且通过版本迭代也会更快地支持,我们可以更好地用原生API做更高效的事。这里不是说jQuery不好,只是我们做项目的时候,不应该把它作为默认。我们都有Vanilla JS了,已经是火箭炮了,还要啥自行车呢?
参考
- vanilla-js.com/
- hackernoon.com/you-truly-dont-need-jquery-5f2132b32dd1#.k94vnjo64
- jsperf.com/dm-jquery-vs-vanilla-selectors
Last modification:May 15th, 2018 at 06:12 pm
© The copyright belongs to the author
Support
If you think my article is useful to you, please feel free to appreciate
×Close
Appreciate the author
Sweeping payments
Pay by AliPay
Pay by WeChat
- setInterval与clearInterval使用示例
- jenkins配置记录(1)--添加用户权限
- jenkins忘记管理员登陆密码的补救措施
- openstack虚拟机迁移的操作记录
- 从MapX到MapXtreme2004[11]-坐标概论
- 动态控件的新思路
- 独家分享 腾讯大神教你如何学习一门新的编程语言-以Python 为例
- 连续打印问题的解决
- 分布式监控系统Zabbix--完整安装记录-批量添加主机和自动发现端口
- 更新Mapx地图的字段
- 设置linux账号的有效时间
- relative定位的理解
- shell+curl监控网站页面(域名访问状态),并利用sedemail发送邮件
- 写稿机器人获“吴文俊奖”,能提升今日头条内容质量吗
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- ubuntu下利用expect实现screen多窗口开机运行
- hetzner服务器购买和安装debian系统
- 安全通告 | Apache SkyWalking SQL注入漏洞安全风险公告(CVE-2020-13921)
- Cmd Markdown 迁移备份的流程
- PyTorch3:计算图torch.autograph
- spark shell 配置 Kryo 序列化
- Mac里捣腾Kerberos(一)
- Spark on K8S 访问 Kerberized HDFS
- Apache Beam的Docker Demo
- docker login 报错了...
- Spark-Submit 和 K8S Operation For Spark
- Spark的Dockerfile分析
- Spark on Kubernetes在Mac的Demo
- Python的Wand模块
- 机器学习第4天:预测1立方米混凝土抗压强度