JavaScript專題系列20篇正式完結!

寫在前面

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 的最終實現方式,一個功能一個功能的迭代實現,你看這個系列不少的文章,都會跟你們講解如何從零實現,一版一版的代碼其實就是迭代實現時的記錄。

感嘆一下,寫文章不容易呀~

全目錄

  1. JavaScript專題之跟着underscore學防抖
  2. JavaScript專題之跟着underscore學節流
  3. JavaScript專題之數組去重
  4. JavaScript專題之類型判斷(上)
  5. JavaScript專題之類型判斷(下)
  6. JavaScript專題之深淺拷貝
  7. JavaScript專題之從零實現jQuery的extend
  8. JavaScript專題之如何求數組的最大值和最小值
  9. JavaScript專題之數組扁平化
  10. JavaScript專題之學underscore在數組中查找指定元素
  11. JavaScript專題之jQuery通用遍歷方法each的實現
  12. JavaScript專題之如何判斷兩個對象相等
  13. JavaScript專題之函數柯里化
  14. JavaScript專題之偏函數
  15. JavaScript專題之惰性函數
  16. JavaScript專題之函數組合
  17. JavaScript專題之函數記憶
  18. JavaScript專題之遞歸
  19. JavaScript專題之亂序
  20. JavaScript專題之解讀v8排序源碼

致歉

有些讀者給個人文章留言,或感謝,或討論,或指正,由於各類各樣的緣由,沒能回覆或及時回覆,對此致以歉意。

下期預告

在我 Github 博客倉庫的描述中,說到我預計寫四個系列:JavaScript深刻系列、JavaScript專題系列、ES6系列、React系列。專題系列完結,原本應該是寫 ES6 系列,但是有一個朋友跟我說,寫了這麼多函數,但是該如何組織這些函數,造成本身的工具函數庫呢?

對呀,既然都寫了這麼多工具函數,爲何再也不進一步,將它們以某種方式組織起來呢?

我首先想到的即是借鑑 underscore,underscore 是如何組織代碼的?又是如何實現鏈式調用的?又是如何實現拓展的?有不少值得研究的地方,因此我決定,在 ES6 系列以前,再進一步,寫一個 underscore 系列,旨在幫助你們寫出一個本身的 「underscore」。

感謝你們的閱讀和支持,我是冴羽,underscore 系列再見啦![]~( ̄▽ ̄)~**

相關文章
相關標籤/搜索