作為一名前端開發人員，有哪些值得一讀的js代碼？

如題，求教

---

首先反對推薦讀 jQuery 源碼的，裡面奇技淫巧太多，代碼工程角度上來看不太適合實際產品的前端項目。有些代碼在工程裡面實際上是非常糟糕的寫法，容易被帶偏。

推薦 backbone.js 的源碼，非常適合新手。

首先是代碼結構清楚，幾大模塊，View/Model/Collection 像一本書一樣簡單清楚的介紹了現代前端 MVC 架構的組織方式，Events 的代碼對於理解 Pub/Sub 模式也很有幫助。其次是奇技淫巧少，代碼規矩。還有一個優點是 Annotated Source，有一份詳細注釋的代碼文檔，閱讀起來非常舒服。當然最大大大的優點是代碼量少啊，足夠簡單。

可以先上手一下簡單的 Demo，比如 Backbone 的 TODO。然後看 Annotated Source，看下 TODO 裡面所涉及的一些方法的原理。或者單獨研究幾個模塊的實現，可以從 Events。或者研究一些核心方法，比如 Model.prototype.set。

# 1月22日補充

下面提到的 underscore.js 也是很不錯的項目，可以先看下文檔，然後嘗試自己實現裡面提到的 API，然後對比下 underscore 的實現，對於了解 JS 語言特性很有幫助。

如果對 node.js 感興趣，可以看 express 和 connect 的代碼，可以了解到 HTTP 服務端的工作方式，服務端 MVC 模型，路由分發等等很有價值的工程知識。

---

underscore也可以看看

---

今天看到排名第一的 @李佳怡 的 答案，還有附帶的 github 項目，這裡我要實名教育一下。

backbone 這個項目的源碼閱讀其實是對 backbone.js 1.3.3 源碼 注釋的翻譯，當然，我覺得這也算是一種「閱讀」吧。

然後我們再看這篇 zepto的源碼閱讀 ，為什麼和其他人的內容這麼類似呢？

藍框的內容很明顯是同一段英文的不同翻譯，但是紅框的部分一個字不差，這個有點說不過去吧。看起來是借鑒了一部分別人翻譯好的文章，然後又加上了一些自己的翻譯。

underscore 這篇就太離譜了，和 @韓子遲 的underscore源碼解析 一模一樣

==================================

看到妹子一早更新了 github，增加了源碼的出處和參考，給知錯能改點個贊！

HTML 被叫做超文本標記語言，因為有很多文本所不具有的能力，比如說 a 標籤，可以直接鏈接到引用的文章內容上。所以不要把超文本標記語言，用成了抄文本標記語言。

突然間有一個答案上百贊的心情我能夠理解，但在出名的喜悅中不要迷失自己。其實我對於不懂事的無心之失還是挺寬容的，不懂開源世界的規矩，比如add BiuBiuBiu~ by belanhd · Pull Request #1609 · pallets/flask，哈哈哈一下就過去了。

但是把別人閱讀後翻譯註釋的內容，讓人誤以為是自己的功勞，這是不對的。。。

既然做回答是為了幫助別人，我來教你可以這樣回答：

我的方法就是對源碼做翻譯，很多成熟類庫的英語注釋非常詳細，逐條翻譯之後就能夠對它有一個完整的認識了。如果一開始覺得難度較大，還可以參考一些前輩翻譯好的中文注釋。從閱讀中文注釋，到半中文注釋，漸漸嘗試自己去完整翻譯一個英文類庫，完成之後的收穫和成就感都是無與倫比的。

我看了你的 github 提交記錄，堅持了很長時間，確實是看了很久的源碼，哪怕不是自己逐句翻譯的，也很厲害了，我也相信你從中有很多收穫。

只是不要因為一時虛榮而有所貪心，大方給出他人的鏈接並不丟人。

佛經有云：不怕念起，只怕覺遲。希望你以後也能夠為開源世界做出貢獻。

==================================

這兩個都是backbone的源碼中文注釋

https://github.com/aircloud/backboneAnalyze/blob/master/src/backbone.js

https://gist.github.com/que01/934810128e242c95aeba4f1c8645c4ca

