一个优秀的前端工程师，必先是个优秀的工程师；一个优秀的工程师，要为自己写的每一行代码负责，要为自己提交的每一个 commit 负责。话虽这么说，但是不想写一篇十分大而全的文章，就想写一些小东西。

一个优秀的工程师，必先是个优秀的程序员，一个优秀的程序员，必先是个优秀的人。这篇文章并不讲述如何在短时间内拿到 offer，而是讲述我作为一个普通的技术人，如何将面试当作人生规划的一部分，一步一步达到自己的目标。其时间跨度是一年、三年、五年，而不是一个月、两个月。

### 导读 这篇文章是对Git Pro 10.2 Git 内部原理 - Git 对象章节的解读和转化，主要介绍两个东西：1）使用 Git 底层命令完成提交，2）尝试使用 NodeJS 解析 Git 对象（文章中提供的是 Ruby）。

讲git的文章很多，但是大部分都是一个套路，讲概念，讲命令，太多的概念和命令总是让人有一种稀里糊涂的感觉，讲的很对，但似乎没能讲透，没有醍醐灌顶的感觉，大概是我的悟性差吧。所以这几天一直在做各种git的实验，并且阅读了一些博客、文档、资料，综合下来整理出了这么一篇文章。注意：

0x000 概述 最近专注于 HTTP 的学习，这篇文章浅谈一下我学习 HTTP 过程中的心得，当作过渡性总结。如果能对各位有所帮助，最好不过。 0x001 HTTP 协议 说起 HTTP，自然逃不过 HTTP 协议本身，以下是我的学习资料： 《图解 HTTP》 《HTTP 权威指南》 http/0.9 http/1.0 http/1.1 系列 从 0.9 到 QUIC 《图解 HTTP》是入...

近期重新开始学习计算机基础方面的东西，比如计算机组成原理、网络原理、编译原理之类的东西，目前正好在学习编译原理，开始对这一块的东西感兴趣，但是理论的学习有点枯燥无味，决定换种方式，那就是先实践、遇到问题尝试解决，用实践推动理论。原本打算写个中文JS解析的，但是好像有点难，需要慢慢实现，于是就找个简...

