曾经的超级明星类库jQuery未来也许不再会被前端程序猿追捧了！

Posted 2020-10-04

作为火了十多年的老牌明星类库jQuery， 相信做前端的小伙伴肯定都或多或少的使用和追捧过，当然我也不例外， 作为第一个学习的js类库，我曾经也觉得它是真正的唯一， 帮助你处理恶心的浏览器CSS/JS等兼容性问题， 而我只需要关注实际的业务逻辑即可， 简单， 快速和高产是jQuery早期的几个重要标签

但是随着浏览器的持续迭代更新，及其相关新的API的出现， 如果你只需要支持现代浏览器的话，也许现在你不再需要导入jQuery类库了，在这篇文章中，我们将介绍一些实际的Javacript代码，直接就可以替代我们常用的jQuery代码，希望大家会觉得比较实用~

 

---

 

添加页面元素

jQuery代码：

$(‘i‘).prepend(‘<div>--New Element--</div>‘);

演示代码

JS代码：

var parent = document.querySelector(".container");
var p = document.createElement("p");
parent.prepend("Some text", p);

注意这个方法目前还是实验阶段，可能你的浏览器并不支持需要使用polyfill来使得浏览器支持

 

删除页面元素

jQuery代码：

$(‘i‘).remove();

 

JS代码：

elem.remove();

演示代码

 

插入页面元素

jQuery代码：

$elem.before($someOtherElem);

 

JS代码：

elem.before(someOtherElem);

 

替换页面元素

jQuery代码：

$elem.replaceWith($someOtherElem);

 

JS代码：

elem.replaceWith(someOtherElem);

 

找到最近的匹配元素

jQuery代码：

$elem.closest("div");

 

JS代码：

elem.closest("div");

 

目前的浏览器支持

如果想看看浏览器对以上API的支持程度，大家可以使用caniuse来查看jquery风格的DOM操作的支持兼容性情况

 

淡入淡出效果

jQuery代码：

$elem.fadeIn();

CSS代码：

.thingy {
  display: none;
  opacity: 0;
  transition: .8s;
}

 

JS代码：

elem.style.display = "block"; 
requestAnimationFrame(() => elem.style.opacity = 1);

 

只绑定一次事件

jQuery代码

$elem.one("click", someFunc);

 

JS代码（过去使用的方式）

function dostuff() {
  alert("some stuff happened");
  this.removeEventListener("click", dostuff);
}
var button = document.querySelector("button");
button.addEventListener("click", dostuff);

 

JS代码(现代使用的简化版本）

elem.addEventListener(‘click‘, someFunc, { once: true, });

或者

elem.addEventListener(‘click‘, myClickHandler, {
  once: true,
  capture: true
});

 

动画效果

jQuery

$elem.animate({
  width: "20%",
  opacity: 0.1,
  marginLeft: "0.6in",
  fontSize: "3em",
  borderWidth: "10px"
}, 500);

 

JS

var elem = document.querySelector(‘.animate-me‘);
elem.animate([
  { 
    transform: ‘translateY(-1000px) scaleY(2.5) scaleX(.2)‘, 
    transformOrigin: ‘50% 0‘, 
    filter: ‘blur(40px)‘, 
    opacity: 0 
  },
  { 
    transform: ‘translateY(0) scaleY(1) scaleX(1)‘,
    transformOrigin: ‘50% 50%‘,
    filter: ‘blur(0)‘,
    opacity: 1 
  }
], 1000);

 

Ajax请求处理

jQuery代码

$.ajax(‘https://some.url‘, {
  success: (data) => { /* do stuff with the data */ }
});

 

JS代码

fetch(‘https://some.url‘)
  .then(response => response.json())
  .then(data => {
    // do stuff with the data
  });

 

当然上面有部分JS代码在浏览器中执行的可能并不完整，但是基本所有的javascript都可以找到对应的polyfill来解决相关的兼容性问题，如下：

<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>

 

---

 

也许有朋友觉得使用以上JS代码还是相对来说麻烦或者不成熟，但是未来随着Javascript浏览器执行的标准越来越完善，我们将会使用更加简单的方式来实现前端javascript的相对功能， 这个还是非常值得大家去尝试滴~