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

資訊專欄INFORMATION COLUMN

解釋一下為什么我很少jQuery

happyhuangjinjin / 3505人閱讀

摘要：為什么有一個東西，叫，它是一個快速輕量級跨平臺的框架。同時，它也是這個世界上最輕量級的框架沒有之一它有多快如下我們在里引入比上面更快的方法是什么沒有代碼是的，就是沒有代碼，因為實在太強了，以至于所有的瀏覽器在年前內(nèi)置了它。

這里聲明一下，這不是反jQuery的文章，jQuery作為一個js庫給大家的項目開發(fā)帶來很多便利，但有時候仔細想想，我們真的需要jQuery嗎？一年前的lpisme的主題的一個特色是沒有jQuery，還是現(xiàn)在的Pinghsu主題，也是不用jQuery的。這里我想告訴大家，我持有的觀點是在中小型的項目中建議能不用jQuery就不用。

背景知識

在所有的現(xiàn)代瀏覽器(IE9+)里，它們所提供的原生DOM API都是比jQuery快很多。為什么？

有一個東西，叫Vanilla JS，它是一個快速、輕量級、跨平臺的JavaScript框架。幾乎所有著名的互聯(lián)網(wǎng)企業(yè)都使用它。

同時，它也是這個世界上最輕量級的javascript框架(沒有之一),它有多快? 如下

我們在HTML里引入Vanilla JS：

比上面更快的方法是：

?

什么？沒有代碼？是的，就是沒有代碼，因為Vanilla JS實在太強了，以至于所有的瀏覽器在10年前內(nèi)置了它。

所以，我們平時吹牛逼說的什么原生js的實現(xiàn)，用到什么原生API，都是來自于Vanilla JS

性能比較

在這里，我們用原生API和各種庫進行性能對比，數(shù)據(jù)來源請看參考

根據(jù)ID獲取DOM元素
框架 代碼 次數(shù)/秒
Vanilla JS document.getElementById("test-table"); 12,137,211
Dojo dojo.byId("test-table"); 5,443,343
Prototype JS $("test-table") 2,940,734
Ext JS delete Ext.elCache["test-table"];Ext.get("test-table"); 997,562
jQuery $jq("#test-table"); 350,557
YUI YAHOO.util.Dom.get("test-table"); 326,534
MooTools document.id("test-table"); 78,802
根據(jù)標簽名獲取DOM元素
框架 代碼 次數(shù)/秒
Vanilla JS document.getElementsByTagName("span"); 8,280,893
Prototype JS Prototype.Selector.select("span", document); 62,872
YUI YAHOO.util.Dom.getElementsBy(function(){return true;},"span"); 48,545
Ext JS Ext.query("span"); 46,915
jQuery $jq("span"); 19,449
Dojo dojo.query("span"); 10,335
MooTools Slick.search(document, "span", new Elements); 5,457

Done,Vanilla JS all win~

常用對比

下面是一些常用的jQuery方法，以及它們在原生JavaScript中的對應方法。

Document Ready 
// jQuery
$(document).ready(readyCb);
or
$(readyCb);

// VanillaJs
function docReady(cb) {
  if (document.readyState != "loading"){
    cb();
  } else {
    document.addEventListener("DOMContentLoaded", cb);
  }
}
docReady(readyCb);
Selectors

更多Selector的性能表現(xiàn)請看這里：here

Class Selector 
// jQuery
const items = $(".item");

// VanillaJS
const items = document.getElementsByClassName("item");
ID Selector 
// jQuery
const item = $("#item");

// VanillaJS
const item = document.getElementById("item");
Query Selector 
// jQuery
const items = $(".list .item");
const lastItem = $(".item:last-item");

// VanillaJS
const items = document.querySelectorAll(".list .item");
const lastItem = document.querySelector(".item:last-item");
Each or forEach 
// jQuery
$(".item").each(function(index, element) {
  console.log(element);
});

// VanillaJS
function each(nodeList, cb) {
  for(var i = 0; i < nodeList.length;i++) {
    cb(nodeList[i], i, nodeList);
  }
}

each(document.getElementsByClassName("item"), function(node, i) {
  console.log(node);
});

// Another Vanilla forEach
Array.prototype.forEach.call(document.querySelectorAll(".item"), function(node, i){
console.log(node);
});
Adding/Removing Classes 
// jQuery
const item = $("#item")
item.addClass("new-class");
item.removeClass("new-class");

