為什麼說曾經的的類庫jquery未來可能不再被前端程序員追捧了？
作為火了十多年的老牌明星類庫jQuery， 相信做前端的小夥伴肯定都或多或少的使用和追捧過，當然我也不例外， 作為第一個學習的js類庫，我曾經也覺得它是真正的唯一， 幫助你處理噁心的瀏覽器CSS/JS等兼容性問題， 而我只需要關注實際的業務邏輯即可， 簡單， 快速和高產是jQuery早期的幾個重要標籤
分享之前我還是要推薦下我自己的前端群：524262608，群裡會不定期更新最新的教程源碼和學習方法，群內都是學習web前端的，有轉行的有在工作中想提升自己能力的，不管你是初學還是有基礎以工作都歡迎加入學習交流
但是隨著瀏覽器的持續迭代更新，及其相關新的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的相對功能， 這個還是非常值得大家去嘗試滴~
最後給程序員幾點建議：
1、寫出可以運行的代碼只是最基本的要求
當一個程序可以運行起來了，不要高興得太早，這只是一個開始。例如你是否考慮到了各種邊界情況；當程序收到非預期的輸入會發生什麼；所依賴的外部服務出現異常會怎樣，發生錯誤時是否能從日誌中還原出現場；如果程序處理的數據量或運行時間提高几個數量級會發生什麼；構建、測試和部署過程是否做到了自動化；代碼是否為將來的修改做好了準備等等。
2、分享到這就結束了，還是要推薦下我的web前端群：524262608，每天晚上20:00我都會開直播給大家分享web前端學習知識和路線方法，群裡會不定期更新最新的教程和學習方法，大家都是學習web前端的，或是轉行，或是大學生，還有工作中想提升自己能力的前端黨，歡迎初學和進階中的小夥伴。
3、先精通一種語言，再廣泛涉獵
很多新手會各種編程語言搞得頭暈目眩，不知道先從哪個學起，索性不如左右開弓，同時學習。
一旦你這樣做了就會發現很難將同時學習的兩種語言的知識區分開，因為它們實在太像了。但如果你先精通一門語言，瞭解了它每個語法的工作方式之後再學習其他語言就很輕鬆了，因為你對已掌握的語言已經足夠了解，不會和新語言混淆。而且你會不由自主地用已掌握的語言去和新語言比較，更容易發現它們之間的差異，發現各自語法的內在邏輯。
web前端學習方法經驗可以關注我的微信公眾號：‘學習web前端’，每天一篇案例源碼或經驗分享，關注後回覆‘給我資料’可以領取一套完整的學習視頻
相關推薦