可以參考一下，先閱讀別人注釋好的代碼，然後自己從英文翻譯一次，會有很大收穫。

underscore的話有另外一種建議，你可以對照著Underscore.js(1.8.3) 中文文檔 自己去實現每一個方法，然後再對照源碼去看，這樣會更有收穫。

zepto其實也是類似，自己試著去處理DOM的增刪改查，然後對照真正的源碼去看，實現的方法有什麼不同。

看框架有兩個層面，一個是看具體函數的寫法，這是戰術上的，一次看幾個，要理解函數內部的原理。

再一個是看整個項目結構，大到文件夾結構，小到類的劃分，繼承。可以用閱讀大型 JavaScript 源碼時有什麼好用的工具？ 提到的 Jianru-Lin/lambda-view，幫你看清項目結構，知道各個部分之間的協調關係。

---

underscore挺工整的，難度也初級，對於如何寫lib有幫助。

看看差不多就開始看backbone吧，也不難，對於如何構建一個應用程序比較有幫助。

jQuery就別整個看它了……如果偶爾遇到有它API用起來表現比較奇怪的時候可以針對性的看看，然後會發現這特么就是個無底天坑。

---

js寫的TypeScript編譯器，讀懂之後再也無需加班。

---

讀你使用率最高的框架/庫。只是為了讀而讀，常常很難理解。

---

早上起來刷了下知乎，誠惶誠恐，本來還可以多睡一個小時，看完評論和@ 都睡不著了～

感謝 @王德福 的指出以及批評，評論里也有 @陳立林

這樣的善意提醒，不一一@了，真的很感謝大家的指正。我也還是個正在學習積累的菜鳥，跟著大大們的腳印學習，因為一開始是為了自己學習閱讀的，也就沒有注意到引用的問題。

在此先向涉及到的原作者們道歉。

在最初的時候是完全出於自己學習的目的，查了許多大大們已經學習過的資料以及對框架類庫原作者英文注釋翻譯，還有加上一些自己的理解來完成這個源碼閱讀的，一方面是加快學習速度，另一方面有些不理解的地方需要指點。當時並沒有想著未來會有機會分享給大家，這兩天看到時間線上有這樣一個問題，就直接回答了，初心還是出於自己整理理解的資料可以幫助到大家，分享一下學習實踐過程。現在已經加上了出處，並提交到了github。不過有的時候自己也是邊搜邊整理，跟自己原創的內容混雜在一起，可能還有別的沒有註明。以後我會注意這個問題並改正。

如果哪裡還有問題，歡迎指正，會及時修改。

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

以下是我的源碼學習路線，以及知識點總結。如果大家不知道從哪裡開始，推薦按照這個順序，

1、underscore.js ———— JavaScript 工具庫

知識點梳理：

• 【 js 基礎 】 深淺拷貝
• 【 js 性能優化】underscore throttle 與 debounce 節流

看完 underscore 建議閱讀書籍《javascript函數式編程》

2、zepto.js ———— 輕量級的針對現代高級瀏覽器的JavaScript庫,與jquery有著類似的api

知識點梳理：

• 【 js 基礎 】【 源碼學習 】 setTimeout(fn, 0) 的作用

學習資料推薦： zepto對象思想與源碼分析

3、node.js 之 module.js ———— 前端模塊化載入

系統知識梳理：【 js 模塊載入 】深入學習模塊化載入（node.js 模塊源碼）

4、backbone.js ———— 以類jq和underscore為基礎的mvc框架

知識點梳理：

• 【 js 基礎 】【 源碼學習 】backbone 源碼閱讀（一） (1、MVC 框架 2、觀察者模式 以及 控制反轉)
• 【 js 基礎 】【 源碼學習 】backbone 源碼閱讀（二） (1、控制反轉、依賴注入)

綜合上面所有看過源碼的一篇文章 ： 【 js 基礎 】【 源碼學習 】源碼設計 （持續更新）

所有的知識點總結在我的專欄里都可以找到，還有一些前端基礎相關的，比如

【 js 基礎 】作用域和閉包