// VanillaJS
const item = document.getElementById("item");
item.classList.add("new-class");
item.classList.remove("new-class");
Show/Hide Elements 
// jQuery
const item = $("#item");
item.hide();
item.show();

// VanillaJS
const item = document.getElementById("item");
item.style.display = "none";
item.style.display = "";
AJAX

代替$.ajax你有下面幾種方法

XMLHttpRequest(XHR)
const xhr = new XMLHttpRequest();
xhr.addEventListener("load", function() {
    // response can be used here
});
xhr.open("GET", "url");
xhr.send();
Fetch

大多數(shù)的主流瀏覽器都支持Fetch方法，你可以用 polyfills 讓更多瀏覽器支持

你也可以在 CanIUse 里可以查看更多瀏覽器支持情況

fetch(’url’)
    .then(function (response) {})
    .catch(function (error) {});

如果你需要查看更多例子，可以訪問here

結(jié)語

在瀏覽器野蠻生長的年代，jQuery作為一種工具在當時幾乎是必需的。但隨著瀏覽器們越來越標準化，瀏覽器之間的API差別也在減少，并且通過版本迭代也會更快地支持，我們可以更好地用原生API做更高效的事。這里不是說jQuery不好，只是我們做項目的時候，不應該把它作為默認。我們都有Vanilla JS了，已經(jīng)是火箭炮了，還要啥自行車呢？

謝謝大家閱讀，歡迎訪問我的博客：https://www.linpx.com/

參考

https://hackernoon.com/you-tr...

http://vanilla-js.com/

https://jsperf.com/dm-jquery-...

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/86778.html

相關文章

  • 一次發(fā)現(xiàn)underscore源碼bug的經(jīng)歷以及對學術界拿來主義的思考

    摘要：事情是如何發(fā)生的最近干了件事情，發(fā)現(xiàn)了源碼的一個。樓主找到的關于和區(qū)別的資料如下關于拿來主義為什么這么多文章里會出現(xiàn)澤卡斯的錯誤代碼樓主想到了一個詞，叫做拿來主義。的文章，就深刻抨擊了拿來主義這一現(xiàn)象。 事情是如何發(fā)生的 最近干了件事情，發(fā)現(xiàn)了 underscore 源碼的一個 bug。這件事本身并沒有什么可說的，但是過程值得我們深思，記錄如下，各位看官仁者見仁智者見智。 平時有瀏覽別...

    Lionad-Morotar 評論0 收藏0

  • Web技術的前世今生（二）

    摘要：前言我是，如果你還不認識我，不妨先看看技術的前世今生一平靜的生活已經(jīng)有一段日子了。傳送門技術的前世今生一技術的前世今生三 前言：我是JavaScript，如果你還不認識我，不妨先看看《Web技術的前世今生（一）》 平靜的生活已經(jīng)有一段日子了。 這一天，HTML大哥面露不悅地走過來問我： Js，你是打算和我們分家嗎？ 大哥，您這說的哪里話，我什么地方做的不對么？我一臉茫然地回答道。 哼，...

    Stardustsky 評論0 收藏0

  • Web技術的前世今生（二）

    摘要：前言我是，如果你還不認識我，不妨先看看技術的前世今生一平靜的生活已經(jīng)有一段日子了。傳送門技術的前世今生一技術的前世今生三 前言：我是JavaScript，如果你還不認識我，不妨先看看《Web技術的前世今生（一）》 平靜的生活已經(jīng)有一段日子了。 這一天，HTML大哥面露不悅地走過來問我： Js，你是打算和我們分家嗎？ 大哥，您這說的哪里話，我什么地方做的不對么？我一臉茫然地回答道。 哼，...

    hyuan 評論0 收藏0

  • Web技術的前世今生（二）

    摘要：前言我是，如果你還不認識我，不妨先看看技術的前世今生一平靜的生活已經(jīng)有一段日子了。傳送門技術的前世今生一技術的前世今生三 前言：我是JavaScript，如果你還不認識我，不妨先看看《Web技術的前世今生（一）》 平靜的生活已經(jīng)有一段日子了。 這一天，HTML大哥面露不悅地走過來問我： Js，你是打算和我們分家嗎？ 大哥，您這說的哪里話，我什么地方做的不對么？我一臉茫然地回答道。 哼，...

    justjavac 評論0 收藏0

發(fā)表評論

0條評論

happyhuangjinjin

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<