最後一個連結 - vanilla.js算是一個對前端framework重度使用者開的玩笑，「維護團隊」還煞有其事的做了一個客製化選單來幫你"build"需要的模組，但是下載下來的檔案中當然是一行程式碼都沒有。
官網中舉的一些case應該都能讓你反思「我們到底有沒有必要這麼依賴jquery？」
從事web開發以來，在前端開發時一直與jQuery脫不了關係，但隨著對javascript了解的增加，發現自己已經不知不覺陷入了jQuery的設計模式，很多普通的功能其實在原生的javascript中一點都不難做，效能也比較好，我們就一步步從簡單的部份開始，慢慢學習怎麼設計出jquery-free的程式。
$(document).ready()
通常需要載入一些比較肥大的js檔時(例如jquery)而且不考慮相依性時，很多人會將他塞進頁面的尾巴，最後載入。因為頁面的render是synchronise的，所以在最前面塞入一堆肥大的js檔會使得接下來的DOM物件的render被block住，而產生「很慢」的錯覺。所以如果你是遵照這樣的best practice，在js程式碼中，只要將需要ready後執行的code放在最後即可，就用不到$(document).ready()了。
query dom物件
在使用jQuery的時候，我們已經很習慣使用$(".class #id tag")這樣的方法來query出我們要的dom物件，但這樣的query方式並不是jquery獨創的，而是從css那邊學來的。且在w3c也早有規劃去實作這個api(http://www.w3.org/TR/selectors-api/)，那就是querySelectorAll及querySelector。querySelectorAll及querySelector的差別只在前者會query出所有符合條件的element，回傳nodeList；後者只會回傳第一個符合條件的element。兩著的使用時機如下：
- document.querySelectorAll
- document.querySelector
- nodeList.querySelectorAll
- nodeList.querySelector
- element.querySelectorAll
- element.querySelector
支援ie8以上及其他瀏覽器
dom物件的操作
dom物件本身就有相當豐富的method可供使用，了解他們之後你會發現很多情況下我們真的沒有必要用到jquery，這邊舉幾個例子：Style:
$(elem).css("color","red");
vs
elem.style.color="red";
Class:
$(elem).addClass("active");
vs
elem.className+=" active";
or
elem.classList.add("active"); //ie10+
$(elem).removeClass("active");
vs
elem.className= elem.className.split("active").join("");
or
elem.classList.remove("active"); //ie10+
HTML、text
$(elem).text("content");
$(elem).html("<p>TEST</p>");
vs$(elem).html("<p>TEST</p>");
elem.innerText="content";
elem.innerHTML="<p>TEST</p>";
elem.innerHTML="<p>TEST</p>";
Append:
$(elem).append(child);
vs
elem.appendChild(child);
Remove:
$(elem).remove();
vs
elem.remove();
Event-binding:
$(elem).click(function(){});
vs
elem.onclick = function(){};
It sucks, I know. 因為只能綁一個function，第二次綁定時就會把前一個給覆蓋掉了。
$(elem).bind("click", function(){});
vs
elem.addEventListener("click", function(){});
這種方式要bind幾次都ok，要注意的是在unbind的時候必須在第二個參數傳入相同的reference才行，例如：
var foo = function(){};
elem.addEventListener("click", foo);
elem.removeEventListener("click", foo);
沒有留言:
張貼留言