IT工程師數位筆記本

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