使用JavaScript原生API替换Jquery

左手的ㄟ右手 2022-08-03 11:53 180阅读 0赞

Query目前已经成为最流行的JavaScript库，它可以让开发者“write less, do more（写得更少，做得更多）”，这也是它的核心理念。通过它，用户可以更方便地处理HTML documents、events，更轻松地实现动画效果、AJAX交互等。   
  
尽管jQuery帮助开发者节省了大量的工作，但是并不是所有的产品都适合使用jQuery。jQuery 2.0.3版本有236KB，压缩版也有81KB，这意味着你的Web产品需要额外的加载时间和带宽，而在移动设备上则需要更多。   
  
如果你的产品中只有少量的前端效果或DOM操作，那么完全可以抛弃臃肿的jQuery，转而使用JavaScript原生API来实现。

![2abcf2da-42bb-38d3-b6b3-465eca67dec6.jpg][]

以下是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][MDN_JS API reference] 或者 [WPD的DOM文档][WPD_DOM] 。   
  
你也可以使用其他非常轻量级的库代替，比如 [http://microjs.com/][http_microjs.com] 列出的一些库，根据你的需求选择最合适的库，但首先要清楚，除非是不使用库无法实现某项功能，否则还是使用原生JavaScript。   
  
英文原文： [How to forget about jQuery and start using native JavaScript APIs][]

[2abcf2da-42bb-38d3-b6b3-465eca67dec6.jpg]: /images/20220731/8afb570e738d4eab96c3b60c4f745df5.png
[MDN_JS API reference]: https://developer.mozilla.org/ru/docs/Web/API
[WPD_DOM]: http://docs.webplatform.org/wiki/dom
[http_microjs.com]: http://microjs.com/
[How to forget about jQuery and start using native JavaScript APIs]: http://blog.romanliutikov.com/post/63383858003/how-to-forget-about-jquery-and-start-using-native