未加星标

解释一下为什么我很少用jQuery

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 2017 | 作者 红领巾 ] 0人收藏点击收藏

这里声明一下,这不是反jQuery的文章,jQuery作为一个js库给大家的项目开发带来很多便利,但有时候仔细想想,我们真的需要jQuery吗?一年前的lpisme的主题的一个特色是没有jQuery,还是现在的Pinghsu主题,也是不用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和各种库进行性能对比,数据来源请看参考

根据ID获取DOM元素 框架 代码 次数/秒 Vanilla JS document.getElementById('test-table'); 12,137,211 Dojo dojo.byId('test-table'); 5,443,343 Prototype JS $('test-table') 2,940,734 Ext JS delete Ext.elCache['test-table'];Ext.get('test-table'); 997,562 jQuery $jq('#test-table'); 350,557 YUI YAHOO.util.Dom.get('test-table'); 326,534 MooTools document.id('test-table'); 78,802 根据标签名获取DOM元素 框架 代码 次数/秒 Vanilla JS document.getElementsByTagName("span"); 8,280,893 Prototype JS Prototype.Selector.select('span', document); 62,872 YUI YAHOO.util.Dom.getElementsBy(function(){return true;},'span'); 48,545 Ext JS Ext.query('span'); 46,915 jQuery $jq('span'); 19,449 Dojo dojo.query('span'); 10,335 MooTools Slick.search(document, 'span', new Elements); 5,457

Done,Vanilla JS all win~

常用对比

下面是一些常用的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的性能表现请看这里: here

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(XHR) const xhr = new XMLHttpRequest(); xhr.addEventListener("load", function() { // response can be used here }); xhr.open('GET', 'url'); xhr.send(); Fetch

大多数的主流浏览器都支持Fetch方法,你可以用 polyfills 让更多浏览器支持

你也可以在 CanIUse 里可以查看更多浏览器支持情况

fetch(’url’) .then(function (response) {}) .catch(function (error) {});

如果你需要查看更多例子,可以访问 here

结语

在浏览器野蛮生长的年代,jQuery作为一种工具在当时几乎是必需的。但随着浏览器们标准化了大多数API,并且通过版本迭代去更快地支持,我们更好地用原生API做更高效的事。这里不是说jQuery不好,只是我们做项目的时候,不应该把它作为默认。我们都有Vanilla JS了,已经是火箭炮了,还要啥自行车呢?

参考 https://hackernoon.com/you-truly-dont-need-jquery-5f2132b32dd1#.k94vnjo64 https://segmentfault.com/a/1190000000355277 https://jsperf.com/dm-jquery-vs-vanilla-selectors

JavaScript VanillaJS jQuery

本文由Chakhsu Lau 创作,采用 知识共享署名4.0 国际许可协议进行许可

本站文章除注明转载/出处外,均为本站原创或翻译,转载前请务必署名

最后编辑时间为: Feb 9 , 2017 at 11:06 am

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

分页:12
转载请注明
本文标题:解释一下为什么我很少用jQuery
本站链接:http://www.codesec.net/view/531601.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(48)