閱讀js源碼工具

① 如何閱讀別人網頁里的JS源碼

打開開發者工具，在elements裡面看導入了哪些js文件
在source裡面看這些的js文件就可以了。
或者在network里監測接收到哪些js文件。

② 哪些JavaScript 框架的源代碼最值得閱讀和學習

RubyLouvre/avalon · GitHub Object.defineProperty的極致使用及各種黑魔法

knockout/knockout · GitHub 觀察者模式的極致使用

jakearchibald/es6-promise · GitHub 目前最好的Promise實現

Polymer/observe-js 路 GitHub 強大的狀態機與最短編輯長度演算法

jquery/jquery · GitHub 最強的DOM兼容處理

③ 3. threejs源碼閱讀——math/euler

把Euler和Quaternion放在一起是因為他們都是跟旋轉相關的類（雖然Matrix也可以做旋轉，不過這里我們還是把歐拉和四元數單獨拿出來說）

首先來回顧一下歐拉角和四元數的幾個區別，這里不做詳細展開，有興趣的同學可以自己查查額外的資料：

這里再多提一句矩陣旋轉：

上面寫了那麼多，看起來我好像很偏袒四元數似的。確實，四元數在某些情況下非常好用，比如一個物體A繞著物體B的正方向軸做公轉的問題，只需一個正方向向量就可以輕松構建出四元數並解決這個問題。但在一些常見的簡單業務場景，比如物體繞著自身坐標系中某個軸自轉，完全可以用更直觀更簡單的歐拉旋轉來編寫邏輯。

不過說一千道一萬，threejs中的物體旋轉底層邏輯是用四元數解決的，矩陣和歐拉旋轉都只是一個表象。等我們分析到Object3D時會看到。

先來看看比較簡單的歐拉旋轉類。

通過構造函數我們可以知道，threejs中的歐拉角是默認按照XYZ軸的順序進行旋轉計算的，比較符合大多數人的習慣。除了構造函數外，歐拉對象還有其他的賦值方式：

但無論是哪種方式，我們可以看到順序都是必須要確定的。這里order是個可選參數，默認還是使用XYZ這個順序。

setFromVector3比較好理解，使用了三維向量的XYZ的值直接定義了XYZ軸上的旋轉角度：

setFromQuaternion和setFromRotationMatrix其實是一回事，最後都會調用setFromRotationMatrix。

在四元數賦值時，先把四元數轉換成了一個旋轉矩陣：

compose的方法中的具體邏輯就不贅述了，總之我們只要記住：

在setFromRotationMatrix中，我們可以看到threejs是如何通過旋轉矩陣來計算歐拉旋轉的。因為歐拉旋轉本身是跟順序相關的，所以內部有大量的cases判斷

最後我們發現會有一個參數是否控制回調函數_onChangeCallback()，不過這個參數一直是undefined，也就是說這個回調函數會被調用。

查找發現這個回調函數默認情況下啥都沒有，但是可以通過_onChange方法賦值。也許後面會用到，我們暫時放在一旁不管。

歐拉旋轉默認代表沿XYZ軸分別旋轉3個角度

歐拉旋轉可以用四元數、向量或矩陣賦值，用四元數會先轉換成位置000縮放111的4x4變換矩陣，再用矩陣賦值。

④ 如何閱讀Vuejs源碼，學習筆記

1. # 下載最新的vue$ npm install vue

2. js 引用 vue.js

3. 開始代碼，感受vue強大的雙向數據綁定

實戰代碼：

Vue整個生命周期示意圖：