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