午后星期午

忘掉jQuery，使用JavaScript原生API

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实现相同操作的等价代码。 

选择元素  

Javascript代码 
  1. // jQuery   
  2. var  els = $( '.el' );  
  3.   
  4. // 原生方法   
  5. var  els = document.querySelectorAll( '.el' );  
  6.   
  7. // 函数法   
  8. var  $ =  function  (el) {  
  9.   return document.querySelectorAll(el);  
  10. }  
  11.   
  12. var  els = $( '.el' );  
  13.   
  14. // 或者使用regex-based micro-selector库，地址：http://jsperf.com/micro-selector-libraries   


创建元素  

Javascript代码 
  1. // jQuery   
  2. var  newEl = $( '<div/>' );  
  3.   
  4. // 原生方法   
  5. var  newEl = document.createElement( 'div' );  


添加事件监听器  

Javascript代码 
  1. // jQuery   
  2. $('.el').on('event', function() {  
  3.   
  4. });  
  5.   
  6. // 原生方法   
  7. [].forEach.call(document.querySelectorAll('.el'), function (el) {  
  8.   el.addEventListener('event', function() {  
  9.   
  10.   }, false);  
  11. });  


设置/获取属性  

Javascript代码 
  1. // jQuery   
  2. $('.el').filter(':first').attr('key', 'value');  
  3. $('.el').filter(':first').attr('key');  
  4.   
  5. // 原生方法   
  6. document.querySelector('.el').setAttribute('key', 'value');  
  7. document.querySelector('.el').getAttribute('key');  


添加/移除/切换类  

Javascript代码 
  1. // jQuery   
  2. $('.el').addClass('class');  
  3. $('.el').removeClass('class');  
  4. $('.el').toggleClass('class');  
  5.   
  6. // 原生方法   
  7. document.querySelector('.el').classList.add('class');  
  8. document.querySelector('.el').classList.remove('class');  
  9. document.querySelector('.el').classList.toggle('class');  


附加内容（Append）  

Javascript代码 
  1. // jQuery   
  2. $('.el').append($('<div/>'));  
  3.   
  4. // 原生方法   
  5. document.querySelector('.el').appendChild(document.createElement('div'));  


克隆元素  

Javascript代码 
  1. // jQuery   
  2. var  clonedEl = $( '.el' ).clone();  
  3.   
  4. // 原生方法   
  5. var  clonedEl = document.querySelector( '.el' ).cloneNode( true );  


移除元素  

Javascript代码 
  1. // jQuery   
  2. $('.el').remove();  
  3.   
  4. // 原生方法   
  5. remove('.el');  
  6.   
  7. function  remove(el) {  
  8.   var toRemove = document.querySelector(el);  
  9.   
  10.   toRemove.parentNode.removeChild(toRemove);  
  11. }  


获取父元素  

Javascript代码 
  1. // jQuery   
  2. $('.el').parent();  
  3.   
  4. // 原生方法   
  5. document.querySelector('.el').parentNode;  


上一个/下一个元素  

Javascript代码 
  1. // jQuery   
  2. $('.el').prev();  
  3. $('.el').next();  
  4.   
  5. // 原生方法   
  6. document.querySelector('.el').previousElementSibling;  
  7. document.querySelector('.el').nextElementSibling;  


XHR或AJAX  

Javascript代码 
  1. // jQuery   
  2. $.get('url', function (data) {  
  3.   
  4. });  
  5. $.post('url', {data: data}, function (data) {  
  6.   
  7. });  
  8.   
  9. // 原生方法   
  10. // get   
  11. var  xhr =  new  XMLHttpRequest();  
  12.   
  13. xhr.open('GET', url);  
  14. xhr.onreadystatechange = function (data) {  
  15.   
  16. }  
  17. xhr.send();  
  18.   
  19. // post   
  20. var  xhr =  new  XMLHttpRequest()  
  21.   
  22. xhr.open('POST', url);  
  23. xhr.onreadystatechange = function (data) {  
  24.   
  25. }  
  26. 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

posted on 2013-12-31 13:55 午后星期午 阅读(98) 评论(0)  编辑  收藏 所属分类: Js


只有注册用户登录后才能发表评论。
网站导航: