輕輕鬆鬆自己寫一個jquery庫-要不要試試？

前端大彬哥發表於2017-05-16
jQuery

jQuery是現在最流行的JavaScript工具庫。
據統計，目前全世界57.3%的網站使用它。也就是說，10個網站裡面，有6個使用jQuery。如果只考察使用工具庫的網站，這個比例就會上升到驚人的91.7%。

因此，經常我們看到一些前端面試會有這麼一條要求，入拉勾的招聘：

https://www.lagou.com/jobs/99… 精通 Javascript,jQuery

https://www.lagou.com/jobs/31… 熟悉業界常用Javascript指令碼庫（如prototype、jQuery、YUI、mootools等），熟悉前端工程化本地化開發解決方案

https://www.lagou.com/jobs/16… 熟悉jquery和prototype的JavaScript類庫；

https://www.lagou.com/jobs/18… 熟悉至少一種JS框架或者對JS語言掌握較深；

大家看到他們的工資都很高，兩眼放光，一看自己的工作經驗也符合，可是一看到上面這些話，就無奈的關掉網頁或者心虛了。

因為你大部分時間使用jquery是這樣的:

你們公司的專案需要一個輪播圖或者選項卡或者一個功能，你不會寫，然後直接百度，恰好發現一個jquery外掛可以用，你看了下api文件，然後改了幾個引數，功能跑通了，然後你開始審查元素，修改樣式，然後你想這個等專案完了，我一定好好研究研究，然後就沒有然後了，一不小心兩年過去了，似乎自己需要的功能都能從網上找到外掛，但是一點都不熟悉jquery更不用說精通了，因為你兩年的時間都沒有嘗試懂它，你只是外掛的引數修改工，或者程式碼搬運工。

有人會說，不是的老師，我嘗試著學了，但是

我想嘗試著寫一個外掛，卻發現不會寫，看了幾篇文章不知道怎麼做，看到有人解讀jquery原始碼，終於下定決心好好看看了，結果一開啟原始碼就懵圈了，根本看不懂，就那麼放棄了。或者一個原始碼解讀視訊好幾十個，幾個月過去了，我還是再等等吧。

這，像不像工作兩三年依舊苦惱的你？

其實深入jquery的難點不在技術本身，可以說jquery的架構非常清晰，入手起來非常簡單，而你學習的攔路虎是：

1.缺少必要的基礎知識鋪墊，你懂不懂匿名函式自執行，jquery第一句程式碼你都看不明白為什麼人家那麼做。
2.缺少系列的體系化的教程，你剛嘗試著去模擬別人敲的東西，結果一不小心卡住了，卻不明白為什麼。
3.缺少及時的引導，你卡了兩個小時，一晚上過去了信心也沒了，這時候如果有個人也許幾句話就解決了你的問題。
4.缺少信心和正確的學習庫方式。一提到原始碼就覺得很高深學不會，只是大神的專利，我還是學會用吧，然後看文件成為了軟體使用者而不是軟體開發者。

好，說了這麼多我們就看看自己寫一個jquery庫，有沒有你想想的那麼難。

一、選取DOM元素

jQuery的核心是通過各種選擇器，選中DOM元素，可以用querySelectorAll方法模擬這個功能。

var $ = document.querySelectorAll.bind(document);

這裡需要注意的是，querySelectorAll方法返回的是NodeList物件，它很像陣列（有數字索引和length屬性），但不是陣列，不能使用pop、push等陣列特有方法。如果有需要，可以考慮將Nodelist物件轉為陣列。

myList = Array.prototype.slice.call(myNodeList);

二、DOM操作

DOM本身就具有很豐富的操作方法，可以取代jQuery提供的操作方法。

　尾部追加DOM元素。

     // jQuery寫法
　　(parent).append((child));
　　// DOM寫法
　　parent.appendChild(child)

頭部插入DOM元素。

　　// jQuery寫法
　　$(parent).prepend($(child));
　　// DOM寫法
　　parent.insertBefore(child, parent.childNodes[0])

刪除DOM元素。

　　// jQuery寫法
　　$(child).remove()
　　// DOM寫法
　　child.parentNode.removeChild(child)

三、事件的監聽

Element.prototype.on = Element.prototype.addEventListener;

四、類操作

jQuery的addClass方法，用於為DOM元素新增一個class。


　　$(`body`).addClass(`hasJS`);

DOM元素本身有一個可讀寫的className屬性，可以用來操作class。
　

    HTML 5還提供一個classList物件
　　document.body.classList.add(`hasJS`);
　　document.body.classList.remove(`hasJS`);
　　document.body.classList.toggle(`hasJS`);
　　document.body.classList.contains(`hasJS`);

簡要的說了一下，自己寫jquery庫的一些技術解決方案，哪個東西大家看不懂呢？所以並不是你不努力或者學不會，而是你學習方式和學習的內容不妥當，

通過我一上午的講解，然後下午已經能夠簡單的實現一個jquery庫了，然後在實際專案中不斷完善和實用它，那麼你手裡也會有一個精巧的jquery庫，而且是自己寫的，這個時候你還會因為熟悉至少一種JS框架或者對JS語言掌握較深對著好的工作機會望而卻步嗎？

給自己一個機會，只要一天，也許你的工作狀態和人生會因此而改變，

微信：leolau2012（加請註明學習）

期待你的進步。

相關文章