你的位置:首页 > 网页设计

[网页设计]曾经的超级明星类库jQuery未来也许不再会被前端程序猿追捧了!

作为火了十多年的老牌明星类库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的相对功能, 这个还是非常值得大家去尝试滴~