忘掉jQuery，使用JavaScript原生API

22顶
10踩

2013-11-27 11:51 by 副主编 wangguo 评论(38) 有39755人浏览

JavaScript jQuery 原生 API web

jQuery目前已经成为最流行的JavaScript库，它可以让开发者“write less, do more（写得更少，做得更多）”，这也是它的核心理念。通过它，用户可以更方便地处理HTML documents、events，更轻松地实现动画效果、AJAX交互等。

尽管jQuery帮助开发者节省了大量的工作，但是并不是所有的产品都适合使用jQuery。jQuery 2.0.3版本有236KB，压缩版也有81KB，这意味着你的Web产品需要额外的加载时间和带宽，而在移动设备上则需要更多。

如果你的产品中只有少量的前端效果或DOM操作，那么完全可以抛弃臃肿的jQuery，转而使用JavaScript原生API来实现。

以下是jQuery和JavaScript实现相同操作的等价代码。

选择元素

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

// 原生方法
var els = document.querySelectorAll('.el');

// 函数法
var $ = function (el) {
  return document.querySelectorAll(el);
}

var els = $('.el');

// 或者使用regex-based micro-selector库，地址：http://jsperf.com/micro-selector-libraries

创建元素

// jQuery
var newEl = $('<div/>');

// 原生方法
var newEl = document.createElement('div');

添加事件监听器

// jQuery
$('.el').on('event', function() {

});

// 原生方法
[].forEach.call(document.querySelectorAll('.el'), function (el) {
  el.addEventListener('event', function() {

  }, false);
});

设置/获取属性

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

// 原生方法
document.querySelector('.el').setAttribute('key', 'value');
document.querySelector('.el').getAttribute('key');

添加/移除/切换类

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

// 原生方法
document.querySelector('.el').classList.add('class');
document.querySelector('.el').classList.remove('class');
document.querySelector('.el').classList.toggle('class');

附加内容（Append）

// jQuery
$('.el').append($('<div/>'));

// 原生方法
document.querySelector('.el').appendChild(document.createElement('div'));

克隆元素

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

// 原生方法
var clonedEl = document.querySelector('.el').cloneNode(true);

移除元素

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

// 原生方法
remove('.el');

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

  toRemove.parentNode.removeChild(toRemove);
}

获取父元素

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

// 原生方法
document.querySelector('.el').parentNode;

上一个/下一个元素

// jQuery
$('.el').prev();
$('.el').next();

// 原生方法
document.querySelector('.el').previousElementSibling;
document.querySelector('.el').nextElementSibling;

XHR或AJAX

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

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

});

// 原生方法
// 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});

以上这些只是很少一部分，你可以在浏览器的控制台中找到更多东西，或者可以参考MDN的JS API reference或者WPD的DOM文档。

你也可以使用其他非常轻量级的库代替，比如http://microjs.com/列出的一些库，根据你的需求选择最合适的库，但首先要清楚，除非是不使用库无法实现某项功能，否则还是使用原生JavaScript。

英文原文：How to forget about jQuery and start using native JavaScript APIs

查看图片附件

分享到：

22
顶

10
踩

评论共 38 条请登录后发表评论

18 楼 sswh 2013-11-28 08:39

这篇文章的例子可以拿来做JQuery的宣传：“为什么要使用Jquery，看看代码对比就知道了”

17 楼 ad6543210 2013-11-28 08:09

yunzhu 写道

white_crucifix 写道

大家似乎都没看到全文中间的这一段话

如果你的产品中只有少量的前端效果或DOM操作，那么完全可以抛弃臃肿的jQuery，转而使用JavaScript原生API来实现。

说得对，文章都没理解清楚就开始喷了

用到 ajax 就不是少量了，真很少還不如不用，直接轉頁算了

事實上就算原生 JS 用很少也不會比 81K 少多少

16 楼 jsycbc 2013-11-28 01:14

如果页面比较多，那相应的js也比较多。用原生写不仅看上去不够简洁，而且大小未必比使用jQuery一定要小。再另外，还要处理兼容性的问题。存在即合理，更何况jQuery已经得到大家的认同了。

15 楼 ykssky 2013-11-27 22:13

进门前就猜作者是找喷的, 进来一看... 果然
1) browser 的兼容性搞死人, 有木有
2) browser 会cache 就下载一次, 又不是每个页面都下载, 有木有

14 楼 liulijun.cn.2011 2013-11-27 21:08

white_crucifix 写道

liulijun.cn.2011 写道

真不知道有什么好喷的。爱看就看。不来看换其他文章不就完了。

这种想法其实不可取

总比喷人好。

13 楼 fengyuan1314 2013-11-27 18:48

浏览器兼容是大坑啊~

12 楼 white_crucifix 2013-11-27 18:13

liulijun.cn.2011 写道

真不知道有什么好喷的。爱看就看。不来看换其他文章不就完了。

这种想法其实不可取

11 楼 liulijun.cn.2011 2013-11-27 17:53

真不知道有什么好喷的。爱看就看。不来看换其他文章不就完了。

10 楼 xingkongxieyang 2013-11-27 14:48

这样的文章怎么上头条了!

9 楼 seedpip 2013-11-27 14:07

仿佛程序员的时间不用钱一样。。。

8 楼 yunzhu 2013-11-27 13:56

white_crucifix 写道

大家似乎都没看到全文中间的这一段话

如果你的产品中只有少量的前端效果或DOM操作，那么完全可以抛弃臃肿的jQuery，转而使用JavaScript原生API来实现。

说得对，文章都没理解清楚就开始喷了

7 楼 white_crucifix 2013-11-27 13:47

大家似乎都没看到全文中间的这一段话

如果你的产品中只有少量的前端效果或DOM操作，那么完全可以抛弃臃肿的jQuery，转而使用JavaScript原生API来实现。

6 楼 ray_linn 2013-11-27 13:41

用更狗屎的语句来写出一坨屎样的代码，这是文章的主旨？

5 楼 BuN_Ny 2013-11-27 13:37

基于jq的81KB，你写了500KB的JS代码，
省了jq的81KB，你写了1000KB的JS代码。

4 楼 caizi12 2013-11-27 13:26

为啥会有这样一个奇葩的文章呢，不解释。

3 楼 linder0209 2013-11-27 12:36

话这样说，但实际不是这样，你提供的需要支持 querySelector，但对于ie低版本是不支持的，而且jQuery做了好多兼容性。

2 楼 remyzane 2013-11-27 12:32

倒行逆施不是GD的专利吗，小心它告你侵权哦

1 楼 remyzane 2013-11-27 12:32

倒行逆施不是GD的专利，小心GD告你侵权哦

发表评论

您还没有登录,请您登录后再发表评论

22顶10踩