0x000 概述 高阶函数组件...还是一个函数，和函数组件不同的是他返回了一个完整的组件...他返回了一个class！！！ 0x001 直接上栗子 照常，先写个App组件，外部传入一个theme {代码...} 写一个函数，传入一个组件返回新的一个类组件，新的类组件渲染了传入的组件，并添加theme到传入的组件中 {代码...} 调用组件 {代码.....

0x000 概述 函数组件其实就是一个函数，一个render函数。 0x001 栗子 源码 {代码...} 效果 更加精简一点借用箭头函数和参数解构 {代码...} 注意： 没有this 没有生命周期 只有一个参数：props（如果打印参数列表会发现有两个参数，第二个参数是context，但是context的api已经发生改变，所以，第二个参数应该是遗留下来的...

在React中，并不是任何时候都可以访问Dom的，需要讲究时机。因为React中的组件存在生命周期，必须要在Dom 挂载之后的生命周期才能访问到Dom，也就是componetnDidMount之后

如上的PortalComp就是一个Portal，写在PortalComp中间的组件将被挂载到PortalComp的props.children，所以在PortalComp中可以使用props.children访问。

0x001 引出问题 让我们先来看一个栗子： {代码...} 上面的栗子中的render返回了两个同级h1，编译的时候将会看到一个报错: {代码...} jsx只能返回一个闭合的tag，比如 {代码...} 或者： {代码...} 又或者： {代码...} 总的来说，只能返回一个根元素，但是实际中总会遇到奇特的场景，希望可以返回多个，栗子： {代码...} ...

先上栗子，我们需要在Topbar中用到theme，但是theme必须从最外层传入，所以必须从最外层传入App，再传入TopBar，这只传递了两次，但是如果全部组件都需要theme呢？或者有一个非常深的组件需要theme，而中间的大部分组件都不需要theme呢？为了传递这个theme必须一层一层的传递下去，有点难受。

我们都知道，js总是一直存在着兼容性问题，虽然其他语言也存在着兼容性问题，比如c++、java，但那种兼容性是新特性在旧版本上的不兼容，js则存在着各种奇形怪哉的不兼容。这其中有着非常复杂的历史和时代的原因，并不加以累述。而解决兼容性问题的方法在以前只存在一种，那就是polyfill。先说什么是polyfill，比如我们想...

Promise是一个异步编程的解决方案，他经常和ajax一起出现，导致很多人以为Promise是一种新的网络请求技术，其实不然。Promise是一种思考方式、编程方式。

0x000 概述 Symbol是es6新的基本数据类型，所以es之后的数据类型如下： 基本数据类型： Boolean Null Undefined Number String Symbol 引用类型 Object 0x001 Symbol() 语法 {代码...} description：描述，可选字符串 例子 {代码...} 说明：使用Symbol()初始化的变量是完全不同的两个变量，description只是一个描述而已...

反射提供了一系列的静态函数，可以使用Reflect.function_name(...prams)调用，这一系列的方法和代理的处理器对象方法一致

0x000 概述 代理嘛，就是请代理人代替自己做某件事，但是和自己不一样的是代理人可以有自己的行为，甚至可以做出和预期相违背的行为。 0x001 栗子 声明一个普通对象origin，他有一个属性name {代码...} 声明一个代理对象 {代码...} 此时输出origin和proxy，可以发现，proxy拥有和origin一样的name属性 {代码...} 为origi...

0x000 概述 模块化是一个大型项目的必然趋势。 0x001 命名导出 可以使用export关键字，导出你要导出的东西，可以导出常量、变量、函数、类, {代码...} 0x002 命名导入 命名导入需要使用{}包裹，可以同时导入多个命名导出 {代码...} 0x003 默认导出 默认导出可以使用default关键字，可以匿名导出 {代码...} 0x004 默认导...

es6真正的引入的面相对象的类，以前我们总是通过其他手段来模拟类这种形式，现在终于有了，我有点开心，又有点难过，因为在我看来，js并不是所谓的面相对象的语言，反而更偏向函数式，原型继承是他真正的面目。面相对象不过是人们在思考问题时总结出一套有效的、大家都认同的解决问题的思路。在其他语言、各种领域取得成...

0x001 Math Math更新了几个方法，但是一般情况下没有太大的用处 反双曲线函数，返回一个数字的反双曲余弦值 {代码...} 算数平方根函数，返回所有参数的算术平方根 {代码...} 类C的32位整数乘法运算函数 {代码...} 0x002 Number Number.EPSILON该常量表示1与Number可表示的大于1的最小的浮点数之间的差值，那有什么用呢？...

其实前几章我都不知道怎么写，因为他们总是涉及到一些比较深的东西，比如可迭代对象、生成器、迭代器之类的东西，等写完这个系列，再好好整理一下这些东西可能会好一点，现在整理到哪儿就写到哪儿吧

for...of是一个迭代可迭代对象的方式，可迭代对象包括Array、Map、Set、String、TypedArray、arguments 对象等等

0x000 概述 WeakMap和Map使用上类似，在特性上和Set类似，和Map相比，有一下特点 不可枚举 WeakMap的key只能是对象 WeakMap是弱引用，WeakMap内的key如果没有引用，将会被垃圾回收机制回收 0x001 初始化 {代码...} 0x002 添加 {代码...} 0x003 删除 {代码...} 0x004 包含 {代码...} 0x005 弱引用特性 {代码...}

0x000 概述 WeakSet和Set差不多，但是有一些不同： WeakSet只能存储对象，不能存储任意值 WeakSet不可迭代 WeakSet是弱引用，也就是如果没有变量引用WeakSet内的值，很容易被回收 0x001 初始化 {代码...} 因为只能存储对象，所以这里我想只能传入类似对象数组之类的东西 对象数组 {代码...} 0x002 添加 {代码...} 0x003 ...

Map也是一个新的数据结构，在js中其实也经常用到，比如下面的栗子，我们经常这么使用一个对象，与其说他是对象，其实他更像一个Map，但是比起真正的Map，这个还是有点弱了，

初始化一个Set有一个可选的参数，这个参数必须是一个可迭代的对象，可迭代对象包括String、Array、Array-Like obejct(Arguments、NodeList)、Typped Array、Set、Map和用户定义的可迭代对象

0x000 概述 在es6中，对象字面量的语法被增强了 0x001 更短的属性声明 如果属性的属性名和属性值引用的变量名一致，可以直接省略 {代码...} 0x002 更短的函数声明 如果属性的属性名和属性值（函数）的函数名一致或者属性值（函数）没有函数名，可以省略function关键字和属性名 {代码...} 0x003 可动态计算的属性名 属性...

0x000 概述 模板字符串出来以后，单引号、双引号哪个好的争论可以退出历史舞台的，模板字符串的`最好！ 0x001 语法 单行文本 {代码...} 多行文本 {代码...} 内嵌表达式 {代码...} 标签语法（不太喜欢） {代码...} 0x002 单行文本 完全不 care 单引号和双引号，当然，转义`是不可避免的，有所得必有所失去嘛 {代码...} 0x...

实不相瞒，解构赋值非常叼，特别是和其他es6一起使用的时候，那如何简单的说解构赋值呢，打个比方：解构赋值就是一个硬币拆分机，将所有的一毛、五毛、一块硬币投入硬币拆分机，他就自动将所有的硬币分好了，拿出你要的就行了！

0x000 概述 展开符号真的是一个非常好用的东西，我常用于字符串分割、数组合并、数组拷贝、对象合并、对象拷贝。 0x001 语法 {代码...} 0x002 函数调用的时候参数展开 这是在函数调用的时候，将参数展开，和剩余参数有区别，剩余参数是在函数声明中使用 {代码...} 案例 {代码...} 0x003 数组声明展开 可用于数组合并 {代...