Wei
## 前言 本文适合有一定 Promise 使用基础的读者，如果你还没有使用过 Promise，建议先通过以下教程了解 Promise 的使用方法 1. [JavaScript Promise迷你书（中文版）](http://liubin.org/promises-book/#resolve-thenable) 2. [Promise 对象 - ECMAScript 6 入门](http://es6.ruanyifeng.com/#docs/promise) 本篇文章中我们要分析的 Promise 实现库的源码是 [es6-promise](https://github.com/stefanpenner/es6-promise)，一个通过了 [Promises/A+ Tests](https://github.com/promises-aplus/promises-tests) 的 polyfill，源码通过 ES6 书写比较简洁。**为方便理解，放上我已经写了注释的仓库地址：[es6-promise-annotated](https://github.com/fi3ework/es6-promise-annotated)，可以配合阅读。** ## 源码分析...
# 简要分析前端代码从 Babel 编译到打包的流程 ## Babel 目前前端代码的编译器基本都是 Babel，更确切地说是源码到源码的编译器，通常也叫做“转换编译器（transpiler）”。 意思是说你为 Babel 提供一些 JavaScript 代码，Babel 更改这些代码，然后返回给你新生成的代码。实际上 Babel 就是完成了"ES6 代码的字符串 -> ES5 代码的字符串"的转化，虽然输入输出都字符串，但是整个过程需要经历三个阶段： 1. 解析 [Babylon](https://link.juejin.im/?target=https%3A%2F%2Fgithub.com%2Fbabel%2Fbabylon) 解析和理解 JavaScript 代码 2. 变换 [babel-traverse](https://link.juejin.im/?target=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fbabel-traverse) 分析和修改...
## 主题 1. [One Dark Pro](https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme) 来自 Atom 的配色，非常舒服，而且配色非常细致，一些浏览器内置的函数（比如 getElementsByTags）会与普通的函数的配色不同，减少出错的可能。 2. [Material Icon Theme](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme) Material Design 的图标配色，全面+漂亮。 3. [Dracula Official](https://marketplace.visualstudio.com/items?itemName=dracula-theme.theme-dracula) 很有名的Dracula 主题。 4. [Eva Theme](https://marketplace.visualstudio.com/items?itemName=fisheva.eva-theme) 有点像 One Dark Pro，也挺好看的。 ##...
作为一个基本上只会 push 和 pull 的还依赖于 SourceTree 的 git 弱渣，随手记录一下自己主要使用的 git 命令，让自己以后找起来更方便🙄 ### 修正最后一个 commit 消息 **场景**：你在最后一条 commit 消息里有个笔误，已经执行了 `git commit -m "Fxies bug #42"`，但在`git push` 之前你意识到消息应该是 “Fixes bug #42″。 **方法**：`git...
- [x] 策略模式（Strategy） - [ ] 状态模式（State） - [x] 责任链模式（Chain of Responsibility） - [ ] 解释器模式（Interpreter） - [ ] 命令模式（Command） - [ ] 观察者模式（Observer） - [ ] 备忘录模式（Memento） - [x]...
- [ ] 工厂方法模式（Factory Method） - [ ] 抽象工厂模式（Abstract Factory） - [ ] 创建者模式（Builder） - [ ] 原型模式（Prototype） - [x] 单例模式（Singleton）
- [ ] 外观模式/门面模式（Facade） - [ ] 适配器模式（Adapter） - [x] 代理模式（Proxy） - [ ] 装饰模式（Decorator） - [ ] 桥接模式（Bridge） - [ ] 组合模式（Composite） - [ ] 享元模式（Flyweight）
原文地址：[A Simple React Router v4 Tutorial](https://medium.com/@pshrmn/a-simple-react-router-v4-tutorial-7f23ff27adf) React Router v4 是一个完全使用 React 重写的流行的 React 包，之前版本的 React Router 版本配置是使用伪组件也很晦涩难懂。现在 v4 版本的 React Router，所有的东西都 “仅仅是组件”。 在这个教程中，我们将建立一个本地的 "运动队" 页面，我们将完成所有的基本需求来建立我们的网站和路由，这包括： 1. 选择 `router`。 2. 创建...
## 前言 前段时间在看这篇文章 [[译] React性能优化-虚拟Dom原理浅析](http://wuyuying.com/blog/archives/optimizing-react-virtual-dom-explained/) 时发现了一些非常有意思的知识点，之前并没有考虑过，大家可以先看一下这篇文章，写的非常好，翻译的也很好。本文将对其中涉及到 unmount & re-mount 的地方展开分析。 ## JSX的作用 在展开讲之前，我们先重新了解 JSX，JSX 并不审美，它只是一个弱弱的语法糖，所谓语法糖： > **语法糖**（Syntactic sugar），也译为糖衣**语法**，是由英国计算机科学家彼得·蘭丁发明的一个术语，指计算机语言中添加的某种**语法**，这种**语法**对语言的功能没有影响，但是更方便程序员使用。 **语法糖**让程序更加简洁，有更高的可读性。 看下 Babel 对 JSX 的转义就知道了。 JSX 代码如下： ```jsx const Button =...
增加打赏
**提出你对主题的建议（Suggest your idea）** **提出你觉得可行的解决方案 [可选]（Describe the solution you'd like）** **提出其他的你考虑到的点（Describe alternatives you've considered）** **其他**