js源碼閱讀
1. 如何閱讀Vuejs源碼，學習筆記
# 下載最新的vue$ npm install vue
js 引用 vue.js
開始代碼，感受vue強大的雙向數據綁定
實戰代碼：
<divid="app"><inputv-model="newTodo"v-on:keyup.enter="addTodo"><ul><liv-for="todointodos"><span>{{todo.text}}</span><buttonv-on:click="removeTodo($index)">X</button></li></ul></div>newVue({el:'#app',data:{newTodo:'',todos:[{text:'Addsometodos'}]},methods:{addTodo:function(){vartext=this.newTodo.trim()if(text){this.todos.push({text:text})this.newTodo=''}},removeTodo:function(index){this.todos.splice(index,1)}}})Vue整個生命周期示意圖：
2. 哪些JavaScript 框架的源代碼最值得閱讀和學習
推薦順序：
underscore.js:一個JavaScript實用庫，提供了一整套工具方法，github上有帶注釋的源碼，一千多行。學習一下封裝那些常用api的最佳實踐。
zepto.js:jquery的移動版？源碼也不多
backbone.js: 兩千多行的MVC框架，在閱讀angular源碼之前先閱讀一個經典而輕量的backbone吧
這三個是開始閱讀源碼比較推薦的，除此之外可以看一些UI框架，一些經典輪子之類的，比如閱讀fastclick這種，學習一波手勢與事件
3. 如何閱讀別人網頁里的JS源碼
打開開發者工具，在elements裡面看導入了哪些js文件
在戚型粗source裡面看這些的js文件就可以高鎮了。
或者在network里監測接收到哪些js文件。租唯
4. 怎麼閱讀node.js 模塊的源代碼
Node.js的初始化調用鏈是這樣的, main -> Start -> CreateEnvironment -> Load,
在Start過程中啟用了event loop
int Start(int argc, char** argv) {
...
Locker locker(node_isolate);
Environment* env =
CreateEnvironment(node_isolate, argc, argv, exec_argc, exec_argv);
// This Context::Scope is here so EnableDebug() can look up the current
// environment with Environment::GetCurrentChecked().
// TODO(bnoordhuis) Reorder the debugger initialization logic so it can
// be removed.
Context::Scope context_scope(env->context());
* uv_run(env->event_loop(), UV_RUN_DEFAULT);
EmitExit(env);
RunAtExit(env);
env->Dispose();
env = NULL;
...
}
在node:Load載入了node.js, node.js負責初始化Node.js, 包括初始化全局變數和函數, 如setTimeout, nextTick等.
Node.js模塊
Node.js中, 模塊是通過require來載入的, 而其背後的實現在src/node.js中.
NativeMole.require首先檢測模塊是否在緩存中(已經被require的模塊就會緩存), 如果沒有則讀取該模塊文件內容, 並在當前上下文中執行.
讀取模塊文件內容使用NativeMole._sources,
NativeMole.getSource = function(id) {
return NativeMole._source[id];
}
而NativeMole._sources是通過process.binding獲取的
NativeMole._source = process.binding('natives');
和讀取模塊內容一樣, 在當前上下文執行代碼最終也是通過process.binding獲取背後的黑盒來實現的.
5. Three.js源碼解讀一：Object3D
可能很多同學會發現，學習Three.js的API非常容易，但是真正理解API的作用卻非常難。其實讓大家感到難的並不是Three.js本身，而是Three.js背後所隱藏的3D圖形學知識。本系列Three.js源碼解讀文章，會幫你一邊補齊3D圖形學的基礎知識，一邊真正理解到Three.js的實現原理，知其然，知其所以然。
Object3D是ThreeJS中大部分物體的基類，它包含了物體的位移，旋轉，縮放，以及各個物體父子關系的js實現。選取Object3D幾個重要的屬性做解釋：
一個3D對象往往由多個父子對象組成，父對象的位移, 旋轉, 縮放會傳遞給所有的子對象。
this.parent指向父對象，this.children包含了所有的子對象。
通過 add 為物體添加子對象。需要注意的是，如果該子對象有其他的父對象，會先解除子對象和舊的父對象的父子關系，然後將子對象添加到新的父對象中。
this.matrix表示物體自身的本地形變，this.matrixWorld表示物體的全局形變。當物體沒有父對象時，全局形變就是本地形變。
為什麼對象組合這么重要呢？看下面的例子：
這兩個立方體共同組成了一個3D對象，下面的立方體為禪祥段底座，上面的立方體為操作臂。當底座轉動的時候，操作臂會同樣轉動，所以操作臂的形變會傳遞給底座。當操作宴御臂旋轉時，底座不會被影響。
這里，底座就是操作臂的父對象。只要簡單的將底座的全局形變(this.parent.matrixWorld)和操作臂的本地形變賀譽(this.matrix)相乘，就能得到操作臂的最終形變。是不是很方便？
3D物體的位移，旋轉，縮放都可以通過矩陣表示。其中，旋轉除了通過矩陣，還可以通過歐拉角和四元數表示。
Object3D的rotation代表物體旋轉的歐拉角表示，quaternion代表了四元數表示，他們是3D物體統一旋轉的不同數學表達方式。(矩陣，歐拉角，四元數表示旋轉
onRotationChange , onQuaternionChange 這兩個回調用於同步歐拉角和四元數，保證他們代表著相同的旋轉角度。
3D交互一個很大一部分工作量是需要在物體的本地空間( this.matrix )和世界空間( this.matrixWorld )進行坐標轉換。
6. 你在閱讀js開源項目源碼的時候見過哪些高級寫法
你在閱讀js開源項目源碼的時候見過哪些高級寫法？
晚上非常閑的無聊的幫友稿握組里另外一個老哥解決一個非敬源常簡單的js問題。我居然更閑的無聊的看了bootstrap源碼然後轉到jquery源碼然後看了ace的example並且吐槽了一下ace文檔實在是爛如何發現作者幾年前就沒有更新了，最後回過頭來突然想看他ajax怎麼寫的，然後一臉懵逼的發現其實是dataTable的問題，查了文檔解決了。事實告訴我好慶們，不要在自己不熟悉的領域xjb解決問題，因為，你自己的bug還沒修
2019年度:Webassembly，ServerLess，寫個Flutter，Taro玩個小程序，學會rxjs，熟悉docker、熟悉k8s，看next.js源碼，golang