国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

拋棄jQuery，擁抱原生JavaScript

testbird / 1543人閱讀

摘要：數(shù)據(jù)來源百度統(tǒng)計(jì)下面是國(guó)際上占有率，已經(jīng)跌出前，比較多，還好支持他們并不難。

前端發(fā)展很快，現(xiàn)代瀏覽器原生 API 已經(jīng)足夠好用。我們并不需要為了操作 DOM、Event 等再學(xué)習(xí)一下 jQuery 的 API。同時(shí)由于 React、Angular、Vue 等框架的流行，直接操作 DOM 不再是好的模式，jQuery 使用場(chǎng)景大大減少。因此我們項(xiàng)目組在雙十一后抽了一周時(shí)間，把所有代碼中的 jQuery 移除。下面總結(jié)一下：

Why not jQuery 1. 模式變革

jQuery 代表著傳統(tǒng)的以 DOM 為中心的開發(fā)模式，但現(xiàn)在復(fù)雜頁(yè)面開發(fā)流行的是以 React 為代表的以數(shù)據(jù)/狀態(tài)為中心的開發(fā)模式

應(yīng)用復(fù)雜后，直接操作 DOM 意味著手動(dòng)維護(hù)狀態(tài)，當(dāng)狀態(tài)復(fù)雜后，變得不可控。React 以狀態(tài)為中心，自動(dòng)幫我們渲染出 DOM，同時(shí)通過高效的 DOM Diff 算法，也能保證性能。我們?cè)?React 應(yīng)用實(shí)踐中也發(fā)現(xiàn)，大部分當(dāng)你想直接操作 DOM 的時(shí)候，就意味著你可能做錯(cuò)了。

2. 不支持同構(gòu)渲染

重構(gòu)就是前后端運(yùn)行同一份代碼，后端也可以渲染出頁(yè)面，這對(duì) SEO 要求高的場(chǎng)景非常合適。由于 React 等流行框架天然支持，已經(jīng)具有可行性。當(dāng)我們?cè)趪L試把現(xiàn)有應(yīng)用改成同構(gòu)時(shí)，因?yàn)榇a要運(yùn)行在服務(wù)器端，但服務(wù)器端沒有 DOM，所以引用 jQuery 就會(huì)報(bào)錯(cuò)。這也是要移除 jQuery 的迫切原因。同時(shí)不但要移除 jQuery，在很多場(chǎng)合也要避免直接操作 DOM。

3. 原生 API 足夠好用

由于瀏覽器的歷史原因，曾經(jīng)的前端開發(fā)為了兼容不同瀏覽器怪癖，需要增加很多成本。jQuery 由于提供了非常易用的 API，屏蔽了瀏覽器差異，極大地提高了開發(fā)效率。這也導(dǎo)致很多前端只懂 jQuery。其實(shí)這幾年瀏覽器更新很快，也借鑒了很多 jQuery 的 API，如 querySelector，querySelectorAll 和 jQuery 選擇器同樣好用，而且性能更優(yōu)。

4. 性能

前端開發(fā)一般不需要考慮性能問題，但你想在性能上追求極致的話，一定要知道 jQuery 性能很差。原生 API 選擇器相比 jQuery 豐富很多，如 document.getElementsByClassName 性能是 $(classSelector) 的 50 多倍！

測(cè)試鏈接：http://jsperf.com/jquery-vs-native-api

5. 時(shí)機(jī)成熟

差的瀏覽器（IE）已經(jīng)淘汰的差不多了。

If We Didn"t Spend So Much on IE Support, We Could Be Taking Vacations on Mars
Christian Alfoni

我們的主打產(chǎn)品現(xiàn)在有千萬用戶，因?yàn)槲覀円恢币龑?dǎo)用戶升級(jí)瀏覽器，上個(gè)月統(tǒng)計(jì) IE 9 以下用戶只占不到 3%。但為了這 3% 的用戶我們前端開發(fā)卻增加了很多工作量，也限制了我們升級(jí)我們的架構(gòu)，因此放棄支持他們利大于弊。當(dāng)然這要根據(jù)產(chǎn)品來定，比如這是百度統(tǒng)計(jì)的國(guó)內(nèi)瀏覽器占有率，IE8 竟然還有 22%。有些產(chǎn)品可以為了保證用戶體驗(yàn)，在舊的瀏覽器上投入很大成本，甚至做到了極致。其實(shí)我覺得產(chǎn)品更應(yīng)該做的是引導(dǎo)用戶升級(jí)瀏覽器。微軟也宣布 2016年1月12號(hào)停止支持 IE 11 以下瀏覽器，繼續(xù)使用舊瀏覽器就會(huì)有安全風(fēng)險(xiǎn)，我們更應(yīng)該主動(dòng)引導(dǎo)，只要產(chǎn)品有足夠吸引力，大部分用戶升級(jí)并不困難。

數(shù)據(jù)來源 百度統(tǒng)計(jì)

下面是國(guó)際上 IE 占有率，IE8 已經(jīng)跌出前 10，IE 11 比較多，還好支持他們并不難。

數(shù)據(jù)來源 W3 Counter

如何移除 jQuery 1. 替換代碼

移除 jQuery 可以很順利，我們把整個(gè)過程詳細(xì)整理了，并開源。

打開 https://github.com/oneuijs/You-Dont-Need-jQuery 對(duì) API 查找替換即可。

同時(shí)我們簡(jiǎn)單封裝了一些方法：

oui-dom-utils 來做選擇器和樣式相關(guān)

oui-dom-events 來做 Event，支持命名空間和事件代理

