如何儘可能避免引用jQuery

Introduction

正如jQuery所宣稱的同樣，Write Less, Do More。不少時候咱們喜歡用它來解決問題。但增長一個庫必然意味着更大的網絡負擔，意味着更高的頁面初始載入時間。而且，如今與當初已經有了很大不一樣，jQuery是伴隨着IE6出來的，當時，jQuery在跨瀏覽器開發上有不可替代的做用。但今天，伴隨ES5的普遍被支持以及各個瀏覽器自己的完善，咱們能夠考慮適當的丟掉它，改善性能。
須要注意的是，並非說jQuery是不可取的，在某些場合，用它是更合適的，須要咱們本身判斷。

Listening for Document Ready

咱們常常用到$( document ).ready() 或者它的簡寫 $(),用來傳入當全部dom準備完畢後，執行邏輯的相關回調。原生js能夠這麼寫：

document.addEventListener('DOMContentLoaded', function () {
    // dom 已經準備好被操做了
});

Selecting elements

咱們經常依賴於jQuery的選擇器，而如今，全部的瀏覽器基本都支持了querySelector 與 querySelectorAll，這裏是MDN連接

var lochNess = document.querySelector(".monsters");
console.log("It's from Scotland - " + lochNess.textContent);

var scary = document.querySelectorAll(".monsters");
for (var i = 0; i < scary.length; i++) {
    console.log(scary[i].innerHTML);
}

Attaching and removing event listeners

偵聽事件是web開發中再重要不過的一環。曾經IE獨樹一幟，與其它瀏覽器提供的API不一致，致使須要用jQuery來快速開發，如今，全部的瀏覽器都提供了addEventListener：

var btn = document.querySelectorAll("button"),

btn[0].addEventListener("click", function () {
    list.addEventListener("mouseover", enlarge);
});

btn[1].addEventListener("click", function () {
    list.removeEventListener("mouseover", enlarge);
});

Manipulating classes and attributes

曾經，不使用jQuery來處理class是一件很麻煩的事情，而如今，因爲classList的存在(這裏是MDB連接)咱們能夠快捷的解決這一類問題，另外，若是須要操做attribute，可使用setAttribute(一樣是MDN連接)

var btn = document.querySelectorAll("button"),
    div = document.querySelector("#myDiv");

btn[0].addEventListener("click", function () {
    //能夠獲取任意的屬性
    console.log(div.id);
});

// Element.classList存放了全部當前元素的class
var classes = div.classList;

btn[1].addEventListener("click", function () {
    console.log(classes);
});

btn[2].addEventListener("click", function () {
    //能夠添加，刪除
    classes.add("red");
});

btn[3].addEventListener("click", function () {
    //也能夠翻轉
    classes.toggle("hidden");
});

Getting and setting element content

jQuery提供了text() html()用以操做元素的內容，咱們可使用原生的textContent與innerHTML屬性代替它們。

var myText = document.querySelector("#myParagraph"),
    btn = document.querySelectorAll("button");

// 獲取
var myContent = myText.textContent;
console.log("textContent:  " + myContent);

// 改變
btn[0].addEventListener('click', function () {
    myText.textContent = " Koalas are the best animals ";
});

var myHtml = myText.innerHTML;
console.log("innerHTML:  " + myHtml);

btn[1].addEventListener('click', function () {
    myText.innerHTML = "<button> Penguins are the best animals </button>";
});

Inserting and removing elements

原生的js能夠這樣添加與刪除元素：

var lunch = document.querySelector("#lunch");

// 添加
var fries = document.createElement("div");
fries.innerHTML = '<li><h4> Fries </h4></li>';
lunch.appendChild(fries);

// 特定位置添加

var beef = document.querySelector("#Beef"),

topSlice = document.createElement("li"),
bottomSlice = document.createElement("li");

bottomSlice.innerHTML = topSlice.innerHTML = 'Cheese';

beef.parentNode.insertBefore(topSlice, beef);
beef.parentNode.insertBefore(bottomSlice, beef.nextSibling);
};

//刪除
var pickles = document.querySelector("#pickles");
if (pickles) {
    pickles.parentNode.removeChild(pickles);
}

Walking the DOM tree

原生的js也能夠遍歷DOM樹

var snakes = document.querySelector('#snakes'),
    birds = document.querySelector('#birds');

snakes.addEventListener('click', function (e) {
    console.log("Children: ");
    var children = e.target.children;
    for (var i = 0; i < children.length; i++) {
        console.log(children[i].textContent);
    }
});


birds.addEventListener('click', function (e) {
    // 獲取最近的兄弟節點
    var previous = e.target.previousElementSibling;
    if (previous) {
        console.log("Previous sibling: " + previous.textContent);
    }
    var next = e.target.nextElementSibling;
    if (next) {
        console.log("Next sibling: " + next.textContent);
    }

    //全部的兄弟們
    Array.prototype.filter.call(e.target.parentNode.children, function (child) {
        if (child !== e.target) {
            console.log(child.textContent);
        }
    });

});

Looping over arrays

jQuery提供的 each與map已經能夠被ES5的forEach與map替代

var ninjaTurtles = ["Donatello", "Leonardo", "Michelangelo", "Raphael"];

ninjaTurtles.forEach(function (entry) {
    console.log(entry);
});

var lovesPizza = ninjaTurtles.map(function (entry) {
    return entry.concat(" loves pizza!");
});
console.log(lovesPizza);

Animations

jQuery的動畫效果是很是強大的，在不少場合仍是很難替代的，不過，因爲CSS3，動畫能夠轉到由CSS來實現。這部分就不給DEMO了。

AJAX

若是惟一使用jQuery的惟一理由，是它便捷的AJAX，那麼，將jQuery替換成一個輕量的多的庫吧！好比reqwest，這個庫壓縮後不到10kB。

總結

盡全力使腳本變的更小，可使用戶得到更高的加載速度，以及更好的用戶體驗。但也要謹慎的作取捨，不必大量的造jQuery已經提供的輪子。 除了在編碼方面帶來性能優化，咱們還能夠藉助工具達到一樣的效果。能夠看一看博主的webpack方面的文章 :)