JavaScript 專題系列是我寫的第二個系列,第一個系列是 JavaScript 深刻系列。前端
JavaScript 專題系列共計 20 篇,主要研究平常開發中一些功能點的實現,好比防抖、節流、去重、類型判斷、拷貝、最值、扁平、柯里、遞歸、亂序、排序等,特色是研(chao)究(xi) underscore 和 jQuery 的實現方式。jquery
JavaScript 專題系列自 6 月 2 日發佈第一篇文章,到 10 月 20 日發佈最後一篇,感謝各位朋友的收藏、點贊,鼓勵、指正。git
20 篇下來,咱們已經跟着 underscore 寫了 debounce、throttle、unique、isElement、flatten、findIndex、findLastIndex、sortedIndex、indexOf、lastIndexOf、eq、partial、compose、memorize 共 14 個功能函數,跟着 jQuery 寫了 type、isArray、isFunction、isPlainObject、isWindow、isArrayLike、extend、each 共 8 個功能函數,本身實現了 shallowCopy、deepCopy、curry、shuffle 共 4 個功能函數,加起來共有 26 個功能函數,除此以外,最後一篇還研究了 V8 的排序源碼,真心但願讀者能從這個系列中收穫頗豐。github
順便宣傳一下該博客的 Github 倉庫:github.com/mqyqingfeng…,歡迎 star,鼓勵一下做者。面試
而此篇,做爲專題系列的總結篇,除了彙總各篇文章,做爲目錄篇以外,還但願跟你們聊聊,我爲何要寫這個系列?數組
若是說深刻系列是爲了瞭解 JavaScript 這門語言自己,專題系列就是爲了用 JavaScript 具體實現一些功能,我但願它抽離於實踐,無關乎 DOM、BOM,能對你們有所幫助,一想到這些,映入腦海的竟是那些年作過的前端面試題……dom
是的,回顧整個系列,你會發現,防抖、節流、去重、深淺拷貝、數組扁平化、亂序、柯里化等等不都是面試的經典嗎?我還記得曾經爲了準備面試,死記硬背了一個去重的函數,卻歷來沒有研究過其餘去重的方法,也歷來沒有想過它們以前的區別,防抖和節流更是傻傻分不清楚,深淺拷貝反正有 jQuery 的 extend 呢,數組扁平化,我也就有一個遞歸的思路,具體怎麼實現我還真是不清楚,亂序我就沒有思路了……哎,都是隻知其一;不知其二或是隻是有所耳聞。函數
想着想着,便不知不覺寫下了不少待研究的課題,研究的方法也隨之浮現,那就是研究 underscore 以及 jQuery 的實現方式,曾經它們看起來非常神祕,也知道閱讀起來並不是難事,可仍是想一探究竟。工具
然而研究的過程確實是十分的艱難,由於要作到看懂源碼,理解實現的原理,然而,一段源碼的實現每每會牽涉到多個地方,結果爲了看懂某一個函數的具體實現,還要一連串的看多個函數,在理解源碼的過程當中,也會有不少的疑惑,我會告訴本身去理解每個產生疑惑的地方,這句話提及來簡單,作起來很難,我來舉個例子吧,在數組亂序中,有一個方法是:優化
arr.sort(function(){
return Math.random() - 0.5;
});複製代碼
然而,這個方法的實現是有問題的,它並不能作到真正的亂序。不少文章中,只是用 demo 驗證了這種方法有問題,卻歷來沒有說過這個方法究竟哪裏有問題,然而我就是對此感到很是疑惑,由於我以爲這個方法很不錯呀,思路巧妙,初見時,還有點小驚豔呢……但是爲何會有問題呢?我百思不得其解,搜了不少文章,也無果,最終,爲了解決這個困惑,去看了 v8 的 sort 源碼,然而這段源碼也並非很容易看的,資料少之又少,先要理解插入排序,快速排序,再去理解 v8 作的諸多優化,結果爲了解決這個疑惑,看完了 v8 的 sort 源碼,理解了 sort 的原理後,以數組 [1, 2, 3] 爲例,細細分析這種亂序方法在 v8 下具體的排序過程,最後算出來 [1, 2, 3] 亂序後的 6 種結果的機率分別是多少,結果 3 還在原位置的機率有 50%! 到此,纔算是心滿意足的解決了這個困惑。
關於這個困惑的具體內容,能夠查看該系列的第 19 篇文章。
除此以外,全部的函數我都會本身實現一遍,然而即使看懂了原理,實現也並不是能一蹴而就,畢竟若是是你寫,怎麼能一開始就想得如此完善呢?因此我都是從一個簡單的寫法開始,向着 underscore 和 jquery 的最終實現方式,一個功能一個功能的迭代實現,你看這個系列不少的文章,都會跟你們講解如何從零實現,一版一版的代碼其實就是迭代實現時的記錄。
感嘆一下,寫文章不容易呀~
有些讀者給個人文章留言,或感謝,或討論,或指正,由於各類各樣的緣由,沒能回覆或及時回覆,對此致以歉意。
在我 Github 博客倉庫的描述中,說到我預計寫四個系列:JavaScript深刻系列、JavaScript專題系列、ES6系列、React系列。專題系列完結,原本應該是寫 ES6 系列,但是有一個朋友跟我說,寫了這麼多函數,但是該如何組織這些函數,造成本身的工具函數庫呢?
對呀,既然都寫了這麼多工具函數,爲何再也不進一步,將它們以某種方式組織起來呢?
我首先想到的即是借鑑 underscore,underscore 是如何組織代碼的?又是如何實現鏈式調用的?又是如何實現拓展的?有不少值得研究的地方,因此我決定,在 ES6 系列以前,再進一步,寫一個 underscore 系列,旨在幫助你們寫出一個本身的 「underscore」。
感謝你們的閱讀和支持,我是冴羽,underscore 系列再見啦![]~( ̄▽ ̄)~**