摘要:就在這里隨時(shí)等候你的召喚,但是也許你還沒有準(zhǔn)備好如何使用他。但是我想討論的是如果僅為使用個(gè)選擇器或者類似的東西,是否真的有必要加載。假設(shè)咱不是為了簡化,每個(gè)人用是因?yàn)樗С郑瑒?dòng)畫處理和選擇器函數(shù)。
JavaScript就在這里隨時(shí)等候你的召喚,但是也許你還沒有準(zhǔn)備好如何使用他。為什么不用jQuery呢?因?yàn)樗苈⑶夷愕木W(wǎng)站真的不需要這些多余的負(fù)擔(dān)。
我不是來這里爭辯原生API和函數(shù)庫的迥異,開發(fā)的時(shí)候很難不用到這些神奇的東東。但是我想討論的是:如果僅為使用個(gè)選擇器($)或者類似的東西,是否真的有必要加載jQuery。
假設(shè)咱不是為了簡化,每個(gè)人用jSomething是因?yàn)樗С諭E,動(dòng)畫處理和選擇器函數(shù)。
原生等價(jià)物選擇元素
// jQuery var els = $(".el"); // Native var els = document.querySelectorAll(".el"); // Shorthand var $ = function (el) { return document.querySelectorAll(el); } var els = $(".el"); // Or use regex-based micro-selector lib // http://jsperf.com/micro-selector-libraries
創(chuàng)建元素
// jQuery var newEl = $(""); // Native var newEl = document.createElement("div"); Add event listener // jQuery $(".el").on("event", function() { }); // Native [].forEach.call(document.querySelectorAll(".el"), function (el) { el.addEventListener("event", function() { }, false); });
Set/get屬性
// jQuery $(".el").filter(":first").attr("key", "value"); $(".el").filter(":first").attr("key"); // Native document.querySelector(".el").setAttribute("key", "value"); document.querySelector(".el").getAttribute("key"); Add/remove/toggle class // jQuery $(".el").addClass("class"); $(".el").removeClass("class"); $(".el").toggleClass("class"); // Native document.querySelector(".el").classList.add("class"); document.querySelector(".el").classList.remove("class"); document.querySelector(".el").classList.toggle("class");
附加
// jQuery $(".el").append($("")); // Native document.querySelector(".el").appendChild(document.createElement("div"));
克隆
// jQuery var clonedEl = $(".el").clone(); // Native var clonedEl = document.querySelector(".el").cloneNode(true);
移除
// jQuery $(".el").remove(); // Native remove(".el"); function remove(el) { var toRemove = document.querySelector(el); toRemove.parentNode.removeChild(toRemove); }
父元素
// jQuery $(".el").parent(); // Native document.querySelector(".el").parentNode; Prev/next element // jQuery $(".el").prev(); $(".el").next(); // Native document.querySelector(".el").previousElementSibling; document.querySelector(".el").nextElementSibling; XHR aka AJAX // jQuery $.get("url", function (data) { }); $.post("url", {data: data}, function (data) { }); // Native // get var xhr = new XMLHttpRequest(); xhr.open("GET", url); xhr.onreadystatechange = function (data) { } xhr.send(); // post var xhr = new XMLHttpRequest() xhr.open("POST", url); xhr.onreadystatechange = function (data) { } xhr.send({data: data});
這些只是很少的一部分,你可以使用瀏覽器的 console 來發(fā)現(xiàn)更多的原生的東西或者讀讀MDN’s JS API reference or WPD’s DOM docs
當(dāng)然你也可以使用庫,看這里-輕量級(jí)庫可以找到一些應(yīng)對特定任務(wù)的庫,但首先要確保如果不用這個(gè)庫你就不能完成任務(wù),否則-使用native JavaScript.
原文鏈接: romanliutikov 轉(zhuǎn)自: 伯樂在線 - 翻譯:蔡蔡
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/77970.html
摘要:數(shù)據(jù)來源百度統(tǒng)計(jì)下面是國際上占有率,已經(jīng)跌出前,比較多,還好支持他們并不難。 前端發(fā)展很快,現(xiàn)代瀏覽器原生 API 已經(jīng)足夠好用。我們并不需要為了操作 DOM、Event 等再學(xué)習(xí)一下 jQuery 的 API。同時(shí)由于 React、Angular、Vue 等框架的流行,直接操作 DOM 不再是好的模式,jQuery 使用場景大大減少。因此我們項(xiàng)目組在雙十一后抽了一周時(shí)間,把所有代碼中...
摘要:無論是還是,對許多應(yīng)用來說,這個(gè)大小都是完全可以接受的。但是為了不用,放棄向后兼容那我覺得還是用得了。自從年雙十一正式上線,累計(jì)處理了億錯(cuò)誤事件,付費(fèi)客戶有金山軟件百姓網(wǎng)等眾多品牌企業(yè)。 譯者按: 看來 jQuery 還是有一些用武之地的。 原文: Why Im Still Using jQuery in 2019 譯者: Fundebug 為了保證可讀性,本文采用意譯而非直譯...
摘要:年,和前端開發(fā)者與應(yīng)用程序前端開發(fā)者之間產(chǎn)生了巨大的分歧。開發(fā)最常見的解決方案有手機(jī)和平板的原生應(yīng)用程序桌面應(yīng)用程序桌面應(yīng)用程序原生技術(shù)最后,前端開發(fā)者可以從瀏覽器開發(fā)中學(xué)習(xí)到,編寫代碼不需要考慮瀏覽器引擎的限制。 前端開發(fā)者手冊2019 Cody Lindley 編著 原文地址 本手冊由Frontend Masters贊助,通過深入現(xiàn)代化的前端工程課程來提高你的技能。 下載:PDF ...
摘要:年,和前端開發(fā)者與應(yīng)用程序前端開發(fā)者之間產(chǎn)生了巨大的分歧。開發(fā)最常見的解決方案有手機(jī)和平板的原生應(yīng)用程序桌面應(yīng)用程序桌面應(yīng)用程序原生技術(shù)最后,前端開發(fā)者可以從瀏覽器開發(fā)中學(xué)習(xí)到,編寫代碼不需要考慮瀏覽器引擎的限制。 前端開發(fā)者手冊2019 Cody Lindley 編著 原文地址 本手冊由Frontend Masters贊助,通過深入現(xiàn)代化的前端工程課程來提高你的技能。 下載:PDF ...
摘要:年,和前端開發(fā)者與應(yīng)用程序前端開發(fā)者之間產(chǎn)生了巨大的分歧。開發(fā)最常見的解決方案有手機(jī)和平板的原生應(yīng)用程序桌面應(yīng)用程序桌面應(yīng)用程序原生技術(shù)最后,前端開發(fā)者可以從瀏覽器開發(fā)中學(xué)習(xí)到,編寫代碼不需要考慮瀏覽器引擎的限制。 前端開發(fā)者手冊2019 Cody Lindley 編著 原文地址 本手冊由Frontend Masters贊助,通過深入現(xiàn)代化的前端工程課程來提高你的技能。 下載:PDF ...
閱讀 3192·2023-04-26 01:39
閱讀 3345·2023-04-25 18:09
閱讀 1612·2021-10-08 10:05
閱讀 3228·2021-09-22 15:45
閱讀 2758·2019-08-30 15:55
閱讀 2393·2019-08-30 15:54
閱讀 3167·2019-08-30 15:53
閱讀 1324·2019-08-29 12:32