【 js 基礎 】Javascript 「繼承」

等，大家可以關注一下我的專欄，方便查找資料：李佳怡的紙糊

同時 大家也可以 star 我的 github 源碼學習項目（JiayiLi/source-code-study），對於上面提到的所有源碼都有我精讀後的完整注釋，大家可以參考和交流。（這裡的精讀是指對於我個人而言，我自己每一行根據引用後的注釋都看懂了，沒有原創的意思）

我是從一開始完全不知道如何去閱讀源碼，不知道從哪裡下手，到現在已經完成了四個源碼的閱讀，覺得這個學習路線還是可以參考的，同時這些源碼的閱讀確實對我理解前端知識結構有很大的幫助，不僅僅是一些方法的實現，或者是一些技巧類的寫法，更多的是一些思想上的、設計上的積累。所以還是很推薦大家自己動手實踐一下。

接下來打算看 react 或者是 Knockout（mvvm框架），還沒有決定好～

公眾號：

佳怡所思 （ljyFEer）

歡迎關注 ～

---

Bootstrap.

把源碼down下來，不要看build好的。Bootstrap的每個js功能都分開放在一個.js文件里，每個.js文件都只有100-200行。除了學javascript，你還可以學less，以及前端的架構

---

個人覺得可以嘗試讀一下正在使用的框架，深入了解其內部運行原理，可以有助於解決工作中遇到的各種問題。

因為我們公司的技術棧是Vue，所以前陣子一直在讀Vue相關的源碼，https://github.com/answershuto/learnVue（逃

邊用邊讀邊思考，真的受益良多，感謝 @尤雨溪 尤大提高生產力～

同時也幫助團隊的同學解決了一些性能問題。（只做了一點微小的貢獻，抖

當然也推薦讀koa等Node框架的代碼，能夠更好地理解整個Web。

---

既然旁人都看不下去了，因為有看到人評論 @王德福 「還是別太早下定論，大家已經見識了知乎的威力了...」，雖然平時比較低調，作為受害人（之一？）還是得說幾句。很顯然 @李佳怡 的 underscore 源碼解析是抄（借鑒？）我的 repo hanzichi/underscore-analysis ，一開始我覺得自己的解析被別人用來學習還是很開心的，但是看到她說「對於上面提到的所有源碼都有我精讀後的完整注釋」，這特么就有些尷尬了。不得不說，前端界真是越來越浮躁了啊，匿了。

感謝 @王德福 兄的打抱不平。

---

GitHub 上面前端代碼非常非常多，但是值得閱讀的代碼其實並不多，特別是不少 repo 都需要掌握領域相關的前置知識才方便閱讀，比如 DOM 操作、HTTP 協議等。閱讀這些代碼當然也可以有收穫，但是性價比不高，除非就是想學習這些方面的知識。

通用代碼是很適合閱讀的，lodash/lodash 是個不錯的選擇。代碼風格算是前端領域裡的一股清流了。可以從 第一次提交 開始閱讀，一共也就幾十個函數，300 多行代碼，去除注釋就更少了。把這些函數的實現搞懂之後，繼續看下一個 commit，按照時間順序從最早的開始閱讀。

當然直接讀代碼其實算不上非常高效的方式，更好的方式是看 蕭井陌 的直播

我在 B 站的代碼直播間（會定時直播寫各種主題的代碼）

我的 B 站編程直播間說明(每周 1 3 5 晚 6.20 - 7.00 播)

B 站地址 蕭井陌的投稿視頻 - 蕭井陌 - 嗶哩嗶哩直播。

儘管是用遊戲來展現如何寫程序，但是因為從零開始寫遊戲，所以並不需要遊戲方面的前置知識。

直播有一個非常明顯的好處，可以一步一步看著如何錘鍊代碼，觀看優秀代碼的形成過程，這個過程非常重要，只看成品的收穫畢竟有限，因為並不知道如何從零開始產出這個成品

---

作為前端想要通過讀 js 代碼來提高，那當然是我的「直播編程寫遊戲」系列直播視頻了，地址如下

蕭井陌的錄播視頻 ( ゜- ゜)つロ 乾杯~ Bilibili

