博客 / 詳情

返回

underscore 的源碼該如何閲讀?

前言

別名:《underscore 系列 8 篇正式完結!》

介紹

underscore 系列是我寫的第三個系列,前兩個系列分別是 JavaScript 深入系列、JavaScript 專題系列。

這個系列算是 JavaScript 專題系列的番外篇,總共寫了 8 篇,重點介紹了 underscore 中的代碼組織、鏈式調用、內部函數、模板引擎、工具函數等內容,旨在幫助大家閲讀源碼,以及寫出自己的 undercore。

順便宣傳一下該博客的 Github 倉庫:https://github.com/mqyqingfeng/Blog,歡迎 star,鼓勵一下作者。

起因

想先聊聊為什麼會寫 underscore 系列?

最一開始寫 JavaScript 專題系列的時候,因為涉及到去重、扁平等功能點的實現,所以就研究了 underscore 中的實現方式,後來寫完專題系列,有朋友就問我該如何組織這些功能函數呢?

説起來,我也有這樣的困惑,因為以前在技術平台上也看到過一些分享自己常用功能函數的文章,每當這個時候,總會幻想如果有篇文章能講講該如何組織代碼,然後我學會後,在業務中不斷總結完善,或許我也能寫出自己的工具函數庫。

臨淵羨魚,不如退而結網,所以我想研究下 underscore 的代碼是如何組織的,後來又覺得反正都看了一遍,再進一步,講講 underscore 的源碼吧。

不過,這個系列的內容跟一般講解 underscore 源碼的系列文章還是有很大的不同,主要在於它講的算是很"邊緣"的內容,從文章的標題中也可以看出,講完代碼結構後,講了內部函數、模板引擎,工具函數等這些並不是在實際開發中常用到的 API,即便是在其他的系列文章中,這些也算是很冷門的內容,不過這也正好印證了我寫 underscore 系列的目的,就是幫助大家更好的閲讀源碼。

所以它與其他 underscore 系列的文章並不衝突,完全可以在閲讀完這個系列後,再跟着其他系列的文章接着學習。

如何閲讀

我在寫 underscore 系列的時候,被問的最多的問題就是該怎麼閲讀 underscore 源碼?我想簡單聊一下自己的思路。

首先,underscore 的定位是一個功能函數庫,提供了 110 多個 API 幫助開發,所以首先要搞明白的就是那麼多的函數,是如何組織的?是如何做到既可以直接使用,又能以面向對象的方式使用的?又是如何實現鏈式調用的?瞭解瞭如何組織代碼,甚至從中抽離得到一個模板,我們再從業務中慢慢總結,最終也能寫出自己的 underscore。

接下來是閲讀內部函數,其實不多,只有 cb、optimizeCb、restArgs、shallowProperty、deepGet 而已,之所以閲讀這些函數的實現,是因為在讀其他 API 時很可能會接觸到這些函數,我第一次在其他 API 中看到 cb、optimizeCb、restArgs 函數時都是一臉懵逼,接着看 API 吧,總覺得這點沒看懂,心裏一直很不爽,轉而去看這些函數的實現,又因為只讀了一點源碼,想不明白為什麼要這樣抽象,進退兩難,慢慢的就產生了挫敗感,這也就是我為什麼會專門寫了兩篇介紹內部函數,不僅僅是講解源碼,更重要的是希望大家明白為什麼要這麼抽象。

最後就是跟着興趣學習,underscore API 眾多,一個一個看實在是消磨熱情,倒不如你想了解哪個功能就去研究哪個功能的實現,如果説在這部分有什麼建議的話,那就是在研究一些函數具體的實現方式時,可以參考一些已經寫過的源碼分析的文章,也許事半功倍:

  1. 吳曉軍源碼分析系列
  2. 韓子遲源碼分析系列

當然啦,即便如此,閲讀源碼的過程也並不是一帆風順,總會因為各種原因,放棄又重新拾起,又放棄又重新拾起,很正常,我也沒有什麼好的方法,只能説保持一個平和的心態就是一種進步。

全目錄

  1. underscore 系列之如何寫自己的 underscore
  2. underscore 系列之鏈式調用
  3. underscore 系列之內部函數 cb 和 optimizeCb
  4. underscore 系列之內部函數 restArgs
  5. underscore 系列之防衝突與 Utility Functions
  6. underscore 系列之實現一個模板引擎(上)
  7. underscore 系列之實現一個模板引擎(下)
  8. underscore 系列之字符實體與 _.escape

下期預告

按照原定的計劃,是準備寫 ES6 系列的,不過,因為工作的原因,很可能會先寫 React 系列,暫時還不能確定,今年只希望能寫完最後兩個系列。

感謝大家的閲讀和支持,我是冴羽,下個系列再見啦![]~( ̄▽ ̄)~**

user avatar
0 位用戶收藏了這個故事!

發佈 評論

Some HTML is okay.