close
X

為什麼說曾經的的類庫jquery未來可能不再被前端開發者追捧了?


加下web前端乾貨分享qqqun:477149581免費領取全套教學視訊資料!

作為火了十多年的老牌明星類庫jQuery,

相信做前端的小夥伴肯定都或多或少的使用和追捧過,當然我也不例外, 作為第一個學習的js類庫,我曾經也覺得它是真正的唯一,

幫助你處理噁心的瀏覽器CSS/JS等相容性問題, 而我只需要關注實際的業務邏輯即可, 簡單, 快速和高產是jQuery早期的幾個重要標籤

但是隨著瀏覽器的持續迭代更新,及其相關新的API的出現, 如果你只需要支持現代瀏覽器的話,也許現在你不再需要匯入jQuery類庫了,在這篇文章中,我們將介紹一些實際的Javacript程式碼,直接就可以替代我們常用的jQuery程式碼,希望大家會覺得比較實用~

新增頁面元素


jQuery程式碼

$('i').prepend('

–New Element–');

演示程式碼


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操作的支持相容性情況

加下web前端乾貨分享qqqun:477149581免費領取全套教學視訊資料!

淡入淡出效果

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來解決相關的相容性問題,如下:

也許有朋友覺得使用以上JS程式碼還是相對來說麻煩或者不成熟,但是未來隨著Javascript瀏覽器執行的標準越來越完善,我們將會使用更加簡單的方式來實現前端javascript的相對功能, 這個還是非常值得大家去嘗試滴~

最後給開發者幾點建議:

1、寫出可以執行的程式碼只是最基本的要求

當一個程式可以執行起來了,不要高興得太早,這只是一個開始。例如你是否考慮到了各種邊界情況;當程式收到非預期的輸入會發生什麼;所依賴的外部服務出現異常會怎樣,發生錯誤時是否能從日誌中還原出現場;如果程式處理的資料量或執行時間提高几個數量級會發生什麼;構建、測試和部署過程是否做到了自動化;程式碼是否為將來的修改做好了準備等等。

2、分享到這就結束了,還是要推薦下我的web前端群:524262608,每天晚上20:00我都會開直播給大家分享web前端學習知識和路線方法,群裡會不定期更新最新的教學和學習方法,大家都是學習web前端的,或是轉行,或是大學生,還有工作中想提升自己能力的前端黨,歡迎初學和進階中的小夥伴。

3、先精通一種語言,再廣泛涉獵

很多新手會各種程式語言搞得頭暈目眩,不知道先從哪個學起,索性不如左右開弓,同時學習。

一旦你這樣做了就會發現很難將同時學習的兩種語言的知識區分開,因為它們實在太像了。但如果你先精通一門語言,瞭解了它每個語法的工作方式之後再學習其他語言就很輕鬆了,因為你對已掌握的語言已經足夠了解,不會和新語言混淆。而且你會不由自主地用已掌握的語言去和新語言比較,更容易發現它們之間的差異,發現各自語法的內在邏輯。


分享是一種美德,喜歡就幫我們讚一下支持吧~

為你推薦