解释一下为什么我很少用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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏非典型技术宅

iOS动画系列之五:基础动画之缩放篇&旋转篇Swift+OC1. 思路和最终成果2. 抽取公共方法3. 懒加载Layer4. 添加动画

891
来自专栏埋名

React UI 组件库【uiw】发布

高品质的UI工具包,基于React 16+的组件库。 ? 为了表示支持,点击 阅读原文 搞点Star,多多益善。

512
来自专栏前端说吧

css笔记 - 张鑫旭css课程笔记之 absolute 篇

即是说,absolute后,元素和浮动元素的特性差不多,只不过absolute脱离文档流,元素飘在天上,float还在凡间。

512
来自专栏数据小魔方

螺旋图(海螺图)

今天跟大家分享一种好玩的图表——海螺图! ▽▼▽ 这种图表制作方法与之前介绍的两种图表——玫瑰图都是使用雷达图制作完成,步骤上有些相似之处,功能也差不多,也属于...

3587
来自专栏Python攻城狮

Ajax-数据异步交互1.Ajax简介2.AJAX 实例

AJAX = 异步 JavaScript 和 XML。 AJAX 是一种用于创建快速动态网页的技术。 通过在后台与服务器进行少量数据交换,AJAX 可以使网...

913
来自专栏挖掘大数据

Cobub无码埋点关键技术实现流程(附图)

随着大数据时代的到来,数据采集也已经变的越来越重要。前端埋点作为一个比较成熟的数据接入手段被广泛应用着。目前埋点分为两种方式,有码与无码埋点。有码埋点比较容易理...

2096
来自专栏静晴轩

Vue 各类数据绑定

『天下武功,唯快不破』√,这一直是对武学造诣方面的追捧,虽然对于这个丝毫不会;更是对待现实工作不懈渴求,乃至苛求。因为这已不是遁隐修行,而是职场卖命,唯有先快速...

3577
来自专栏cs

淘宝评论的爬取

淘宝网页的评论数据动态加载的,首先要关闭adblock等屏蔽插件广告。还有我登陆了账号。

1263
来自专栏TechBox

Swift 范的 CGRect、CGSize 和 CGPoint(转)C 语法 —— 披着羊皮的狼Zero取值可变别忘了

1732
来自专栏韩东吉的Unity杂货铺

零基础入门 30:获取移动端手机的电量/时间/网络

大家在玩手游的时候经常会看到游戏里有一些提醒状态,图示如下,右上角有当前手机端的时间,wifi网络状态展示,以及电量的展示效果

643

扫码关注云+社区