【前端性能】必需要掌握的原生JS實現JQuery

不少時候，咱們常常聽見有人說jquery有多快多快。在這個各類類庫滿天飛的時候，不得不說的是，能有原生JS快嗎？

是的，明顯原生JS要更快，由於諸如JQuery這樣的庫必需要兼容各類瀏覽器和低版本和許多其餘的東西，考慮通用性必然會致使性能的損耗。

固然，我不是提倡寫代碼純用原生JS實現，我記得淘寶玉伯曾經說的一句話「框架可以讓咱們走的更快，但只有瞭解原生的JS才能讓咱們走的更遠」。

一些感（fei）想（hua）：

• 原生的js，比如全真教的武功，一步步從基礎開始（先練氣再御劍），很長一段時間內和jquery有很大差距，掌握之後發現jquery只不過是另一種武功，看一遍既會。且當學原生到必定程度以後，能夠自創武功。但原生見效很慢，屬於前期慢後期快，成長性高。

• jquery，比如華山派的劍宗，直接取實用的部分（劍），拿來即用，實用快速爲主（劍），原理部分的原生爲輔（氣）。jquery見效較快，屬於前期較快後期較慢，沒有氣的支持，成長會愈來愈慢

• 網上找代碼，比如趙敏找六大門派高手偷絕學，直接對症下藥，須要什麼拿什麼用什麼，只注重傷敵（結果），無所謂劍與氣。見效奇快，屬於前期快，後期慢。若是過後不研究原理，徹底不會有成長

廢話很少說，下面的代碼示例是一些流行的經常使用的JQuery功能的原生JS實現。

 

   jQuery 選擇器的原生實現     

便捷的找到咱們想要的DOM元素是JQuery的核心功能，JQuery選擇器的強大無需贅言。經過傳遞一個查詢字符串給CSS選擇器，它將會在DOM元素中檢索全部的匹配。

然而在大多數的狀況下，咱們可使用相同的代碼量用原生JS輕易實現。

1.獲取頁面全部的 div

/* jQuery */
$("div")

/* native equivalent */
document.getElementsByTagName("div") 

2.獲取某類名相同的一羣元素

/* jQuery */ 
$(".my-class")

/* native equivalent */
document.querySelectorAll(".my-class")

/* FASTER native equivalent */
document.getElementsByClassName("my-class") 

3.更復雜的一些選擇器

/* jQuery */
$(".my-class li:first-child")

/* native equivalent */
document.querySelectorAll(".my-class li:first-child") 

/* jQuery */
$(".my-class").get(0)

/* native equivalent */
document.querySelector(".my-class")

 

   jQuery DOM 操做的原生實現    

JQuery另外一大頻繁被使用到的功能就是操做DOM元素，諸如插入或刪除一個元素。固然，若是使用原生JS實現這些功能，代碼量確定是會有所增長的，不過咱們也能夠將這些功能封裝成函數，下面是一些經常使用的DOM操做的原生JS實現。

1.插入HTML元素

/* jQuery */
$(document.body).append("<div id='myDiv'><img src='im.gif'/></div>");

/* CRAPPY native equivalent */
document.body.innerHTML += "<div id='myDiv'><img src='im.gif'/></div>";

/* MUCH BETTER native equivalent */
var frag = document.createDocumentFragment();

var myDiv = document.createElement("div");
myDiv.id = "myDiv";

var im = document.createElement("img");
im.src = "im.gif";

myDiv.appendChild(im);
frag.appendChild(myDiv);

document.body.appendChild(frag);

 

   jQuery CSS 操做的原生實現    

在JQuery中能夠輕鬆實現對css的操做，增長屬性、刪除屬性或是檢測是否存在某個類。那麼你是否以爲使用原生JS實現會很麻煩呢？其實否則，由於有classList。下面是一些關於JQuery css操做的JS原生實現。

// get reference to DOM element
var el = document.querySelector(".main-content");

//----Adding a class------

/* jQuery */
$(el).addClass("someClass");

/* native equivalent */
el.classList.add("someClass");

//----Removing a class-----

/* jQuery */
$(el).removeClass("someClass");

/* native equivalent */
el.classList.remove("someClass");

//----Does it have class---

/* jQuery */
if($(el).hasClass("someClass"))

/* native equivalent */
if(el.classList.contains("someClass"))

當咱們簡單地逐個設置Css的屬性，而並不是將它們所有傳遞給JQuery的Css函數時，性能明顯會快不少。並且，真的不會添加什麼額外的代碼。

// get reference to a DOM element
var el = document.querySelector(".main-content");

//----Setting multiple CSS properties----

/* jQuery */
$(el).css({
  background: "#FF0000",
  "box-shadow": "1px 1px 5px 5px red",
  width: "100px",
  height: "100px",
  display: "block"
});

/* native equivalent */
el.style.background = "#FF0000";
el.style.width = "100px";
el.style.height = "100px";
el.style.display = "block";
el.style.boxShadow = "1px 1px 5px 5px red";

 

   jQuery show 與 hide 的原生實現    

show()與hide()應該也是JQuery中十分經常使用的方法，原生JS實現一樣輕鬆。

// get reference to a DOM element
var el = document.querySelector(".main-content");

//----show() or hide()----

/* jQuery */
$(el).show();
$(el).hide();

/* native equivalent */
el.style.display = '';
el.style.display = 'none';

 

   jQuery 事件綁定的原生實現    

// get reference to a DOM element
var el = document.querySelector(".main-content");

//----Event Listener off----

/* jQuery */
$(el).off(eventName, eventHandler);

/* native equivalent */
el.removeEventListener(eventName, eventHandler);


//----Event Listener  on----

/* jQuery */
$(el).on(eventName, eventHandler);

/* native equivalent */
el.addEventListener(eventName, eventHandler);

文中出現了諸如querySelector、classList等方法，確實須要考慮兼容問題，關於它們的兼容性，請猛戳這裏：querySelector/querySelectorAll, classList, getElementsByClassName,createDocumentFragment.

最後不得不說的是 jQuery 的確是一個了不得的庫。可是若是咱們能夠一樣輕鬆的使用原生 JS 實現 JQuery，何樂而不爲呢？也許我有點吹毛求疵，這一點性能優化多是無關緊要，只不過最近在開發 H5 遊戲，你會發現當你的遊戲沒法順暢地跑 60 幀（60FPS，每秒刷新60次）的時候，每一絲性能的優化帶來的提高都是寶貴的。

 

原創文章，文筆有限，才疏學淺，文中如有不正之處，萬望告知。