剛?cè)チ?jQuery 又引了新的庫(kù)，這不是玩我嗎？？其實(shí)以上兩個(gè)庫(kù)很簡(jiǎn)單，只是常用方法的簡(jiǎn)單封裝，建議你看一下代碼。你當(dāng)然可以不用。

以上的庫(kù)都用于我們的生產(chǎn)環(huán)境，我們會(huì)長(zhǎng)期維護(hù)，保證更新。

2. 舊瀏覽器自動(dòng)跳轉(zhuǎn)

代碼替換后，當(dāng)用戶用舊瀏覽器打開時(shí)，你還要做一個(gè)跳轉(zhuǎn)，把用戶定位到提示頁(yè)面，提示用戶下載升級(jí)瀏覽器。IE9 以下瀏覽器都支持條件判斷語(yǔ)句，可以在 標(biāo)簽結(jié)束前添加如下代碼做自動(dòng)跳轉(zhuǎn)

總結(jié)

本文并不是強(qiáng)迫你一定要移除 jQuery，jQuery 為支持舊瀏覽器節(jié)省了很多成本。但條件成熟的情況下，移除 jQuery，參照 You Don"t Need jQuery 擁抱原生 JavaScript 能同樣保證開發(fā)效率，也可以給產(chǎn)品帶來更好的性能，同時(shí)也能提高開發(fā)者水平。

原發(fā)于我的博客，原文地址：https://github.com/camsong/blog/issues/4

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/78220.html

相關(guān)文章

  • [譯]JSX：硬幣的另一面

    摘要：它不過是硬幣的另一面。因此，既然我們能夠接受與通過這種方式混合在一塊兒，那么是時(shí)候讓介入并向我們展示硬幣的另一面了第三階段的并不是一個(gè)激進(jìn)的改變，是因?yàn)槲覀冞@個(gè)行業(yè)從一開始就注定和應(yīng)該是在一起的。 React框架剛剛發(fā)布的時(shí)候，JSX顛覆了很多人的想法。習(xí)慣了HTML標(biāo)簽與JavaScript代碼分離的前端工程師們，看到JSX大概都會(huì)不禁吐槽：這些奇怪的標(biāo)簽出現(xiàn)在JavaScript里...

    mudiyouyou 評(píng)論0 收藏0

  • js深淺復(fù)制

    摘要：總結(jié)綜上所述，數(shù)組的深拷貝比較簡(jiǎn)單，方法沒有什么爭(zhēng)議，對(duì)象的深拷貝，比較好的方法是用的方法實(shí)現(xiàn)，或者遞歸實(shí)現(xiàn)，比較簡(jiǎn)單的深復(fù)制可以使用實(shí)現(xiàn)參考資料知乎中的深拷貝和淺拷貝深入剖析的深復(fù)制 深淺復(fù)制對(duì)比 因?yàn)镴avaScript存儲(chǔ)對(duì)象都是存地址的，所以淺復(fù)制會(huì)導(dǎo)致 obj 和obj1 指向同一塊內(nèi)存地址。我的理解是，這有點(diǎn)類似數(shù)據(jù)雙向綁定，改變了其中一方的內(nèi)容，都是在原來的內(nèi)存基礎(chǔ)上做...

    Apollo 評(píng)論0 收藏0

  • [譯] 咋才能忘掉jQuery然后用原生的js apis 呢

    摘要：原文地址已經(jīng)準(zhǔn)備好了，可能你還沒有準(zhǔn)備好擁抱它。那為啥不用呢。。瀏覽這些輕量的找一個(gè)服務(wù)于你特殊需求的，但是首先你必須確信一點(diǎn)原生的足夠滿足你實(shí)現(xiàn)你的需求 原文地址 javascript已經(jīng)準(zhǔn)備好了，可能你還沒有準(zhǔn)備好擁抱它。那為啥不用jquery呢。。因?yàn)樗?。而且體積還不小，你的網(wǎng)站可能真的不是特別需要， Select elements // jQuery var els = $...

    rose 評(píng)論0 收藏0

  • JavaScript裝逼指南

    摘要：構(gòu)造函數(shù)很多教程都告訴我們，不要直接用內(nèi)置對(duì)象的構(gòu)造函數(shù)來創(chuàng)建基本變量，例如的寫法就應(yīng)該用的寫法來取代。但是，構(gòu)造函數(shù)注意是大寫的有點(diǎn)特別。構(gòu)造函數(shù)接受的參數(shù)中，第一個(gè)是要傳入的參數(shù)名，第二個(gè)是函數(shù)內(nèi)的代碼用字符串來表示。 如何寫JavaScript才能逼格更高呢？怎樣才能組織JavaScript才能讓別人一眼看出你不簡(jiǎn)單呢？是否很期待別人在看完你的代碼之后感嘆一句原來還可以這樣寫呢？...

    oneasp 評(píng)論0 收藏0

  • 您的四月份前端補(bǔ)給包已到，請(qǐng)查收～

    摘要：版本發(fā)布月日，官博發(fā)文宣告正式發(fā)布。官方文檔提供了如下的示例終端上的輸出熱門文章我在阿里云做前端抓住我們核心的競(jìng)爭(zhēng)力，并同時(shí)發(fā)現(xiàn)業(yè)務(wù)中的問題，跨端推進(jìn)解決，這是最好的出路。 showImg(https://segmentfault.com/img/remote/1460000019038442); 【阿里云 TXD 前端月刊】- 熱門前端技術(shù)快報(bào)，聚焦業(yè)界新視界；前端領(lǐng)域急速發(fā)展的節(jié)奏...

    wushuiyong 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<