---

這個直播的內容和價值

雖說掛的是「編程寫遊戲」的招牌，實際上內容講的是程序設計、代碼抽象

這樣的通用能力對於年薪 30w 以下的程序員都會有幫助（價值大小取決於你本身的能力）

因為我是從最簡單的程序開始步進式寫代碼並重構的，所以你可以完整看到所有流程和代碼變化，這些知識你是不能從文章、代碼中看到的（那些都是離散的知識點，只有結論沒有原因和過程）

即便在互聯網中，應該也找不到講類似知識的視頻，所以獨特且稀缺

---

更多詳情可參考下面鏈接：

蕭井陌：如何看待蕭井陌在 B 站直播寫代碼的行為？

---

同意讀你正在用的庫和框架的代碼

從最小的庫開始或者框架從最初的版本開始讀

讀這些東西，剛開始有些痛苦，但是收益還是很明顯的

能夠了解別人如何寫庫和框架，為自己寫這部分的東西打下基礎

能夠更清楚自己正在使用的技術的運行機制，也方便debug

剛用一段時間react,你看我昨天調試了半天react 源碼，剛初步了解了組件的渲染過程，下一步再調試一下更新過程，哎，整個components的生命周期基本上就了解個差不多了

然後你再對比react 官方文檔里的說明，你會體會更深，其實組件這個東西，你會發現react組件和我們自定義組件方式差不多，就是封裝成函數，加些參數。

比如你會看到Object.freeze(props)和Object.freeze(element)，就明白為什麼props只讀，為什麼組件不能添加移除屬性。

看到render何時執行，componentDidMount何時執行

會看到react 如何使用Transaction 來處理內部機制運轉

收益還是很可觀的，反正我不看源碼，不了解運行機制，我心裡一直煩躁，懵逼，看了之後心情舒暢

---

不去寫lib的話不用去看JS的代碼。lib里有太多奇技淫巧的東西是工程毒瘤，不適合用到常規前端開發上。

Javascript本身就是一個多年打補丁的產物：原本是一門簡單的腳本語言，但是被近20年web的大發展帶動，背負了太多的責任。很多玩意Javascript原本不支持，於是開發社區和瀏覽器上加上了一票hack，發展到今天這些hack竟已經成為Javascript最基本的東西了，比如命名空間，比如用原型鏈模仿繼承。和其他一開始就把現代語言特性考慮進去的腳本語言比如Ruby和Python，Javascript讓我感覺就像是造在沙子上的大廈。

但Ruby和Python不能用來寫web前端，所以Javascript還得用。用就用，前端代碼要寫的乾淨點，underscore, Promise之類用起來要毫不猶豫，但是裡面的技巧不要拿出來秀。說難聽點好了：web前端講究的就是agile，快速原型、快速迭代、快速發布，頁面源碼里越乾淨越好，沒人有空研究你的Javascript技巧有多高。

---

推薦Q，比較常用的promise庫，其中官方git有promise的設計模式https://github.com/kriskowal/q/tree/v1/design

可以看到js函數編程的一方面

至今沒有出現angular，不推薦，根本看不懂

前端人員，所以就不用看Node之類的對吧

---

說一個比較冷門的 minimist。這是一個命令行解析模塊。大家老用 npm、gulp、webpack這些命令行工具，有思考過怎麼做一個用戶體驗好的命令行工具嗎？了解 minimist 是個不錯的起點。

---

express，koa，它們所依賴的模塊，以及這兩者的各種中間件

node的stream，以及其它常用模塊的

小點的lodash，promise，axios也都可以

不過不要為了讀源碼而讀，而是在遇到問題想弄清楚的時候，去找相應的源碼讀

---

underscore非常值得看，不僅能學到一些函數式編程的概念，也能深化js一些認識，個人寫的源碼分析：undersercore源碼分析，歡迎拍磚

---

多多益善。

到現在為止讀了

jq，iscroll，swiper，react，reactdnd，redux，reactredux，webpack。

感覺webpack源碼幫助最大。

---

推薦2+1個

jquery

lodash

moment

---

推薦閱讀：