曾經的超級明星類庫jQuery未來也許不再會被前端程式猿追捧了！

標籤：create   cto   ati   size   相容性   執行   function   url   版本   

作為火了十多年的老牌明星類庫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的相對功能， 這個還是非常值得大家去嘗試滴~

 

曾經的超級明星類庫jQuery未來也許不再會被前端程式猿追捧了！