摘要:數據來源百度統計下面是國際上占有率,已經跌出前,比較多,還好支持他們并不難。
前端發展很快,現代瀏覽器原生 API 已經足夠好用。我們并不需要為了操作 DOM、Event 等再學習一下 jQuery 的 API。同時由于 React、Angular、Vue 等框架的流行,直接操作 DOM 不再是好的模式,jQuery 使用場景大大減少。因此我們項目組在雙十一后抽了一周時間,把所有代碼中的 jQuery 移除。下面總結一下:
Why not jQuery 1. 模式變革jQuery 代表著傳統的以 DOM 為中心的開發模式,但現在復雜頁面開發流行的是以 React 為代表的以數據/狀態為中心的開發模式
應用復雜后,直接操作 DOM 意味著手動維護狀態,當狀態復雜后,變得不可控。React 以狀態為中心,自動幫我們渲染出 DOM,同時通過高效的 DOM Diff 算法,也能保證性能。我們在 React 應用實踐中也發現,大部分當你想直接操作 DOM 的時候,就意味著你可能做錯了。
2. 不支持同構渲染重構就是前后端運行同一份代碼,后端也可以渲染出頁面,這對 SEO 要求高的場景非常合適。由于 React 等流行框架天然支持,已經具有可行性。當我們在嘗試把現有應用改成同構時,因為代碼要運行在服務器端,但服務器端沒有 DOM,所以引用 jQuery 就會報錯。這也是要移除 jQuery 的迫切原因。同時不但要移除 jQuery,在很多場合也要避免直接操作 DOM。
3. 原生 API 足夠好用由于瀏覽器的歷史原因,曾經的前端開發為了兼容不同瀏覽器怪癖,需要增加很多成本。jQuery 由于提供了非常易用的 API,屏蔽了瀏覽器差異,極大地提高了開發效率。這也導致很多前端只懂 jQuery。其實這幾年瀏覽器更新很快,也借鑒了很多 jQuery 的 API,如 querySelector,querySelectorAll 和 jQuery 選擇器同樣好用,而且性能更優。
4. 性能前端開發一般不需要考慮性能問題,但你想在性能上追求極致的話,一定要知道 jQuery 性能很差。原生 API 選擇器相比 jQuery 豐富很多,如 document.getElementsByClassName 性能是 $(classSelector) 的 50 多倍!
測試鏈接:http://jsperf.com/jquery-vs-native-api
5. 時機成熟差的瀏覽器(IE)已經淘汰的差不多了。
If We Didn"t Spend So Much on IE Support, We Could Be Taking Vacations on Mars
Christian Alfoni
我們的主打產品現在有千萬用戶,因為我們一直引導用戶升級瀏覽器,上個月統計 IE 9 以下用戶只占不到 3%。但為了這 3% 的用戶我們前端開發卻增加了很多工作量,也限制了我們升級我們的架構,因此放棄支持他們利大于弊。當然這要根據產品來定,比如這是百度統計的國內瀏覽器占有率,IE8 竟然還有 22%。有些產品可以為了保證用戶體驗,在舊的瀏覽器上投入很大成本,甚至做到了極致。其實我覺得產品更應該做的是引導用戶升級瀏覽器。微軟也宣布 2016年1月12號停止支持 IE 11 以下瀏覽器,繼續使用舊瀏覽器就會有安全風險,我們更應該主動引導,只要產品有足夠吸引力,大部分用戶升級并不困難。
數據來源 百度統計
下面是國際上 IE 占有率,IE8 已經跌出前 10,IE 11 比較多,還好支持他們并不難。
數據來源 W3 Counter
如何移除 jQuery 1. 替換代碼移除 jQuery 可以很順利,我們把整個過程詳細整理了,并開源。
打開 https://github.com/oneuijs/You-Dont-Need-jQuery 對 API 查找替換即可。
同時我們簡單封裝了一些方法:
oui-dom-utils 來做選擇器和樣式相關
oui-dom-events 來做 Event,支持命名空間和事件代理
剛去了 jQuery 又引了新的庫,這不是玩我嗎??其實以上兩個庫很簡單,只是常用方法的簡單封裝,建議你看一下代碼。你當然可以不用。
以上的庫都用于我們的生產環境,我們會長期維護,保證更新。
2. 舊瀏覽器自動跳轉代碼替換后,當用戶用舊瀏覽器打開時,你還要做一個跳轉,把用戶定位到提示頁面,提示用戶下載升級瀏覽器。IE9 以下瀏覽器都支持條件判斷語句,可以在 標簽結束前添加如下代碼做自動跳轉
總結本文并不是強迫你一定要移除 jQuery,jQuery 為支持舊瀏覽器節省了很多成本。但條件成熟的情況下,移除 jQuery,參照 You Don"t Need jQuery 擁抱原生 JavaScript 能同樣保證開發效率,也可以給產品帶來更好的性能,同時也能提高開發者水平。
原發于我的博客,原文地址:https://github.com/camsong/blog/issues/4
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/78220.html
摘要:它不過是硬幣的另一面。因此,既然我們能夠接受與通過這種方式混合在一塊兒,那么是時候讓介入并向我們展示硬幣的另一面了第三階段的并不是一個激進的改變,是因為我們這個行業從一開始就注定和應該是在一起的。 React框架剛剛發布的時候,JSX顛覆了很多人的想法。習慣了HTML標簽與JavaScript代碼分離的前端工程師們,看到JSX大概都會不禁吐槽:這些奇怪的標簽出現在JavaScript里...
摘要:原文地址已經準備好了,可能你還沒有準備好擁抱它。那為啥不用呢。。瀏覽這些輕量的找一個服務于你特殊需求的,但是首先你必須確信一點原生的足夠滿足你實現你的需求 原文地址 javascript已經準備好了,可能你還沒有準備好擁抱它。那為啥不用jquery呢。。因為它慢啊。而且體積還不小,你的網站可能真的不是特別需要, Select elements // jQuery var els = $...
摘要:構造函數很多教程都告訴我們,不要直接用內置對象的構造函數來創建基本變量,例如的寫法就應該用的寫法來取代。但是,構造函數注意是大寫的有點特別。構造函數接受的參數中,第一個是要傳入的參數名,第二個是函數內的代碼用字符串來表示。 如何寫JavaScript才能逼格更高呢?怎樣才能組織JavaScript才能讓別人一眼看出你不簡單呢?是否很期待別人在看完你的代碼之后感嘆一句原來還可以這樣寫呢?...
摘要:版本發布月日,官博發文宣告正式發布。官方文檔提供了如下的示例終端上的輸出熱門文章我在阿里云做前端抓住我們核心的競爭力,并同時發現業務中的問題,跨端推進解決,這是最好的出路。 showImg(https://segmentfault.com/img/remote/1460000019038442); 【阿里云 TXD 前端月刊】- 熱門前端技術快報,聚焦業界新視界;前端領域急速發展的節奏...
閱讀 1642·2021-09-26 09:55
閱讀 1375·2021-09-23 11:22
閱讀 2736·2021-09-06 15:02
閱讀 2645·2021-09-01 11:43
閱讀 3962·2021-08-27 13:10
閱讀 3680·2021-08-12 13:24
閱讀 2074·2019-08-30 12:56
閱讀 3000·2019-08-30 11:22