├── 2017
    ├── ES6变量命名方式以及块级作用域.md
    ├── Hello2018.md
    ├── JavaScript基础心法——call apply bind.md
    ├── JavaScript基础心法——this.md
    ├── JavaScript基础心法——数据类型.md
    ├── JavaScript基础心法——深浅拷贝.md
    ├── JavaScript数据结构及算法——排序.md
    ├── JavaScript数据结构及算法——查找.md
    ├── React V15.6 实现一个简单的个人博客.md
    ├── React中state和props分别是什么？.md
    ├── React的生命周期到底是怎么一回事？.md
    ├── 关于浏览器缓存我知道多少.md
    ├── 原生JS实现最简单的图片懒加载.md
    └── 用React实现一个简易的TodoList.md
├── 2018
    └── JavaScript复制内容到剪贴板.md
├── 2019
    ├── ES2019.md
    ├── JavaScript 判断 iPhone X Series 机型.md
    ├── TypeScript Start: 什么是 TypeScript.md
    ├── TypeScript Start：基础类型.md
    ├── quill 富文本编辑器自定义格式化.md
    ├── webpack loader 从上手到理解系列：file-loader.md
    ├── webpack loader 从上手到理解系列：style-loader.md
    ├── webpack loader 从上手到理解系列：url-loader.md
    ├── webpack loader 从上手到理解系列：vue-loader（一）.md
    ├── 初学 babel.md
    └── 前端工程师都得掌握的 webpack Loader.md
├── 2020
    ├── babel_require.md
    └── list.md
├── README.md
└── images
    ├── ast-demo.png
    ├── avatar.png
    ├── babel-banner.png
    ├── babel-try.png
    ├── es-finished-proposals.png
    ├── quill_format.png
    ├── quill_template.png
    ├── quill_toolbar.png
    ├── weixin.png
    ├── yearly-arrow.png
    └── yearly-logo.png


/2017/ES6变量命名方式以及块级作用域.md:
--------------------------------------------------------------------------------
  1 | 买的《深入理解es6》终于到手了，赶紧看起来。。
  2 | 
  3 | ## var声明及变量提升机制
  4 | 
  5 | 在ES6之前，在函数作用域中或者全局作用域中通过`var`关键字来声明变量，无论是在代码的哪个位置，这条声明语句都会提到最顶部来执行，这就是变量声明提升。
  6 | 
  7 | 注意：**只是声明提升，初始化并没有提升。**
  8 | 
  9 | 看一个例子：
 10 | 
 11 | ```javascript
 12 | function getStudent(name){
 13 |   if(name){
 14 |     var age=25;
 15 |   }else{
 16 |     console.log("name不存在");      
 17 |   }
 18 |   console.log(age); //undefined
 19 | }
 20 | ```
 21 | 
 22 | 如果按照预想的代码的执行顺序，当`name`有值时才会创建变量`age`，可是执行代码发现，即使不传入`name`，判断语句外的输出语句并没有报错，而是输出`undefined`。
 23 | 
 24 | 这就是变量声明提升。
 25 | 
 26 | ## 块级声明
 27 | 
 28 | ES6前是没有块级作用域的，比如`{}`外可以访问内部的变量。
 29 | 
 30 | ### let声明
 31 | 
 32 | - 声明变量
 33 | - 作用域限制在当前代码块
 34 | - 声明不会提升
 35 | - 禁止重声明（同一作用域不行，可以覆盖外部同名变量）
 36 | 
 37 | ```javascript
 38 | function getStudent(name){
 39 |   if(name){
 40 |     let age=25;
 41 |     console.log(age); //25
 42 |   }else{
 43 |     console.log("name不存在");      
 44 |   }
 45 |   console.log(age); //age is not defined
 46 | }
 47 | ```
 48 | 
 49 | 和上文一样的代码，只是将`age`的命名关键字从`var`改成了`let`，在执行`getStudent()`和`getStudent("axuebin")`时都会报错。
 50 | 
 51 | 原因：
 52 | 
 53 | - 在if语句内部执行之后，`age`变量将立即被销毁
 54 | - 如果`name`为空，则永远都不会创建`age`变量
 55 | 
 56 | ### const声明
 57 | 
 58 | - 声明常量
 59 | - 必须初始化
 60 | - 不可更改
 61 | - 作用域限制在当前代码块
 62 | - 声明不会提升
 63 | - 禁止重声明（同一作用域不行，可以覆盖外部同名变量）
 64 | 
 65 | 如果用`const`来声明对象，则**对象中**的值可以修改。
 66 | 
 67 | ### 临时死区（Temporal Dead Zone）
 68 | 
 69 | JavaScript引擎在扫面代码发现声明变量时，遇到`var`则提升到作用域顶部，遇到`let`和`const`则放到TDZ中。当执行了变量声明语句后，TDZ中的变量才能正常访问。
 70 | 
 71 | ## 循环中的块作用域绑定
 72 | 
 73 | 我们经常使用for循环：
 74 | 
 75 | ```javascript
 76 | for(var i=0;i<10;i++){
 77 |   console.log(i); //0,1,2,3,4,5,6,7,8,9
 78 | }
 79 | console.log(i) //10
 80 | ```
 81 | 
 82 | 发现了什么？
 83 | 
 84 | 在for循环执行后，我们仍然可以访问到变量`i`。
 85 | 
 86 | So easy ~ 把`var`换成`let`就解决了~
 87 | 
 88 | ```javascript
 89 | for(let i=0;i<10;i++){
 90 |   console.log(i); //0,1,2,3,4,5,6,7,8,9
 91 | }
 92 | console.log(i) //i is not defined
 93 | ```
 94 | 
 95 | 还记得当初讲闭包时setTimeout循环各一秒输出i的那个例子吗~
 96 | 
 97 | 曾经熟悉的你 ~ 
 98 | 
 99 | ```javascript
100 | for(var i=0;i<10;i++){
101 |   setTimeout(function(){
102 |     console.log(i); //10,10,10.....
103 |   },1000)
104 | }
105 | ```
106 | 
107 | 很显然，上面的代码输出了10次的10，`setTimeout`在执行了循环之后才执行，此时`i`已经是10了~
108 | 
109 | 之前，我们这样做 ~
110 | 
111 | ```javascript
112 | for(var i=0;i<10;i++){
113 |   setTimeout((function(i){
114 |     console.log(i); //0,1,2,3,4,5,6,7,8,9
115 |   })(i),1000)
116 | }
117 | ```
118 | 
119 | 现在，我们这样做 ~ 来看看把`var`改成`let`会怎样~
120 | 
121 | ```javascript
122 | for(let i=0;i<10;i++){
123 |   setTimeout(function(){
124 |     console.log(i); //0,1,2,3,4,5,6,7,8,9
125 |   },1000)
126 | }
127 | ```
128 | 
129 | nice~
130 | 
131 | ## 全局块作用域绑定
132 | 
133 | 在全局作用域下声明的时
134 | 
135 | - `var`会覆盖window对象中的属性
136 | - `let`和`const`会屏蔽，而不是覆盖，用`window.`还能访问到


--------------------------------------------------------------------------------
/2017/Hello2018.md:
--------------------------------------------------------------------------------
 1 | 2017也就这样过去了，有失有得。
 2 | 
 3 | ## 2017
 4 | 
 5 | 看了看app中2017年的 `todoList`
 6 | 
 7 | ### 写作方面
 8 | 
 9 | 年初定的目标是：
10 | 
11 | - 50篇博客
12 | - 开始写公众号，有第一个粉丝
13 | 
14 | 数了数  [http://axuebin.com/blog](http://axuebin.com/blog) 里的也不够，更别说满意的文章了。
15 | 
16 | 意料之外的是靠着一篇水文 [https://github.com/axuebin/articles/issues/1](https://github.com/axuebin/articles/issues/1) 收获了 `SF` 的 `Top Writer`。
17 | 
18 | 真正有认真写的可能就是 [https://github.com/axuebin/articles](https://github.com/axuebin/articles) 这里的几篇文章了。
19 | 
20 | 本来想看看 `lodash` 的源码，写一写源码解析的，但是最近在看论文就没心情看这些了。。。
21 | 
22 | ### 工作方面
23 | 
24 | 秋招拿到了满意的 `offer`，算是完成了这个目标了吧。
25 | 
26 | [我的秋招经历，痛并快乐着](https://github.com/axuebin/articles/issues/21)
27 | 
28 | ### 阅读方面
29 | 
30 | - 20本书（每本书要求写读后感，技术书籍记录相关笔记）
31 | 
32 | 想了想，买的书倒是超过20本了，基本还都是编程相关的书。
33 | 
34 | 开心的是终于入了一套《诛仙》，虽然不是原版的。
35 | 
36 | 嗯...有的书基本就是翻翻目录，看看感兴趣的部分，仔细看的数量可能一个手就可以数的过来了，希望来年能找到一个好的节奏多看一些书。
37 | 
38 | ### 摄影方面
39 | 
40 | - 50张看得顺眼的照片
41 | 
42 | 看了看库存，没数有多少张满意的，倒是挑了12张女朋友的照片做了一个日历：
43 | 
44 | ![](http://omufjr5bv.bkt.clouddn.com/2018%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20171231135730.jpg)
45 | 
46 | 其他的一些照片可以看看 [https://500px.me/axuebin](https://500px.me/axuebin) 这里。
47 | 
48 | 最喜欢的照片应该是这几张：
49 | 
50 | 在赶去桥对面想找个好机位拍照的时候突然看到远处有彩虹，马上掏出相机啪了一张。
51 | 
52 | ![](http://omufjr5bv.bkt.clouddn.com/201821140981.jpg)
53 | 
54 | 去九溪打卡的时候低头看看脚下，落叶在阳光下显得格外好看，这样的光影让人着迷。
55 | 
56 | ![](http://omufjr5bv.bkt.clouddn.com/201821147711.jpg)
57 | 
58 | ### 给自己的礼物
59 | 
60 | - FE16-35
61 | - FE55 1.8
62 | - 一双篮球鞋
63 | - 一个背包
64 | 
65 | 哈哈哈哈，这部分算是完成最好的了。。除了广角镜头没有买之外其它都买了，特别喜欢 `FE55 1.8` 的质感，可以多给女朋友拍拍照。
66 | 
67 | 明年争取攒个钱买个全幅相机和广角镜头。
68 | 
69 | ### 旅游
70 | 
71 | 嗯...今年和家人去了一次湖南。其它想去的地方都因为各种原因（其实是没有钱）都没去成，明年希望能去一次香港或者云南。
72 | 
73 | ## 2018
74 | 
75 | 今年的计划没有想得太多，主要就几点：
76 | 
77 | - 顺利毕业
78 | - 好好工作
79 | - 持续学习
80 | - 好好挣钱
81 | - 好好花钱
82 | 
83 | ![](http://omufjr5bv.bkt.clouddn.com/2018plan.png)


--------------------------------------------------------------------------------
/2017/JavaScript基础心法——call apply bind.md:
--------------------------------------------------------------------------------
  1 | 之前[这篇文章](https://github.com/axuebin/articles/issues/6)提到过`this`的各种情况，其中有一种情况就是通过`call`、`apply`、`bind`来将`this`绑定到指定的对象上。
  2 | 
  3 | 也就是说，这三个方法可以改变函数体内部`this`的指向。
  4 | 
  5 | 这三个方法有什么区别呢？分别适合应用在哪些场景中呢？
  6 | 
  7 | 先举个简单的栗子 ~ 
  8 | 
  9 | ```javascript
 10 | var person = {
 11 |   name: "axuebin",
 12 |   age: 25
 13 | };
 14 | function say(job){
 15 |   console.log(this.name+":"+this.age+" "+job);
 16 | }
 17 | say.call(person,"FE"); // axuebin:25 FE
 18 | say.apply(person,["FE"]); // axuebin:25 FE
 19 | var sayPerson = say.bind(person,"FE");
 20 | sayPerson(); // axuebin:25 FE
 21 | ```
 22 | 
 23 | 对于对象`person`而言，并没有`say`这样一个方法，通过`call`/`apply`/`bind`就可以将外部的`say`方法用于这个对象中，其实就是将`say`内部的`this`指向`person`这个对象。
 24 | 
 25 | ## call
 26 | 
 27 | `call`是属于所有`Function`的方法，也就是`Function.prototype.call`。
 28 | 
 29 | > The call() method calls a function with a given this value and arguments provided individually.
 30 | 
 31 | > call() 方法调用一个函数, 其具有一个指定的this值和分别地提供的参数(参数的列表)。
 32 | 
 33 | 它的语法是这样的：
 34 | 
 35 | ```javascript
 36 | fun.call(thisArg[,arg1[,arg2,…]]);
 37 | ```
 38 | 
 39 | 其中，`thisArg`就是`this`指向，`arg`是指定的参数。
 40 | 
 41 | `call`的用处简而言之就是可以让call()中的对象调用当前对象所拥有的function。
 42 | 
 43 | ### ECMAScript规范
 44 | 
 45 | ECMAScript规范中是这样定义`call`的：
 46 | 
 47 | 当以`thisArg`和可选的`arg1`,`arg2`等等作为参数在一个`func`对象上调用`call`方法，采用如下步骤：
 48 | 
 49 | 1. 如果`IsCallable(func)`是`false`, 则抛出一个`TypeError`异常。
 50 | 2. 令`argList`为一个空列表。
 51 | 3. 如果调用这个方法的参数多余一个，则从`arg1`开始以从左到右的顺序将每个参数插入为`argList`的最后一个元素。
 52 | 4. 提供`thisArg`作为`this`值并以`argList`作为参数列表，调用`func`的`[[Call]]`内部方法，返回结果。
 53 | 
 54 | `call`方法的`length`属性是1。
 55 | 
 56 | 在外面传入的`thisArg`值会修改并成为`this`值。`thisArg`是`undefined`或`null`时它会被替换成全局对象，所有其他值会被应用`ToObject`并将结果作为`this`值，这是第三版引入的更改。
 57 | 
 58 | ### 使用call调用函数并且指定this
 59 | 
 60 | ```javascript
 61 | var obj = {
 62 |   a: 1
 63 | }
 64 | function foo(b, c){
 65 |   this.b = b;
 66 |   this.c = c;
 67 |   console.log(this.a + this.b + this.c);
 68 | }
 69 | foo.call(obj,2,3); // 6
 70 | ```
 71 | 
 72 | ### call实现继承
 73 | 
 74 | 在需要实现继承的子类构造函数中，可以通过`call`调用父类构造函数实现继承。
 75 | 
 76 | ```javascript
 77 | function Person(name, age){
 78 |   this.name = name;
 79 |   this.age = age;
 80 |   this.say = function(){
 81 |     console.log(this.name + ":" + this.age);
 82 |   }
 83 | }
 84 | function Student(name, age, job){
 85 |   Person.call(this, name ,age);
 86 |   this.job = job;
 87 |   this.say = function(){
 88 |     console.log(this.name + ":" + this.age + " " + this.job);
 89 |   }
 90 | }
 91 | var me = new Student("axuebin",25,"FE");
 92 | console.log(me.say()); // axuebin:25 FE
 93 | ```
 94 | 
 95 | ## apply
 96 | 
 97 | `apply`也是属于所有`Function`的方法，也就是`Function.prototype.apply`。
 98 | 
 99 | > The apply() method calls a function with a given this value, and arguments provided as an array (or an array-like object).
100 | 
101 | > apply() 方法调用一个函数, 其具有一个指定的this值，以及作为一个数组（或类似数组的对象）提供的参数。
102 | 
103 | 它的语法是这样的：
104 | 
105 | ```javascript
106 | fun.apply(thisArg, [argsArray]);
107 | ```
108 | 
109 | 其中，`thisArg`就是`this`指向，`argsArray`是指定的参数数组。
110 | 
111 | 通过语法就可以看出`call`和`apply`的在参数上的一个区别：
112 | 
113 | - `call`的参数是一个列表，将每个参数一个个列出来
114 | - `apply`的参数是一个数组，将每个参数放到一个数组中
115 | 
116 | ### ECMAScript规范
117 | 
118 | 当以`thisArg`和`argArray`为参数在一个`func`对象上调用`apply`方法，采用如下步骤：
119 | 
120 | 1. 如果`IsCallable(func)`是`false`, 则抛出一个`TypeError`异常 .
121 | 2. 如果`argArray`是`null`或`undefined`, 则
122 |   1. 返回提供`thisArg`作为`this`值并以空参数列表调用`func`的`[[Call]]`内部方法的结果。
123 | 3. 如果`Type(argArray)`不是`Object`, 则抛出一个`TypeError`异常 .
124 | 4. 令`len`为以`"length"`作为参数调用`argArray`的`[[Get]]`内部方法的结果。
125 | 5. 令`n`为`ToUint32(len)`.
126 | 6. 令`argList`为一个空列表 .
127 | 7. 令`index`为0.
128 | 8. 只要`index`<`n`就重复
129 |   1. 令`indexName`为`ToString(index)`.
130 |   2. 令`nextArg`为以`indexName`作为参数调用`argArray`的`[[Get]]`内部方法的结果。
131 |   3. 将`nextArg`作为最后一个元素插入到`argList`里。
132 |   4. 设定`index`为`index + 1`.
133 | 9. 提供`thisArg`作为`this`值并以`argList`作为参数列表，调用`func`的`[[Call]]`内部方法，返回结果。
134 | 
135 | `apply`方法的`length`属性是 2。
136 | 
137 | 在外面传入的`thisArg`值会修改并成为`this`值。`thisArg`是`undefined`或`null`时它会被替换成全局对象，所有其他值会被应用`ToObject`并将结果作为`this`值，这是第三版引入的更改。
138 | 
139 | ### 用法
140 | 
141 | 在用法上`apply`和`call`一样，就不说了。
142 | 
143 | ### 实现一个apply
144 | 
145 | 参考链接：[https://github.com/jawil/blog/issues/16](https://github.com/jawil/blog/issues/16)
146 | 
147 | #### 第一步，绑定上下文
148 | 
149 | ```javascript
150 | Function.prototype.myApply=function(context){
151 |   // 获取调用`myApply`的函数本身，用this获取
152 |   context.fn = this;
153 |   // 执行这个函数
154 |   context.fn();
155 |   // 从上下文中删除函数引用
156 |   delete context.fn;
157 | }
158 | 
159 | var obj ={
160 |   name: "xb",
161 |   getName: function(){
162 |     console.log(this.name);
163 |   }
164 | }
165 | 
166 | var me = {
167 |   name: "axuebin"
168 | }
169 | 
170 | obj.getName(); // xb 
171 | obj.getName.myApply(me); // axuebin
172 | ```
173 | 
174 | 确实成功地将`this`指向了`me`对象，而不是本身的`obj`对象。
175 | 
176 | #### 第二步，给定参数
177 | 
178 | 上文已经提到`apply`需要接受一个参数数组，可以是一个类数组对象，还记得获取函数参数可以用`arguments`吗？
179 | 
180 | ```javascript
181 | Function.prototype.myApply=function(context){
182 |   // 获取调用`myApply`的函数本身，用this获取
183 |   context.fn = this;
184 |   // 通过arguments获取参数
185 |   var args = arguments[1];
186 |   // 执行这个函数，用ES6的...运算符将arg展开
187 |   context.fn(...args);
188 |   // 从上下文中删除函数引用
189 |   delete context.fn;
190 | }
191 | 
192 | var obj ={
193 |   name: "xb",
194 |   getName: function(age){
195 |     console.log(this.name + ":" + age);
196 |   }
197 | }
198 | 
199 | var me = {
200 |   name: "axuebin"
201 | }
202 | 
203 | obj.getName(); // xb:undefined
204 | obj.getName.myApply(me,[25]); // axuebin:25
205 | ```
206 | 
207 | `context.fn(...arg)`是用了ES6的方法来将参数展开，如果看过[上面那个链接](https://github.com/jawil/blog/issues/16)，就知道这里不通过`...`运算符也是可以的。
208 | 
209 | 原博主通过拼接字符串，然后用`eval`执行的方式将参数传进`context.fn`中：
210 | 
211 | ```javascript
212 | for (var i = 0; i < args.length; i++) {
213 |   fnStr += i == args.length - 1 ? args[i] : args[i] + ',';
214 | }
215 | fnStr += ')';//得到"context.fn(arg1,arg2,arg3...)"这个字符串在，最后用eval执行
216 | eval(fnStr); //还是eval强大
217 | ```
218 | 
219 | #### 第三步，当传入apply的this为null或者为空时
220 | 
221 | 我们知道，当`apply`的第一个参数，也就是`this`的指向为`null`时，`this`会指向`window`。知道了这个，就简单了~
222 | 
223 | ```javascript
224 | Function.prototype.myApply=function(context){
225 |   // 获取调用`myApply`的函数本身，用this获取，如果context不存在，则为window
226 |   var context = context || window;
227 |   context.fn = this;
228 |   //获取传入的数组参数
229 |   var args = arguments[1];
230 |   if (args == undefined) { //没有传入参数直接执行
231 |     // 执行这个函数
232 |     context.fn()
233 |   } else {
234 |     // 执行这个函数
235 |     context.fn(...args);
236 |   }
237 |   // 从上下文中删除函数引用
238 |   delete context.fn;
239 | }
240 | 
241 | var obj ={
242 |   name: "xb",
243 |   getName: function(age){
244 |     console.log(this.name + ":" + age);
245 |   }
246 | }
247 | 
248 | var name = "window.name";
249 | 
250 | var me = {
251 |   name: "axuebin"
252 | }
253 | 
254 | obj.getName(); // xb:25
255 | obj.getName.myApply(); // window.name:undefined
256 | obj.getName.myApply(null, [25]); // window.name:25
257 | obj.getName.myApply(me, [25]); // axuebin:25
258 | ```
259 | 
260 | #### 第四步 保证fn函数的唯一性
261 | 
262 | ES6中新增了一种基础数据类型`Symbol`。
263 | 
264 | ```javascript
265 | const name = Symbol();
266 | const age = Symbol();
267 | console.log(name === age); // false
268 | 
269 | const obj = {
270 |   [name]: "axuebin",
271 |   [age]: 25
272 | }
273 | 
274 | console.log(obj); // {Symbol(): "axuebin", Symbol(): 25}
275 | console.log(obj[name]); // axuebin
276 | ```
277 | 
278 | 所以我们可以通过`Symbol`来创建一个属性名。
279 | 
280 | ```javascript
281 | var fn = Symbol();
282 | context[fn] = this;
283 | ```
284 | 
285 | #### 完整的apply
286 | 
287 | ```javascript
288 | Function.prototype.myApply=function(context){
289 |   // 获取调用`myApply`的函数本身，用this获取，如果context不存在，则为window
290 |   var context = context || window;
291 |   var fn = Symbol();
292 |   context[fn] = this;
293 |   //获取传入的数组参数
294 |   var args = arguments[1];
295 |   if (args == undefined) { //没有传入参数直接执行
296 |     // 执行这个函数
297 |     context[fn]()
298 |   } else {
299 |     // 执行这个函数
300 |     context[fn](...args);
301 |   }
302 |   // 从上下文中删除函数引用
303 |   delete context.fn;
304 | }
305 | ```
306 | 
307 | 这样就是一个完整的`apply`了，我们来测试一下：
308 | 
309 | ```javascript
310 | var obj ={
311 |   name: "xb",
312 |   getName: function(age){
313 |     console.log(this.name + ":" + age);
314 |   }
315 | }
316 | 
317 | var name = "window.name";
318 | 
319 | var me = {
320 |   name: "axuebin"
321 | }
322 | 
323 | obj.getName(); // xb:25
324 | obj.getName.myApply(); // window.name:undefined
325 | obj.getName.myApply(null, [25]); // window.name:25
326 | obj.getName.myApply(me, [25]); // axuebin:25
327 | ```
328 | 
329 | ok 没啥毛病 ~ 
330 | 
331 | 再次感谢[1024大佬](https://github.com/jawil/blog/issues/16) ~
332 | 
333 | ## bind
334 | 
335 | > The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.
336 | 
337 | > bind()方法创建一个新的函数, 当被调用时，将其this关键字设置为提供的值，在调用新函数时，在任何提供之前提供一个给定的参数序列。
338 | 
339 | 语法：
340 | 
341 | ```javascript
342 | fun.bind(thisArg[, arg1[, arg2[, ...]]])
343 | ```
344 | 
345 | 其中，`thisArg`就是`this`指向，`arg`是指定的参数。
346 | 
347 | 可以看出，`bind`会创建一个新函数（称之为绑定函数），原函数的一个拷贝，也就是说不会像`call`和`apply`那样立即执行。
348 | 
349 | 当这个绑定函数被调用时，它的`this`值传递给`bind`的一个参数，执行的参数是传入`bind`的其它参数和执行绑定函数时传入的参数。
350 | 
351 | ## 用法
352 | 
353 | 当我们执行下面的代码时，我们希望可以正确地输出`name`，然后现实是残酷的
354 | 
355 | ```javascript
356 | function Person(name){
357 |   this.name = name;
358 |   this.say = function(){
359 |     setTimeout(function(){
360 |       console.log("hello " + this.name);
361 |     },1000)
362 |   }
363 | }
364 | var person = new Person("axuebin");
365 | person.say(); //hello undefined
366 | ```
367 | 
368 | 
369 | 这里`this`运行时是指向`window`的，所以`this.name`是`undefined`，为什么会这样呢？看看MDN的解释：
370 | 
371 | > 由setTimeout()调用的代码运行在与所在函数完全分离的执行环境上。这会导致，这些代码中包含的 this 关键字在非严格模式会指向 window。 
372 | 
373 | 有一个常见的方法可以使得正确的输出：
374 | 
375 | ```javascript
376 | function Person(name){
377 |   this.name = name;
378 |   this.say = function(){
379 |     var self = this;
380 |     setTimeout(function(){
381 |       console.log("hello " + self.name);
382 |     },1000)
383 |   }
384 | }
385 | var person = new Person("axuebin");
386 | person.say(); //hello axuebin
387 | ```
388 | 
389 | 没错，这里我们就可以用到`bind`了：
390 | 
391 | ```javascript
392 | function Person(name){
393 |   this.name = name;
394 |   this.say = function(){
395 |     setTimeout(function(){
396 |       console.log("hello " + this.name);
397 |     }.bind(this),1000)
398 |   }
399 | }
400 | var person = new Person("axuebin");
401 | person.say(); //hello axuebin
402 | ```
403 | 
404 | ### MDN的Polyfill
405 | 
406 | ```javascript
407 | Function.prototype.bind = function (oThis) {
408 |   var aArgs = Array.prototype.slice.call(arguments, 1)；
409 |   var fToBind = this；
410 |   var fNOP = function () {}；
411 |   var fBound = function () {
412 |     fBound.prototype = this instanceof fNOP ? new fNOP() : fBound.prototype；
413 |     return fToBind.apply(this instanceof fNOP ? this : oThis || this, aArgs )
414 |   }   
415 |   if( this.prototype ) {
416 |     fNOP.prototype = this.prototype；
417 |   }
418 |   return fBound；
419 | }
420 | ```
421 | 
422 | ## 总结
423 | 
424 | - 三者都是用来改变函数的`this`指向
425 | - 三者的第一个参数都是`this`指向的对象
426 | - `bind`是返回一个绑定函数可稍后执行，`call`、`apply`是立即调用
427 | - 三者都可以给定参数传递
428 | - `call`给定参数需要将参数全部列出，`apply`给定参数数组
429 | 
430 | ## 感谢
431 | 
432 | [不用call和apply方法模拟实现ES5的bind方法](https://github.com/jawil/blog/issues/16)
433 | 
434 | [深入浅出妙用 Javascript 中 apply、call、bind](http://web.jobbole.com/83642/)
435 | 
436 | [回味JS基础:call apply 与 bind](https://juejin.im/post/57dc97f35bbb50005e5b39bd)


--------------------------------------------------------------------------------
/2017/JavaScript基础心法——this.md:
--------------------------------------------------------------------------------
  1 | ## 什么是this
  2 | 
  3 | 在传统面向对象的语言中，比如Java，`this`关键字用来表示当前对象本身，或当前对象的一个实例，通过`this`关键字可以获得当前对象的属性和调用方法。
  4 | 
  5 | 在JavaScript中，`this`似乎表现地略有不同，这也是让人“讨厌”的地方~
  6 | 
  7 | ECMAScript规范中这样写：
  8 | 
  9 | > this 关键字执行为当前执行环境的 ThisBinding。
 10 | 
 11 | MDN上这样写：
 12 | 
 13 | > In most cases, the value of this is determined by how a function is called.
 14 | 
 15 | > 在绝大多数情况下，函数的调用方式决定了this的值。
 16 | 
 17 | 可以这样理解，在JavaScript中，`this`的指向是调用时决定的，而不是创建时决定的，这就会导致`this`的指向会让人迷惑，简单来说，`this`具有运行期绑定的特性。
 18 | 
 19 | 参考资料：[this - JavaScript | MDN](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/this "this - JavaScript | MDN")
 20 | 
 21 | 来看看不同的情况五花八门的`this`吧~
 22 | 
 23 | ## 调用位置
 24 | 
 25 | 首先需要理解调用位置，调用位置就是函数在代码中被调用的位置，而不是声明的位置。
 26 | 
 27 | 通过分析调用栈（到达当前执行位置所调用的所有函数）可以找到调用位置。
 28 | 
 29 | ```javascript
 30 | function baz(){
 31 |   console.log("baz");
 32 |   bar();
 33 | }
 34 | function bar(){
 35 |   console.log("bar");
 36 |   foo();
 37 | }
 38 | function foo(){
 39 |   console.log("foo");
 40 | }
 41 | baz();
 42 | ```
 43 | 
 44 | 当我们调用`baz()`时，它会以此调用`baz()`→`bar()`→`foo()`。
 45 | 
 46 | 对于`foo()`：调用位置是在`bar()`中。
 47 | 对于`bar()`：调用位置是在`baz()`中。
 48 | 而对于`baz()`：调用位置是全局作用域中。
 49 | 
 50 | 可以看出，调用位置应该是当前正在执行的函数的前一个调用中。
 51 | 
 52 | ## 全局上下文
 53 | 
 54 | 在全局执行上下文中`this`都指代全局对象。
 55 | 
 56 | - `this`等价于`window`对象
 57 | - `var` === `this.` === `winodw.`
 58 | 
 59 | ```javascript
 60 | console.log(window === this); // true
 61 | var a = 1;
 62 | this.b = 2;
 63 | window.c = 3;
 64 | console.log(a + b + c); // 6
 65 | ```
 66 | 
 67 | 在浏览器里面`this`等价于`window`对象，如果你声明一些全局变量，这些变量都会作为this的属性。
 68 | 
 69 | ## 函数上下文
 70 | 
 71 | 在函数内部，`this`的值取决于函数被调用的方式。
 72 | 
 73 | ### 直接调用
 74 | 
 75 | **`this`指向全局变量。**
 76 | 
 77 | ```javascript
 78 | function foo(){
 79 |   return this;
 80 | }
 81 | console.log(foo() === window); // true
 82 | ```
 83 | 
 84 | ### call()、apply()
 85 | 
 86 | **`this`指向绑定的对象上。**
 87 | 
 88 | ```javascript
 89 | var person = {
 90 |   name: "axuebin",
 91 |   age: 25
 92 | };
 93 | function say(job){
 94 |   console.log(this.name+":"+this.age+" "+job);
 95 | }
 96 | say.call(person,"FE"); // axuebin:25
 97 | say.apply(person,["FE"]); // axuebin:25
 98 | ```
 99 | 
100 | 可以看到，定义了一个`say`函数是用来输出`name`、`age`和`job`，其中本身没有`name`和`age`属性，我们将这个函数绑定到`person`这个对象上，输出了本属于`person`的属性，说明此时`this`是指向对象`person`的。
101 | 
102 | 如果传入一个原始值（字符串、布尔或数字类型）来当做`this`的绑定对象， 这个原始值会被转换成它的对象形式（`new String()`），这通常被称为“装箱”。
103 | 
104 | `call`和`apply`从`this`的绑定角度上来说是一样的，唯一不同的是它们的第二个参数。
105 | 
106 | ### bind()
107 | 
108 | **`this`将永久地被绑定到了`bind`的第一个参数。**
109 | 
110 | `bind`和`call`、`apply`有些相似。
111 | 
112 | ```javascript
113 | var person = {
114 |   name: "axuebin",
115 |   age: 25
116 | };
117 | function say(){
118 |   console.log(this.name+":"+this.age);
119 | }
120 | var f = say.bind(person);
121 | console.log(f());
122 | ```
123 | 
124 | ### 箭头函数
125 | 
126 | **所有的箭头函数都没有自己的`this`，都指向外层。**
127 | 
128 | 关于箭头函数的争论一直都在，可以看看下面的几个链接：
129 | 
130 | [ES6 箭头函数中的 this？你可能想多了（翻译）](http://www.cnblogs.com/vajoy/p/4902935.html)
131 | 
132 | [关于箭头函数this的理解几乎完全是错误的 #150](https://github.com/ruanyf/es6tutorial/issues/150)
133 | 
134 | MDN中对于箭头函数这一部分是这样描述的：
135 | 
136 | > An arrow function does not create its own this, the this value of the enclosing execution context is used.
137 | 
138 | > 箭头函数会捕获其所在上下文的this值，作为自己的this值。
139 | 
140 | ```javascript
141 | function Person(name){
142 |   this.name = name;
143 |   this.say = () => {
144 |     var name = "xb";
145 |     return this.name;
146 |   }
147 | }
148 | var person = new Person("axuebin");
149 | console.log(person.say()); // axuebin
150 | ```
151 | 
152 | 箭头函数常用语回调函数中，例如定时器中：
153 | 
154 | ```javascript
155 | function foo() {  
156 |   setTimeout(()=>{
157 |     console.log(this.a);
158 |   },100)
159 | }
160 | var obj = {
161 |   a: 2
162 | }
163 | foo.call(obj);
164 | ```
165 | 
166 | 附上MDN关于箭头函数`this`的解释：
167 | 
168 | [https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions#不绑定_this](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions#不绑定_this)
169 | 
170 | ### 作为对象的一个方法
171 | 
172 | **`this`指向调用函数的对象。**
173 | 
174 | ```javascript
175 | var person = {
176 |   name: "axuebin",
177 |   getName: function(){
178 |     return this.name;
179 |   }
180 | }
181 | console.log(person.getName()); // axuebin
182 | ```
183 | 
184 | 这里有一个需要注意的地方。。。
185 | 
186 | ```javascript
187 | var name = "xb";
188 | var person = {
189 |   name: "axuebin",
190 |   getName: function(){
191 |     return this.name;
192 |   }
193 | }
194 | var getName = person.getName;
195 | console.log(getName()); // xb
196 | ```
197 | 
198 | 发现`this`又指向全局变量了，这是为什么呢？
199 | 
200 | 还是那句话，`this`的指向得看函数调用时。 
201 | 
202 | ### 作为一个构造函数
203 | 
204 | **`this`被绑定到正在构造的新对象。**
205 | 
206 | 通过构造函数创建一个对象其实执行这样几个步骤：
207 | 
208 | 1. 创建新对象
209 | 2. 将this指向这个对象
210 | 3. 给对象赋值（属性、方法）
211 | 4. 返回this
212 | 
213 | 所以`this`就是指向创建的这个对象上。
214 | 
215 | ```javascript
216 | function Person(name){
217 |   this.name = name;
218 |   this.age = 25;
219 |   this.say = function(){
220 |     console.log(this.name + ":" + this.age);
221 |   }
222 | }
223 | var person = new Person("axuebin");
224 | console.log(person.name); // axuebin
225 | person.say(); // axuebin:25
226 | ```
227 | 
228 | ### 作为一个DOM事件处理函数
229 | 
230 | **`this`指向触发事件的元素，也就是始事件处理程序所绑定到的DOM节点。**
231 | 
232 | ```javascript
233 | var ele = document.getElementById("id");
234 | ele.addEventListener("click",function(e){
235 |   console.log(this);
236 |   console.log(this === e.target); // true
237 | })
238 | ```
239 | 
240 | ### HTML标签内联事件处理函数
241 | 
242 | **`this`指向所在的DOM元素**
243 | 
244 | ```html
245 | <button onclick="console.log(this);">Click Me</button>
246 | ```
247 | 
248 | ### jQuery的this
249 | 
250 | **在许多情况下JQuery的`this`都指向DOM元素节点。**
251 | 
252 | ```javascript
253 | $(".btn").on("click",function(){
254 |   console.log(this); 
255 | });
256 | ```
257 | 
258 | ## 总结
259 | 
260 | 如果要判断一个函数的`this`绑定，就需要找到这个函数的直接调用位置。然后可以顺序按照下面四条规则来判断`this`的绑定对象：
261 | 
262 | 1. 由`new`调用：绑定到新创建的对象
263 | 2. 由`call`或`apply`、`bind`调用：绑定到指定的对象
264 | 3. 由上下文对象调用：绑定到上下文对象
265 | 4. 默认：全局对象
266 | 
267 | 注意：箭头函数不使用上面的绑定规则，根据外层作用域来决定`this`，继承外层函数调用的`this`绑定。


--------------------------------------------------------------------------------
/2017/JavaScript基础心法——数据类型.md:
--------------------------------------------------------------------------------
 1 | 一个很基础的知识点，JavaScript中基本数据类型和引用数据类型是如何存储的。
 2 | 
 3 | 由于自己是野生程序员，在刚开始学习程序设计的时候没有在意内存这些基础知识，导致后来在提到“什么什么是存在栈中的，栈中只是存了一个引用”这样的话时总是一脸懵逼。。
 4 | 
 5 | 后来渐渐的了解了一些内存的知识，这部分还是非常有必要了解的。
 6 | 
 7 | ## 基本数据结构
 8 | 
 9 | ### 栈
10 | 
11 | > 栈，只允许在一段进行插入或者删除操作的线性表，是一种先进后出的数据结构。
12 | 
13 | ### 堆
14 | 
15 | > 堆是基于散列算法的数据结构。
16 | 
17 | ### 队列
18 | 
19 | > 队列是一种先进先出（FIFO）的数据结构。
20 | 
21 | ## JavaScript中数据类型的存储
22 | 
23 | JavaScript中将数据类型分为基本数据类型和引用数据类型，它们其中有一个区别就是存储的位置不同。
24 | 
25 | ### 基本数据类型
26 | 
27 | 我们都知道JavaScript中的基本数据类型有：
28 | 
29 | - String
30 | - Number
31 | - Boolean
32 | - Undefined
33 | - Null
34 | - Symbol（暂时不管）
35 | 
36 | 基本数据类型都是一些简单的数据段，它们是存储在栈内存中。
37 | 
38 | ### 引用数据类型
39 | 
40 | JavaScript中的引用数据类型有：
41 | 
42 | - Array
43 | - Object
44 | 
45 | 引用数据类型是保存在堆内存中的，然后再栈内存中保存一个对堆内存中实际对象的引用。所以，JavaScript中对引用数据类型的操作都是操作对象的引用而不是实际的对象。
46 | 
47 | 可以理解为，栈内存中保存了一个地址，这个地址和堆内存中的实际值是相关的。
48 | 
49 | ### 图解
50 | 
51 | 现在，我们声明几个变量试试：
52 | 
53 | ```javascript
54 | var name="axuebin";
55 | var age=25;
56 | var job;
57 | var arr=[1,2,3];
58 | var obj={age:25};
59 | ```
60 | 
61 | 可以通过下图来表示数据类型在内存中的存储情况：
62 | 
63 | ![](http://omufjr5bv.bkt.clouddn.com/JS%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B%E5%86%85%E5%AD%98.png)
64 | 
65 | 此时`name`,`age`,`job`三种基本数据类型是直接存在栈内存中的，而`arr`,`obj`在栈内存中只是存了一个地址来表示对堆内存中的引用。
66 | 
67 | ### 复制
68 | 
69 | #### 基本数据类型
70 | 
71 | 对于基本数据类型，如果进行复制，系统会自动为新的变量在栈内存中分配一个新值，很容易理解。
72 | 
73 | #### 引用数据类型
74 | 
75 | 如果对于数组、对象这样的引用数据类型而言，复制的时候就会有所区别了：
76 | 
77 | 系统也会自动为新的变量在栈内存中分配一个值，但这个值仅仅是一个地址。也就是说，复制出来的变量和原有的变量具有相同的地址值，指向堆内存中的同一个对象。
78 | 
79 | ![](http://omufjr5bv.bkt.clouddn.com/JS%E5%86%85%E5%AD%98%E7%A9%BA%E9%97%B4%E5%BC%95%E7%94%A8%E7%B1%BB%E5%9E%8B%E5%A4%8D%E5%88%B6.png)
80 | 
81 | 如果所示，执行了`var objCopy=obj`之后，`obj`和`objCopy`具有相同的地址值，执行堆内存中的同一个实际对象。
82 | 
83 | 这有什么不同呢？
84 | 
85 | 当我修改`obj`或`objCopy`时，都会引起另一个变量的改变。
86 | 
87 | ### 为什么？
88 | 
89 | 为什么基础数据类型存在栈中，而引用数据类型存在堆中呢？
90 | 
91 | 1. 堆比栈大，栈比对速度快。
92 | 2. 基础数据类型比较稳定，而且相对来说占用的内存小。
93 | 3. 引用数据类型大小是动态的，而且是无限的。
94 | 4. 堆内存是无序存储，可以根据引用直接获取。
95 | 
96 | ## 参考文章
97 | 
98 | [http://www.jianshu.com/p/996671d4dcc4](http://www.jianshu.com/p/996671d4dcc4)
99 | [http://blog.sina.com.cn/s/blog_8ecde0fe0102vy6e.html](http://blog.sina.com.cn/s/blog_8ecde0fe0102vy6e.html)


--------------------------------------------------------------------------------
/2017/JavaScript基础心法——深浅拷贝.md:
--------------------------------------------------------------------------------
  1 | 浅拷贝和深拷贝都是对于JS中的引用类型而言的，浅拷贝就只是复制对象的引用，如果拷贝后的对象发生变化，原对象也会发生变化。只有深拷贝才是真正地对对象的拷贝。
  2 | 
  3 | ## 前言
  4 | 
  5 | 说到深浅拷贝，必须先提到的是JavaScript的数据类型，之前的一篇文章[JavaScript基础心法——数据类型](https://github.com/axuebin/articles/issues/3)说的很清楚了，这里就不多说了。
  6 | 
  7 | 需要知道的就是一点：JavaScript的数据类型分为基本数据类型和引用数据类型。
  8 | 
  9 | 对于基本数据类型的拷贝，并没有深浅拷贝的区别，我们所说的深浅拷贝都是对于引用数据类型而言的。
 10 | 
 11 | ## 浅拷贝
 12 | 
 13 | 浅拷贝的意思就是只复制引用，而未复制真正的值。
 14 | 
 15 | ```javascript
 16 | const originArray = [1,2,3,4,5];
 17 | const originObj = {a:'a',b:'b',c:[1,2,3],d:{dd:'dd'}};
 18 | 
 19 | const cloneArray = originArray;
 20 | const cloneObj = originObj;
 21 | 
 22 | console.log(cloneArray); // [1,2,3,4,5]
 23 | console.log(originObj); // {a:'a',b:'b',c:Array[3],d:{dd:'dd'}}
 24 | 
 25 | cloneArray.push(6);
 26 | cloneObj.a = {aa:'aa'};
 27 | 
 28 | console.log(cloneArray); // [1,2,3,4,5,6]
 29 | console.log(originArray); // [1,2,3,4,5,6]
 30 | 
 31 | console.log(cloneObj); // {a:{aa:'aa'},b:'b',c:Array[3],d:{dd:'dd'}}
 32 | console.log(originArray); // {a:{aa:'aa'},b:'b',c:Array[3],d:{dd:'dd'}}
 33 | ```
 34 | 
 35 | 上面的代码是最简单的利用 `=` 赋值操作符实现了一个浅拷贝，可以很清楚的看到，随着 `cloneArray` 和 `cloneObj` 改变，`originArray` 和 `originObj` 也随着发生了变化。
 36 | 
 37 | ## 深拷贝
 38 | 
 39 | 深拷贝就是对目标的完全拷贝，不像浅拷贝那样只是复制了一层引用，就连值也都复制了。
 40 | 
 41 | 只要进行了深拷贝，它们老死不相往来，谁也不会影响谁。
 42 | 
 43 | 目前实现深拷贝的方法不多，主要是两种：
 44 | 
 45 | 1. 利用 `JSON` 对象中的 `parse` 和 `stringify`
 46 | 2. 利用递归来实现每一层都重新创建对象并赋值
 47 | 
 48 | ### JSON.stringify/parse的方法
 49 | 
 50 | 先看看这两个方法吧：
 51 | 
 52 | > The JSON.stringify() method converts a JavaScript value to a JSON string.
 53 | 
 54 | `JSON.stringify` 是将一个 `JavaScript` 值转成一个 `JSON` 字符串。
 55 | 
 56 | > The JSON.parse() method parses a JSON string, constructing the JavaScript value or object described by the string.
 57 | 
 58 | `JSON.parse` 是将一个 `JSON` 字符串转成一个 `JavaScript` 值或对象。
 59 | 
 60 | 很好理解吧，就是 `JavaScript` 值和 `JSON` 字符串的相互转换。
 61 | 
 62 | 它能实现深拷贝呢？我们来试试。
 63 | 
 64 | ```javascript
 65 | const originArray = [1,2,3,4,5];
 66 | const cloneArray = JSON.parse(JSON.stringify(originArray));
 67 | console.log(cloneArray === originArray); // false
 68 | 
 69 | const originObj = {a:'a',b:'b',c:[1,2,3],d:{dd:'dd'}};
 70 | const cloneObj = JSON.parse(JSON.stringify(originObj));
 71 | console.log(cloneObj === originObj); // false
 72 | 
 73 | cloneObj.a = 'aa';
 74 | cloneObj.c = [1,1,1];
 75 | cloneObj.d.dd = 'doubled';
 76 | 
 77 | console.log(cloneObj); // {a:'aa',b:'b',c:[1,1,1],d:{dd:'doubled'}};
 78 | console.log(originObj); // {a:'a',b:'b',c:[1,2,3],d:{dd:'dd'}};
 79 | ```
 80 | 
 81 | 确实是深拷贝，也很方便。但是，这个方法只能适用于一些简单的情况。比如下面这样的一个对象就不适用：
 82 | 
 83 | ```javascript
 84 | const originObj = {
 85 |   name:'axuebin',
 86 |   sayHello:function(){
 87 |     console.log('Hello World');
 88 |   }
 89 | }
 90 | console.log(originObj); // {name: "axuebin", sayHello: ƒ}
 91 | const cloneObj = JSON.parse(JSON.stringify(originObj));
 92 | console.log(cloneObj); // {name: "axuebin"}
 93 | ```
 94 | 
 95 | 发现在 `cloneObj` 中，有属性丢失了。。。那是为什么呢？
 96 | 
 97 | 在 `MDN` 上找到了原因：
 98 | 
 99 | >If undefined, a function, or a symbol is encountered during conversion it is either omitted (when it is found in an object) or censored to null (when it is found in an array). JSON.stringify can also just return undefined when passing in "pure" values like JSON.stringify(function(){}) or JSON.stringify(undefined).
100 | 
101 | `undefined`、`function`、`symbol` 会在转换过程中被忽略。。。
102 | 
103 | 明白了吧，就是说如果对象中含有一个函数时（很常见），就不能用这个方法进行深拷贝。
104 | 
105 | ### 递归的方法
106 | 
107 | 递归的思想就很简单了，就是对每一层的数据都实现一次 `创建对象->对象赋值` 的操作，简单粗暴上代码：
108 | 
109 | ```javascript
110 | function deepClone(source){
111 |   const targetObj = source.constructor === Array ? [] : {}; // 判断复制的目标是数组还是对象
112 |   for(let keys in source){ // 遍历目标
113 |     if(source.hasOwnProperty(keys)){
114 |       if(source[keys] && typeof source[keys] === 'object'){ // 如果值是对象，就递归一下
115 |         targetObj[keys] = source[keys].constructor === Array ? [] : {};
116 |         targetObj[keys] = deepClone(source[keys]);
117 |       }else{ // 如果不是，就直接赋值
118 |         targetObj[keys] = source[keys];
119 |       }
120 |     } 
121 |   }
122 |   return targetObj;
123 | }
124 | ```
125 | 
126 | 我们来试试：
127 | 
128 | ```javascript
129 | const originObj = {a:'a',b:'b',c:[1,2,3],d:{dd:'dd'}};
130 | const cloneObj = deepClone(originObj);
131 | console.log(cloneObj === originObj); // false
132 | 
133 | cloneObj.a = 'aa';
134 | cloneObj.c = [1,1,1];
135 | cloneObj.d.dd = 'doubled';
136 | 
137 | console.log(cloneObj); // {a:'aa',b:'b',c:[1,1,1],d:{dd:'doubled'}};
138 | console.log(originObj); // {a:'a',b:'b',c:[1,2,3],d:{dd:'dd'}};
139 | ```
140 | 
141 | 可以。那再试试带有函数的：
142 | 
143 | ```javascript
144 | const originObj = {
145 |   name:'axuebin',
146 |   sayHello:function(){
147 |     console.log('Hello World');
148 |   }
149 | }
150 | console.log(originObj); // {name: "axuebin", sayHello: ƒ}
151 | const cloneObj = deepClone(originObj);
152 | console.log(cloneObj); // {name: "axuebin", sayHello: ƒ}
153 | ```
154 | 
155 | 也可以。搞定。
156 | 
157 | 是不是以为这样就完了？？ 当然不是。
158 | 
159 | ## JavaScript中的拷贝方法
160 | 
161 | 我们知道在 `JavaScript` 中，数组有两个方法 `concat` 和 `slice` 是可以实现对原数组的拷贝的，这两个方法都不会修改原数组，而是返回一个修改后的新数组。
162 | 
163 | 同时，ES6 中 引入了 `Object.assgn` 方法和 `...` 展开运算符也能实现对对象的拷贝。
164 |  
165 | 那它们是浅拷贝还是深拷贝呢？
166 | 
167 | ### concat
168 | 
169 | > The concat() method is used to merge two or more arrays. This method does not change the existing arrays, but instead returns a new array.
170 | 
171 | 该方法可以连接两个或者更多的数组，但是它不会修改已存在的数组，而是返回一个新数组。
172 | 
173 | 看着这意思，很像是深拷贝啊，我们来试试：
174 | 
175 | ```javascript
176 | const originArray = [1,2,3,4,5];
177 | const cloneArray = originArray.concat();
178 | 
179 | console.log(cloneArray === originArray); // false
180 | cloneArray.push(6); // [1,2,3,4,5,6]
181 | console.log(originArray); [1,2,3,4,5];
182 | ```
183 | 
184 | 看上去是深拷贝的。
185 | 
186 | 我们来考虑一个问题，如果这个对象是多层的，会怎样。
187 | 
188 | ```javascript
189 | const originArray = [1,[1,2,3],{a:1}];
190 | const cloneArray = originArray.concat();
191 | console.log(cloneArray === originArray); // false
192 | cloneArray[1].push(4);
193 | cloneArray[2].a = 2; 
194 | console.log(originArray); // [1,[1,2,3,4],{a:2}]
195 | ```
196 | 
197 | `originArray` 中含有数组 `[1,2,3]` 和对象 `{a:1}`，如果我们直接修改数组和对象，不会影响 `originArray`，但是我们修改数组 `[1,2,3]` 或对象 `{a:1}` 时，发现 `originArray` 也发生了变化。 
198 | 
199 | **结论：`concat` 只是对数组的第一层进行深拷贝。**
200 | 
201 | ### slice
202 | 
203 | > The slice() method returns a shallow copy of a portion of an array into a new array object selected from begin to end (end not included). The original array will not be modified.
204 | 
205 | 解释中都直接写道是 `a shallow copy` 了 ~
206 | 
207 | 但是，并不是！
208 | 
209 | ```javascript
210 | const originArray = [1,2,3,4,5];
211 | const cloneArray = originArray.slice();
212 | 
213 | console.log(cloneArray === originArray); // false
214 | cloneArray.push(6); // [1,2,3,4,5,6]
215 | console.log(originArray); [1,2,3,4,5];
216 | ```
217 | 
218 | 同样地，我们试试多层的数组。
219 | 
220 | ```javascript
221 | const originArray = [1,[1,2,3],{a:1}];
222 | const cloneArray = originArray.slice();
223 | console.log(cloneArray === originArray); // false
224 | cloneArray[1].push(4);
225 | cloneArray[2].a = 2; 
226 | console.log(originArray); // [1,[1,2,3,4],{a:2}]
227 | ```
228 | 
229 | 果然，结果和 `concat` 是一样的。
230 | 
231 | **结论：`slice` 只是对数组的第一层进行深拷贝。**
232 | 
233 | ### Object.assign()
234 | 
235 | > The Object.assign() method is used to copy the values of all enumerable own properties from one or more source objects to a target object. It will return the target object.
236 | 
237 | 复制复制复制。
238 | 
239 | 那到底是浅拷贝还是深拷贝呢？
240 | 
241 | 自己试试吧。。
242 | 
243 | **结论：`Object.assign()` 拷贝的是属性值。假如源对象的属性值是一个指向对象的引用，它也只拷贝那个引用值。**
244 | 
245 | ### ... 展开运算符
246 | 
247 | ```javascript
248 | const originArray = [1,2,3,4,5,[6,7,8]];
249 | const originObj = {a:1,b:{bb:1}};
250 | 
251 | const cloneArray = [...originArray];
252 | cloneArray[0] = 0;
253 | cloneArray[5].push(9);
254 | console.log(originArray); // [1,2,3,4,5,[6,7,8,9]]
255 | 
256 | const cloneObj = {...originObj};
257 | cloneObj.a = 2;
258 | cloneObj.b.bb = 2;
259 | console.log(originObj); // {a:1,b:{bb:2}}
260 | ```
261 | 
262 | **结论：`...` 实现的是对象第一层的深拷贝。后面的只是拷贝的引用值。**
263 | 
264 | 
265 | ### 首层浅拷贝
266 | 
267 | 我们知道了，会有一种情况，就是对目标对象的第一层进行深拷贝，然后后面的是浅拷贝，可以称作“首层浅拷贝”。
268 | 
269 | 我们可以自己实现一个这样的函数：
270 | 
271 | ```javascript
272 | function shallowClone(source) {
273 |   const targetObj = source.constructor === Array ? [] : {}; // 判断复制的目标是数组还是对象
274 |   for (let keys in source) { // 遍历目标
275 |     if (source.hasOwnProperty(keys)) {
276 |       targetObj[keys] = source[keys];
277 |     }
278 |   }
279 |   return targetObj;
280 | }
281 | ```
282 | 
283 | 我们来测试一下：
284 | 
285 | ```javascript
286 | const originObj = {a:'a',b:'b',c:[1,2,3],d:{dd:'dd'}};
287 | const cloneObj = shallowClone(originObj);
288 | console.log(cloneObj === originObj); // false
289 | cloneObj.a='aa';
290 | cloneObj.c=[1,1,1];
291 | cloneObj.d.dd='surprise';
292 | ```
293 | 
294 | 经过上面的修改，`cloneObj` 不用说，肯定是 `{a:'aa',b:'b',c:[1,1,1],d:{dd:'surprise'}}` 了，那 `originObj` 呢？刚刚我们验证了 `cloneObj === originObj` 是 `false`，说明这两个对象引用地址不同啊，那应该就是修改了 `cloneObj` 并不影响 `originObj`。
295 | 
296 | ```javascript
297 | console.log(cloneObj); // {a:'aa',b:'b',c:[1,1,1],d:{dd:'surprise'}}
298 | console.log(originObj); // {a:'a',b:'b',c:[1,2,3],d:{dd:'surprise'}}
299 | ```
300 | 
301 | What happend?
302 | 
303 | `originObj` 中关于 `a`、`c`都没被影响，但是 `d` 中的一个对象被修改了。。。说好的深拷贝呢？不是引用地址都不一样了吗？
304 | 
305 | 原来是这样：
306 | 
307 | 1. 从 `shallowClone` 的代码中我们可以看出，我们只对第一层的目标进行了 `深拷贝` ，而第二层开始的目标我们是直接利用 `=` 赋值操作符进行拷贝的。
308 | 2. so，第二层后的目标都只是复制了一个引用，也就是浅拷贝。
309 | 
310 | ## 总结
311 | 
312 | 1. 赋值运算符 `=` 实现的是浅拷贝，只拷贝对象的引用值；
313 | 2. JavaScript 中数组和对象自带的拷贝方法都是“首层浅拷贝”；
314 | 3. `JSON.stringify` 实现的是深拷贝，但是对目标对象有要求；
315 | 4. 若想真正意义上的深拷贝，请递归。


--------------------------------------------------------------------------------
/2017/JavaScript数据结构及算法——排序.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | layout: post
  3 | title:  "JavaScript数据结构及算法——排序"
  4 | date:   2017-10-22 20:13:00
  5 | categories: 数据结构及算法
  6 | tags: JavaScript
  7 | author: 薛彬
  8 | ---
  9 | 
 10 | * content
 11 | {:toc}
 12 | 
 13 | 本文主要记录的是JavaScript实现常用的排序算法，冒泡排序、快速排序、归并排序等。
 14 | 
 15 | 
 16 | 
 17 | 
 18 | ## 前言
 19 | 
 20 | 用JavaScript写算法是种怎么样的体验？不喜欢算法的我最近也对数据结构和算法有点兴趣。。。所以，将会有这些：
 21 | 
 22 | - JavaScript数据结构及算法——栈
 23 | - JavaScript数据结构及算法——队列
 24 | - JavaScript数据结构及算法——链表
 25 | - [JavaScript数据结构及算法——排序](https://github.com/axuebin/articles/issues/12)
 26 | - [JavaScript数据结构及算法——查找](https://github.com/axuebin/articles/issues/13)
 27 | - JavaScript数据结构及算法——树
 28 | 
 29 | 现阶段我对于数据结构、算法的理解还很浅，希望各位大佬多多指导。
 30 | 
 31 | ## 排序
 32 | 
 33 | > 介绍排序算法
 34 | 
 35 | ## 冒泡排序
 36 | 
 37 | 说到冒泡排序，大家都很熟悉，顾名思义，是一种“冒泡”的过程。
 38 | 
 39 | **主要思想**：比较任何两个相邻的项，如果第一个比第二个大，则交换它们。
 40 | 
 41 | **时间复杂度**：O(n2)
 42 | 
 43 | **空间复杂度**：O(1)
 44 | 
 45 | 如何实现呢？是不是遍历所有需要排序的数据，然后将它和所有数比较一次，然后就可以了？
 46 | 
 47 | 道理是有的，我们试试看：
 48 | 
 49 | ```javascript
 50 | function bubbleSort(arr) {
 51 |   const len = arr.length; // 声明一个len来存储数组的长度
 52 |   let temp = 0;
 53 |   for (let i = 0; i < len; i += 1) { // 外循环遍历数组
 54 |     for (let j = 0 ; j < len - 1 ; j += 1) { // 内循环执行当前项和下一项进行比较
 55 |       if (arr[j] > arr[j + 1]) {  // 如果当前项比下一项大，则交换它们
 56 |         temp = arr[j];
 57 |         arr[j] = arr[j + 1];
 58 |         arr[j + 1] = temp;
 59 |       }
 60 |       console.log(arr);
 61 |     }
 62 |   }
 63 |   return arr;
 64 | }
 65 | ```
 66 | 
 67 | 我们通过输出数组来看一下整个流程：
 68 | 
 69 | ```javascript
 70 | [5, 4, 3, 2, 1] 
 71 | [4, 5, 3, 2, 1] // 5>4，交换
 72 | [4, 3, 5, 2, 1] // 5>3，交换
 73 | [4, 3, 2, 5, 1] // 5>2，交换
 74 | [4, 3, 2, 1, 5] // 5>1，交换
 75 | [3, 4, 2, 1, 5] // 4>3，交换
 76 | [3, 2, 4, 1, 5] // 4>2，交换
 77 | [3, 2, 1, 4, 5] // 4>1，交换
 78 | [3, 2, 1, 4, 5] // 4<5，不交换
 79 | [2, 3, 1, 4, 5] // 3>2，交换
 80 | [2, 1, 3, 4, 5] // 3>1，交换
 81 | [2, 1, 3, 4, 5] // 3<4，不交换
 82 | [2, 1, 3, 4, 5] // 4<5，不交换
 83 | [1, 2, 3, 4, 5] // 2>1，交换
 84 | [1, 2, 3, 4, 5] // 2<3，不交换
 85 | [1, 2, 3, 4, 5] // 3<4，不交换
 86 | [1, 2, 3, 4, 5] // 4<5，不交换
 87 | [1, 2, 3, 4, 5] // 1<2，不交换
 88 | [1, 2, 3, 4, 5] // 2<3，不交换
 89 | [1, 2, 3, 4, 5] // 3<4，不交换
 90 | [1, 2, 3, 4, 5] // 4<5，不交换
 91 | ```
 92 | 
 93 | 排序确实是排好了，但是我们发现，有很多的不必要的比较，我们应该想办法避免这些。想一想，这些都是在内循环中对已经排序过的数进行比较，所以我们可以稍稍改进一下代码：
 94 | 
 95 | ```javascript
 96 | function bubbleSort(arr) {
 97 |   const len = arr.length;
 98 |   let temp = 0;
 99 |   for (let i = 0; i < len; i += 1) {
100 |     for (let j = 0 ; j < len - 1 - i ; j += 1) {
101 |       if (arr[j] > arr[j + 1]) {
102 |         temp = arr[j];
103 |         arr[j] = arr[j + 1];
104 |         arr[j + 1] = temp;
105 |       }
106 |       console.log(arr);
107 |     }
108 |   }
109 |   return arr;
110 | }
111 | ```
112 | 
113 | 在内循环中，我们另 `j` 的取值到 `len-1-i` 为止，因为再往后的数已经排序好了。同样地，我们来看看流程：
114 | 
115 | ```javascript
116 | [5, 4, 3, 2, 1] 
117 | [4, 5, 3, 2, 1] // 5>4，交换
118 | [4, 3, 5, 2, 1] // 5>3，交换
119 | [4, 3, 2, 5, 1] // 5>2，交换
120 | [4, 3, 2, 1, 5] // 5>1，交换
121 | [3, 4, 2, 1, 5] // 4>3，交换
122 | [3, 2, 4, 1, 5] // 4>2，交换
123 | [3, 2, 1, 4, 5] // 4>1，交换
124 | [2, 3, 1, 4, 5] // 3>2，交换
125 | [2, 1, 3, 4, 5] // 3>1，交换
126 | [1, 2, 3, 4, 5] // 2>1，交换
127 | ```
128 | 
129 | nice，没必要的比较已经完全没有了。
130 | 
131 | ## 选择排序
132 | 
133 | **主要思想**：找到数组中的最小值然后将其放置在第一位，接着第二位第三位。。。
134 | 
135 | **时间复杂度**：O(n2)
136 | 
137 | **空间复杂度**：O(1)
138 | 
139 | 直接看代码吧：
140 | 
141 | ```javascript
142 | function selectionSort(arr) {
143 |   const len = arr.length; // 用len存储数组长度
144 |   let indexMin = 0; // 最小值索引
145 |   let temp = 0;
146 |   for (let i = 0; i < len - 1; i += 1) { //外循环遍历数组
147 |     indexMin = i; // 先假设这一轮循环的第一个值是最小的
148 |     for (let j = i; j < len; j += 1) { // 比较i时候会比它之后的数小，如果小，则令indexMin存储这个更小值的索引
149 |        if (arr[indexMin] > arr[j]) {
150 |         indexMin = j;
151 |       }
152 |     }
153 |     if (i !== indexMin) { // 执行完内循环之后判断当前值i是否是最小的，如果不是，就要交换
154 |       temp = arr[i];
155 |       arr[i] = arr[indexMin];
156 |       arr[indexMin] = temp;
157 |     }
158 |     console.log(arr);
159 |   }
160 |   return arr;
161 | }
162 | ```
163 | 
164 | ```javascript
165 | [5, 4, 3, 2, 1] 
166 | [1, 4, 3, 2, 5] // 寻找最小值1，交换1和5
167 | [1, 2, 3, 4, 5] // 寻找最小值2，交换2和4
168 | [1, 2, 3, 4, 5] // 寻找最小值3，不交换
169 | [1, 2, 3, 4, 5] // 寻找最小值4，不交换
170 | [1, 2, 3, 4, 5] // 寻找最小值5，不交换
171 | ```
172 | 
173 | 是不是很酷，然而它的时间复杂度其实还是 `O(n2)`。
174 | 
175 | ## 插入排序
176 | 
177 | **主要思想**：每次将一个元素与已排序的元素进行逐一比较，直到找到合适的位置按大小插入。
178 | 
179 | **时间复杂度**：O(n2)
180 | 
181 | **空间复杂度**：O(1)
182 | 
183 | 直接看代码吧：
184 | 
185 | ```javascript
186 | function insertionSort(arr) {
187 |   const len = arr.length; // 数组长度
188 |   let j = 0; // 使用的辅助变量
189 |   let temp = 0;
190 |   for (let i = 1; i < len; i++) { // 外循环，从1开始
191 |     j = i; // 当前索引赋给j
192 |     temp = arr[i]; // 当前值存在temp
193 |     while (j > 0 && arr[j - 1] > temp) { // 如果j前面的数比它大，就往前移，直到第一位
194 |       arry[j] = arr[j - 1];
195 |       j--;
196 |     }
197 |     arr[j] = temp; // temp是要排序的那个数，放到正确的j的位置上
198 |   }
199 |   return arr;
200 | }
201 | ```
202 | 
203 | ## 归并排序
204 | 
205 | **主要思想**：思想主要是分治。将原始数组划分成较小的数组，直到每个小数组只有一个位置，然后将小数组归并成较大的数组。
206 | 
207 | **时间复杂度**：O(nlogn)
208 | 
209 | **空间复杂度**：O(n)
210 | 
211 | 直接看代码吧：
212 | 
213 | ```javascript
214 | // 分
215 | function mergeSort(arr) {
216 |   const len = arr.length;
217 |   if (len === 1) {
218 |     return arr;
219 |   }
220 |   const mid = Math.floor(len / 2);
221 |   const left = arr.slice(0, mid);
222 |   const right = arr.slice(mid, len);
223 |   return merge(mergeSort(left), mergeSort(right));
224 | }
225 |  
226 | // 合
227 | function merge(left, right) {
228 |   const result = [];
229 |   let il = 0;
230 |   let ir = 0;
231 |   while (il < left.length && ir < right.length) {
232 |     if (left[il] < right[ir]) {
233 |       result.push(left[il++]);
234 |     } else {
235 |       result.push(right[ir++]);
236 |     }
237 |   }
238 |   while (il < left.length) {
239 |     result.push(left[il++]);
240 |   }
241 |   while (ir < right.length) {
242 |     result.push(right[ir++]);
243 |   }
244 |   return result;
245 | }
246 | ```
247 | 
248 | ## 快速排序
249 | 
250 | 来看看面试中最喜欢考察的快速排序。
251 | 
252 | **主要思想**：每次将一个元素与已排序的元素进行逐一比较，直到找到合适的位置按大小插入。
253 | 
254 | **时间复杂度**：O(nlogn)
255 | 
256 | **空间复杂度**：O(logn)
257 | 
258 | ```javascript
259 | function quickSort(arr) {
260 |   if (arr.length <= 1) {
261 |     return arr;
262 |   }
263 |   const pivotIndex = Math.floor(arr.length / 2);
264 |   const pivot = arr.splice(pivotIndex, 1)[0]; // 将这个元素取出并从原数组中删除
265 |   const left = [];
266 |   const right = [];
267 |   for (let i = 0; i < arr.length; i++) {
268 |     if (arr[i] < pivot) {
269 |       left.push(arr[i]);
270 |     } else {
271 |       right.push(arr[i]);
272 |     }
273 |   }
274 |   return quickSort(left).concat(pivot, quickSort(right));
275 | }
276 | ```
277 | 


--------------------------------------------------------------------------------
/2017/JavaScript数据结构及算法——查找.md:
--------------------------------------------------------------------------------
 1 | 本文主要记录的是JavaScript实现常用的查找算法。
 2 | 
 3 | ## 前言
 4 | 
 5 | 用JavaScript写算法是种怎么样的体验？不喜欢算法的我最近也对数据结构和算法有点兴趣。。。所以，将会有这些：
 6 | 
 7 | - JavaScript数据结构及算法——栈
 8 | - JavaScript数据结构及算法——队列
 9 | - JavaScript数据结构及算法——链表
10 | - [JavaScript数据结构及算法——排序](https://github.com/axuebin/articles/issues/12)
11 | - [JavaScript数据结构及算法——查找](https://github.com/axuebin/articles/issues/13)
12 | - JavaScript数据结构及算法——树
13 | 
14 | 现阶段我对于数据结构、算法的理解还很浅，希望各位大佬多多指导。
15 | 
16 | ## 查找
17 | 
18 | > 查找是在大量的信息中寻找一个特定的信息元素，在计算机应用中，查找是常用的基本运算，例如编译程序中符号表的查找。本文简单概括性的介绍了常见的七种查找算法，说是七种，其实二分查找、插值查找以及斐波那契查找都可以归为一类——插值查找。插值查找和斐波那契查找是在二分查找的基础上的优化查找算法。
19 | 
20 | 这里主要提到如何用JavaScript实现顺序查找和二分查找。
21 | 
22 | ## 顺序查找
23 | 
24 | **主要思想**：将每一个数据结构中的元素和要查找的元素做比较，类似于JavaScript中indexOf
25 | 
26 | **时间复杂度**：O(n)
27 | 
28 | 代码：
29 | 
30 | ```javascript
31 | function sequentialSearch(array,item){
32 |   for (let i = 0; i < array.length; i += 1) {
33 |     if ( item === array[i] ) {
34 |       return i;
35 |     }
36 |   }
37 |   return -1;
38 | }
39 | ```
40 | 
41 | 比如我现在有这样一个数组 `[5, 4, 3, 2, 1]` ，然后我们需要在其中找到 `3` ，整个流程应该是这样：
42 | 
43 | ```javascript
44 | [5, 4, 3, 2, 1] // 5 !== 3，继续遍历
45 | [5, 4, 3, 2, 1] // 4 !== 3，继续遍历
46 | [5, 4, 3, 2, 1] // 3 === 3，找到了
47 | ```
48 | 
49 | ## 二分查找
50 | 
51 | **主要思想**：首先这个数组是排好序的，然后将数组一直二分缩小范围，直到找到为止。
52 | 
53 | **时间复杂度**：O(logn)
54 | 
55 | 代码：
56 | 
57 | ```javascript
58 | function binarySearch(array, item) {
59 |   const sortArray = quickSort(array); // 对数组进行快排
60 |   let low = 0; // 设置左边界
61 |   let high = sortArray.length - 1; // 设置右边界
62 |   let mid = 0; // 设置中间值
63 |   let element = 0;
64 |   while (low < high) {
65 |     mid = Math.floor((low + high) / 2); // 选择整个数组的中间值
66 |     element = sortArray[mid];
67 |     if (element < item) { // 如果待搜索值比选中值要大，则返回步骤一在右边的字数组中寻找
68 |       low = mid + 1;
69 |     } else if (element > item) { // 如果待搜索值比选中值要小，则返回步骤一在左边的字数组中寻找
70 |       high = mid - 1;
71 |     } else {
72 |       return mid; // 如果刚好选中，恭喜你，直接返回
73 |     }
74 |   }
75 |   return -1;
76 | }
77 | ```


--------------------------------------------------------------------------------
/2017/React V15.6 实现一个简单的个人博客.md:
--------------------------------------------------------------------------------
  1 | 学习 React 的过程中实现了一个个人主页，没有复杂的实现和操作，适合入门 ~
  2 | 
  3 | 这个项目其实功能很简单，就是常见的主页、博客、demo、关于我等功能。
  4 | 
  5 | 页面样式都是自己写的，黑白风格，可能有点丑。不过还是最低级的 CSS ，准备到时候重构 ~
  6 | 
  7 | 如果有更好的方法，或者是我的想法有偏差的，欢迎大家交流指正
  8 | 
  9 | 欢迎参观：[http://axuebin.com/react-blog](http://axuebin.com/react-blog)
 10 | 
 11 | Github：[https://github.com/axuebin/react-blog](https://github.com/axuebin/react-blog)
 12 | 
 13 | ## 预览图
 14 | 
 15 | ### 首页
 16 | 
 17 | ![](http://omufjr5bv.bkt.clouddn.com/article%E9%A6%96%E9%A1%B5.png)
 18 | 
 19 | ### 博客页
 20 | 
 21 | ![](http://omufjr5bv.bkt.clouddn.com/article%E5%8D%9A%E5%AE%A2%E9%A1%B5.png)
 22 | 
 23 | ### 文章内容页
 24 | 
 25 | ![](http://omufjr5bv.bkt.clouddn.com/article%E6%96%87%E7%AB%A0%E5%86%85%E5%AE%B9.png)
 26 | 
 27 | ### Demo页
 28 | 
 29 | ![](http://omufjr5bv.bkt.clouddn.com/articledemo%E9%A1%B5.png)
 30 | 
 31 | ## 关键技术
 32 | 
 33 | - ES6：项目中用到 ES6 的语法，在写的过程中尽量使用，可能有的地方没想到
 34 | - React
 35 | - React-Router：前端路由
 36 | - React-Redux：状态管理
 37 | - webpack：打包
 38 | - marked：Markdown渲染
 39 | - highlight.js：代码高亮
 40 | - fetch：异步请求数据
 41 | - eslint：代码检查
 42 | - antd：部分组件懒得自己写。。
 43 | 
 44 | ## 准备工作
 45 | 
 46 | 由于不是使用 React 脚手架生成的项目，所以每个东西都是自己手动配置的。。。
 47 | 
 48 | ### 模块打包器
 49 | 
 50 | 打包用的是 `webpack 2.6.1`，准备入坑 `webpack 3` 。
 51 | 
 52 | 官方文档：[https://webpack.js.org/](https://webpack.js.org/)
 53 | 
 54 | 中文文档：[https://doc.webpack-china.org/](https://doc.webpack-china.org/)
 55 | 
 56 | 对于 `webpack` 的配置还不是太熟，就简单的配置了一下可供项目启动：
 57 | 
 58 | ```javascript
 59 | var webpack = require('webpack');
 60 | var path = require('path');
 61 | 
 62 | module.exports = {
 63 |   context: __dirname + '/src',
 64 |   entry: "./js/index.js",
 65 |   module: {
 66 |     loaders: [
 67 |       {
 68 |         test: /\.js?$/,
 69 |         exclude: /(node_modules)/,
 70 |         loader: 'babel-loader',
 71 |         query: {
 72 |           presets: ['react', 'es2015']
 73 |         }
 74 |       }, {
 75 |         test: /\.css$/,
 76 |         loader: 'style-loader!css-loader'
 77 |       }, {
 78 |         test: /\.js$/,
 79 |         exclude: /(node_modules)/,
 80 |         loader: 'eslint-loader'
 81 |       }, {
 82 |         test: /\.json$/,
 83 |         loader: 'json-loader'
 84 |       }
 85 |     ]
 86 |   },
 87 |   output: {
 88 |     path: __dirname + "/src/",
 89 |     filename: "bundle.js"
 90 |   }
 91 | }
 92 | 
 93 | ```
 94 | 
 95 | `webpack` 有几个重要的属性：`entry`、`module`、`output`、`plugins`，在这里我还没使用到插件，所以没有配置 `plugins` 。
 96 | 
 97 | `module` 中的 `loaders`：
 98 | 
 99 | - babel-loader：将代码转换成es5代码
100 | - css-loader：处理css中路径引用等问题
101 | - style-loader：动态把样式写入css
102 | - eslin-loader：使用eslint
103 | 
104 | ### 包管理
105 | 
106 | 包管理现在使用的还是 `NPM` 。
107 | 
108 | 官方文档：[https://docs.npmjs.com/](https://docs.npmjs.com/)
109 | 
110 | 1. npm init
111 | 2. npm install
112 | 3. npm uninstall
113 | 
114 | 关于`npm`，可能还需要了解 `dependencies` 和 `devDependencies` 的区别，我是这样简单理解的：
115 | 
116 | - dependencies：项目跑起来后需要使用到的模块
117 | - devDependencies：开发的时候需要用的模块，但是项目跑起来后就不需要了
118 | 
119 | ### 代码检查
120 | 
121 | 项目使用现在比较流行的 `ESLint` 作为代码检查工具，并使用 `Airbnb` 的检查规则。
122 | 
123 | ESLint：[https://github.com/eslint/eslint](https://github.com/eslint/eslint)
124 | 
125 | eslint-config-airbnb：[https://www.npmjs.com/package/eslint-config-airbnb](https://www.npmjs.com/package/eslint-config-airbnb)
126 | 
127 | 在 `package.json` 中可以看到，关于 `ESLint` 的包就是放在 `devDependencies` 底下的，因为它只是在开发的时候会使用到。 
128 | 
129 | #### 使用
130 | 
131 | - 在 `webpack` 配置中加载 `eslint-loader`：
132 | 
133 | ```javascript
134 | module: {
135 |   loaders: [
136 |       {
137 |         test: /\.js$/,
138 |         exclude: /(node_modules)/,
139 |         loader: 'eslint-loader'
140 |       }
141 |     ]
142 |   }
143 | ```
144 | 
145 | - 创建 `.elintrc`文件：
146 | 
147 | ```javascript
148 | {
149 |   "extends": "airbnb",
150 |   "env":{
151 |     "browser": true
152 |   },
153 |   "rules":{}
154 | }
155 | ```
156 | 
157 | 然后在运行 `webpack` 的时候，就会执行代码检查啦，看着一堆的 `warning` 、`error` 是不是很爽~
158 | 
159 | 这里有常见的ESLint规则：[http://eslint.cn/docs/rules/](http://eslint.cn/docs/rules/)
160 | 
161 | ### 数据源
162 | 
163 | 由于是为了练习 `React`，暂时就只考虑搭建一个静态页面，而且现在越来越多的大牛喜欢用 `Github Issues` 来写博客，也可以更好的地提供评论功能，所以我也想试试用 `Github Issues` 来作为博客的数据源。
164 | 
165 | API在这：[https://developer.github.com/v3/issues/](https://developer.github.com/v3/issues/)
166 | 
167 | 我也没看完全部的API，就看了看怎么获取 `Issues` 列表。。
168 | 
169 | ```javascript
170 | https://api.github.com/repos/axuebin/react-blog/issues?creator=axuebin&labels=blog
171 | ```
172 | 
173 | 通过控制参数 `creator` 和 `labels`，可以筛选出作为展示的 `Issues`。它会返回一个带有 `issue` 格式对象的数组。每一个 `issue` 有很多属性，我们可能不需要那么多，先了解了解底下这几种：
174 | 
175 | ```javascript
176 | // 为了方便，我把注释写在json中了。。
177 | [{
178 |   "url": ,  // issue 的 url
179 |   "id": ,  // issue id ， 是一个随机生成的不重复的数字串 
180 |   "number": ,  // issue number ， 根据创建 issue 的顺序从1开始累加
181 |   "title": ,  // issue 的标题
182 |   "labels": [], // issue 的所有 label，它是一个数组
183 |   "created_at": , // 创建 issue 的时间
184 |   "updated_at": , // 最后修改 issue 的时间
185 |   "body": , // issue 的内容
186 | }]
187 | ```
188 | 
189 | #### 异步请求数据
190 | 
191 | 项目中使用的异步请求数据的方法时 `fetch`。
192 | 
193 | 关于 `fetch` ：[https://segmentfault.com/a/1190000003810652](https://segmentfault.com/a/1190000003810652)
194 | 
195 | 使用起来很简单：
196 | 
197 | ```javascript
198 | fetch(url).then(response => response.json())
199 |       .then(json => console.log(json))
200 |       .catch(e => console.log(e));
201 | ```
202 | 
203 | ### markdown 渲染
204 | 
205 | 在 `Github` 上查找关于如何在 `React` 实现 `markdown` 的渲染，查到了这两种库：
206 | 
207 | - react-markdown：[https://github.com/rexxars/react-markdown](https://github.com/rexxars/react-markdown)
208 | - marked：[https://github.com/chjj/marked](https://github.com/chjj/marked)
209 | 
210 | 使用起来都很简单。
211 | 
212 | 如果是 `react-markdown`,只需要这样做：
213 | 
214 | ```javascript
215 | import ReactMarkdown from 'react-markdown';
216 | 
217 | const input = '# This is a header\n\nAnd this is a paragraph';
218 | ReactDOM.render(
219 |     <ReactMarkdown source={input} />,
220 |     document.getElementById('container')
221 | );
222 | ```
223 | 
224 | 如果是`marked`，这样做：
225 | 
226 | ```javascript
227 | import marked from 'marked';
228 | 
229 | const input = '# This is a header\n\nAnd this is a paragraph';
230 | const output = marked(input);
231 | ```
232 | 
233 | 这里有点不太一样，我们获取到了一个字符串 `output`，注意，是一个字符串，所以我们得将它插入到 `dom`中，在 `React` 中，我们可以这样做：
234 | 
235 | ```html
236 | <div dangerouslySetInnerHTML={{ __html: output }} />
237 | ```
238 | 
239 | 由于我们的项目是基于 `React` 的，所以想着用 `react-markdown`会更好，而且由于安全问题 `React` 也不提倡直接往 `dom` 里插入字符串，然而在使用过程中发现，`react-markdown` 对表格的支持不友好，所以只好弃用，改用 `marked`。
240 | 
241 | ### 代码高亮
242 | 
243 | 代码高亮用的是`highlight.js`：[https://github.com/isagalaev/highlight.js](https://github.com/isagalaev/highlight.js)
244 | 
245 | 它和`marked`可以无缝衔接~
246 | 
247 | 只需要这样既可：
248 | 
249 | ```javascript
250 | import hljs from 'highlight.js';
251 | 
252 | marked.setOptions({
253 |   highlight: code => hljs.highlightAuto(code).value,
254 | });
255 | ```
256 | 
257 | `highlight.js`是支持多种代码配色风格的，可以在`css`文件中进行切换：
258 | 
259 | ```css
260 | @import '~highlight.js/styles/atom-one-dark.css';
261 | ```
262 | 
263 | 在这可以看到每种语言的高亮效果和配色风格：[https://highlightjs.org/](https://highlightjs.org/)
264 | 
265 | ## React
266 | 
267 | ### state 和 props 是什么
268 | 
269 | 可以看之前的一篇文章：[https://github.com/axuebin/react-blog/issues/8](https://github.com/axuebin/react-blog/issues/8)
270 | 
271 | ### 关于React组件的生命周期
272 | 
273 | 可以看之前的一篇文章：[https://github.com/axuebin/react-blog/issues/9](https://github.com/axuebin/react-blog/issues/9)
274 | 
275 | ## 前端路由
276 | 
277 | 项目中前端路由用的是 `React-Router V4`。
278 | 
279 | 官方文档：[https://reacttraining.com/react-router/web/guides/quick-start](https://reacttraining.com/react-router/web/guides/quick-start)
280 | 
281 | 中文文档：[http://reacttraining.cn/](http://reacttraining.cn/)
282 | 
283 | ### 基本使用
284 | 
285 | ```javascript
286 | <Link to="/blog">Blog</Link>
287 | ```
288 | 
289 | ```javascript
290 | <Router>
291 |   <Route exact path="/" component={Home} />
292 |   <Route path="/blog" component={Blog} />
293 |   <Route path="/demo" component={Demo} />
294 | </Router>
295 | ```
296 | 
297 | 注意：一定要在根目录的 `Route` 中声明 `exact`，要不然点击任何链接都无法跳转。
298 | 
299 | ### 2级目录跳转
300 | 
301 | 比如我现在要在博客页面上点击跳转，此时的 `url` 是 `localhost:8080/blog`,需要变成 `localhost:8080/blog/article`，可以这样做：
302 | 
303 | ```javascript
304 | <Route path={`${this.props.match.url}/article/:number`} component={Article} />
305 | ```
306 | 
307 | 这样就可以跳转到 `localhost:8080/blog/article` 了，而且还传递了一个 `number` 参数，在 `article` 中可以通过 `this.props.params.number`获取。
308 | 
309 | ### HashRouter
310 | 
311 | 当我把项目托管到 `Github Page` 后，出现了这样一个问题。
312 | 
313 | > 刷新页面出现 `Cannot GET /` 提示，路由未生效。
314 | 
315 | 通过了解，知道了原因是这样，并且可以解决：
316 | 
317 | - 由于刷新之后，会根据URL对服务器发送请求，而不是处理路由，导致出现 `Cannot GET /` 错误。
318 | - 通过修改 `<Router>` → `<HashRouter>` 。
319 | - `<HashRouter>` 借助URL上的哈希值（hash）来实现路由。可以在不需要全屏刷新的情况下，达到切换页面的目的。
320 | 
321 | ### 路由跳转后不会自动回到顶部
322 | 
323 | 当前一个页面滚动到一定区域后，点击跳转后，页面虽然跳转了，但是会停留在滚动的区域，不会自动回到页面顶部。
324 | 
325 | 可以通过这样来解决：
326 | 
327 | ```javascript
328 | componentDidMount() {
329 |     this.node.scrollIntoView();
330 | }
331 | 
332 | render() {
333 |   return (
334 |     <div ref={node => this.node = node} ></div>
335 |   );
336 | }
337 | ```
338 | 
339 | ## 状态管理
340 | 
341 | 项目中多次需要用到从 `Github Issues` 请求来的数据，因为之前就知道 `Redux` 这个东西的存在，虽然有点大材小用，为了学习还是将它用于项目的状态管理，只需要请求一次数据即可。
342 | 
343 | 官方文档：[http://redux.js.org/](http://redux.js.org/)
344 | 
345 | 中文文档：[http://cn.redux.js.org/](http://cn.redux.js.org/)
346 | 
347 | 简单的来说，每一次的修改状态都需要触发 `action` ，然而其实项目中我现在还没用到修改数据2333。。。
348 | 
349 | 关于状态管理这一块，由于还不是太了解，就不误人子弟了~
350 | 
351 | ## 主要组件
352 | 
353 | React是基于组件构建的，所以在搭建页面的开始，我们要先考虑一下我们需要一些什么样的组件，这些组件之间有什么关系，哪些组件是可以复用的等等等。
354 | 
355 | ### 首页
356 | 
357 | ![](http://omufjr5bv.bkt.clouddn.com/article%E9%A6%96%E9%A1%B5.gif)
358 | 
359 | 可以看到，我主要将首页分成了四个部分：
360 | 
361 | - header：网站标题，副标题，导航栏
362 | - banner：about me ~，准备用自己的照片换个背景，但是还没有合适的照片
363 | - card area：暂时是三个卡片
364 |   - blog card：最近的几篇博文
365 |   - demo card：几个小demo类别
366 |   - me card：算是我放飞自我的地方吧 
367 | - footer：版权信息、备案信息、浏览量
368 | 
369 | ### 博客页
370 | 
371 | ![](http://omufjr5bv.bkt.clouddn.com/article%E5%8D%9A%E5%AE%A2%E9%A1%B5.gif)
372 | 
373 | 博客页就是很中规中矩的一个页面吧，这部分是整个项目中代码量最多的部分，包括以下几部分：
374 | 
375 | - 文章列表组件
376 | - 翻页组件
377 | - 归档按钮组件
378 | - 类别组件
379 | - 标签组件
380 | 
381 | #### 文章列表
382 | 
383 | 文章列表其实就是一个 `list`，里面有一个个的 `item`:
384 | 
385 | ```html
386 | <div class="archive-list">
387 |   <div class="blog-article-item">文章1</div>
388 |   <div class="blog-article-item">文章2</div>
389 | <div>
390 | ```
391 | 
392 | 对于每一个 `item`，其实是这样的：
393 | 
394 | ![](http://omufjr5bv.bkt.clouddn.com/article%E6%96%87%E7%AB%A0item.png)
395 | 
396 | 一个文章item组件它可能需要包括：
397 | 
398 | - 文章标题
399 | - 文章发布的时间、类别、标签等
400 | - 文章摘要
401 | - ...
402 | 
403 | 如果用 `DOM` 来描述，它应该是这样的：
404 | 
405 | ```html
406 | <div class="blog-article-item">
407 |   <div class="blog-article-item-title">文章标题</div>
408 |   <div class="blog-article-item-time">时间</div>
409 |   <div class="blog-article-item-label">类别</div>
410 |   <div class="blog-article-item-label">标签</div>
411 |   <div class="blog-article-item-desc">摘要</div>
412 | </div>
413 | ```
414 | 
415 | 所以，我们可以有很多个组件：
416 | 
417 | - 文章列表组件 `<ArticleList />`
418 | - 文章item组件 `<ArticleItem />`
419 | - 类别标签组件 `<ArticleLabel />`
420 | 
421 | 它们可能是这样一个关系：
422 | 
423 | ```javascript
424 | <ArticleList>
425 |   <ArticleItem>
426 |     <ArticleTitle />
427 |     <ArticleTime />
428 |     <ArticleLabel />
429 |     <ArticleDesc />
430 |   </ArticleItem>
431 |   <ArticleItem></ArticleItem>
432 |   <ArticleItem></ArticleItem>
433 | </ArticleList>
434 | ```
435 | 
436 | #### 分页
437 | 
438 | 对于分页功能，传统的实现方法是在后端完成分页然后分批返回到前端的，比如可能会返回一段这样的数据：
439 | 
440 | ```javascript
441 | {
442 |   total:500,
443 |   page:1,
444 |   data:[]
445 | }
446 | ```
447 | 
448 | 也就是后端会返回分好页的数据，含有表示总数据量的`total`、当前页数的`page`，以及属于该页的数据`data`。
449 | 
450 | 然而，我这个页面只是个静态页面，数据是放在Github Issues上的通过API获取的。（Github Issues的分页貌似不能自定义数量...），所以没法直接返回分好的数据，所以只能在前端强行分页~
451 | 
452 | 分页功能这一块我偷懒了...用的是 `antd` 的翻页组件 `<Pagination />`。
453 | 
454 | 官方文档：[https://ant.design/components/pagination-cn/](https://ant.design/components/pagination-cn/)
455 | 
456 | 文档很清晰，使用起来也特别简单。
457 | 
458 | 前端渲染的逻辑（有点蠢）：将数据存放到一个数组中，根据当前页数和每页显示条数来计算该显示的索引值，取出相应的数据即可。
459 | 
460 | 翻页组件中：
461 | 
462 | ```javascript
463 | constructor() {
464 |   super();
465 |   this.onChangePage = this.onChangePage.bind(this);
466 | }
467 | 
468 | onChangePage(pageNumber) {
469 |   this.props.handlePageChange(pageNumber);
470 | }
471 | 
472 | render() {
473 |   return (
474 |     <div className="blog-article-paging">
475 |       <Pagination onChange={this.onChangePage} defaultPageSize={this.props.defaultPageSize} total={this.props.total} />
476 |     </div>
477 |   );
478 | }
479 | ```
480 | 
481 | 当页数发生改变后，会触发从父组件传进 `<ArticlePaging />` 的方法 `handlePageChange`，从而将页数传递到父组件中，然后传递到 `<ArticleList />` 中。 
482 | 
483 | 父组件中：
484 | 
485 | ```javascript
486 | handlePageChange(pageNumber) {
487 |   this.setState({ currentPage: pageNumber });
488 | }
489 | 
490 | render() {
491 |   return (
492 |     <div className="archive-list-area">
493 |       <ArticleList issues={this.props.issues} defaultPageSize={this.state.defaultPageSize} pageNumber={this.state.currentPage} />
494 |       <ArticlePaging handlePageChange={this.handlePageChange} total={this.props.issues.length} defaultPageSize={this.state.defaultPageSize} />
495 |     </div>
496 |   );
497 | }
498 | ```
499 | 
500 | 列表中：
501 | 
502 | ```javascript
503 | render() {
504 |   const articlelist = [];
505 |   const issues = this.props.issues;
506 |   const currentPage = this.props.pageNumber;
507 |   const defaultPageSize = this.props.defaultPageSize;
508 |   const start = currentPage === 1 ? 0 : (currentPage - 1) * defaultPageSize;
509 |   const end = start + defaultPageSize < issues.length ? start + defaultPageSize : issues.length;
510 |   for (let i = start; i < end; i += 1) {
511 |     const item = issues[i];
512 |     articlelist.push(<ArticleItem />);
513 |   }
514 | }
515 | ```
516 | 
517 | #### label
518 | 
519 | 在 `Github Issues` 中，可以为一个 `issue` 添加很多个 `label`，我将这些对于博客内容有用的 `label` 分为三类，分别用不同颜色来表示。
520 | 
521 | 这里说明一下， `label` 创建后会随机生成一个 `id`，虽然说 `id` 是不重复的，但是文章的类别、标签会一直在增加，当新加一个 `label` 时，程序中可能也要进行对应的修改，当作区分 `label` 的标准可能就不太合适，所以我采用颜色来区分它们。
522 | 
523 | - 表示这是一篇文章的blog：只有有 `blog` 的 `issue` 才能显示在页面上，过滤 `bug` 、`help` 等
524 | - 表示文章类别的：用来表示文章的类别，比如“前端”、“摄影”等
525 | - 表示文章标签的：用来表示文章的标签，比如“JavaScript”、“React”等
526 | 
527 | 即使有新的 `label` ，也只要根据颜色区分是属于哪一类就好了。
528 | 
529 | ##### 类别
530 | 
531 | ![](http://omufjr5bv.bkt.clouddn.com/article%E7%B1%BB%E5%88%AB.gif)
532 | 
533 | 在这里的思路主要就是：遍历所有 `issues`，然后再遍历每个 `issue`的 `labels`，找出属于类别的 `label`，然后计数。
534 | 
535 | ```javascript
536 | const categoryList = [];
537 | const categoryHash = {};
538 | for (let i = 0; i < issues.length; i += 1) {
539 |   const labels = issues[i].labels;
540 |   for (let j = 0; j < labels.length; j += 1) {
541 |     if (labels[j].color === COLOR_LABEL_CATEGORY) {
542 |       const category = labels[j].name;
543 |       if (categoryHash[category] === undefined) {
544 |         categoryHash[category] = true;
545 |         const categoryTemp = { category, sum: 1 };
546 |         categoryList.push(categoryTemp);
547 |       } else {
548 |         for (let k = 0; k < categoryList.length; k += 1) {
549 |           if (categoryList[k].category === category) {
550 |             categoryList[k].sum += 1;
551 |           }
552 |         }
553 |       }
554 |     }
555 |   }
556 | }
557 | ```
558 | 
559 | 这样实现得要经历三次循环，复杂度有点高，感觉有点蠢，有待改进，如果有更好的方法，请多多指教~
560 | 
561 | ##### 标签
562 | 
563 | ![](http://omufjr5bv.bkt.clouddn.com/article%E6%A0%87%E7%AD%BE.gif)
564 | 
565 | 这里的思路和类别的思路基本一样，只不过不同的显示方式而已。
566 | 
567 | 本来这里是想通过字体大小来体现每个标签的权重，后来觉得可能对于我来说，暂时只有那几个标签会很频繁，其它标签可能会很少，用字体大小来区分就没有什么意义，还是改成排序的方式。
568 | 
569 | ### 文章页
570 | 
571 | ![](http://omufjr5bv.bkt.clouddn.com/article%E6%96%87%E7%AB%A0%E9%A1%B5.gif)
572 | 
573 | 文章页主要分为两部分：
574 | 
575 | - 文章内容区域：显示文章内容，显示在页面的主体区域
576 | - 章节目录：文章的章节目录，显示在文章的右侧区域
577 | 
578 | #### 文章内容
579 | 
580 | 有两种方式获取文章具体内容：
581 | 
582 | - 从之前已经请求过的数组中去遍历查找所需的文章内容
583 | - 通过 `issue number` 重新发一次请求直接获取内容
584 | 
585 | 最后我选择了后者。
586 | 
587 | 文章是用 `markdown` 语法写的，所以要先转成 `html` 然后插入页面中，这里用了一个 `React` 不提倡的属性：`dangerouslySetInnerHTML`。 
588 | 
589 | 除了渲染`markdown`，我们还得对文章中的代码进行高亮显示，还有就是定制文章中不同标签的样式。
590 | 
591 | #### 章节目录
592 | 
593 | 首先，这里有一个 `issue`，希望大家可以给一些建议~
594 | 
595 | 文章内容是通过 `markdown` 渲染后插入 `dom` 中的，由于 `React` 不建议通过 `document.getElementById` 的形式获取 `dom` 元素，所以只能想办法通过字符串匹配的方式获取文章的各个章节标题。
596 | 
597 | 由于我不太熟悉正则表达式，曾经还在sf上咨询过，就采用了其中一个答案：
598 | 
599 | ```javascript
600 | const issues = content;
601 | const menu = [];
602 | const patt = /(#+)\s+?(.+)/g;
603 | let result = null;
604 | while ((result = patt.exec(issues))) {
605 |   menu.push({ level: result[1].length, title: result[2] });
606 | }
607 | ```
608 | 
609 | 这样可以获取到所有的 `#` 的字符串，也就是 `markdown` 中的标题， `result[1].length` 表示有几个 `#`，其实就是几级标题的意思，`title` 就是标题内容了。
610 | 
611 | 这里还有一个问题，本来通过 `<a target="" />` 的方式可以实现点击跳转，但是现在渲染出来的 `html` 中对于每一个标题没有独一无二的标识。。。
612 | 
613 | ### 归档页
614 | 
615 | 按年份归档：
616 | 
617 | ![](http://omufjr5bv.bkt.clouddn.com/article%E5%BD%92%E6%A1%A31.png)
618 | 
619 | 按类别归档：
620 | 
621 | ![](http://omufjr5bv.bkt.clouddn.com/article%E5%BD%92%E6%A1%A3.png)
622 | 
623 | 按标签归档：
624 | 
625 | ![](http://omufjr5bv.bkt.clouddn.com/article%E5%BD%92%E6%A1%A32.png)
626 | 
627 | ## 问题
628 | 
629 | 基本功能是已经基本实现了，现在还存在着以下几个问题，也算是一个 `TodoList` 吧
630 | 
631 | - 评论功能。拟利用 `Github Issues API` 实现评论，得实现 `Github` 授权登录
632 | - 回到顶部。拟利用 `antd` 的组件，但是 `state` 中 `visibility` 一直是 `false`
633 | - 首页渲染。现在打包完的js文件还是太大了，导致首页渲染太慢，这个是接下来工作的重点，也了解过关于这方面的优化：
634 |   - `webpack` 按需加载。这可能是目前最方便的方式
635 |   - 服务端渲染。这就麻烦了，但是好处也多，不仅解决渲染问题，还有利于SEO，所以也是 `todo` 之一
636 | - 代码混乱，逻辑不对。这是我自己的问题，需要再修炼。
637 | 
638 | 
639 | 原文地址：[https://github.com/axuebin/react-blog/issues/17](https://github.com/axuebin/react-blog/issues/17)


--------------------------------------------------------------------------------
/2017/React中state和props分别是什么？.md:
--------------------------------------------------------------------------------
  1 | 在任何应用中，数据都是必不可少的。我们需要直接的改变页面上一块的区域来使得视图的刷新，或者间接地改变其他地方的数据。React的数据是自顶向下单向流动的，即从父组件到子组件中，组件的数据存储在`props`和`state`中，这两个属性有啥子区别呢？
  2 | 
  3 | ## props
  4 | 
  5 | React的核心思想就是组件化思想，页面会被切分成一些独立的、可复用的组件。
  6 | 
  7 | 组件从概念上看就是一个函数，可以接受一个参数作为输入值，这个参数就是`props`，所以可以把`props`理解为从外部传入组件内部的数据。由于React是单向数据流，所以`props`基本上也就是从服父级组件向子组件传递的数据。
  8 | 
  9 | ### 用法
 10 | 
 11 | 假设我们现在需要实现一个列表，根据React组件化思想，我们可以把列表中的行当做一个组件，也就是有这样两个组件：`<ItemList/>`和`<Item/>`。
 12 | 
 13 | 先看看`<ItemList/>`
 14 | 
 15 | ```javascript
 16 | import Item from "./item";
 17 | export default class ItemList extends React.Component{
 18 |   const itemList = data.map(item => <Item item=item />);
 19 |   render(){
 20 |     return (
 21 |       {itemList}
 22 |     )
 23 |   }
 24 | }
 25 | ```
 26 | 
 27 | 列表的数据我们就暂时先假设是放在一个`data`变量中，然后通过`map`函数返回一个每一项都是`<Item item='数据'/>`的数组，也就是说这里其实包含了`data.length`个`<Item/>`组件，数据通过在组件上自定义一个参数传递。当然，这里想传递几个自定义参数都可以。
 28 | 
 29 | 在`<Item />`中是这样的：
 30 | 
 31 | ```javascript
 32 | export default class Item extends React.Component{
 33 |   render(){
 34 |     return (
 35 |       <li>{this.props.item}</li>
 36 |     )
 37 |   }
 38 | }
 39 | ```
 40 | 
 41 | 在`render`函数中可以看出，组件内部是使用`this.props`来获取传递到该组件的所有数据，它是一个对象，包含了所有你对这个组件的配置，现在只包含了一个`item`属性，所以通过`this.props.item`来获取即可。
 42 | 
 43 | ### 只读性
 44 | 
 45 | `props`经常被用作渲染组件和初始化状态，当一个组件被实例化之后，它的`props`是只读的，不可改变的。如果`props`在渲染过程中可以被改变，会导致这个组件显示的形态变得不可预测。只有通过父组件重新渲染的方式才可以把新的`props`传入组件中。
 46 | 
 47 | ### 默认参数
 48 | 
 49 | 在组件中，我们最好为`props`中的参数设置一个`defaultProps`，并且制定它的类型。比如，这样：
 50 | 
 51 | ```javascript
 52 | Item.defaultProps = {
 53 |   item: 'Hello Props',
 54 | };
 55 | 
 56 | Item.propTypes = {
 57 |   item: PropTypes.string,
 58 | };
 59 | ```
 60 | 
 61 | 关于`propTypes`，可以声明为以下几种类型：
 62 | 
 63 | ```javascript
 64 | optionalArray: PropTypes.array,
 65 | optionalBool: PropTypes.bool,
 66 | optionalFunc: PropTypes.func,
 67 | optionalNumber: PropTypes.number,
 68 | optionalObject: PropTypes.object,
 69 | optionalString: PropTypes.string,
 70 | optionalSymbol: PropTypes.symbol,
 71 | ```
 72 | 
 73 | 注意，`bool`和`func`是简写。
 74 | 
 75 | 这些知识基础数据类型，还有一些复杂的，附上链接：
 76 | 
 77 | [https://facebook.github.io/react/docs/typechecking-with-proptypes.html](https://facebook.github.io/react/docs/typechecking-with-proptypes.html)
 78 | 
 79 | ### 总结
 80 | 
 81 | `props`是一个从外部传进组件的参数，主要作为就是从父组件向子组件传递数据，它具有可读性和不变性，只能通过外部组件主动传入新的`props`来重新渲染子组件，否则子组件的`props`以及展现形式不会改变。
 82 | 
 83 | ## state
 84 | 
 85 | `state`是什么呢？
 86 | 
 87 | > State is similar to props, but it is private and fully controlled by the component.
 88 | 
 89 | 一个组件的显示形态可以由数据状态和外部参数所决定，外部参数也就是`props`，而数据状态就是`state`。
 90 | 
 91 | ### 用法
 92 | 
 93 | ```javascript
 94 | export default class ItemList extends React.Component{
 95 |   constructor(){
 96 |     super();
 97 |     this.state = {
 98 |       itemList:'一些数据',
 99 |     }
100 |   }
101 |   render(){
102 |     return (
103 |       {this.state.itemList}
104 |     )
105 |   }
106 | }
107 | ```
108 | 
109 | 首先，在组件初始化的时候，通过`this.state`给组件设定一个初始的`state`，在第一次`render`的时候就会用这个数据来渲染组件。
110 | 
111 | ### setState
112 | 
113 | `state`不同于`props`的一点是，`state`是可以被改变的。不过，不可以直接通过`this.state=`的方式来修改，而需要通过`this.setState()`方法来修改`state`。
114 | 
115 | 比如，我们经常会通过异步操作来获取数据，我们需要在`didMount`阶段来执行异步操作：
116 | 
117 | ```javascript
118 | componentDidMount(){
119 |   fetch('url')
120 |     .then(response => response.json())
121 |     .then((data) => {
122 |       this.setState({itemList:item});  
123 |     }
124 | }
125 | ```
126 | 
127 | 当数据获取完成后，通过`this.setState`来修改数据状态。
128 | 
129 | 当我们调用`this.setState`方法时，React会更新组件的数据状态`state`，并且重新调用`render`方法，也就是会对组件进行重新渲染。
130 | 
131 | **注意：通过`this.state=`来初始化`state`，使用`this.setState`来修改`state`，`constructor`是唯一能够初始化的地方。**
132 | 
133 | `setState`接受一个对象或者函数作为第一个参数，只需要传入需要更新的部分即可，不需要传入整个对象，比如：
134 | 
135 | ```javascript
136 | export default class ItemList extends React.Component{
137 |   constructor(){
138 |     super();
139 |     this.state = {
140 |       name:'axuebin',
141 |       age:25,
142 |     }
143 |   }
144 |   componentDidMount(){
145 |     this.setState({age:18})  
146 |   }
147 | }
148 | ```
149 | 
150 | 在执行完`setState`之后的`state`应该是`{name:'axuebin',age:18}`。
151 | 
152 | `setState`还可以接受第二个参数，它是一个函数，会在`setState`调用完成并且组件开始重新渲染时被调用，可以用来监听渲染是否完成：
153 | 
154 | ```javascript
155 | this.setState({
156 |   name:'xb'
157 | },()=>console.log('setState finished'))
158 | ```
159 | 
160 | ### 总结
161 | 
162 | `state`的主要作用是用于组件保存、控制以及修改自己的状态，它只能在`constructor`中初始化，它算是组件的私有属性，不可通过外部访问和修改，只能通过组件内部的`this.setState`来修改，修改`state`属性会导致组件的重新渲染。
163 | 
164 | 
165 | ## 区别
166 | 
167 | 1. `state`是组件自己管理数据，控制自己的状态，可变；
168 | 2. `props`是外部传入的数据参数，不可变；
169 | 3. 没有`state`的叫做无状态组件，有`state`的叫做有状态组件；
170 | 4. 多用`props`，少用`state`。也就是多写无状态组件。
171 | 
172 | ### 未完待续
173 | 
174 | > 未完待续


--------------------------------------------------------------------------------
/2017/React的生命周期到底是怎么一回事？.md:
--------------------------------------------------------------------------------
  1 | 尽量全面详细的整理一下React的生命周期中的知识点。
  2 | 
  3 | ## 组件
  4 | 
  5 | 组件是独立的封装的可以复用的一个小部件，它是React的核心思想之一。通过划分组件，可以将一个页面划分成独立的多个可复用的组件，各个组件通过嵌套、组合形成一个完整的页面。
  6 | 
  7 | 在React中，组件基本由三个部分组成：属性（props）、状态（state）以及生命周期方法。可以将组件简单地看作一个“状态机”，根据不同的`state`和`props`呈现不同的UI，通过与用户的交互实现不同的状态，然后重新渲染组件，UI可以跟随数据变化而变化。
  8 | 
  9 | ### 创建组件
 10 | 
 11 | 组件常分为两种：`Class Component`和`Functional Component`。
 12 | 
 13 | #### 无状态组件
 14 | 
 15 | `Functional Component`也称为无状态组件，它多用于纯展示组件，这种组件只负责根据传入的`props`来渲染组件，而不涉及`state`状态管理。
 16 | 
 17 | > 在大部分React代码中，大多数组件被写成无状态的组件，通过简单组合可以构建成其他的组件等；这种通过多个简单然后合并成一个大应用的设计模式被提倡。
 18 | 
 19 | 无状态组件可以通过函数形式或者ES6的箭头函数来创建：
 20 | 
 21 | ```javascript
 22 | // 函数
 23 | function HelloFunctional(props){
 24 |   return <div>hello {props.name}</div>;
 25 | }
 26 | 
 27 | // ES6箭头函数
 28 | const HelloFunctional = (props) => (<div>hello {props.name}</div>);
 29 | ```
 30 | 
 31 | 无状态组件有以下几个特点：
 32 | 
 33 | 1. 代码可读性更好
 34 | 2. 组件不会被实例化，渲染性能提升
 35 | 3. 无生命周期方法
 36 | 4. 只能输入`props`，同样的输入一定会有同样的输出
 37 | 
 38 | 所以，在项目中如果不需要进行状态管理，应该尽量写成无状态组件的形式。
 39 | 
 40 | #### 有状态组件
 41 | 
 42 | 现在主流的创建有状态组件的形式是通过ES6的Class来创建，取代`React.createClass`：
 43 | 
 44 | ```javascript
 45 | Class HelloClass extends React.Component{
 46 |   constructor(){
 47 |     this.state = {
 48 |       name:'axuebin'
 49 |     }
 50 |   }
 51 |   render(){
 52 |     return (<div>hello {this.state.name}</div>);
 53 |   }
 54 | }
 55 | ```
 56 | 
 57 | 这是最简洁的一个组件，它需要使用到内部状态`state`。
 58 | 
 59 | **当组件需要使用内部状态时或者需要使用生命周期方法时就需要使用有状态组件。**
 60 | 
 61 | ## 组件的生命周期
 62 | 
 63 | React组件的生命周期可以分为挂载、渲染和卸载这几个阶段，当渲染后的组件更新后，会重新渲染组件，直到卸载。先分阶段来看看每个阶段有哪些生命周期函数。
 64 | 
 65 | ### 挂载阶段（Mounting）
 66 | 
 67 | 属于这个阶段的生命周期函数有：
 68 | 
 69 | 1. constructor()
 70 | 2. componentWillMount()
 71 | 3. render()
 72 | 4. componentDidMount()
 73 | 
 74 | #### constructor()
 75 | 
 76 | ```javascript
 77 | constructor() {
 78 |   super();
 79 |   this.state = {name: 'axuebin'};
 80 |   this.handleClick = this.handleClick.bind(this); 
 81 | }
 82 | ```
 83 | 
 84 | 这个阶段就是组件的初始化，`constructor()`可以理解为组件的构造函数，从组件的类`class`实例化一个组件实例。这个函数是组件形成时就被调用的，是生命周期中最先执行的。
 85 | 
 86 | 在`constructor()`函数内，首先必须执行`super()`，否则`this.props`将是未定义，会引发异常。
 87 | 
 88 | 然后，如果有必要，可以进行：
 89 | 
 90 | - `state`的初始化
 91 | - 方法的绑定
 92 | 
 93 | 如果不需要这两步，可以直接省略`constructor`函数。
 94 | 
 95 | 有一点，在`constructor()`中，`this.props`返回`undefined`。
 96 | 
 97 | #### componentWillMount()
 98 | 
 99 | 这个函数按照驼峰法的命名规则可以理解为“组件即将被挂载”，所以这个函数是组件首次渲染（render）前调用的。
100 | 
101 | 在每次页面加载、刷新时，或者某个组件第一次展现时都会调用这个函数。通常地，我们推荐使用`constructor()`来替代。
102 | 
103 | **注意：在这个函数中，不可以调用`setState`来修改状态。**
104 | 
105 | #### render()
106 | 
107 | ```javascript
108 | render() {
109 |   return(
110 |     <div>hello {this.state.name} {this.props.age}</div>
111 |   )
112 | }
113 | ```
114 | 
115 | `render()`在生命周期中是必须的，是渲染组件用的。
116 | 
117 | 当这个函数被调用时，需要检查`this.props`和`this.state`并且返回一个元素（有且只有一个元素），这个元素可能是一个原生DOM元素，也有可能是另一个React组件。
118 | 
119 | 可以在`state`或`props`状态为空时试着返回一个`null`或者`false`来声明不想渲染任何东西。
120 | 
121 | 在这个函数中，不应该改变组件的状态，也就是不执行`this.setState`，需要保持`render()`函数的纯净。
122 | 
123 | 在这个函数中，可以对`props`进行调用并组合，但不可修改。
124 | 
125 | #### componentDidMount()
126 | 
127 | ```javascript
128 | componentDidMount() {
129 |   this.setState({name:'xb'});
130 | }
131 | ```
132 | 
133 | 这个函数在组件加载渲染完成后立即调用，此时页面上已经渲染出真实的DOM了，可以在这个函数中访问到真实的DOM（可以通过`this.refs`来访问真实DOM）。
134 | 
135 | 在这个阶段，还可以做一件事，可以修改`state`了！！！
136 | 
137 | 而且，异步获取数据在这个阶段执行也是比较合理的，获取数据之后`setState`，然后重新渲染组件。
138 | 
139 | ### 更新阶段（Updating）
140 | 
141 | 属性或状态的改变会触发一次更新。当一个组件在被重新渲染时，这些方法将会被调用：
142 | 
143 | 1. componentWillReceiveProps()
144 | 2. shouldComponentUpdate()
145 | 3. componentWillUpdate()
146 | 4. render()
147 | 5. componentDidUpdate()
148 | 
149 | #### componentWillReceiveProps()
150 | 
151 | 已加载的组件在`props`发生变化时调用，若需要更新状态，可能需要对比`this.props`和`nextProps`然后在该方法中使用`this.setState`来处理状态的改变。
152 | 
153 | 需要注意的是，有些情况下，即使`props`未改变也会触发该函数，所以一定要先比较`this.props`和`nextProps`再做操作。
154 | 
155 | 该函数只监听`props`的改变，`this.setState`不会触发这个函数。
156 | 
157 | ```javascript
158 | componentWillReceiveProps(nextProps){
159 |   if (this.props.color !== nextProps.color){
160 |     this.setState({});
161 |   }
162 | }
163 | ```
164 | 
165 | #### shouldComponentUpdate()
166 | 
167 | 这个函数只返回`true`或`false`，表示组件是否需要更新（重新渲染）。
168 | 
169 | 1. 返回`true`就是紧接着以下的生命周期函数；
170 | 2. 返回`false`表示组件不需要重新渲染，不再执行任何生命周期函数（包括render）。
171 | 
172 | 这个函数使用需谨慎，react官方文档中说道，在未来这个函数返回`false`可能仍然使得组件重新渲染。
173 | 
174 | #### componentWillUpdate()
175 | 
176 | 这个函数看名字就和`componentWillMount`很像，它执行的阶段也很像。在接收到新的`props`或者`state`之后，这个函数就会在`render`前被调用。
177 | 
178 | 同样的，在这个函数中不能使用`this.setState()`。如果需要更新状态，请在`componentWillReceiveProps`中调用`this.setState()`。
179 | 
180 | #### render()
181 | 
182 | 又是一次的`render`。这和挂载阶段的`render`有什么区别呢？
183 | 
184 | 在函数的性质上来说，两者毫无区别，只不过是在生命周期的不同阶段的调用。
185 | 
186 | - 前一个`render`是在组件第一次加载时调用的，也就是初次渲染，可以理解为`mount`；
187 | - 后一个`render`是除去第一次之后调用的，也就是再渲染，`re-render`；
188 | 
189 | #### componentDidUpdate()
190 | 
191 | 同样地，这个方法是在组件`re-render`之后调用的，该方法不会在初始化的时候调用。和`componentDidMount`一样，在这个函数中可以使用`this.refs`获取真实DOM。
192 | 
193 | 还可以修改`state`哦，不过会导致组件再次`re-render`。
194 | 
195 | ### 卸载阶段（Unmounting）
196 | 
197 | 该方法将会在 component 从DOM中移除时调用
198 | 
199 | - componentWillUnmount()
200 | 
201 | #### componentWillUnmount()
202 | 
203 | 卸载阶段就很简单了，就这一个生命周期函数，在组件被卸载和销毁之前立刻调用。
204 | 
205 | 在这个函数中，应该处理任何必要的清理工作，比如销毁定时器、取消网络请求、清除之前创建的相关DOM节点等。
206 | 
207 | ## 生命周期流程图
208 | 
209 | ![](http://omufjr5bv.bkt.clouddn.com/react-lifecycle%E6%9C%AA%E5%91%BD%E5%90%8D%E6%96%87%E4%BB%B6.png)
210 | 
211 | 
212 | 


--------------------------------------------------------------------------------
/2017/关于浏览器缓存我知道多少.md:
--------------------------------------------------------------------------------
  1 | 在前端开发中，我们在提到性能优化的时候总会提到一点：合理设置缓存。我们该如何从这方面入手来考虑提高网站性能呢？
  2 | 
  3 | ### 前言
  4 | 
  5 | 我们都知道 HTML5 引入了应用程序缓存，可以在没有网络的情况下进行访问，同时，HTML5 还引入了 storage 本地存储。这些都属于应用缓存。
  6 | 
  7 | 本篇文章主要内容是和浏览器缓存相关的，也可以说是 HTTP 缓存。
  8 | 
  9 | ### 什么是浏览器缓存
 10 | 
 11 | MDN 上是这样解释浏览器缓存的：
 12 | 
 13 | > A browser cache holds all documents downloaded via HTTP by the user ... without requiring an additional trip to the server. 
 14 | 
 15 | 意思就是，浏览器缓存保存着用户通过 `HTTP` 获取的所有资源，再下一次请求时可以避免重复向服务器发出多余的请求。
 16 | 
 17 | 通俗的说，就是在你访问过一次某个网站之后，这个站点的文字、图片等所有资源都被下载到本地了，下次再访问该网站时判断是否满足缓存条件，如果满足就不用再花费时间去等待资源的获取了。
 18 | 
 19 | ### 浏览器缓存的分类
 20 | 
 21 | 一般来说浏览器缓存可以分为两类：
 22 | 
 23 | - 强缓存
 24 | - 协商缓存（对比缓存）
 25 | 
 26 | 我们需要知道的是，浏览器在加载资源时，会先判断是否命中**强缓存**再验证是命中**协商缓存**。
 27 | 
 28 | 其它的的具体细节，稍后会展开来说。
 29 | 
 30 | ### 强缓存
 31 | 
 32 | 浏览器在加载资源时，会先根据本地缓存资源的 `header` 中的信息判断是否命中强缓存，如果命中则直接使用缓存中的资源不会再向服务器发送请求。
 33 | 
 34 | ![](http://omufjr5bv.bkt.clouddn.com/%E5%BC%BA%E7%BC%93%E5%AD%98.png)
 35 | 
 36 | 从图中可以看出，强缓存一般是这样一个流程：
 37 | 
 38 | 1. 查看 `header` 头中的 `Expire` 和 `Cache-control` 来判断是否满足规则；
 39 | 2. 如果满足规则，就返回缓存的数据；
 40 | 3. 如果不满足规则，就向服务器发送请求；
 41 | 4. 服务器返回数据；
 42 | 5. 将新数据存入缓存。
 43 | 
 44 | 所以我们主要就是关注 `Expire` 和 `Cache-control` 这两个字段。
 45 | 
 46 | #### Expire
 47 | 
 48 | 同样地，我们看看MDN中如何解释这个字段：
 49 | 
 50 | > The Expires header contains the date/time after which the response is considered stale.
 51 | 
 52 | 这个字段包含了一个时间，过了这个时间，响应将会失效。
 53 | 
 54 | 也就是说，`Expire` 这个字段表示缓存到期时间，我们来打开一个网站并查看 `Response Header` 看看这个字段：
 55 | 
 56 | ```
 57 | Expires:Fri, 27 Oct 2017 07:55:30 GMT
 58 | ```
 59 | 
 60 | 可能在你查看这的时候发现时间不对啊，怎么都已经是过去了 ~ 
 61 | 
 62 | `GMT` 表示的是格林威治时间，和北京时间相差8小时。
 63 | 
 64 | 上面的这个时间表示的是 `2017年10月27日15:55:30`。
 65 | 
 66 | 通过设置 `Expire` 来设置缓存有一个致命缺点：
 67 | 
 68 | 可以看出，这个是个绝对时间，也就是说，如果我修改了客户端的本地时间，是不是就会导致判断缓存失效了呢。
 69 | 
 70 | #### Cache-Control
 71 | 
 72 | 既然不能设置绝对时间，那我就设置个相对时间呗。
 73 | 
 74 | 在 `HTTP/1.1` 中，增加了一个字段 `Cache-Control` ，它包含一个 `max-age` 属性，该字段表示资源缓存的最大有效时间，这就是一个相对时间。
 75 | 
 76 | ```
 77 | Cache-Control:max-age=600
 78 | ```
 79 | 
 80 | 这个表示的就是最大有效时间是 `600s` ，对的，它的单位是秒。
 81 | 
 82 | `Cache-Control` 除了 `max-age` 属性之外还有一些属性：
 83 | 
 84 | - no-cache：需要进行协商缓存，发送请求到服务器确认是否使用缓存。
 85 | - no-store：禁止使用缓存，每一次都要重新请求数据。
 86 | - public：默认设置。
 87 | - private：不能被多用户共享。
 88 | 
 89 | 现在基本上都会同时设置 `Expire` 和 `Cache-Control` ，`Cache-Control` 的优先级别更高。
 90 | 
 91 | ### 协商缓存
 92 | 
 93 | 当强缓存没有命中的时候，浏览器会发送一个请求到服务器，服务器根据请求头中的部分信息来判断是否命中缓存。如果命中，则返回 `304` ，告诉浏览器资源未更新，可使用本地的缓存。
 94 | 
 95 | ![](http://omufjr5bv.bkt.clouddn.com/%E5%8D%8F%E5%95%86%E7%BC%93%E5%AD%98.png)
 96 | 
 97 | 从图中可以看出，协商缓存一般是这样一个流程：
 98 | 
 99 | 1. 把资源标识，比如 `If-Modify-Since` 或 `Etag` 发送到服务器，确认资源是否更新；
100 | 2. 如果资源未更新，请求响应返回的http状态为 `304` 并且会显示一个 `Not Modified` 的字符串，告诉浏览器使用本地缓存;
101 | 3. 如果资源已经更新，返回新的数据； 
102 | 4. 将新数据存入缓存。
103 | 
104 | #### Last-Modified，If-Modified-Since
105 | 
106 | 浏览器第一次请求资源的时候，服务器返回的 `header` 上会带有一个 `Last-Modified` 字段，表示资源**最后修改**的时间。
107 | 
108 | ```
109 | Last-Modified: Fri, 27 Oct 2017 07:55:30 GMT
110 | ```
111 | 
112 | 同样的，这是一个 `GMT` 的绝对时间。
113 | 
114 | 当浏览器再次请求该资源时，请求头中会带有一个 `If-Modified-Since` 字段，这个值是第一次请求返回的 `Last-Modified` 的值。服务器收到这个请求后，将 `If-Modified-Since` 和当前的 `Last-Modified` 进行对比。如果相等，则说明资源未修改，返回 `304`，浏览器使用本地缓存。
115 | 
116 | well，这个方法也是有缺点的：
117 | 
118 | - 最小单位是秒。也就是说如果我短时间内资源发生了改变，`Last-Modified` 并不会发生变化；
119 | - 周期性变化。如果这个资源在一个周期内修改回原来的样子了，我们认为是可以使用缓存的，但是 `Last-Modified` 可不这样认为。
120 | 
121 | 所以，后来又引入一个 `Etag`。
122 | 
123 | #### Etag
124 | 
125 | `Etag` 一般是由文件内容 `hash` 生成的，也就是说它可以保证资源的唯一性，资源发生改变就会导致 `Etag` 发生改变。
126 | 
127 | 同样地，在浏览器第一次请求资源时，服务器会返回一个 `Etag` 标识。当再次请求该资源时， 会通过 `If-no-match` 字段将 `Etag` 发送回服务器，然后服务器进行比较，如果相等，则返回 `304` 表示未修改。
128 | 
129 | **`Last-Modified` 和 `Etag` 是可以同时设置的，服务器会优先校验 `Etag`，如果 `Etag` 相等就会继续比对 `Last-Modified`，最后才会决定是否返回 `304`。 **
130 | 
131 | ### 总结
132 | 
133 | 当浏览器再次访问一个已经访问过的资源时，它会这样做：
134 | 
135 | 1. 看看是否命中强缓存，如果命中，就直接使用缓存了；
136 | 2. 如果没有命中强缓存，就发请求到服务器检查是否命中协商缓存；
137 | 3. 如果命中协商缓存，服务器会返回 `304` 告诉浏览器使用本地缓存；
138 | 4. 否则，返回最新的资源。


--------------------------------------------------------------------------------
/2017/原生JS实现最简单的图片懒加载.md:
--------------------------------------------------------------------------------
  1 | Demo地址：[http://axuebin.com/lazyload](http://axuebin.com/lazyload)
  2 | 
  3 | 照片都是自己拍的哦~
  4 | 
  5 | ## 懒加载
  6 | 
  7 | ### 什么是懒加载
  8 | 
  9 | 懒加载其实就是延迟加载，是一种对网页性能优化的方式，比如当访问一个页面的时候，优先显示可视区域的图片而不一次性加载所有图片，当需要显示的时候再发送图片请求，避免打开网页时加载过多资源。
 10 | 
 11 | ### 什么时候用懒加载
 12 | 
 13 | 当页面中需要一次性载入很多图片的时候，往往都是需要用懒加载的。
 14 | 
 15 | ### 懒加载原理
 16 | 
 17 | 我们都知道HTML中的`<img>`标签是代表文档中的一个图像。。说了个废话。。
 18 | 
 19 | `<img>`标签有一个属性是`src`，用来表示图像的URL，当这个属性的值不为空时，浏览器就会根据这个值发送请求。如果没有`src`属性，就不会发送请求。
 20 | 
 21 | 嗯？貌似这点可以利用一下？
 22 | 
 23 | 我先不设置`src`，需要的时候再设置？
 24 | 
 25 | nice，就是这样。
 26 | 
 27 | 我们先不给`<img>`设置`src`，把图片真正的URL放在另一个属性`data-src`中，在需要的时候也就是图片进入可视区域的之前，将URL取出放到`src`中。
 28 | 
 29 | ## 实现
 30 | 
 31 | ### HTML结构
 32 | 
 33 | ```html
 34 | <div class="container">
 35 |   <div class="img-area">
 36 |     <img class="my-photo" alt="loading" data-src="./img/img1.png">
 37 |   </div>
 38 |   <div class="img-area">
 39 |     <img class="my-photo" alt="loading" data-src="./img/img2.png">
 40 |   </div>
 41 |   <div class="img-area">
 42 |     <img class="my-photo" alt="loading" data-src="./img/img3.png">
 43 |   </div>
 44 |   <div class="img-area">
 45 |     <img class="my-photo" alt="loading" data-src="./img/img4.png">
 46 |   </div>
 47 |   <div class="img-area">
 48 |     <img class="my-photo" alt="loading" data-src="./img/img5.png">
 49 |   </div>
 50 | </div>
 51 | ```
 52 | 
 53 | 仔细观察一下，`<img>`标签此时是没有`src`属性的，只有`alt`和`data-src`属性。
 54 | 
 55 | > alt 属性是一个必需的属性，它规定在图像无法显示时的替代文本。
 56 | > data-* 全局属性：构成一类名称为自定义数据属性的属性，可以通过`HTMLElement.dataset`来访问。
 57 | 
 58 | ### 如何判断元素是否在可视区域
 59 | 
 60 | #### 方法一
 61 | 
 62 | 网上看到好多这种方法，稍微记录一下。
 63 | 
 64 | 1. 通过`document.documentElement.clientHeight`获取屏幕可视窗口高度
 65 | 2. 通过`element.offsetTop`获取元素相对于文档顶部的距离
 66 | 3. 通过`document.documentElement.scrollTop`获取浏览器窗口顶部与文档顶部之间的距离，也就是滚动条滚动的距离
 67 | 
 68 | 然后判断②-③<①是否成立，如果成立，元素就在可视区域内。
 69 | 
 70 | #### 方法二 getBoundingClientRect
 71 | 
 72 | 通过`getBoundingClientRect()`方法来获取元素的大小以及位置，MDN上是这样描述的：
 73 | 
 74 | > The Element.getBoundingClientRect() method returns the size of an element and its position relative to the viewport.
 75 | 
 76 | 这个方法返回一个名为`ClientRect`的`DOMRect`对象，包含了`top`、`right`、`botton`、`left`、`width`、`height`这些值。
 77 | 
 78 | MDN上有这样一张图：
 79 | 
 80 | ![](https://mdn.mozillademos.org/files/15087/rect.png)
 81 | 
 82 | 可以看出返回的元素位置是相对于左上角而言的，而不是边距。
 83 | 
 84 | 我们思考一下，什么情况下图片进入可视区域。
 85 | 
 86 | 假设`const bound = el.getBoundingClientRect();`来表示图片到可视区域顶部距离；
 87 | 并设 `const clientHeight = window.innerHeight;`来表示可视区域的高度。
 88 | 
 89 | 随着滚动条的向下滚动，`bound.top`会越来越小，也就是图片到可视区域顶部的距离越来越小，当`bound.top===clientHeight`时，图片的上沿应该是位于可视区域下沿的位置的临界点，再滚动一点点，图片就会进入可视区域。
 90 | 
 91 | 也就是说，在`bound.top<=clientHeight`时，图片是在可视区域内的。
 92 | 
 93 | 我们这样判断：
 94 | 
 95 | ```javascript
 96 | function isInSight(el) {
 97 |   const bound = el.getBoundingClientRect();
 98 |   const clientHeight = window.innerHeight;
 99 |   //如果只考虑向下滚动加载
100 |   //const clientWidth = window.innerWeight;
101 |   return bound.top <= clientHeight + 100;
102 | }
103 | ```
104 | 
105 | 这里有个+100是为了提前加载。
106 | 
107 | ### 加载图片
108 | 
109 | 页面打开时需要对所有图片进行检查，是否在可视区域内，如果是就加载。
110 | 
111 | ```javascript
112 | function checkImgs() {
113 |   const imgs = document.querySelectorAll('.my-photo');
114 |   Array.from(imgs).forEach(el => {
115 |     if (isInSight(el)) {
116 |       loadImg(el);
117 |     }
118 |   })
119 | }
120 | 
121 | function loadImg(el) {
122 |   if (!el.src) {
123 |     const source = el.dataset.src;
124 |     el.src = source;
125 |   }
126 | }
127 | ```
128 | 
129 | 这里应该是有一个优化的地方，设一个标识符标识已经加载图片的index，当滚动条滚动时就不需要遍历所有的图片，只需要遍历未加载的图片即可。
130 | 
131 | ### 函数节流
132 | 
133 | 在类似于滚动条滚动等频繁的DOM操作时，总会提到“函数节流、函数去抖”。
134 | 
135 | 所谓的函数节流，也就是让一个函数不要执行的太频繁，减少一些过快的调用来节流。
136 | 
137 | 基本步骤：
138 | 
139 | 1. 获取第一次触发事件的时间戳
140 | 2. 获取第二次触发事件的时间戳
141 | 3. 时间差如果大于某个阈值就执行事件，然后重置第一个时间
142 | 
143 | ```javascript
144 | function throttle(fn, mustRun = 500) {
145 |   const timer = null;
146 |   let previous = null;
147 |   return function() {
148 |     const now = new Date();
149 |     const context = this;
150 |     const args = arguments;
151 |     if (!previous){
152 |       previous = now;
153 |     }
154 |     const remaining = now - previous;
155 |     if (mustRun && remaining >= mustRun) {
156 |       fn.apply(context, args);
157 |       previous = now;
158 |     }
159 |   }
160 | }
161 | ```
162 | 
163 | 这里的`mustRun`就是调用函数的时间间隔，无论多么频繁的调用`fn`，只有`remaining>=mustRun`时`fn`才能被执行。
164 | 
165 | ## 实验
166 | 
167 | ### 页面打开时
168 | 
169 | ![](http://omufjr5bv.bkt.clouddn.com/lazyload1.png)
170 | 
171 | 可以看出此时仅仅是加载了img1和img2，其它的img都没发送请求，看看此时的浏览器
172 | 
173 | ![](http://omufjr5bv.bkt.clouddn.com/lazyload2.png)
174 | 
175 | 第一张图片是完整的呈现了，第二张图片刚进入可视区域，后面的就看不到了~
176 | 
177 | ### 页面滚动时
178 | 
179 | 当我向下滚动，此时浏览器是这样
180 | 
181 | ![](http://omufjr5bv.bkt.clouddn.com/lazyload3.png)
182 | 
183 | 此时第二张图片完全显示了，而第三张图片显示了一点点，这时候我们看看请求情况
184 | 
185 | ![](http://omufjr5bv.bkt.clouddn.com/lazyload4.png)
186 | 
187 | img3的请求发出来，而后面的请求还是没发出~
188 | 
189 | ### 全部载入时
190 | 
191 | 当滚动条滚到最底下时，全部请求都应该是发出的，如图
192 | 
193 | ![](http://omufjr5bv.bkt.clouddn.com/lazyload5.png)
194 | 
195 | ### 完整demo
196 | 
197 | 在这哦：[http://axuebin.com/lazyload](http://axuebin.com/lazyload)
198 | 
199 | ## 更新
200 |  
201 | ### 方法三 IntersectionObserver
202 | 
203 | 经大佬提醒，发现了这个方法
204 | 
205 | 先附上链接：
206 | 
207 | jjc大大：[https://github.com/justjavac/the-front-end-knowledge-you-may-dont-know/issues/10](https://github.com/justjavac/the-front-end-knowledge-you-may-dont-know/issues/10)
208 | 
209 | 阮一峰大大：[http://www.ruanyifeng.com/blog/2016/11/intersectionobserver_api.html](http://www.ruanyifeng.com/blog/2016/11/intersectionobserver_api.html)
210 | 
211 | API Sketch for Intersection Observers：[https://github.com/WICG/IntersectionObserver](https://github.com/WICG/IntersectionObserver)
212 | 
213 | `IntersectionObserver`可以自动观察元素是否在视口内。
214 | 
215 | ```javascript
216 | var io = new IntersectionObserver(callback, option);
217 | // 开始观察
218 | io.observe(document.getElementById('example'));
219 | // 停止观察
220 | io.unobserve(element);
221 | // 关闭观察器
222 | io.disconnect();
223 | ```
224 | 
225 | callback的参数是一个数组，每个数组都是一个`IntersectionObserverEntry`对象，包括以下属性：
226 | 
227 | |属性               |描述                                                                                          |
228 | | ---------------- | -------------------------------------------------------------------------------------------- |
229 | |time              |可见性发生变化的时间，单位为毫秒                                                                  |
230 | |rootBounds        |与getBoundingClientRect()方法的返回值一样                                                       |
231 | |boundingClientRect|目标元素的矩形区域的信息                                                                         |
232 | |intersectionRect  |目标元素与视口（或根元素）的交叉区域的信息                                                         |
233 | |intersectionRatio |目标元素的可见比例，即intersectionRect占boundingClientRect的比例，完全可见时为1，完全不可见时小于等于0|
234 | |target            |被观察的目标元素，是一个 DOM 节点对象                                                             |
235 | 
236 | 我们需要用到`intersectionRatio`来判断是否在可视区域内，当`intersectionRatio > 0 && intersectionRatio <= 1`即在可视区域内。
237 | 
238 | #### 代码
239 | 
240 | ```javascript
241 | function checkImgs() {
242 |   const imgs = Array.from(document.querySelectorAll(".my-photo"));
243 |   imgs.forEach(item => io.observe(item));
244 | }
245 | 
246 | function loadImg(el) {
247 |   if (!el.src) {
248 |     const source = el.dataset.src;
249 |     el.src = source;
250 |   }
251 | }
252 | 
253 | const io = new IntersectionObserver(ioes => {
254 |   ioes.forEach(ioe => {
255 |     const el = ioe.target;
256 |     const intersectionRatio = ioe.intersectionRatio;
257 |     if (intersectionRatio > 0 && intersectionRatio <= 1) {
258 |       loadImg(el);
259 |     }
260 |     el.onload = el.onerror = () => io.unobserve(el);
261 |   });
262 | });
263 | ```


--------------------------------------------------------------------------------
/2017/用React实现一个简易的TodoList.md:
--------------------------------------------------------------------------------
  1 | 初学React，撸一个TodoList熟悉熟悉基本语法，只有最简单最简单的功能。
  2 | 
  3 | ![](http://i.imgur.com/tT18EpC.png)
  4 | 
  5 | 如上图所示，是一个最简单的TodoList的样子了，我们应该怎样把它拆成一个个的组件呢？
  6 | 
  7 | 在之前看来，可能就是这样一个HTML结构：
  8 | 
  9 | ```html
 10 | <div>
 11 |   <h1></h1>
 12 |   <div>
 13 |     <ul>
 14 |       <li></li>
 15 |       <li></li>
 16 |       <li></li>
 17 |     </ul>
 18 |   </div>
 19 |   <div>
 20 |     <input/>
 21 |     <button>保存</button>
 22 |   </div>
 23 | </div>
 24 | ```
 25 | 
 26 | > React的核心思想是：封装组件。
 27 | 
 28 | 我们也可以按照这个思路来进行组件设计
 29 | 
 30 | ## 组件设计
 31 | 
 32 | ![](http://i.imgur.com/bp6NaWf.png)
 33 | 
 34 | 从小到大，从内到外 ~ 
 35 | 
 36 | 我是这样进行设计的。
 37 | 
 38 | 除去按钮，input这些之外，`<li></li>`是HTML中最小的元素，我们可以先每一个`<li></li>`当成是一个最小的组件，也就是图中橙色框的部分，它对应着每一条内容，我们先把它命名为`TodoItem`吧。
 39 | 
 40 | `<li></li>`的父级元素是`<ul></ul>`，那就把它看作一个组件呗，图中位于上方的蓝色部分，命名为`TodoList`。
 41 | 
 42 | 恩，此时Todo内容的展示组件已经是够的了，我们再来加一个添加Todo内容的组件`AddTodoItem`吧，命名貌似有点丑- -，图中位于下方的蓝色部分。
 43 | 
 44 | 最后就是最外层的红色部分了，它就是整个app的主体部分，包含着其它小组件，命名为`TodoBox`。
 45 | 
 46 | ok，暂时就这几个小组件 ~ 
 47 | 
 48 | 然我们开始愉快的撸代码吧 ~
 49 | 
 50 | ## 代码部分
 51 | 
 52 | ### Index
 53 | 
 54 | 先看看入口程序，很简单。
 55 | 
 56 | ```javascript
 57 | var React = require('react');
 58 | var ReactDOM = require('react-dom');
 59 | import TodoBox from './components/todobox';
 60 | import './../css/index.css';
 61 | 
 62 | export default class Index extends React.Component {
 63 |   constructor(){
 64 |     super();
 65 |   };
 66 |   render() {
 67 |     return (
 68 |         <TodoBox />
 69 |     );
 70 |   }
 71 | }
 72 | 
 73 | ReactDOM.render(<Index/>,document.getElementById("example"))
 74 | ```
 75 | 
 76 | ### TodoItem
 77 | 
 78 | 让我们想想啊，对于每一条内容来说，需要什么呢？
 79 | 
 80 | - 一个确认是否完成的`checkbox` [ ]
 81 | - 一条内容`text`
 82 | - 一个删除`button`
 83 | - zzzzzz.....其他的暂时先不加了~
 84 | 
 85 | 那不是太简单了 ~
 86 | 
 87 | ```html
 88 | <li>
 89 |   <input type="checkbox"/>找工作啊找工作啊
 90 |   <button>删除</button>
 91 | </li>
 92 | ```
 93 | 
 94 | 不不不，我们现在是在写`React`,要这样：
 95 | 
 96 | ```javascript
 97 | import React from 'react';
 98 | import {Row, Col, Checkbox, Button} from 'antd';
 99 | 
100 | export default class TodoItem extends React.Component {
101 |   constructor(props) {
102 |     super(props)
103 |     this.toggleComplete = this.toggleComplete.bind(this)
104 |     this.deleteTask = this.deleteTask.bind(this)
105 |   }
106 |   toggleComplete() {
107 |     this.props.toggleComplete(this.props.taskId)
108 |   }
109 |   deleteTask() {
110 |     this.props.deleteTask(this.props.taskId)
111 |   }
112 |   render() {
113 |     let task = this.props.task
114 |     let itemChecked
115 |     if (this.props.complete === "true") {
116 |       task = <del>{task}</del>
117 |       itemChecked = true
118 |     } else {
119 |       itemChecked = false
120 |     }
121 |     return (
122 |       <li className="list-group-item">
123 |         <Row>
124 |           <Col span={12}>
125 |             <Checkbox checked={itemChecked} onChange={this.toggleComplete}/> {task}
126 |           </Col>
127 |           <Col span={12}>
128 |             <Button type="danger" className="pull-right" onClick={this.deleteTask}>删除</Button>
129 |           </Col>
130 |         </Row>
131 |       </li>
132 |     )
133 |   }
134 | }
135 | ```
136 | 
137 | `import {Row, Col, Checkbox, Button} from 'antd'`是引入Ant Design。
138 | 
139 | > 我们采用 React 封装了一套 Ant Design 的组件库，也欢迎社区其他框架的实现版本。
140 | 
141 | 引入这个之后，我们可以直接使用一些简单的UI组件，比如`Row`,`Col`,`Checkbox`,`Button`等，我们可以更加注重业务逻辑的实现。
142 | 
143 | ### TodoList
144 | 
145 | 接下来就是拿一个`<ul></ul>`把item包起来呗：
146 | 
147 | ```javascript
148 | import React from 'react';
149 | import TodoItem from './todoitem';
150 | export default class TodoList extends React.Component{
151 |   constructor(props) {
152 |     super(props);
153 |   }
154 |   render(){
155 |     var taskList=this.props.data.map(listItem=>
156 |       <TodoItem taskId={listItem.id}
157 |                 key={listItem.id}
158 |                 task={listItem.task}
159 |                 complete={listItem.complete}
160 |                 toggleComplete={this.props.toggleComplete}
161 |                 deleteTask={this.props.deleteTask}/>
162 |     )
163 |     return(
164 |       <ul className="list-group">
165 |         {taskList}
166 |       </ul>
167 |     )
168 |   }
169 | }
170 | ```
171 | 
172 | ### AddTodoItem
173 | 
174 | 添加内容这个组件也比较简单，就只需要一个`input`和一个`button`即可：
175 | 
176 | ```javascript
177 | import React from 'react';
178 | import ReactDOM from 'react-dom';
179 | import {Row, Col, Form, Input, Button,notification } from 'antd';
180 | export default class AddTodoItem extends React.Component {
181 |   constructor(props) {
182 |     super(props)
183 |     this.saveNewItem = this.saveNewItem.bind(this)
184 |   }
185 |   saveNewItem(e) {
186 |     e.preventDefault()
187 |     let element = ReactDOM.findDOMNode(this.refs.newItem)
188 |     let task = element.value
189 |     if (!task) {
190 |       notification.open({
191 |         description: 'Todo内容不得为空！',
192 |     });
193 |     } else {
194 |       this.props.saveNewItem(task)
195 |       element.value = ""
196 |     }
197 |   }
198 |   render() {
199 |     return (
200 |       <div className="addtodoitem">
201 |         <Form.Item>
202 |           <label htmlFor="newItem"></label>
203 |           <Input id="newItem" ref="newItem" type="text" placeholder="吃饭睡觉打豆豆~"></Input>
204 |           <Button type="primary" className="pull-right" onClick={this.saveNewItem}>保存</Button>
205 |         </Form.Item>
206 |       </div>
207 |     )
208 |   }
209 | }
210 | ```
211 | 
212 | ### TodoBox
213 | 
214 | 我们的小组件已经都实现了，拿一个大`box`包起来呗 ~ 
215 | 
216 | ```javascript
217 | import React from 'react';
218 | import TodoList from './todolist';
219 | import AddTodoItem from './addtodoitem';
220 | import {Button, Icon, Row, Col} from 'antd';
221 | export default class TodoBox extends React.Component {
222 |   constructor(props) {
223 |     super(props)
224 |     this.state = {
225 |       data: [
226 |         {
227 |           "id": "1",
228 |           "task": "做一个TodoList Demo",
229 |           "complete": "false"
230 |         }, {
231 |           "id": "2",
232 |           "task": "学习ES6",
233 |           "complete": "false"
234 |         }, {
235 |           "id": "3",
236 |           "task": "Hello React",
237 |           "complete": "true"
238 |         }, {
239 |           "id": "4",
240 |           "task": "找工作",
241 |           "complete": "false"
242 |         }
243 |       ]
244 |     }
245 |     this.handleToggleComplete = this.handleToggleComplete.bind(this);
246 |     this.handleTaskDelete = this.handleTaskDelete.bind(this);
247 |     this.handleAddTodoItem = this.handleAddTodoItem.bind(this);
248 |   }
249 |   generateGUID() {
250 |     return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
251 |       var r = Math.random() * 16 | 0,
252 |         v = c == 'x' ? r : (r & 0x3 | 0x8)
253 |       return v.toString(16)
254 |     })
255 |   }
256 |   handleToggleComplete(taskId) {
257 |     let data = this.state.data;
258 |     for (let item of data) {
259 |       if (item.id === taskId) {
260 |         item.complete = item.complete === "true" ? "false" : "true"
261 |       }
262 |     }
263 |     this.setState({data})
264 |   }
265 |   handleTaskDelete(taskId) {
266 |     let data = this.state.data
267 |     data = data.filter(task => task.id !== taskId)
268 |     this.setState({data})
269 |   }
270 |   handleAddTodoItem(task) {
271 |     let newItem = {
272 |       id: this.generateGUID(),
273 |       task,
274 |       complete: "false"
275 |     }
276 |     let data = this.state.data
277 |     data = data.concat([newItem])
278 |     this.setState({data})
279 |   }
280 |   render() {
281 |     return (
282 |       <div>
283 |         <div className="well">
284 |           <h1 className="text-center">React TodoList</h1>
285 |           <TodoList data={this.state.data} toggleComplete={this.handleToggleComplete} deleteTask={this.handleTaskDelete}/>
286 |           <AddTodoItem saveNewItem={this.handleAddTodoItem}/>
287 |         </div>
288 |         <Row>
289 |           <Col span={12}></Col>
290 |           <Col span={12}>
291 |             <Button className="pull-left"><Icon type="user"/>
292 |               <a href="http://axuebin.com">薛彬</a>
293 |             </Button>
294 |             <Button className="pull-right"><Icon type="github"/>
295 |               <a href="https://github.com/axuebin">axuebin</a>
296 |             </Button>
297 |           </Col>
298 |         </Row>
299 |       </div>
300 |     )
301 |   }
302 | }
303 | ```
304 | 
305 | 注意：
306 | 
307 | - 通过props传递子组件需要的值和方法
308 | - 传递方法时一定要bind(this)，不然内部this会指向不正确
309 | 
310 | ## 源码
311 | 
312 | 完整的Demo代码在这：[https://github.com/axuebin/react-todolist](https://github.com/axuebin/react-todolist "https://github.com/axuebin/react-todolist") 
313 | 


--------------------------------------------------------------------------------
/2018/JavaScript复制内容到剪贴板.md:
--------------------------------------------------------------------------------
  1 | 最近一个活动页面中有一个小需求，用户点击或者长按就可以复制内容到剪贴板，记录一下实现过程和遇到的坑。
  2 | 
  3 | ## 常见方法
  4 | 
  5 | 查了一下万能的Google，现在常见的方法主要是以下两种：
  6 | 
  7 | - 第三方库：clipboard.js
  8 | - 原生方法：document.execCommand()
  9 | 
 10 | 分别来看看这两种方法是如何使用的。
 11 | 
 12 | ## clipboard.js
 13 | 
 14 | 这是clipboard的官网：[https://clipboardjs.com/](https://clipboardjs.com/)，看起来就是这么的简单。
 15 | 
 16 | ### 引用
 17 | 
 18 | 直接引用： `<script src="dist/clipboard.min.js"></script>`
 19 | 
 20 | 包： `npm install clipboard --save` ，然后 `import Clipboard from 'clipboard';`
 21 | 
 22 | ### 使用
 23 | 
 24 | #### 从输入框复制
 25 | 
 26 | 现在页面上有一个 `<input>` 标签，我们需要复制其中的内容，我们可以这样做：
 27 | 
 28 | ```html
 29 | <input id="demoInput" value="hello world">
 30 | <button class="btn" data-clipboard-target="#demoInput">点我复制</button>
 31 | ```
 32 | 
 33 | ```javascript
 34 | import Clipboard from 'clipboard';
 35 | const btnCopy = new Clipboard('btn');
 36 | ```
 37 | 
 38 | 注意到，在 `<button>` 标签中添加了一个 `data-clipboard-target` 属性，它的值是需要复制的 `<input>` 的 `id`，顾名思义是从整个标签中复制内容。
 39 | 
 40 | #### 直接复制
 41 | 
 42 | 有的时候，我们并不希望从 `<input>` 中复制内容，仅仅是直接从变量中取值。如果在 `Vue` 中我们可以这样做：
 43 | 
 44 | ```html
 45 | <button class="btn" :data-clipboard-text="copyValue">点我复制</button>
 46 | ``` 
 47 | 
 48 | ```javascript
 49 | import Clipboard from 'clipboard';
 50 | const btnCopy = new Clipboard('btn');
 51 | this.copyValue = 'hello world';
 52 | ```
 53 | 
 54 | #### 事件
 55 | 
 56 | 有的时候我们需要在复制后做一些事情，这时候就需要回调函数的支持。
 57 | 
 58 | 在处理函数中加入以下代码：
 59 | 
 60 | ```javascript
 61 | // 复制成功后执行的回调函数
 62 | clipboard.on('success', function(e) {
 63 |     console.info('Action:', e.action); // 动作名称，比如：Action: copy
 64 |     console.info('Text:', e.text); // 内容，比如：Text：hello word
 65 |     console.info('Trigger:', e.trigger); // 触发元素：比如：<button class="btn" :data-clipboard-text="copyValue">点我复制</button>
 66 |     e.clearSelection(); // 清除选中内容
 67 | });
 68 | 
 69 | // 复制失败后执行的回调函数
 70 | clipboard.on('error', function(e) {
 71 |     console.error('Action:', e.action);
 72 |     console.error('Trigger:', e.trigger);
 73 | });
 74 | ```
 75 | 
 76 | ### 小结
 77 | 
 78 | 文档中还提到，如果在单页面中使用 `clipboard` ，为了使得生命周期管理更加的优雅，在使用完之后记得 `btn.destroy()` 销毁一下。
 79 | 
 80 | `clipboard` 使用起来是不是很简单。但是，就为了一个 `copy` 功能就使用额外的第三方库是不是不够优雅，这时候该怎么办？那就用原生方法实现呗。
 81 | 
 82 | ## document.execCommand()方法
 83 | 
 84 | 先看看这个方法在 `MDN` 上是怎么定义的：
 85 | 
 86 | > which allows one to run commands to manipulate the contents of the editable region.
 87 | 
 88 | 意思就是可以允许运行命令来操作可编辑区域的内容，注意，是**可编辑区域**。
 89 | 
 90 | ### 定义
 91 | 
 92 | > bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)
 93 | 
 94 | 方法返回一个 `Boolean` 值，表示操作是否成功。
 95 | 
 96 | - `aCommandName` ：表示命令名称，比如： `copy`, `cut` 等（更多命令见[命令](https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand#%E5%91%BD%E4%BB%A4)）；
 97 | - `aShowDefaultUI`：是否展示用户界面，一般情况下都是 `false`；
 98 | - `aValueArgument`：有些命令需要额外的参数，一般用不到；
 99 | 
100 | ### 兼容性
101 | 
102 | 这个方法在之前的兼容性其实是不太好的，但是好在现在已经基本兼容所有主流浏览器了，在移动端也可以使用。
103 | 
104 | ![兼容性](http://omufjr5bv.bkt.clouddn.com/execCommand.png)
105 | 
106 | ### 使用
107 | 
108 | #### 从输入框复制
109 | 
110 | 现在页面上有一个 `<input>` 标签，我们想要复制其中的内容，我们可以这样做：
111 | 
112 | ```html
113 | <input id="demoInput" value="hello world">
114 | <button id="btn">点我复制</button>
115 | ```
116 | 
117 | ```javascript
118 | const btn = document.querySelector('#btn');
119 | btn.addEventListener('click', () => {
120 | 	const input = document.querySelector('#demoInput');
121 | 	input.select();
122 | 	if (document.execCommand('copy')) {
123 | 		document.execCommand('copy');
124 | 		console.log('复制成功');
125 | 	}
126 | })
127 | ```
128 | 
129 | #### 其它地方复制
130 | 
131 | 有的时候页面上并没有 `<input>` 标签，我们可能需要从一个 `<div>` 中复制内容，或者直接复制变量。
132 | 
133 | 还记得在 `execCommand()` 方法的定义中提到，它只能操作**可编辑区域**，也就是意味着除了 `<input>`、`<textarea>` 这样的输入域以外，是无法使用这个方法的。
134 | 
135 | 这时候我们需要曲线救国。
136 | 
137 | ```html
138 | <button id="btn">点我复制</button>
139 | ```
140 | 
141 | ```javascript
142 | const btn = document.querySelector('#btn');
143 | btn.addEventListener('click',() => {
144 | 	const input = document.createElement('input');
145 | 	document.body.appendChild(input);
146 |  	input.setAttribute('value', '听说你想复制我');
147 | 	input.select();
148 | 	if (document.execCommand('copy')) {
149 | 		document.execCommand('copy');
150 | 		console.log('复制成功');
151 | 	}
152 |     document.body.removeChild(input);
153 | })
154 | ```
155 | 
156 | 算是曲线救国成功了吧。在使用这个方法时，遇到了几个坑。
157 | 
158 | #### 遇到的坑
159 | 
160 | 在Chrome下调试的时候，这个方法时完美运行的。然后到了移动端调试的时候，坑就出来了。
161 | 
162 | 对，没错，就是你，ios。。。
163 | 
164 | 1. 点击复制时屏幕下方会出现白屏抖动，仔细看是拉起键盘又瞬间收起
165 | 
166 | 	知道了抖动是由于什么产生的就比较好解决了。既然是拉起键盘，那就是聚焦到了输入域，那只要让输入域不可输入就好了，在代码中添加 `input.setAttribute('readonly', 'readonly');` 使这个 `<input>` 是只读的，就不会拉起键盘了。
167 | 
168 | 2. 无法复制
169 | 
170 | 	这个问题是由于 `input.select()` 在ios下并没有选中全部内容，我们需要使用另一个方法来选中内容，这个方法就是 `input.setSelectionRange(0, input.value.length);`。
171 | 	
172 | 完整代码如下：
173 | 
174 | ```javascript
175 | const btn = document.querySelector('#btn');
176 | btn.addEventListener('click',() => {
177 | 	const input = document.createElement('input');
178 |     input.setAttribute('readonly', 'readonly');
179 |     input.setAttribute('value', 'hello world');
180 |     document.body.appendChild(input);
181 | 	input.setSelectionRange(0, 9999);
182 | 	if (document.execCommand('copy')) {
183 | 		document.execCommand('copy');
184 | 		console.log('复制成功');
185 | 	}
186 |     document.body.removeChild(input);
187 | })
188 | ```
189 | 
190 | ## 总结
191 | 
192 | 以上就是关于JavaScript如何实现复制内容到剪贴板，附上几个链接：
193 | 
194 | [execCommand MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand)
195 | 
196 | [execCommand兼容性](https://caniuse.com/#search=execCommand)
197 | 
198 | [clipboard.js](https://github.com/zenorocha/clipboard.js)


--------------------------------------------------------------------------------
/2019/ES2019.md:
--------------------------------------------------------------------------------
  1 | ## ES2019
  2 | 
  3 | [tc39 Finished Proposals](https://github.com/tc39/proposals/blob/master/finished-proposals.md)
  4 | 
  5 | ![ES2019](../images/es-finished-proposals.png)
  6 | 
  7 | 从表中可以看到已经有多个特性加到了 ES2019 中。
  8 | 
  9 | ## 新特性
 10 | 
 11 | ### Optional catch binding
 12 | 
 13 | [https://github.com/tc39/proposal-optional-catch-binding](https://github.com/tc39/proposal-optional-catch-binding)
 14 | 
 15 | 将 `err` 变成 `optional` 的，可以省略 `catch` 后的 括号和错误对象：
 16 | 
 17 | ```javascript
 18 | try {
 19 |   // tryCode
 20 | } catch {
 21 |   // catchCode
 22 | }
 23 | ```
 24 | 
 25 | #### Previous
 26 | 
 27 | 之前 `try...catch` 是这样的：
 28 | 
 29 | ```javascript
 30 | try {
 31 |   // tryCode
 32 | } catch(err) {
 33 |   // catchCode
 34 | }
 35 | ```
 36 | 
 37 | - tryCode：（必须）尝试执行的代码
 38 | - err：（必须）指定局部变量应用的错误
 39 | - catchCode：（可选）捕获错误的代码
 40 | 
 41 | 比如：
 42 | 
 43 | ```javascript
 44 | try {
 45 |   throw new Error('报错啦报错啦');
 46 | } catch(e) {
 47 |   console.log(e); // Error: 报错啦报错啦
 48 | }
 49 | ```
 50 | 
 51 | 有的时候我们只需要捕获错误但是无需知道错误信息，`err` 就显得没必要的。
 52 | 
 53 | ### JSON superset
 54 | 
 55 | [https://github.com/tc39/proposal-json-superset](https://github.com/tc39/proposal-json-superset)
 56 | 
 57 | 
 58 | 允许 未转义的 `U + 2028` 行分隔符和 `U + 2029` 段分割符直接出现在字符串中，不会出现异常。
 59 | 
 60 | #### Previous
 61 | 
 62 | 之前，JSON的某些字符 `\u2028` `\u2029` 会导致 Javascript 语法错误。
 63 | 
 64 | ```javascript
 65 | eval('"\u2028"'); // SyntaxError: Unexpected
 66 | ```
 67 | 
 68 | 我们的解决方法是对 `\u2028` `\u2029` 进行转义，比如：
 69 | 
 70 | ```javascript
 71 | str.Replace('\u2028', '\\u2028')
 72 | ```
 73 | 
 74 | ### Symbol.prototype.description
 75 | 
 76 | [https://github.com/tc39/proposal-Symbol-description](https://github.com/tc39/proposal-Symbol-description)
 77 | 
 78 | [Symbol.prototype.description | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/description)
 79 | 
 80 | 可以通过 `description` 方法获取 `Symbol` 的描述:
 81 | 
 82 | ```javascript
 83 | const name = Symbol('My name is axuebin');
 84 | console.log(name.description); // My name is axuebin
 85 | console.log(name.description === 'My name is axuebin'); // My name is axuebin
 86 | ```
 87 | 
 88 | #### Previous
 89 | 
 90 | 我们知道，`Symbol` 的描述只被存储在内部的 `[[Description]]`，没有直接对外暴露，我们只有调用 `Symbol` 的 `toString()` 时才可以读取这个属性：
 91 | 
 92 | ```javascript
 93 | const name = Symbol('My name is axuebin');
 94 | console.log(name.toString()); // Symbol(My name is axuebin)
 95 | console.log(name); // Symbol(My name is axuebin)
 96 | console.log(name === 'Symbol(My name is axuebin)'); // false
 97 | console.log(name.toString()) === 'Symbol(My name is axuebin)'); // true
 98 | 
 99 | ```
100 | 
101 | 在执行 `console.log(name)` 的时候也打印了描述信息，是因为这里隐式地执行了 `toString()`，在代码里这样是不行的。
102 | 
103 | ### Function.prototype.toString revision
104 | 
105 | [https://github.com/tc39/Function-prototype-toString-revision](https://github.com/tc39/Function-prototype-toString-revision)
106 | 
107 | 现在 `foo.toString()` 可以返回精确字符串，包括空格和注释等。
108 | 
109 | ### Object.fromEntries
110 | 
111 | [https://github.com/tc39/proposal-object-from-entries](https://github.com/tc39/proposal-object-from-entries)
112 | 
113 | [Object.fromEntries() | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries)
114 | 
115 | 该方法把键值对列表转换为一个对象，可以看作是 `Object.entries()` 的反向方法。
116 | 
117 | - Arguments：(Array): 键值对。
118 | - Returns：(Object): 对象。
119 | 
120 | 
121 | ```javascript
122 | const arr = Object.entries({ name: 'axuebin', age: 27 });
123 | console.log(arr); // ["name", "axuebin"], ["age', 27]]
124 | 
125 | const obj = Object.fromEntries(arr);
126 | console.log(obj); // { name: 'axuebin', age: 27 }
127 | ```
128 | 
129 | 和 `lodash` 的 `_.fromPairs` 具有一样的功能。
130 | 
131 | ```javascript
132 | const obj = _.fromPairs(['name', 'axuebin'], ['age', 27]);
133 | console.log(obj); // { name: 'axuebin', age: 27 }
134 | ```
135 | 
136 | ### Well-formed JSON.stringify
137 | 
138 | [https://github.com/tc39/proposal-well-formed-stringify](https://github.com/tc39/proposal-well-formed-stringify)
139 | 
140 | 更友好的 `JSON.stringify`，对于一些超出范围的 `Unicode`，为其输出转义序列，使其成为有效 `Unicode`，
141 | 
142 | ```javascript
143 | JSON.stringify('\uDF06\uD834'); // '"\\udf06\\ud834"'
144 | JSON.stringify('\uDEAD'); // '"\\udead"'
145 | ```
146 | 
147 | #### Previous
148 | 
149 | ```javascript
150 | JSON.stringify('\uDF06\uD834'); // '"��"'
151 | JSON.stringify('\uDEAD'); // '"�"'
152 | ```
153 | 
154 | ### String.prototype.{trimStart,trimEnd}
155 | 
156 | [https://github.com/tc39/proposal-string-left-right-trim](https://github.com/tc39/proposal-string-left-right-trim)
157 | 
158 | [String.prototype.trimStart() | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/trimStart)
159 | 
160 | [String.prototype.trimEnd() | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/trimEnd)
161 | 
162 | 分别去除字符串前后的空格，生成新的字符串。
163 | 
164 | ```javascript
165 | const str = '    axuebin    ';
166 | console.log(str.trimStart()); // 'axuebin    '
167 | console.log(str.trimEnd()); // '    axuebin'
168 | console.log(str); // '    axuebin    '
169 | ```
170 | 
171 | ### Array.prototype.{flat,flatMap}
172 | 
173 | [https://github.com/tc39/proposal-flatMap](https://github.com/tc39/proposal-flatMap)
174 | 
175 | [Array.prototype.flat() | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flat)
176 | 
177 | [Array.prototype.flatMap() | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flatMap)
178 | 
179 | 还记得这样一道笔试题么，给你一个多维数组，把它拍平！
180 | 
181 | ```javascript
182 | const arr = [1, [2, [3, [4, [5, 6]]]]];
183 | arr.flat(); // [1, 2, [3, [4, [5, 6]]]]
184 | arr.flat(1); // [1, 2, [3, [4, [5, 6]]]]
185 | arr.flat(2); // [1, 2, 3, [4, [5, 6]]]
186 | arr.flat(3); // [1, 2, 3, 4, [5, 6]]
187 | arr.flat(4); // [1, 2, 3, 4, 5, 6]
188 | ```
189 | 
190 | ```javascript
191 | const arr = [[1, 2, 3], [4, 5]];
192 | arr.flatMap(item => item); [1, 2, 3, 4, 5];
193 | ```
194 | 
195 | 是不是很方便...
196 | 
197 | ## 暂时就这些啦


--------------------------------------------------------------------------------
/2019/JavaScript 判断 iPhone X Series 机型.md:
--------------------------------------------------------------------------------
 1 | ## 现状
 2 | 
 3 | iPhone X 底部是需要预留 34px 的安全距离，需要在代码中进行兼容。
 4 | 
 5 | 现状对于 iPhone X 的判断基本是这样的：
 6 | 
 7 | ```javascript
 8 | // h5
 9 | export const isIphonex = () => /iphone/gi.test(navigator.userAgent) && window.screen && (window.screen.height === 812 && window.screen.width === 375);
10 | ```
11 | 
12 | 这在之前是没问题的，新的 iPhone X Series 设备发布之后，这个就会兼容就有问题。
13 | 
14 | ## iPhone X Series 参数
15 | 
16 | | 机型 | 倍率	| 分辨率 |	pt |
17 | | :--- | :--- | :--- | :--- |
18 | | iPhone X |	3 | 2436 × 1125 | 812 × 375 |
19 | | iPhone XS | 3 | 2436 × 1125 | 812 × 375 |
20 | | iPhone XS Max | 3	| 2688 × 1242	 | 896 × 414 |
21 | | iPhone XR | 2 | 1792 × 828 | 896 × 414 |
22 | 
23 | width === 375 && height === 812 只能识别出 iPhone X 和 iPhone XS，对于 iPhone XS Max 和 iPhone XR 就无能为力了。
24 | 
25 | ## 解决方法
26 | 
27 | ### 对每个机型进行判断
28 | ```javascript
29 | const isIphonex = () => {
30 |   // X XS, XS Max, XR
31 |   const xSeriesConfig = [
32 |     {
33 |       devicePixelRatio: 3,
34 |       width: 375,
35 |       height: 812,
36 |     },
37 |     {
38 |       devicePixelRatio: 3,
39 |       width: 414,
40 |       height: 896,
41 |     },
42 |     {
43 |       devicePixelRatio: 2,
44 |       width: 414,
45 |       height: 896,
46 |     },
47 |   ];
48 |   // h5
49 |   if (typeof window !== 'undefined' && window) {
50 |     const isIOS = /iphone/gi.test(window.navigator.userAgent);
51 |     if (!isIOS) return false;
52 |     const { devicePixelRatio, screen } = window;
53 |     const { width, height } = screen;
54 |     return xSeriesConfig.some(item => item.devicePixelRatio === devicePixelRatio && item.width === width && item.height === height);
55 |   }
56 |   return false;
57 | }
58 | ```
59 | ### 统一处理方法
60 | 因为现在 iPhone 在 iPhone X 之后的机型都需要适配，所以可以对 X 以后的机型统一处理，我们可以认为这系列手机的特征是 `ios` + `长脸`。
61 | 
62 | 在 H5 上可以简单处理。
63 | 
64 | ```javascript
65 | const isIphonex = () => {
66 |   if (typeof window !== 'undefined' && window) {
67 |     return /iphone/gi.test(window.navigator.userAgent) && window.screen.height >= 812;
68 |   }
69 |   return false;
70 | };
71 | ```
72 | 
73 | ### 媒体查询
74 | 
75 | ```css
76 | @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
77 | }
78 | @media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) {
79 | }
80 | @media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) {
81 | }
82 | ```
83 | 
84 | 媒体查询无法识别是不是 iOS，还得加一层 JS 判断，否则可能会误判一些安卓机。


--------------------------------------------------------------------------------
/2019/TypeScript Start: 什么是 TypeScript.md:
--------------------------------------------------------------------------------
  1 | # TypeScript Start：什么是 TypeScript
  2 | 
  3 | 最近开始用 `TypeScript` 来写项目，写起来还是挺顺畅的。其实学习 `TypeScript`，看它的官方文档就够了，剩下就是 `coding` 了。我这里主要是我在 `TypeScript` 学习过程中记录的一些东西~
  4 | 
  5 | ## 什么是 TypeScript
  6 | 
  7 | ~~`TypeScript` 也被称作 `AnyScript`，因为你在 `coding` 的时候需要为每个变量设一个 `any` 的类型。~~
  8 | 
  9 | 咳咳，开玩笑开玩笑，可别真的让每个变量都是 `any`，会被疯狂吐槽的。
 10 | 
 11 | [TypeScript](https://github.com/Microsoft/TypeScript) 是微软开发一款开源的编程语言，它是 `JavaScript` 的一个超集，本质上是为 `JavaScript` 增加了静态类型声明。任何的 `JavaScript` 代码都可以在其中使用，不会有任何问题。`TypeScript` 最终也会被编译成 `JavaScript`，使其在浏览器、Node 中等环境中使用。
 12 | 
 13 | ## Typescript 和 JavaScript 在类型上的区别
 14 | 
 15 | `JavaScript` 被称作是一种**动态**脚本语言，其中有一个被疯狂诟病的特性：缺乏静态强类型。我们看一下下面的代码：
 16 | 
 17 | ```
 18 | function init() {
 19 |     var a = 'axuebin';
 20 |     console.log('a: ', a); // a: axuebin
 21 |     a = 1;
 22 |     console.log('a: ', a); // a: 1
 23 | }
 24 | ```
 25 | 
 26 | 当我们执行 `init` 函数的时候，会先声明一个 `a` 变量，然后给 `a` 变量赋了一个 `axuebin`，这时候我们知道 `a` 是一个字符串。然后这时候我们希望 `a` 变成 `1`，就直接 `a = 1` 了。当然，这是可以的，此时 `a` 变量的类型已经发生改变：字符串 => 数字。这在很多人看来是难以接受的事情，明明初始化 `a` 的时候是一个字符串类型，之后 `a` 的类型居然变成数字类型了，这太糟糕了。
 27 | 
 28 | 如果在 `Java` 中，会是这样：
 29 | 
 30 | ```
 31 | class HelloWorld {
 32 |     public static void main(String[] args) {
 33 |         String a = "axuebin";
 34 |         System.out.printf("a: %s", a);
 35 |         a = 1;
 36 |         System.out.printf("a: %d", a);
 37 |     }
 38 | }
 39 | 
 40 | // HelloWorld.java:4: error: incompatible types: int cannot be converted to String
 41 | ```
 42 | 
 43 | 在 `Java` 中根本就没办法让 `a = 1`，会直接导致报错，在编译阶段就断绝你的一切念想。年轻人，别想太多，好好写代码。
 44 | 
 45 | 这时候就会想，如果 `JavaScript` 也有类型该有多好啊，是吧。
 46 | 
 47 | 看看 `TypeScript` 中是怎么样的：
 48 | 
 49 | ```
 50 | function init() {
 51 |     var a: string = 'axuebin';
 52 |     console.log('a: ', a); 
 53 |     a = 1;
 54 |     console.log('a: ', a);
 55 | }
 56 | 
 57 | // Type '1' is not assignable to type 'string'.
 58 | ```
 59 | 
 60 | 我们把变量 `a` 设为 `string` 类型，后面给 `a` 复制 `1` 的时候就报错了，同样是在编译阶段就过不了。 
 61 | 
 62 | ## 为什么选择 TypeScript
 63 | 
 64 | 我们来想想在日常的业务开发中是否有遇到以下的情况：
 65 | 
 66 | - 协同开发时，你需要调用一个其他人写的函数，但是那个函数里变量命名和管理特别混乱，并且没有写任何的注释，为了搞清楚函数的参数类型以及用法，你只能硬着头皮都函数的具体代码。
 67 | - 你突然看到项目里自己半年前甚至一年前的一个函数，这写的什么鬼啊，简直没法看，强迫症的你想着重构一把。然后你就大刀阔斧的改造了一把，甚至对入参都进行了改造，嗯，终于满意了。突然发现不对啊，还得搜了一下哪里调用了这个函数，得保证调用成功啊。
 68 | - ...
 69 | 
 70 | 是不是超级超级超级不爽。归根结底这还是因为 `JavaScript` 是一门动态弱类型脚本语言。
 71 | 
 72 | 你想想，如果每个变量都被约定了类型，并且构建了变量声明和变量调用之前的联系，只要有一处地方发生了改变，其它地方都会被通知到，这该有多美好。
 73 | 
 74 | `JavaScript` 淡化了类型的概念，但是作为一名开发者，我们必须要牢固自己的类型概念，养成良好的变成习惯。
 75 | 
 76 | ### TypeScript 的优点
 77 | 
 78 | `TypeScript` 相比于 `JavaScript` 具有以下优势：
 79 | 
 80 | - 更好的可维护性和可读性
 81 | - 引入了静态类型声明，不需要太多的注释和文档，大部分的函数看类型定义就知道如何使用了
 82 | - 在编译阶段就能发现大部分因为变量类型导致的错误
 83 | - ...
 84 | 
 85 | ### TypeScript 是不是能难
 86 | 
 87 | 有的童鞋可能会觉得，`JavaScript` 都还没学清楚，又得学一门新的编程语言，还没接触 `TypeScript` 就已经无形中有了抵触心理。对于这些童鞋，需要知道的是 `TypeScript` 是 `JavaScript` 的超集，与现存的 `JavaScript` 代码有非常高的兼容性。
 88 | 
 89 | > 如果一个集合S2中的每一个元素都在集合S1中，且集合S1中可能包含S2中没有的元素，则集合S1就是S2的一个超集。
 90 | 
 91 | 也就是说，`TypeScript` 包含了 `JavaScript` 的 `all`，即使是仅仅将 `.js` 改成 `.ts`，不修改任何的代码都可以运行。
 92 | 
 93 | 所以说，完全可以先上手再学习，渐进式地搞定 `TypeScript`，不用担心门槛高的问题。
 94 | 
 95 | 如果还有顾虑，可以在 [http://www.typescriptlang.org/play/](http://www.typescriptlang.org/play/) 上先体验一下 `TypeScript` 带来的快感。
 96 | 
 97 | ### TypeScript 的困难
 98 | 
 99 | 当然，上手 `TypeScript` 也会有一些困难，会让刚开始学习 `TypeScript` 的童鞋感觉太复杂了，不熟悉的情况下很可能会增加开发成本：
100 | 
101 | - 类型定义：对于每一个变量都需要定义它的类型，特别是对于一个对象而言，可能需要定义多层类型（这也是为什么会出现 `AnyScript` 的原因。。。）
102 | - 引用三方类库：第三方库如果不是 `TypeScript` 写的，没有提供声明文件，就需要去为第三方库编写声明文件
103 | - 新概念：`TypeScript` 中引入的类型(Types)、类(Classes)、泛型(Generics)、接口(Interfaces)以及枚举(Enums)，这些概念如果之前没有接触过强类型语言的话，就需要增加一些学习成本
104 | 
105 | 不过，不要被吓退了！
106 | 
107 | 重要的事情要说三遍。
108 | 
109 | 不要被吓退了！！
110 | 
111 | 不要被吓退了！！!
112 | 
113 | 这些只是短期的，当克服这些困难后，就会如鱼得水，一切看上去都是那么的自然。
114 | 
115 | ## 安装 TypeScript
116 | 
117 | 首先你需要有 `Node` 和 `npm`，这个不用多说了。
118 | 
119 | 在控制台运行一下命令：
120 | 
121 | ```
122 | npm install typesrcipt -g
123 | ```
124 | 
125 | 这条命令会在全局安装 `typescript`，并且安装 `tsc` 命令，运行以下命令可以查看当前版本（确认安装成功）：
126 | 
127 | ```
128 | tsc -v
129 | // Version 3.2.2
130 | ``` 
131 | 
132 | 然后我们就新建一个名为 `index.ts` 的文件，然后敲入简单点的代码：
133 | 
134 | ```
135 | // index.ts
136 | const msg: string = 'Hello TypeScript';
137 | ```
138 | 
139 | 代码编写好就可以执行编译，可以运行 `tsc` 命令，让 `ts` 文件变成可在浏览器中运行的 `js` 文件：
140 | 
141 | ```
142 | tsc index.ts
143 | ```
144 | 
145 | 如果你的代码不合法，执行 `tsc` 的时候就会报错，根据错误进行对应的修改即可。
146 | 
147 | ## Hello TypeScript
148 | 
149 | 我们看一个稍微完整点的例子吧。
150 | 
151 | 这是一个 `ts` 文件，声明了一个 `sayHello` 函数：
152 | 
153 | - 函数有一个入参：`string` 类型的 `name`
154 | - 函数有一个返回值：`string` 类型的 `Hello ${name}`
155 | 
156 | ```
157 | // index.ts
158 | function sayHello(name: string): string {
159 |     return `Hello ${name}`;
160 | }
161 | 
162 | const me: string = 'axuebin';
163 | console.log(sayHello(me))
164 | ```
165 | 
166 | 我们执行 `tsc index.ts` 编译一下，在同级文件夹下生成了一个新的文件 `index.js`：
167 | 
168 | ```
169 | function sayHello(name) {
170 |     return "Hello " + name;
171 | }
172 | var me = 'axuebin';
173 | console.log(sayHello(me));
174 | ```
175 | 
176 | 我们发现我们写的 `TypeScript` 代码在编译后都消失了。因为 `TypeScript` 只会进行静态检查，如果代码有问题，在编译阶段就会报错。
177 | 
178 | 我们修改一下 `index.ts` ，模拟一下出错的情况：
179 | 
180 | ```
181 | function sayHello(name: string): string {
182 |     return `Hello ${name}`;
183 | }
184 | 
185 | const count: number = 1000;
186 | console.log(sayHello(count))
187 | ```
188 | 
189 | 我们向 `sayHello` 传递一个 `number` 类型的参数，试试 `tsc` 一下：
190 | 
191 | ```
192 | index.ts:6:22 - error TS2345: Argument of type 'number' is not assignable to parameter of type 'string'.
193 | ```
194 | 
195 | 命令行就会报上面的错误，意思是不能给一个 `string` 类型的参数传递一个 `number` 类型。
196 | 
197 | 但是，这里要注意的是，即使报错了，`tsc` 还是会**将编译进行到底**，还是会生成一个 `index.js` 文件：
198 | 
199 | ```
200 | function sayHello(name) {
201 |     return "Hello " + name;
202 | }
203 | var count = 1000;
204 | console.log(sayHello(count));
205 | ```
206 | 
207 | 看上去也就是没啥毛病的 `js` 代码。
208 | 
209 | 如果编译失败就不生成 `js` 文件，之后可以在配置中关闭这个功能。
210 | 
211 | ## 写在最后
212 | 
213 | 如果没有意外的话，应该会继续写一些 `TypeScript` 的文章，欢迎大家持续关注~
214 | 
215 | 博客地址：[https://github.com/axuebin/articles](https://github.com/axuebin/articles)
216 | 
217 | 
218 | 
219 | 


--------------------------------------------------------------------------------
/2019/TypeScript Start：基础类型.md:
--------------------------------------------------------------------------------
  1 | # TypeScript 基础类型
  2 | 
  3 | 上一节我们说到 `TypeScript` 最重要的特性就是给 `JavaScript` 引入了静态类型声明，这一节就来看一下 `TypeScript` 里的基础类型和变量声明。
  4 | 
  5 | 我们知道在 `JavaScript` 中有 7 种数据类型，分别是：
  6 | 
  7 | - [布尔值(Boolean)](https://developer.mozilla.org/en-US/docs/Glossary/Boolean)
  8 | - [字符串(String)](https://developer.mozilla.org/en-US/docs/Glossary/String)
  9 | - [数字(Number)](https://developer.mozilla.org/en-US/docs/Glossary/Number)
 10 | - [Null](https://developer.mozilla.org/en-US/docs/Glossary/Null)
 11 | - [undefined](https://developer.mozilla.org/en-US/docs/Glossary/Undefined)
 12 | - [Object](https://developer.mozilla.org/en-US/docs/Glossary/Object)
 13 | - [Symbol(ES6)](https://developer.mozilla.org/en-US/docs/Glossary/Symbol)
 14 | 
 15 | 这里就不多作解释了，如果突然忘记，就点开回忆回忆。
 16 | 
 17 | 虽然有这么多的数据类型，但是声明的时候只能 `var`、`let`、`const`...
 18 | 
 19 | ```javascript
 20 | // bad code
 21 | var count = '0';
 22 | let isNumber = 1;
 23 | const name = true;
 24 | ```
 25 | 
 26 | What did you say？You'd better not do that again.
 27 | 
 28 | 我们应该优雅一点~
 29 | 
 30 | ## TypeScript 的基础类型
 31 | 
 32 | `TypeScript` 是 `JavaScript` 的超集，自然能够支持所有 `JavaScript` 的数据类型，除此之外，`TypeScript` 还提供了让人喜欢的枚举类型(enum)。
 33 | 
 34 | ### boolean 布尔值
 35 | 
 36 | ```typescript
 37 | function hello(isBetterCode: boolean) {
 38 | 	//...
 39 | 	return isBetterCode ? 'good' : 'bed';
 40 | }
 41 | const isBetterCode: boolean = true;
 42 | hello(isBetterCode); // good
 43 | ```
 44 | 
 45 | 来个小插曲，下面这两行代码分别返回什么：
 46 | 
 47 | ```javascript
 48 | new Boolean('') == false
 49 | new Boolean(1) === true
 50 | ```
 51 | 
 52 | 所以，如果这样声明了一个表示布尔值的变量，编译是不会通过的：
 53 | 
 54 | ```typescript
 55 | const isBetterCode: boolean = new Boolean(1);
 56 | // Type 'Boolean' is not assignable to type 'boolean'.
 57 | // 'boolean' is a primitive, but 'Boolean' is a wrapper object. Prefer using 'boolean' when possible.
 58 | ```
 59 | 
 60 | 因为 `new Boolean` 返回的是一个 `Boolean` 对象，而不是一个 `boolean` 值。
 61 | 
 62 | 如果你想这样写，也都是可以的：
 63 | 
 64 | ```typescript
 65 | const isBetterCode: Boolean = new Boolean(1);
 66 | const isBetterCode: boolean = Boolean(1);
 67 | ```
 68 | 
 69 | ### number 数字
 70 | 
 71 | `TypeScript` 和 `JavaScript` 一样，所有的数字都是浮点数，并没有区分 `int`、`flost`、`double` 等类型，所有的数字都是 `number`。`number` 类型支持十进制、十六进制等，以及 `NaN` 和 `Infinity` 等。
 72 | 
 73 | ```typescript
 74 | const count: number = 1;
 75 | const binary: number = 0b1010; // 10
 76 | const hex: number = 0xf00d; // 61453
 77 | const octal: number = 0o744; // 484
 78 | const notNumber: number = NaN; // NaN
 79 | const infinityNumber: number = Infinity; // Infinity
 80 | ```
 81 | 
 82 | ### string 字符串
 83 | 
 84 | 使用 `string` 定义字符串类型的变量，支持常规的单引号和双引号，也支持 `ES6` 的模板字符串：
 85 | 
 86 | ```typescript
 87 | const name: string = 'axuebin'; // axuebin
 88 | const desc: string = `My name is ${name}`; // My name is axuebin
 89 | ```
 90 | 
 91 | ### void 空
 92 | 
 93 | 犹记得 `C` 中的 `void main()` 还有 `Java` 中的 `public static void main(String args[])` 这两句闭着眼睛都能写出来的代码，在 `JavaScript` 中却好久都见不到一次 `void` 的身影，甚是想念。
 94 | 
 95 | 其实，`JavaScript` 是有 [void](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/void) 的，只是不常使用而已。
 96 | 
 97 | ```javascript
 98 | void 0; // undefined
 99 | ```
100 | 
101 | 在 `TypeScript` 中，你能多见见它了，我们可以用 `void` 来表示任何返回值的函数：
102 | 
103 | ```typescript
104 | function hello(): void {
105 | 	console.log('hello typescript');
106 | }
107 | ```
108 | 
109 | ### null 和 undefined 空
110 | 
111 | ```typescript
112 | const u: undefined = undefined; // undefined
113 | const n: null = null; // null
114 | ```
115 | 
116 | 需要注意的是：
117 | 
118 | `undefined` 类型的变量只能被赋值为 `undefined`，`null` 类型的变量只能被赋值为 `null`。
119 | 
120 | 不过你可以把 `undefined` 和 `null` 类型的变量赋给 `void` 类型的变量...
121 | 
122 | ### any 任意值
123 | 
124 | ~~`AnyScript` 大法好~~
125 | 
126 | 有时候，我们需要为那些在编程阶段无法确定类型的变量指定一个类型时，我们就需要 `any` 这个类型。`any` 类型的变量可以被赋予任意类型的值：
127 | 
128 | ```typescript
129 | let number: any = 'one';
130 | number = 1; // 1
131 | const me: any = 'axuebin';
132 | console.log(me.name); // undefined 不会报错
133 | ```
134 | 
135 | 这样是不会报错的。
136 | 
137 | 当然，如果在编程阶段能够确定类型的话，尽量还是能够明确地指定类型。
138 | 
139 | 声明变量（没赋值）的时候，如果未指定类型，那么该变量会被识别为 `any` 类型，比如：
140 | 
141 | ```typescript
142 | let number; // 相当于 let number: any;
143 | number = 1; // 1
144 | ```
145 | 
146 | 需要注意的是，**没赋值**。如果声明变量的时候同时赋值了，就会进行类型推论。
147 | 
148 | #### 类型推论
149 | 
150 | 声明变量的时候，如果对变量进行赋值，如果该变量没有明确地指定类型，`TypeScript` 会推测出一个类型。
151 | 
152 | ```typescript
153 | let number = 'one'; // 相当于 let number: string = 'one';
154 | number = 1; // Type '1' is not assignable to type 'string'.
155 | ```
156 | 
157 | 如果只声明没有赋值，就是 `any`。
158 | 
159 | ### array 数组
160 | 
161 | 在 `TypeScript` 中，数组是通过「类型 + 方括号」来定义：
162 | 
163 | ```typescript
164 | const me: string[] = ['axuebin', '27']; // 定义一个都是 string 的数组
165 | const counts: number[] = [1, 2, 3, 4]; // 定义一个都是 number 的数组
166 | // error
167 | const me: string[] = ['axuebin', 27]; // Type 'number' is not assignable to type 'string'.
168 | counts.push('5'); // Argument of type '"5"' is not assignable to parameter of type 'number'.
169 | ```
170 | 
171 | 还有一种方式是使用泛型：
172 | 
173 | ```typescript
174 | const counts: Array<number> = [1, 2, 3, 4]; // 使用泛型定义一个都是 number 的数组
175 | ```
176 | 
177 | 关于**泛型**，后面会仔细说明，现在就知道有这么个东西~
178 | 
179 | 如果对数组中的类型不确定，比较常见的做法就是使用 `any`：
180 | 
181 | ```typescript
182 | const list: any[] = ['axuebin', 27, true];
183 | ```
184 | 
185 | #### tuple 元组
186 | 
187 | 还有一种特殊的情况，如果我们需要定义一个已知元素和类型的数组，但是各个元素的类型不相同，可以使用 `tuple 元组` 来定义：
188 | 
189 | ```typescript
190 | const me: [string, number, boolean] = ['axuebin', 27, true];
191 | ```
192 | 
193 | 当我们想要在这个数组 `push` 一个新元素时，会提示 `(string | number | boolean)`，这是表示元组额外增加的元素可以是之前定义的类型中的任意一种类型。`(string | number | boolean)` 称作**联合类型**，后续会说到它。
194 | 
195 | ### eunm 枚举
196 | 
197 | 枚举是 `TS` 对 `JS` 标准数据类型的补充，Java/c 等语言都有枚举数据类型，在 `TypeScript` 里可以这样定义一个枚举：
198 | 
199 | ```typescript
200 | enum Animal {
201 | 	Cat,
202 | 	Dog,
203 | 	Mouse,
204 | }
205 | const cat: Animal = Animal.Cat; // 0
206 | const dog: Animal = Animal. Dog; // 1
207 | ```
208 | 
209 | 既然是 `JavaScript` 没有的，我们就需要知道一个枚举最终会被编译成什么样的 `JavaScript` 代码：
210 | 
211 | ```javascript
212 | "use strict";
213 | var Animal;
214 | (function (Animal) {
215 |     Animal[Animal["Cat"] = 0] = "Cat";
216 |     Animal[Animal["Dog"] = 1] = "Dog";
217 |     Animal[Animal["Mouse"] = 2] = "Mouse";
218 | })(Animal || (Animal = {}));
219 | const cat = Animal.Cat; // 0
220 | const dog = Animal.Dog; // 1
221 | ```
222 | 很容易看出，`Animal` 在 `JavaScript` 中是变成了一个 `object`，并且执行了以下代码：
223 | 
224 | ```javascript
225 | Animal["Cat"] = 0; // 赋值运算符会返回被赋予的值，所以返回 0
226 | Animal[0] = "Cat";
227 | // 省略 ...
228 | // 最终的 Animal 是这样的
229 | {
230 | 	0: "Cat",
231 | 	1: "Dog,
232 | 	2: "Mouse",
233 | 	Cat: 0,
234 | 	Dog: 1,
235 | 	Mouse: 2,
236 | }
237 | ```
238 | 
239 | 


--------------------------------------------------------------------------------
/2019/quill 富文本编辑器自定义格式化.md:
--------------------------------------------------------------------------------
  1 | ## quilljs
  2 | 
  3 | 现在富文本编辑器轮子太多了，Github 上随便搜一下就有一堆，我需要实现的功能很简单，所以就佛系地选了 `quilljs`，quilljs 是一个轻量级的富文本编辑器。
  4 | 
  5 | 链接：
  6 | 
  7 | - 官网：[https://quilljs.com/](https://quilljs.com/)
  8 | - Github： [https://github.com/quilljs/quill](https://github.com/quilljs/quill)
  9 | - React版本：[https://github.com/zenoamaro/react-quill](https://github.com/zenoamaro/react-quill)
 10 | - Vue版本：[https://github.com/surmon-china/vue-quill-editor](https://github.com/surmon-china/vue-quill-editor)
 11 | 
 12 | 基础功能就不多说了，看文档就好。
 13 | 
 14 | 主要是记录一下如何在 `toolbar` 上自定义一个按钮并实现自定义格式化。
 15 | 
 16 | ## toolbar
 17 | 
 18 | `toolbar` 相关文档：[https://quilljs.com/docs/modules/toolbar/](https://quilljs.com/docs/modules/toolbar/)
 19 | 
 20 | ### 基础用法
 21 | 
 22 | 可以看到文档中有这么一段代码：
 23 | 
 24 | ```javascript
 25 | var toolbarOptions = [
 26 |   ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
 27 |   ['blockquote', 'code-block'],
 28 | 
 29 |   [{ 'header': 1 }, { 'header': 2 }],               // custom button values
 30 |   [{ 'list': 'ordered'}, { 'list': 'bullet' }],
 31 |   [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
 32 |   [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
 33 |   [{ 'direction': 'rtl' }],                         // text direction
 34 | 
 35 |   [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
 36 |   [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
 37 | 
 38 |   [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
 39 |   [{ 'font': [] }],
 40 |   [{ 'align': [] }],
 41 | 
 42 |   ['clean']                                         // remove formatting button
 43 | ];
 44 | 
 45 | var quill = new Quill('#editor', {
 46 |   modules: {
 47 |     toolbar: toolbarOptions
 48 |   },
 49 |   theme: 'snow'
 50 | });
 51 | ```
 52 | 
 53 | 这是 `toolbar` 上支持的一些格式化功能，比如 加粗、斜体、水平对齐等等常见的文档格式化。
 54 | 
 55 | 可是我发现，貌似不太够用啊。
 56 | 
 57 | 比如我想插入一些 `{{name}}` 这样的文本，并且是加粗的，总不能让我每次都输入 `{{}}` 吧，麻烦而且容易遗漏，得做成自动格式化的。
 58 | 
 59 | 随手翻了一下文档，`quilljs` 支持本地 `module`，`toolbar` 上每一个格式化功能可以看作是一个 `module`，翻翻源码：
 60 | 
 61 | ![](https://raw.githubusercontent.com/axuebin/articles/master/images/quill_format.png)
 62 | 
 63 | 看一下 `link.js` 吧，简化了一下：
 64 | 
 65 | ```javascript
 66 | import Inline from '../blots/inline';
 67 | 
 68 | class Link extends Inline {
 69 |   static create(value) {
 70 |     let node = super.create(value); // 创建一个节点
 71 |     node.setAttribute('href', value); // 将输入的 value 放到 href
 72 |     node.setAttribute('target', '_blank'); // target 设为空
 73 |     return node;
 74 |   }
 75 |   
 76 |   static formats(domNode) {
 77 |     return domNode.getAttribute('href'); // 获取放在 href 中的 value
 78 |   }
 79 | }
 80 | Link.blotName = 'link'; // bolt name
 81 | Link.tagName = 'A'; // 渲染成 html 标签
 82 | 
 83 | export { Link as default };
 84 | 
 85 | ```
 86 | 
 87 | 是不是实现一个简单的自定义格式化看上去很简单。
 88 | 
 89 | ### 实现
 90 | 
 91 | 以 vue 为例哈，大同小异。
 92 | 
 93 | #### 初始化
 94 | 
 95 | ```html
 96 | <quill-editor ref="myTextEditor"
 97 |   class="editor-area"
 98 |   v-model="content"
 99 |   :options="editorOption"
100 |   @blur="onEditorBlur($event)">
101 | </quill-editor>
102 | ```
103 | 
104 | ```javascript
105 | const toolbarOptions = [
106 |   [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
107 |   ['bold', 'italic', 'underline'],
108 |   [{ 'color': [] }, { 'background': [] }],
109 |   [{ 'align': [] }],
110 |   ['formatParam'],
111 | ];
112 | data() {
113 |   return {
114 |     editorOption: {
115 | 	   modules: {
116 | 	     toolbar: {
117 | 	       container: toolbarOptions,
118 | 	       handlers: {},
119 | 	     },
120 | 	   },
121 |     }
122 |   };
123 | },
124 | editor() {
125 |   return this.$refs.myTextEditor.quill;
126 | }
127 | ```
128 | 
129 | #### 创建
130 | 
131 | 在项目组件的目录下创建一个 `formatParam.js`：
132 | 
133 | ```javascript
134 | import Quill from 'quill';
135 | 
136 | const Inline = Quill.import('blots/inline');
137 | 
138 | class formatParam extends Inline {
139 |   static create() {
140 |     const node = super.create();
141 |     return node;
142 |   }
143 | 
144 |   static formats(node) {
145 |     return node;
146 |   }
147 | }
148 | formatParam.blotName = 'formatParam';
149 | formatParam.tagName = 'span';
150 | 
151 | export default formatParam;
152 | ```
153 | 
154 | 我这里没有对 `value` 和 `node` 做任何处理，然后在 `handlers` 里做处理，貌似有点蠢。。
155 | 
156 | #### 注册
157 | 
158 | ```javascript
159 | import { quillEditor, Quill } from 'vue-quill-editor';
160 | import FormatParam from './formatParam';
161 | 
162 | Quill.register(FormatParam);
163 | ```
164 | 
165 | #### 使用
166 | 
167 | 首先在 `toolbar` 上放一个按钮是必须的，当然也可以放 `icon`，我就简单地处理一下：
168 | 
169 | ```javascript
170 | mounted() {
171 |   const formatParamButton = document.querySelector('.ql-formatParam');
172 |   formatParamButton.style.cssText = "width:80px; border:1px solid #ccc; border-radius:5px; padding: 0;";
173 |   formatParamButton.innerText = "添加参数";
174 | }
175 | ```
176 | 
177 | 效果如图：
178 | 
179 | ![](https://raw.githubusercontent.com/axuebin/articles/master/images/quill_toolbar.png)
180 | 
181 | 然后就是要注册这个按钮的点击事件：
182 | 
183 | ```javascript
184 | handlers: {
185 |   formatParam: () => {
186 |     const range = this.editor.getSelection(true); // 获取光标位置
187 |     const value = prompt('输入参数名（如：name）'); // 弹框输入返回值
188 |     if (value) {
189 |       this.editor.format('formatParam', value); // 格式化
190 |       this.editor.insertText(range.index, `{{${value}}}`); // 显示在编辑器中
191 |       this.editor.setSelection(range.index + value.length + 4, Quill.sources.SILENT); // 光标移到插入的文字后，并且让按钮失效
192 |     }
193 |   },
194 | }
195 | ```
196 | 
197 | #### 渲染 html
198 | 
199 | 我在自定义格式化的时候没直接渲染成 html，然后在保存的时候做了一下：
200 | 
201 | ```javascript
202 | watch: {
203 |   content() {
204 |     const { content } = this
205 |     const result = content.replace(/\{\{(.*?)\}\}/g, (match, key) => `<span class="${key}">{{${key}}}</span>`);
206 |     updateState({ content: result });
207 |   },
208 | }
209 | ```
210 | 
211 | 这样就好了，想要插入一个参数的时候点击工具栏上的按钮，就会直接在编辑器里插入 `{{xxx}}` 的文本了。
212 | 
213 | 效果如图：
214 | 
215 | ![](https://raw.githubusercontent.com/axuebin/articles/master/images/quill_template.png)
216 | 
217 | ## 总结
218 | 
219 | 其实理论上应该可以在 `formatParam.js` 中把所有事情都做掉，也就不用最后的正则替换了。
220 | 
221 | 按照这个思路，我们可以在富文本编辑器按照自己所需要的格式插入任何自定义内容。
222 | 
223 | 参考链接：
224 | 
225 | - [https://github.com/quilljs/quill](https://github.com/quilljs/quill)
226 | - [https://quilljs.com/guides/cloning-medium-with-parchment/](https://quilljs.com/guides/cloning-medium-with-parchment/)


--------------------------------------------------------------------------------
/2019/webpack loader 从上手到理解系列：file-loader.md:
--------------------------------------------------------------------------------
  1 | ## 什么是 file-loader
  2 | 
  3 | 简单来说，`file-loader` 就是在 `JavaScript` 代码里 `import/require` 一个文件时，会将该文件生成到输出目录，并且在 `JavaScript` 代码里返回该文件的地址。
  4 | 
  5 | ## 如何使用
  6 | 
  7 | ### 1. 安装 `file-loader`
  8 | 
  9 | ```
 10 | npm install file-loader --save-dev
 11 | ```
 12 | 
 13 | ### 2. 配置 `webapck`
 14 | 
 15 | ```javascript
 16 | // webpack.config.js
 17 | module.exports = {
 18 |   module: {
 19 |     rules: [
 20 |       {
 21 |         test: /\.(png|jpg|gif)$/,
 22 |         use: [
 23 |           {
 24 |             loader: 'file-loader',
 25 |             options: {},
 26 |           },
 27 |         ],
 28 |       },
 29 |     ],
 30 |   },
 31 | };
 32 | ```
 33 | 
 34 | 关于 `file-loader` 的 `options`，这里就不多说了，见 [file-loader options ](https://webpack.js.org/loaders/file-loader/#options).
 35 | 
 36 | ### 3. 引入一个文件，可以是 `import`（或 `require`）
 37 | 
 38 | ```javascript
 39 | import logo from '../assets/image/logo.png';
 40 | console.log('logo的值: ', logo); // 打印一下看看 logo 是什么
 41 | ```
 42 | 
 43 | 简单三步就搞定了。
 44 | 
 45 | ### 4. 见证奇迹的时刻
 46 | 
 47 | ```
 48 | webpack
 49 | ```
 50 | 
 51 | ~~执行 `webpack` 打包之后，`dist` 目录下会生成一个打包好的 `bundle.js`，这个就不多说了。~~
 52 | 
 53 | 如果使用了 `file-loader`， `dist` 目录这时候会生成我们用到的那个文件，在这里也就是 `logo.png`。
 54 | 
 55 | 默认情况下，生成到 `dist` 目录的文件不会是原文件名，而是：`**[原文件内容的 MD5 哈希值].[原文件扩展名]**`。
 56 | 
 57 | 回到上文，`console.log(logo)` 会打印什么呢，我们执 `bundle.js` 看看：
 58 | 
 59 | ```
 60 | node dist/bundle.js
 61 | ```
 62 | 
 63 | 输出结果是：
 64 | 
 65 | ```
 66 | logo的值:  dab1fd6b179f2dd87254d6e0f9f8efab.png
 67 | ```
 68 | 
 69 | 如上所说，会返回文件的地址。
 70 | 
 71 | ## 源码解析
 72 | 
 73 | `file-loader` 的代码不多，就直接贴在这了：
 74 | 
 75 | ```javascript
 76 | import path from 'path';
 77 | 
 78 | import loaderUtils from 'loader-utils'; // loader 工具包
 79 | import validateOptions from 'schema-utils'; // schema 工具包
 80 | 
 81 | import schema from './options.json'; // options schema
 82 | 
 83 | export default function loader(content) {
 84 |   // 获取 webpack 配置里的 options
 85 |   const options = loaderUtils.getOptions(this) || {};
 86 | 
 87 |   // 校验 options
 88 |   validateOptions(schema, options, {
 89 |     name: 'File Loader',
 90 |     baseDataPath: 'options',
 91 |   });
 92 | 
 93 |   // 获取 context
 94 |   const context = options.context || this.rootContext;
 95 | 
 96 |   // 根据 name 配置和 content 内容生成一个文件名
 97 |   // 默认是 [contenthash].[ext]，也就是根据 content 的 hash 来生成文件名
 98 |   const url = loaderUtils.interpolateName(
 99 |     this,
100 |     options.name || '[contenthash].[ext]',
101 |     {
102 |       context,
103 |       content,
104 |       regExp: options.regExp,
105 |     }
106 |   );
107 | 
108 |   let outputPath = url;
109 | 
110 |   // 如果配置了 outputPath，则需要做一些拼接操作
111 |   if (options.outputPath) {
112 |     if (typeof options.outputPath === 'function') {
113 |       outputPath = options.outputPath(url, this.resourcePath, context);
114 |     } else {
115 |       outputPath = path.posix.join(options.outputPath, url);
116 |     }
117 |   }
118 | 
119 |   // __webpack_public_path__ 是 webpack 定义的全局变量，是 output.publicPath 的值
120 |   let publicPath = `__webpack_public_path__ + ${JSON.stringify(outputPath)}`;
121 | 
122 |   // 同样，如果配置了 publicPath，则需要做一些拼接操作
123 |   if (options.publicPath) {
124 |     if (typeof options.publicPath === 'function') {
125 |       publicPath = options.publicPath(url, this.resourcePath, context);
126 |     } else {
127 |       publicPath = `${
128 |         options.publicPath.endsWith('/')
129 |           ? options.publicPath
130 |           : `${options.publicPath}/`
131 |       }${url}`;
132 |     }
133 |     publicPath = JSON.stringify(publicPath);
134 |   }
135 | 
136 |   // 关于 postTransformPublicPath，可以看一下 https://webpack.js.org/loaders/file-loader/#posttransformpublicpath
137 |   if (options.postTransformPublicPath) {
138 |     publicPath = options.postTransformPublicPath(publicPath);
139 |   }
140 | 
141 |   if (typeof options.emitFile === 'undefined' || options.emitFile) {
142 |     // 让 webpack 生成一个文件
143 |     this.emitFile(outputPath, content);
144 |   }
145 | 
146 |   // TODO revert to ES2015 Module export, when new CSS Pipeline is in place
147 |   // 这里可以思考一下为什么返回的是 `module.exports = ${publicPath};`，而不是 publicPath
148 |   return `module.exports = ${publicPath};`;
149 | }
150 | 
151 | // 默认情况下 webpack 对文件进行 UTF8 编码，当 loader 需要处理二进制数据的时候，需要设置 raw 为 true
152 | export const raw = true;
153 | ```
154 | 
155 | ## 参考
156 | 
157 | - [file-loader](https://webpack.js.org/loaders/file-loader/)
158 | - [loader api](https://webpack.js.org/api/loaders/)


--------------------------------------------------------------------------------
/2019/webpack loader 从上手到理解系列：style-loader.md:
--------------------------------------------------------------------------------
  1 | ## 什么是 `style-loader`
  2 | 
  3 | `style-loader` 的功能就一个，在 `DOM` 里插入一个 `<style>` 标签，并且将 `CSS` 写入这个标签内。
  4 | 
  5 | 简单来说就是这样：
  6 | 
  7 | ```javascript
  8 | const style = document.createElement('style'); // 新建一个 style 标签
  9 | style.type = 'text/css';
 10 | style.appendChild(document.createTextNode(content)) // CSS 写入 style 标签
 11 | document.head.appendChild(style); // style 标签插入 head 中
 12 | ```
 13 | 
 14 | 稍后会详细分析源码，看看和我们的思路是否一致。
 15 | 
 16 | ## 如何使用 `style-loader`
 17 | 
 18 | ### 1. 安装 `style-loader`
 19 | 
 20 | ```
 21 | npm install style-loader --save-dev
 22 | ```
 23 | 
 24 | ### 2. 配置 `webapck`
 25 | 
 26 | ```javascript
 27 | // webpack.config.js
 28 | module.exports = {
 29 |   module: {
 30 |     rules: [
 31 |       {
 32 |         test: /\.(css)$/,
 33 |         use: [
 34 |           {
 35 |             loader: 'style-loader',
 36 |             options: {},
 37 |           },
 38 |           { loader: 'css-loader' },
 39 |         ],
 40 |       },
 41 |     ],
 42 |   },
 43 | };
 44 | ```
 45 | 
 46 | 日常的开发中处理样式文件时，一般会使用到 `style-loader` 和 `css-loader` 这两个 `loader`。
 47 | 
 48 | 关于 `style-loader` 的 `options`，这里就不多说了，见 [style-loader options ](https://webpack.js.org/loaders/style-loader/).
 49 | 
 50 | ### 3. 引入一个样式文件
 51 | 
 52 | ```javascript
 53 | const indexStyle = require('./assets/style/index.css');
 54 | ```
 55 | 
 56 | ### 4. 见证奇迹的时刻
 57 | 
 58 | ```
 59 | webpack
 60 | ```
 61 | 
 62 | 打包完成之后我们打开 `html` 页面，会看到 `<head>` 里已经有了 `index.css` 里的样式内容：
 63 | 
 64 | ```html
 65 | <style>
 66 | .container {
 67 |   color: red;
 68 |   background: #999999;
 69 | }
 70 | 
 71 | .zelda {
 72 |   width: 260px;
 73 |   height: 100px;
 74 | }
 75 | </style>
 76 | ```
 77 | 
 78 | ## injectType
 79 | 
 80 | 单独讲一下 `injectType` 这个配置项，默认值是 `styleTag`，通过 `<style></style>` 的形式插入 `DOM` 中，我们来看看不同的 `injectType` 的效果。 
 81 | 
 82 | ### styleTag
 83 | 
 84 | 默认情况下，`style-loader` 每一次处理引入的样式文件都会在 `DOM` 上创建一个 `<style>` 标签，比如此时引入两个样式文件：
 85 | 
 86 | ```javascript
 87 | const globalStyle = require('./assets/style/global.css');
 88 | const indexStyle = require('./assets/style/index.css');
 89 | ```
 90 | 
 91 | 输出的 `DOM` 结构为：
 92 | 
 93 | ```html
 94 | <style>
 95 | html, body {
 96 |   height: 100%;
 97 | }
 98 | #app {
 99 |   background: #ffffff;
100 | }
101 | </style>
102 | <style>
103 | .container {
104 |   color: red;
105 | }
106 | .zelda {
107 |   width: 260px;
108 |   height: 100px;
109 | }
110 | </style>
111 | ```
112 | 
113 | ### singletonStyleTag
114 | 
115 | 上面提到默认情况下有几个样式文件就会插入几个 `<style>` 标签，将 `injectType` 设置为 `singletonStyleTag` 可将所有的样式文件打在同一个 `<style>` 标签里。
116 | 
117 | ```javascript
118 | // config
119 | {
120 |   test: /\.(css)$/,
121 |   use: [
122 |     {
123 |       loader: 'style-loader',
124 |       options: {
125 |         injectType: 'singletonStyleTag',
126 |       },
127 |     },
128 |     { loader: 'css-loader' },
129 |   ],
130 | }
131 | 
132 | // js
133 | const globalStyle = require('./assets/style/global.css');
134 | const indexStyle = require('./assets/style/index.css');
135 | ```
136 | 
137 | 输出的 `DOM` 结构为：
138 | 
139 | ```html
140 | <style>
141 | html, body {
142 |   height: 100%;
143 | }
144 | #app {
145 |   background: #ffffff;
146 | }
147 | .container {
148 |   background: #f5f5f5;
149 | }
150 | .container {
151 |   color: red;
152 |   background: #999999;
153 | }
154 | .zelda {
155 |   width: 260px;
156 |   height: 100px;
157 | }
158 | </style>
159 | ```
160 | 
161 | 可以看到，两个样式文件的内容都被放到同一个 `<style>` 标签里了，并且是按照我们引入样式文件的顺序，似乎还比较符合预期。
162 | 
163 | 
164 | ### linkTag
165 | 
166 | 当 `injectType` 为 `linkTag`，会通过 `<link rel="stylesheet" href="">` 的形式将样式插入到 `DOM` 中，此时 `style-loader` 接收到的数据应该是样式文件的地址，所以搭配的 `loader` 应该是 `file-loader` 而不是 `css-loader`。
167 | 
168 | ```javascript
169 | // config
170 | {
171 |   test: /\.(css)$/,
172 |   use: [
173 |     {
174 |       loader: 'style-loader',
175 |       options: {
176 |         injectType: 'linkTag',
177 |       },
178 |     },
179 |     { loader: 'file-loader' },
180 |   ],
181 | }
182 | 
183 | // js
184 | const globalStyle = require('./assets/style/global.css');
185 | const indexStyle = require('./assets/style/index.css');
186 | ```
187 | 
188 | 输出的 `DOM` 结构为：
189 | 
190 | ```html
191 | <head>
192 |   <link rel="stylesheet" href="f2742027f8729dc63bfd46029a8d0d6a.css">
193 |   <link rel="stylesheet" href="34cd6c668a7a596c4bedad32a39832cf.css">
194 | </head>
195 | ```
196 | 
197 | ### lazyStyleTag, lazySingletonStyleTag
198 | 
199 | 这两种类型的 `injectType` 区别在于它们是延迟加载的：
200 | 
201 | ```javascript
202 | // config
203 | {
204 |   test: /\.(css)$/,
205 |   use: [
206 |     {
207 |       loader: 'style-loader',
208 |       options: {
209 |         injectType: 'lazyStyleTag',
210 |       },
211 |     },
212 |     { loader: 'css-loader' },
213 |   ],
214 | }
215 | 
216 | // js
217 | const globalStyle = require('./assets/style/global.css');
218 | const indexStyle = require('./assets/style/index.css');
219 | 
220 | // globalStyle.use();
221 | ```
222 | 
223 | 如果仅仅是像上面一样导入了样式文件，样式是不会插入到 `DOM` 中的，需要手动使用 `globalStyle.use()` 来延迟加载 `global.css` 这个样式文件。
224 | 
225 | 其它的用法就不多说了，自行查看 [style-loader](https://webpack.js.org/loaders/style-loader/)。
226 | 
227 | ## 源码解析
228 | 
229 | `style-loader` 主要可以分为：
230 | 
231 | - 打包阶段
232 | - `runtime` 阶段
233 | 
234 | ### 打包阶段
235 | 
236 | 先看引入依赖部分的代码：
237 | 
238 | ```javascript
239 | var _path = _interopRequireDefault(require("path"));
240 | var _loaderUtils = _interopRequireDefault(require("loader-utils"));
241 | var _schemaUtils = _interopRequireDefault(require("schema-utils"));
242 | var _options = _interopRequireDefault(require("./options.json"));
243 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
244 | ```
245 | 
246 | 这里定义了一个 `_interopRequireDefault` 方法，传入的是一个 `require()`。
247 | 
248 | 这个方法的作用是：如果引入的是 `es6` 模块，直接返回，如果是 `commonjs` 模块，则将引入的内容放在一个对象的 `default` 属性上，然后返回这个对象。
249 | 
250 | ```javascript
251 | module.exports = () => {};
252 | module.exports.pitch = function loader(request) {}
253 | ```
254 | 
255 | `style-loader` 的导出方式和普通的 `loader` 不太一样，默认导出一个空方法，通过 `pitch` 导出的。
256 | 
257 | 默认的 `loader` 都是从右向左像管道一样执行，而 [`pitch`](https://webpack.js.org/api/loaders/#pitching-loader) 是从左到右执行的。
258 | 
259 | 为什么 `style-loader` 需要这样呢？
260 | 
261 | 我们知道默认 `loader` 的执行是从右向左的，并且会将上一个 `loader` 处理的结果传递给下一个 `loader`，如果按照这种默认行为，`css-loader` 会返回一个 `js` 字符串给 `style-loader`。
262 | 
263 | `style-loader` 的作用是将 `CSS` 代码插入到 `DOM` 中，如果按照顺序从 `css-loader` 接收到一个 `js` 字符串的话，就无法获取到真实的 `CSS` 样式了。所以正确的做法是先执行 `style-loader`，在它里面去执行 `css-loader` ，拿到经过处理的 `CSS` 内容，再插入到 `DOM` 中。
264 | 
265 | 接下来看看 `loader` 的内容：
266 | 
267 | ```javascript
268 | // 获取 webpack 配置里的 options
269 | const options = _loaderUtils.default.getOptions(this) || {};
270 | // 校验 options
271 | (0, _schemaUtils.default)(_options.default, options, {
272 |   name: 'Style Loader',
273 |   baseDataPath: 'options'
274 | });
275 | 
276 | // style 标签插入的位置，默认是 head
277 | const insert = typeof options.insert === 'undefined' ? '"head"' : typeof options.insert === 'string' ? JSON.stringify(options.insert) : options.insert.toString();
278 | // 设置以哪种方式插入 DOM 中
279 | // 详情见这个：https://github.com/webpack-contrib/style-loader#injecttype
280 | const injectType = options.injectType || 'styleTag';
281 | 
282 | switch (injectType) {
283 |   case 'linkTag': {}
284 |   case 'lazyStyleTag':
285 |   case 'lazySingletonStyleTag': {}
286 |   case 'styleTag':
287 |   case 'singletonStyleTag':
288 |   default: {}
289 | }
290 | ```
291 | 
292 | 根据不同的 `injectType` 会 `return` 不同的 `js` 代码，在 `runtime` 的时候执行。
293 | 
294 | 看看默认情况：
295 | 
296 | ```javascript
297 | return `var content = require(${_loaderUtils.default.stringifyRequest(this, `!!${request}`)});
298 | 
299 | if (typeof content === 'string') {
300 |   content = [[module.id, content, '']];
301 | }
302 | 
303 | var options = ${JSON.stringify(options)}
304 | 
305 | options.insert = ${insert};
306 | options.singleton = ${isSingleton};
307 | 
308 | var update = require(${_loaderUtils.default.stringifyRequest(this, `!${_path.default.join(__dirname, 'runtime/injectStylesIntoStyleTag.js')}`)})(content, options);
309 | 
310 | if (content.locals) {
311 |   module.exports = content.locals;
312 | }
313 | ${hmrCode}`;
314 | ```
315 | 
316 | ```_loaderUtils.default.stringifyRequest(this, `!!${request}`)``` 这个方法的作用是将绝对路径转换成相对路径。比如：
317 | 
318 | ```javascript
319 | import css from './asset/style/global.css';
320 | // 此时传递给 style-loader 的 request 会是
321 | request = '/test-loader/node_modules/css-loader/dist/cjs.js!/test-loader/assets/style/global.css';
322 | // 转换
323 | _loaderUtils.default.stringifyRequest(this, `!!${request}`);
324 | // result: "!!../../node_modules/css-loader/dist/cjs.js!./global.css"
325 | ```
326 | 
327 | 所以 `content` 的实际内容就是：
328 | 
329 | ```javascript
330 | var content = require("!!../../node_modules/css-loader/dist/cjs.js!./global.css");
331 | ```
332 | 
333 | 也就是在这里才去调用 `css-loader` 来处理样式文件。
334 | 
335 | `!!` 模块前面的两个感叹号的作用是禁用 `loader` 的配置的，如果不禁用的话会出现无限递归调用的情况。
336 | 
337 | 同样的，`update` 的实际内容是：
338 | 
339 | ```javascript
340 | var update = require("!../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js")(content, options);
341 | ```
342 | 
343 | 意思也就是调用 `injectStylesIntoStyleTage` 模块来处理经过 `css-loader` 处理过的样式内容 `content`。
344 | 
345 | 上述代码都是 `style-loader` 返回的，真正执行是在 `runtime` 阶段。
346 | 
347 | ### `runtime` 阶段
348 | 
349 | ~~本来都写好了，突然不见了，心痛。~~
350 | 
351 | 简单地写一下吧，具体的源码见 [传送门](https://github.com/webpack-contrib/style-loader/blob/master/src/runtime/injectStylesIntoStyleTag.js)
352 | 
353 | 将样式插入 `DOM` 的操作实际是在 `runtime` 阶段进行的，还是以默认情况举例，看看 `injectStylesIntoStyleTage` 做了什么。
354 | 
355 | 简单来说，`module.exports`里最主要的就是 `insertStyleElement` 和 `applyToTag` 两个方法，简化一下就是这样的：
356 | 
357 | ```javascript
358 | module.exports = (list, options) => {
359 |   options = options || {};
360 |   const styles = listToStyles(list, options);
361 |   addStylesToDom(styles, options);
362 | }
363 | 
364 | function insertStyleElement(options) {
365 |   var style = document.createElement('style');
366 |   
367 |   Object.keys(options.attributes).forEach(function (key) {
368 |     style.setAttribute(key, options.attributes[key]);
369 |   });
370 |   
371 |   return style;
372 | }
373 | 
374 | function applyToTag(style, options, obj) {
375 |   var css = obj.css;
376 |   var media = obj.media;
377 | 
378 |   if (media) {
379 |     style.setAttribute('media', media);
380 |   }
381 | 
382 |   if (style.styleSheet) {
383 |     style.styleSheet.cssText = css;
384 |   } else {
385 |     while (style.firstChild) {
386 |       style.removeChild(style.firstChild);
387 |     }
388 |     style.appendChild(document.createTextNode(css));
389 |   }
390 | }
391 | ```
392 | 
393 | 和我们上文猜测差不多是一致的，至此 `style-loader` 的主要工作就完成了。


--------------------------------------------------------------------------------
/2019/webpack loader 从上手到理解系列：url-loader.md:
--------------------------------------------------------------------------------
  1 | ## 什么是 url-loader
  2 | 
  3 | `url-loader` 会将引入的文件进行编码，生成 `DataURL`，相当于把文件翻译成了一串字符串，再把这个字符串打包到 `JavaScript`。
  4 | 
  5 | ## 什么时候使用
  6 | 
  7 | 一般来说，我们会发请求来获取图片或者字体文件。如果图片文件较多时（比如一些 `icon`），会频繁发送请求来回请求多次，这是没有必要的。此时，我们可以考虑将这些较小的图片放在本地，然后使用 `url-loader` 将这些图片通过 `base64` 的方式引入代码中。这样就节省了请求次数，从而提高页面性能。
  8 | 
  9 | ## 如何使用
 10 | 
 11 | ### 1. 安装 `url-loader`
 12 | 
 13 | ```
 14 | npm install url-loader --save-dev
 15 | ```
 16 | 
 17 | ### 2. 配置 `webapck`
 18 | 
 19 | ```javascript
 20 | module.exports = {
 21 |   module: {
 22 |     rules: [
 23 |       {
 24 |         test: /\.(png|jpg|gif)$/,
 25 |         use: [
 26 |           {
 27 |             loader: 'url-loader',
 28 |             options: {},
 29 |           },
 30 |         ],
 31 |       },
 32 |     ],
 33 |   },
 34 | };
 35 | ```
 36 | 
 37 | ### 3. 引入一个文件，可以是 `import`（或 `require`）
 38 | 
 39 | ```javascript
 40 | import logo from '../assets/image/logo.png';
 41 | console.log('logo的值: ', logo); // 打印一下看看 logo 是什么
 42 | ```
 43 | 
 44 | 简单三步就搞定了。
 45 | 
 46 | ### 4. 见证奇迹的时刻
 47 | 
 48 | ```
 49 | webpack
 50 | ```
 51 | 
 52 | 执行 `webpack` 之后，`dist` 目录只生成了一个 `bundle.js`。和 `file-loader` 不同的是，没有生成我们引入的那个图片。上文说过，`url-loader` 是将图片转换成一个 `DataURL`，然后打包到 `JavaScript` 代码中。
 53 | 
 54 | 那我们就看看 `bundle.js` 是否有我们需要的 `DataURL`：
 55 | 
 56 | ```javascript
 57 | // bundle.js
 58 | (function(module, exports) {
 59 | module.exports = "data:image/jpeg;base64.........."; // 省略无数行
 60 | })
 61 | ```
 62 | 
 63 | 我们可以看到这个模块导出的是一个标准的 `DataURL`。
 64 | 
 65 | > 一个标准的DataURL: `data:[<mediatype>][;base64],<data>`
 66 | 
 67 | 通过这个 `DataURL`，我们就可以从本地加载这张图片了，也就不用将图片文件打包到 `dist` 目录下。
 68 | 
 69 | 使用 `base64` 来加载图片也是有两面性的：
 70 | 
 71 | - 优点：节省请求，提高页面性能
 72 | - 缺点：增大本地文件大小，降低加载性能
 73 | 
 74 | 所以我们得有取舍，只对部分小 `size` 的图片进行 `base64` 编码，其它的大图片还是发请求吧。
 75 | 
 76 | `url-loader` 自然是已经做了这个事情，我们只要通过简单配置即可实现上述需求。
 77 | 
 78 | ### options
 79 | 
 80 | - limit: 文件阈值，当文件大小大于 `limit` 的时候使用 `fallback` 的 `loader` 来处理文件
 81 | - fallback: 指定一个 `loader` 来处理大于 `limit` 的文件，默认值是 `file-loader`
 82 | 
 83 | 我们来试试设一个 `limit`：
 84 | 
 85 | ```javascript
 86 | {
 87 |   test: /\.(png|jpg|gif)$/,
 88 |   use: [
 89 |     {
 90 |       loader: 'url-loader',
 91 |       options: {
 92 |         limit: 1000, // 大于 1000 bytes 的文件都走 fallback
 93 |       },
 94 |     },
 95 |   ],
 96 | },
 97 | ```
 98 | 
 99 | 重新执行 `webpack`，由于我们引入的 `logo.png` 大于 `1000`，所以使用的是 `file-loader` 来处理这个文件。图片被打包到 `dist` 目录下，并且返回的值是它的地址：
100 | 
101 | ```javascript
102 | (function(module, exports, __webpack_require__) {
103 | module.exports = __webpack_require__.p + "dab1fd6b179f2dd87254d6e0f9f8efab.png";
104 | }),
105 | ```
106 | 
107 | 更多关于 [file-loader](https://juejin.im/post/5d904e135188255cd02a1e15)
108 | 
109 | ## 源码解析
110 | 
111 | `file-loader` 的代码也不多，就直接复制过来通过注释讲解了：
112 | 
113 | ```javascript
114 | import { getOptions } from 'loader-utils'; // loader 工具包
115 | import validateOptions from 'schema-utils'; // schema 工具包
116 | import mime from 'mime';
117 | 
118 | import normalizeFallback from './utils/normalizeFallback'; // fallback loader
119 | import schema from './options.json'; // options schema
120 | 
121 | // 定义一个是否转换的函数
122 | /*
123 |  *@method shouldTransform
124 |  *@param {Number|Boolean|String} limit 文件大小阈值
125 |  *@param {Number} size 文件实际大小
126 |  *@return {Boolean} 是否需要转换
127 | */
128 | function shouldTransform(limit, size) {
129 |   if (typeof limit === 'boolean') {
130 |     return limit;
131 |   }
132 | 
133 |   if (typeof limit === 'number' || typeof limit === 'string') {
134 |     return size <= parseInt(limit, 10);
135 |   }
136 | 
137 |   return true;
138 | }
139 | 
140 | export default function loader(src) {
141 |   // 获取 webpack 配置里的 options
142 |   const options = getOptions(this) || {};
143 | 
144 |   // 校验 options
145 |   validateOptions(schema, options, {
146 |     name: 'URL Loader',
147 |     baseDataPath: 'options',
148 |   });
149 | 
150 |   // 判断是否要转换，如果要就进入，不要就往下走
151 |   // src 是一个 Buffer，所以可以通过 src.length 获取大小
152 |   if (shouldTransform(options.limit, src.length)) {
153 |     const file = this.resourcePath;
154 |     // 获取文件MIME类型，默认值是从文件取，比如 "image/jpeg"
155 |     const mimetype = options.mimetype || mime.getType(file);
156 | 
157 |     // 如果 src 不是 Buffer，就变成 Buffer
158 |     if (typeof src === 'string') {
159 |       src = Buffer.from(src);
160 |     }
161 |     
162 |     // 构造 DataURL 并导出
163 |     return `module.exports = ${JSON.stringify(
164 |       `data:${mimetype || ''};base64,${src.toString('base64')}`
165 |     )}`;
166 |   }
167 | 
168 |   // 判断结果是不需要通过 url-loader 转换成 DataURL，则使用 fallback 的 loader
169 |   const {
170 |     loader: fallbackLoader,
171 |     options: fallbackOptions,
172 |   } = normalizeFallback(options.fallback, options);
173 | 
174 |   // 引入 fallback loader
175 |   const fallback = require(fallbackLoader);
176 | 
177 |   // fallback loader 执行环境
178 |   const fallbackLoaderContext = Object.assign({}, this, {
179 |     query: fallbackOptions,
180 |   });
181 | 
182 |   // 执行 fallback loader 来处理 src
183 |   return fallback.call(fallbackLoaderContext, src);
184 | }
185 | 
186 | // 默认情况下 webpack 对文件进行 UTF8 编码，当 loader 需要处理二进制数据的时候，需要设置 raw 为 true
187 | export const raw = true;
188 | ```
189 | 
190 | ## 参考
191 | 
192 | - [url-loader](https://www.webpackjs.com/loaders/url-loader/)
193 | - [file-loader](https://webpack.js.org/loaders/file-loader/)
194 | - [file-loader repo](https://github.com/webpack-contrib/url-loader)


--------------------------------------------------------------------------------
/2019/webpack loader 从上手到理解系列：vue-loader（一）.md:
--------------------------------------------------------------------------------
  1 | ## 什么是 vue-loader
  2 | 
  3 | > `vue-loader` 是一个 `webpack` 的 `loader`，它允许你以一种名为单文件组件的格式撰写 `Vue` 组件。
  4 | 
  5 | ## 如何使用
  6 | 
  7 | ### 1. 安装
  8 | 
  9 | ```
 10 | npm install vue-loader vue-template-compiler --save-dev
 11 | ```
 12 | 
 13 | ### 2. 配置 `webapck`
 14 | 
 15 | ```javascript
 16 | // webpack.config.js
 17 | const VueLoaderPlugin = require('vue-loader/lib/plugin')
 18 | 
 19 | module.exports = {
 20 |   mode: 'development',
 21 |   module: {
 22 |     rules: [
 23 |       {
 24 |         test: /\.vue$/,
 25 |         loader: 'vue-loader'
 26 |       },
 27 |       // 它会应用到普通的 `.js` 文件
 28 |       // 以及 `.vue` 文件中的 `<script>` 块
 29 |       {
 30 |         test: /\.js$/,
 31 |         loader: 'babel-loader'
 32 |       },
 33 |       // 它会应用到普通的 `.css` 文件
 34 |       // 以及 `.vue` 文件中的 `<style>` 块
 35 |       {
 36 |         test: /\.css$/,
 37 |         use: [
 38 |           'vue-style-loader',
 39 |           'css-loader'
 40 |         ]
 41 |       }
 42 |     ]
 43 |   },
 44 |   plugins: [
 45 |     // 请确保引入这个插件来施展魔法
 46 |     new VueLoaderPlugin()
 47 |   ]
 48 | }
 49 | ```
 50 | 
 51 | ### 3. 创建一个 `Vue` 组件
 52 | 
 53 | 一个标准的 `Vue` 组件可以分为三部分：
 54 | 
 55 | - template: 模板
 56 | - script: 脚本
 57 | - stype: 样式
 58 | 
 59 | ```vue
 60 | <template>
 61 |   <div id="app">
 62 |     <div class="title">{{msg}}</div>
 63 |   </div>
 64 | </template>
 65 | 
 66 | <script>
 67 | export default {
 68 |   name: 'app',
 69 |   data() {
 70 |     return {
 71 |       msg: 'Hello world',
 72 |     };
 73 |   },
 74 | }
 75 | </script>
 76 | 
 77 | <style lang="scss">
 78 | #app {
 79 |   text-align: center;
 80 |   color: #2c3e50;
 81 |   margin-top: 60px;
 82 | }
 83 | .title {
 84 |   color: red;
 85 | }
 86 | </style>
 87 | ```
 88 | 
 89 | ### 4. 见证奇迹的时刻
 90 | 
 91 | 打包完之后，这个 `Vue` 组件就会被解析到页面上：
 92 | 
 93 | ```html
 94 | <head>
 95 |   <style type="text/css">
 96 |     #app {
 97 |       text-align: center;
 98 |       color: #2c3e50;
 99 |       margin-top: 60px;
100 |     }
101 |     .title {
102 |       color: red;
103 |     }
104 |   </style>
105 | </head>
106 | <body>
107 |   <div id="app">
108 |     <div class="title">Hello world</div>
109 |   </div>
110 |   <script type="text/javascript" src="/app.js"></script>
111 | </body>
112 | ```
113 | 
114 | 上面 `Vue` 组件里的 `<template>` 部分解析到 `<body>` 下，`css` 部分解析成 `<style>` 标签，`<script>` 部分则解析到 `js` 文件里。
115 | 
116 | 简单来说 `vue-loader` 的工作就是处理 `Vue` 组件，正确地解析各个部分。
117 | 
118 | `vue-loader` 的源码较长，我们分几个部分来解析。
119 | 
120 | ## 源码解析之主要流程
121 | 
122 | 我们先从入口看起，从上往下看：
123 | 
124 | ```javascript
125 | module.exports = function (source) {}
126 | ```
127 | 
128 | `vue-loader` 接收一个 `source` 字符串，值是 `vue` 文件的内容。
129 | 
130 | ```javascript
131 | const stringifyRequest = r => loaderUtils.stringifyRequest(loaderContext, r)
132 | ```
133 | 
134 | `loaderUtils.stringifyRequest` 作用是将绝对路径转换成相对路径。
135 | 
136 | 接下来有一大串的声明语句，我们暂且先不看，我们先看最简单的情况。
137 | 
138 | ```javascript
139 | const { parse } = require('@vue/component-compiler-utils')
140 | 
141 | const descriptor = parse({
142 |   source,
143 |   compiler: options.compiler || loadTemplateCompiler(loaderContext),
144 |   filename,
145 |   sourceRoot,
146 |   needMap: sourceMap
147 | })
148 | ```
149 | 
150 | `parse` 方法是来自于 `component-compiler-utils`，代码简略一下是这样：
151 | 
152 | ```javascript
153 | // component-compiler-utils parse
154 | function parse(options) {
155 |   const { source, filename = '', compiler, compilerParseOptions = { pad: 'line' }, sourceRoot = '', needMap = true } = options;
156 |   // ...
157 |   output = compiler.parseComponent(source, compilerParseOptions);
158 |   // ...
159 |   return output;
160 | }
161 | ```
162 | 
163 | 可以看到，这里还不是真正 `parse` 的地方，实际上是调用了 `compiler.parseComponent` 方法，默认情况下 `compiler` 指的是 `vue-template-compiler`。
164 | 
165 | ```javascript
166 | // vue-template-compiler parseComponent
167 | function parseComponent (
168 |   content,
169 |   options
170 | ) {
171 |   var sfc = {
172 |     template: null,
173 |     script: null,
174 |     styles: [],
175 |     customBlocks: [],
176 |     errors: []
177 |   };
178 |   // ...
179 |   function start() {}
180 |   function end() {}
181 |   parseHTML(content, {
182 |     warn: warn,
183 |     start: start,
184 |     end: end,
185 |     outputSourceRange: options.outputSourceRange
186 |   });
187 |   return sfc;
188 | }
189 | ```
190 | 
191 | 这里可以看到，`parseComponent` 应该是调用了 `parseHTML` 方法，并且传入了两个方法： `start` 和 `end`，最终返回 `sfc`。
192 | 
193 | 这一块的源码我们不多说，我们可以猜测 `start` 和 `end` 这两个方法应该是会根据不同的规则去修改 `sfc`，我们看一下 `sfc` 即 `vue-loader` 中 `descriptor` 是怎么样的：
194 | 
195 | ```javascript
196 | // vue-loader descriptor
197 | {
198 |   customBlocks: [],
199 |   errors: [],
200 |   template: {
201 |     attrs: {},
202 |     content: "\n<div id="app">\n  <div class="title">{{msg}}</div>\n</div>\n",
203 |     type: "template"
204 |   },
205 |   script: {
206 |     attrs: {},
207 |     content: "... export default {} ...",
208 |     type: "script"
209 |   },
210 |   style: [{
211 |     attrs: {
212 |       lang: "scss"
213 |     },
214 |     content: "... #app {} ...",
215 |     type: "style",
216 |     lang: "scss"
217 |   }],
218 | }
219 | ```
220 | 
221 | `vue` 文件里的内容已经分别解析到对应的 `type` 去了，接下来是不是只要分别处理各个部分即可。
222 | 
223 | ~~`parseHTML` 这个命名是不是有点问题。。。~~
224 | 
225 | ### `vue-loader` 如何处理不同 `type`
226 | 
227 | 你们可以先思考五分钟，这里的**分别处理**是如何处理的？比如，样式内容需要通过 `style-loader` 才能将其放到 `DOM` 里。
228 | 
229 | 好了，就当作聪明的你已经有思路了。我们继续往下看。
230 | 
231 | ```javascript
232 | // template
233 | let templateImport = `var render, staticRenderFns`
234 | let templateRequest
235 | if (descriptor.template) {
236 |   const src = descriptor.template.src || resourcePath
237 |   const idQuery = `&id=${id}`
238 |   const scopedQuery = hasScoped ? `&scoped=true` : ``
239 |   const attrsQuery = attrsToQuery(descriptor.template.attrs)
240 |   const query = `?vue&type=template${idQuery}${scopedQuery}${attrsQuery}${inheritQuery}`
241 |   const request = templateRequest = stringifyRequest(src + query)
242 |   templateImport = `import { render, staticRenderFns } from ${request}`
243 | }
244 | 
245 | // script
246 | let scriptImport = `var script = {}`
247 | if (descriptor.script) {
248 |   const src = descriptor.script.src || resourcePath
249 |   const attrsQuery = attrsToQuery(descriptor.script.attrs, 'js')
250 |   const query = `?vue&type=script${attrsQuery}${inheritQuery}`
251 |   const request = stringifyRequest(src + query)
252 |   scriptImport = (
253 |     `import script from ${request}\n` +
254 |     `export * from ${request}` // support named exports
255 |   )
256 | }
257 | 
258 | // styles
259 | let stylesCode = ``
260 | if (descriptor.styles.length) {
261 |   stylesCode = genStylesCode(
262 |     loaderContext,
263 |     descriptor.styles,
264 |     id,
265 |     resourcePath,
266 |     stringifyRequest,
267 |     needsHotReload,
268 |     isServer || isShadow // needs explicit injection?
269 |   )
270 | }
271 | ```
272 | 
273 | 这三段代码的结构很像，最终作用是针对不同的 `type` 分别构造一个 `import` 字符串：
274 | 
275 | ```javascript
276 | templateImport = "import { render, staticRenderFns } from './App.vue?vue&type=template&id=7ba5bd90&'";
277 | 
278 | scriptImport = "import script from './App.vue?vue&type=script&lang=js&' \n export * from './App.vue?vue&type=script&lang=js&'";
279 | 
280 | stylesCode = "import style0 from './App.vue?vue&type=style&index=0&lang=scss&'";
281 | ```
282 | 
283 | 这三个 `import` 语句有啥子用呢， `vue-loader` 是这样做的：
284 | 
285 | ```javascript
286 | let code = `
287 | ${templateImport}
288 | ${scriptImport}
289 | ${stylesCode}`.trim() + `\n`
290 | code += `\nexport default component.exports`
291 | return code
292 | ```
293 | 
294 | 此时， `code` 是这样的：
295 | 
296 | ```javascript
297 | code = "
298 | import { render, staticRenderFns } from './App.vue?vue&type=template&id=7ba5bd90&'
299 | import script from './App.vue?vue&type=script&lang=js&'
300 | export * from './App.vue?vue&type=script&lang=js&'
301 | import style0 from './App.vue?vue&type=style&index=0&lang=scss&'
302 | 
303 | // 省略 ...
304 | export default component.exports"
305 | ```
306 | 
307 | 我们知道 `loader` 会导出一个可执行的 `node` 模块，也就是说上面提到的 `code` 是会被 `webpack` 识别到然后执行的。
308 | 
309 | 我们看到 `code` 里有三次的 `import`，`import` 的文件都是 `App.vue`，相当于又加载了一次触发这次 `vue-loader` 的那个 `vue` 文件。不同的是，这次加载是**带参**的，分别对应着 `template` / `script` / `style` 三种 `type` 的处理。
310 | 
311 | > 你们可以先思考五分钟，这里的**分别处理**是如何处理的？
312 | 
313 | 这个问题的答案就是，`webpack` 在加载 `vue` 文件时，会调用 `vue-loader` 来处理 `vue` 文件，之后 `return` 一段可执行的 `js` 代码，其中会根据不同 `type` 分别 `import` 一次当前 `vue` 文件，并且将参数传递进去，这里的多次 `import` 也会被 `vue-loader` 拦截，然后在 `vue-loader` 内部根据不同参数进行处理（比如调用 `style-loader`）。


--------------------------------------------------------------------------------
/2019/初学 babel.md:
--------------------------------------------------------------------------------
  1 | ## 前言
  2 | 
  3 | ![babel](../images/babel-banner.png)
  4 | 
  5 | `Babel` 对于前端开发者来说应该是很熟悉了，日常开发中基本上是离不开它的。
  6 | 
  7 | 已经9102了，我们已经能够熟练地使用 `es2015+` 的语法。但是对于浏览器来说，可能和它们还不够熟悉，我们得让浏览器理解它们，这就需要 `Babel`。
  8 | 
  9 | 当然，仅仅是 `Babel` 是不够的，还需要 `polyfill` 等等等等，这里就先不说了。
 10 | 
 11 | ## What：什么是 `Babel`
 12 | 
 13 | > Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments. 
 14 | 
 15 | 简单地说，`Babel` 能够转译 `ECMAScript 2015+` 的代码，使它在旧的浏览器或者环境中也能够运行。
 16 | 
 17 | 我们可以在 [https://babel.docschina.org/repl](https://babel.docschina.org/repl) 尝试一下。
 18 | 
 19 | 一个小🌰：
 20 | 
 21 | ```
 22 | // es2015 的 const 和 arrow function
 23 | const add = (a, b) => a + b;
 24 | 
 25 | // Babel 转译后
 26 | var add = function add(a, b) {
 27 |   return a + b;
 28 | };
 29 | ```
 30 | ![babel-try](../images/babel-try.png)
 31 | 
 32 | `Babel` 的功能很纯粹。我们传递一段源代码给 `Babel`，然后它返回一串新的代码给我们。就是这么简单，它不会运行我们的代码，也不会去打包我们的代码。
 33 | 
 34 | 它只是一个编译器。
 35 | 
 36 | ## How: Babel 是如何工作的
 37 | 
 38 | 首先得要先了解一个概念：抽象语法树（Abstract Syntax Tree, AST），`Babel` 本质上就是在操作 `AST` 来完成代码的转译。
 39 | 
 40 | ### AST
 41 | 
 42 | `AST` 是什么这里就不细说了，想要了解更多信息可以查看 [Abstract syntax tree - Wikipedia](https://en.wikipedia.org/wiki/Abstract_syntax_tree)。
 43 | 
 44 | 这里比较关心的一段 `JavaScript` 代码会生成一个怎样的 `AST`，`Babel` 又是怎么去操作 `AST` 的。
 45 | 
 46 | 我们还是拿上面的🌰来说明 `const add = (a, b) => a + b;`，这样一句简单的代码，我们来看看它生成的 `AST` 会是怎样的：
 47 | 
 48 | ```
 49 | {
 50 |   "type": "Program",
 51 |   "body": [
 52 |     {
 53 |       "type": "VariableDeclaration", // 变量声明
 54 |       "declarations": [ // 具体声明
 55 |         {
 56 |           "type": "VariableDeclarator", // 变量声明
 57 |           "id": {
 58 |             "type": "Identifier", // 标识符（最基础的）
 59 |             "name": "add" // 函数名
 60 |           },
 61 |           "init": {
 62 |             "type": "ArrowFunctionExpression", // 箭头函数
 63 |             "id": null,
 64 |             "expression": true,
 65 |             "generator": false,
 66 |             "params": [ // 参数
 67 |               {
 68 |                 "type": "Identifier",
 69 |                 "name": "a"
 70 |               },
 71 |               {
 72 |                 "type": "Identifier",
 73 |                 "name": "b"
 74 |               }
 75 |             ],
 76 |             "body": { // 函数体
 77 |               "type": "BinaryExpression", // 二项式
 78 |               "left": { // 二项式左边
 79 |                 "type": "Identifier",
 80 |                 "name": "a"
 81 |               },
 82 |               "operator": "+", // 二项式运算符
 83 |               "right": { // 二项式右边
 84 |                 "type": "Identifier",
 85 |                 "name": "b"
 86 |               }
 87 |             }
 88 |           }
 89 |         }
 90 |       ],
 91 |       "kind": "const"
 92 |     }
 93 |   ],
 94 |   "sourceType": "module"
 95 | }
 96 | ```
 97 | 
 98 | 我们可以通过一棵“树”来更为直观地展示这句代码的 `AST`(从第二层的 `declarations` 开始)：
 99 | 
100 | ![ast-demo](../images/ast-demo.png)
101 | 
102 | 一个 `AST` 的根节点始终都是 `Program`，上面的例子我们从 `declarations` 开始往下读：
103 | 
104 | 一个`VariableDeclaration`(变量声明)：声明了一个 `name` 为 `add` 的`ArrowFunctionExpression`(箭头函数)：
105 | 
106 |   - `params`(函数入参)：`a` 和 `b`
107 |   - 函数体：函数主体是一个`BinaryExpression `(二项式)，一个标准的二项式分为三部分：
108 |     - `left`(左边)：`a`
109 |     - `operator`(运算符)：加号 +
110 |     - `right`(右边)：`b`
111 | 
112 | 这样就拆解了这一行代码。
113 | 
114 | 如果想要了解更多，可以阅读和尝试：
115 | 
116 | - 分析 `AST`：[https://ASTexplorer.net](https://ASTexplorer.net)
117 | - `AST` 规范：[https://github.com/estree/estree](https://github.com/estree/estree)
118 | 
119 | ### Babel 工作过程
120 | 
121 | 了解了 `AST` 是什么样的，就可以开始研究 `Babel` 的工作过程了。
122 | 
123 | 上面说过，`Babel` 的功能很纯粹，它只是一个编译器。
124 | 
125 | 大多数编译器的工作过程可以分为三部分：
126 | 
127 | 1. **Parse(解析)**：将源代码转换成更加抽象的表示方法（例如抽象语法树）
128 | 2. **Transform(转换)**：对（抽象语法树）做一些特殊处理，让它符合编译器的期望
129 | 3. **Generate(代码生成)**：将第二步经过转换过的（抽象语法树）生成新的代码
130 | 
131 | 嗯... 既然 `Babel` 是一个编译器，当然它的工作过程也是这样的。我们来仔细看看这三步分别做了什么事。当然，还是拿上面的🌰来说明 `const add = (a, b) => a + b`，看看它是如何经过 `Babel` 变成：
132 | 
133 | ```
134 | var add = function add(a, b) {
135 |   return a + b;
136 | };
137 | ```
138 | 
139 | #### Parse（解析）
140 | 
141 | 一般来说，`Parse` 阶段可以细分为两个阶段：**词法分析**（Lexical Analysis, LA）和**语法分析**（Syntactic Analysis, SA）。
142 | 
143 | ##### 词法分析
144 | 
145 | 词法分析阶段可以看成是对代码进行“分词”，它接收一段源代码，然后执行一段 `tokenize` 函数，把代码分割成被称为`Tokens` 的东西。`Tokens` 是一个数组，由一些代码的碎片组成，比如数字、标点符号、运算符号等等等等，例如这样：
146 | 
147 | ```
148 | [
149 |     { "type": "Keyword", "value": "const" },
150 |     { "type": "Identifier", "value": "add" },
151 |     { "type": "Punctuator", "value": "=" },
152 |     { "type": "Punctuator", "value": "(" },
153 |     { "type": "Identifier", "value": "a" },
154 |     { "type": "Punctuator", "value": "," },
155 |     { "type": "Identifier", "value": "b" },
156 |     { "type": "Punctuator", "value": ")" },
157 |     { "type": "Punctuator", "value": "=>" },
158 |     { "type": "Identifier", "value": "a" },
159 |     { "type": "Punctuator", "value": "+" },
160 |     { "type": "Identifier", "value": "b" }
161 | ]
162 | ```
163 | 
164 | 通过 [http://esprima.org/demo/parse.html](http://esprima.org/demo/parse.html#) 生成的。
165 | 
166 | 看上去好像很容易啊，就是把一句完整的代码拆成一个个独立个体就好了。但是，我们得让机器知道怎么拆~
167 | 
168 | 我们来试着实现一下 `tokenize` 函数：
169 | 
170 | ```
171 | /**
172 |  * 词法分析 tokenize
173 |  * @param {string} code JavaScript 代码
174 |  * @return {Array} token
175 |  */
176 | function tokenize(code) {
177 |     if (!code || code.length === 0) {
178 |         return [];
179 |     }
180 |     var current = 0; // 记录位置
181 |     var tokens = []; // 定义一个空的 token 数组
182 |     
183 |     var LETTERS = /[a-zA-Z\$\_]/i;
184 |     var KEYWORDS = /const/; //  模拟一下判断是不是关键字
185 |     var WHITESPACE = /\s/;
186 |     var PARENS = /\(|\)/;
187 |     var NUMBERS = /[0-9]/;
188 |     var OPERATORS = /[+*/-]/;
189 |     var PUNCTUATORS = /[~!@#$%^&*()/\|,.<>?"';:_+-=\[\]{}]/;
190 |     
191 |     // 从第一个字符开始遍历
192 |     while (current < code.length) {
193 |         var char = code[current];
194 |         // 判断空格
195 |         if (WHITESPACE.test(char)) {
196 |           current++;
197 |           continue;
198 |         }
199 |         // 判断连续字符
200 |         if (LETTERS.test(char)) {
201 |             var value = '';
202 |             var type = 'Identifier';
203 |             while (char && LETTERS.test(char)) {
204 |                 value += char;
205 |                 char = code[++current];
206 |             }
207 |             // 判断是否是关键字
208 |             if (KEYWORDS.test(value)) {
209 |                 type = 'Keyword'
210 |             }
211 |             tokens.push({
212 |                 type: type,
213 |                 value: value
214 |             });
215 |             continue;
216 |         }
217 |         // 判断小括号
218 |         if (PARENS.test(char)) {
219 |             tokens.push({
220 |               type: 'Paren',
221 |               value: char
222 |             });
223 |             current++;
224 |             continue;
225 |         }
226 |         // 判断连续数字
227 |         if (NUMBERS.test(char)) {
228 |           var value = '';
229 |           while (char && NUMBERS.test(char)) {
230 |             value += char;
231 |             char = code[++current];
232 |           }
233 |           tokens.push({
234 |             type: 'Number',
235 |             value: value
236 |           });
237 |           continue;
238 |         }
239 |         // 判断运算符
240 |         if (OPERATORS.test(char)) {
241 |             tokens.push({
242 |                 type: 'Operator',
243 |                 value: char
244 |             });
245 |             current++;
246 |             continue;
247 |         }
248 |         // 判断箭头函数
249 |         if (PUNCTUATORS.test(char)) {
250 |             var value = char;
251 |             var type = 'Punctuator';
252 |             var temp = code[++current];
253 |             if (temp === '>') {
254 |                 type = 'ArrowFunction';
255 |                 value += temp;
256 |                 current ++;
257 |             }
258 |             tokens.push({
259 |                 type: type,
260 |                 value: value
261 |             });
262 |             continue;
263 |         }
264 |         tokens.push({
265 |             type: 'Identifier',
266 |             value: char
267 |         });
268 |         current++;
269 |     }
270 |     return tokens;
271 | }
272 | ```
273 | 
274 | 上面这个 `tokenize` 函数只是自己实现以下，与实际上 `Babel` 的实现方式还是差不少的，如果感兴趣可以看看[https://github.com/babel/babel/blob/master/packages/babel-parser/src/tokenizer](https://github.com/babel/babel/blob/master/packages/babel-parser/src/tokenizer)
275 | 
276 | 我们来测试一下：
277 | 
278 | ```
279 | const tokens = tokenize('const add = (a, b) => a + b')；
280 | console.log(tokens);
281 | 
282 | [
283 |   { "type": "Keyword", "value": "const" },
284 |   { "type": "Identifier", "value": "add" },
285 |   { "type": "Punctuator", "value": "=" },
286 |   { "type": "Paren", "value": "(" },
287 |   { "type": "Identifier", "value": "a" },
288 |   { "type": "Punctuator", "value": "," },
289 |   { "type": "Identifier", "value": "b" },
290 |   { "type": "Paren", "value": ")" },
291 |   { "type": "ArrowFunction", "value": "=>" },
292 |   { "type": "Identifier", "value": "a" },
293 |   { "type": "Operator", "value": "+" },
294 |   { "type": "Identifier", "value": "b" }
295 | ]
296 | ```
297 | 
298 | 看上去和上面的有点不太一样，没关系，我只是细化了一下类别，意思就是这么个意思。
299 | 
300 | ##### 语法分析
301 | 
302 | **词法分析**之后，代码就已经变成了一个 `Tokens` 数组了，现在需要通过**语法分析**把 `Tokens` 转化为上面提到过的 `AST`。
303 | 
304 | 说来惭愧，这里没有想到很好的思路来实现一个 `parse` 函数。如果哪天想到了，再补充上来。
305 | 
306 | 现在我们先假设已经实现了这样一个函数，把上面的 `Tokens` 转化成了一个 `AST`，进入下一步。
307 | 
308 | 如果感兴趣可以看看官方的做法[https://github.com/babel/babel/tree/master/packages/babel-parser/src/parser](https://github.com/babel/babel/tree/master/packages/babel-parser/src/parser)
309 | 
310 | #### Transform(转换)
311 | 
312 | 这一步做的事情也很简单，就是操作 `AST`。如果忘记了 `AST` 是什么，可以回到上面再看看。
313 | 
314 | 我们可以看到 `AST` 中有很多相似的元素，它们都有一个 `type` 属性，这样的元素被称作**节点**。一个节点通常含有若干属性，可以用于描述 `AST` 的部分信息。
315 | 
316 | 比如这是一个最常见的 `Identifier` 节点：
317 | 
318 | ```
319 | {
320 |     type: 'Identifier',
321 |     name: 'add'
322 | }
323 | ```
324 | 
325 | 表示这是一个标识符。
326 | 
327 | 所以，操作 `AST` 也就是操作其中的节点，可以增删改这些节点，从而转换成实际需要的 `AST`。
328 | 
329 | 更多的节点规范可以在[https://github.com/estree/estree](https://github.com/estree/estree)中查看。
330 | 
331 | `Babel` 对于 `AST` 的遍历是深度优先遍历，对于 `AST` 上的每一个分支 `Babel` 都会先向下遍历走到尽头，然后再向上遍历退出刚遍历过的节点，然后寻找下一个分支。
332 | 
333 | 还是上面的🌰：
334 | 
335 | ```
336 | {
337 |   "type": "Program",
338 |   "body": [
339 |     {
340 |       "type": "VariableDeclaration", // 变量声明
341 |       "declarations": [ // 具体声明
342 |         {
343 |           "type": "VariableDeclarator", // 变量声明
344 |           "id": {
345 |             "type": "Identifier", // 标识符（最基础的）
346 |             "name": "add" // 函数名
347 |           },
348 |           "init": {
349 |             "type": "ArrowFunctionExpression", // 箭头函数
350 |             "id": null,
351 |             "expression": true,
352 |             "generator": false,
353 |             "params": [ // 参数
354 |               {
355 |                 "type": "Identifier",
356 |                 "name": "a"
357 |               },
358 |               {
359 |                 "type": "Identifier",
360 |                 "name": "b"
361 |               }
362 |             ],
363 |             "body": { // 函数体
364 |               "type": "BinaryExpression", // 二项式
365 |               "left": { // 二项式左边
366 |                 "type": "Identifier",
367 |                 "name": "a"
368 |               },
369 |               "operator": "+", // 二项式运算符
370 |               "right": { // 二项式右边
371 |                 "type": "Identifier",
372 |                 "name": "b"
373 |               }
374 |             }
375 |           }
376 |         }
377 |       ],
378 |       "kind": "const"
379 |     }
380 |   ],
381 |   "sourceType": "module"
382 | }
383 | ```
384 | 
385 | 根节点我们就不说了，从 `declarations` 里开始遍历：
386 | 
387 | 1. 声明了一个变量，并且知道了它的内部属性（`id`、`init`），然后我们再以此访问每一个属性以及它们的子节点。
388 | 2. `id` 是一个 `Idenrifier`，有一个 `name` 属性表示变量名。
389 | 3. 之后是 `init`，`init` 也有好几个内部属性：
390 |   - `type` 是`ArrowFunctionExpression`，表示这是一个箭头函数表达式
391 |   - `params` 是这个箭头函数的入参，其中每一个参数都是一个 `Identifier` 类型的节点；
392 |   - `body` 属性是这个箭头函数的主体，这是一个 `BinaryExpression` 二项式：`left`、`operator`、`right`，分别表示二项式的左边变量、运算符以及右边变量。
393 | 
394 | 这是遍历 `AST` 的白话形式，再看看 `Babel` 是怎么做的：
395 | 
396 | `Babel` 会维护一个称作 `Visitor` 的对象，这个对象定义了用于 `AST` 中获取具体节点的方法。
397 | 
398 | #### Visitor
399 | 
400 | 一个 `Visitor` 一般来说是这样的：
401 | 
402 | ```
403 | var visitor = {
404 |     ArrowFunction() {
405 |         console.log('我是箭头函数');
406 |     },
407 |     IfStatement() {
408 |         console.log('我是一个if语句');
409 |     },
410 |     CallExpression() {}
411 | };
412 | ```
413 | 
414 | 当我们遍历 `AST` 的时候，如果匹配上一个 `type`，就会调用 `visitor` 里的方法。
415 | 
416 | 这只是一个简单的 `Visitor `。
417 | 
418 | 上面说过，`Babel` 遍历 `AST` 其实会经过两次节点：遍历的时候和退出的时候，所以实际上 `Babel` 中的 `Visitor` 应该是这样的：
419 | 
420 | ```
421 | var visitor = {
422 |     Identifier: {
423 |         enter() {
424 |             console.log('Identifier enter');
425 |         },
426 |         exit() {
427 |             console.log('Identifier exit');
428 |         }
429 |     }
430 | };
431 | ```
432 | 
433 | 比如我们拿这个 `visitor` 来遍历这样一个 `AST`：
434 | 
435 | ```
436 | params: [ // 参数
437 |     {
438 |         "type": "Identifier",
439 |         "name": "a"
440 |     },
441 |     {
442 |         "type": "Identifier",
443 |         "name": "b"
444 |     }
445 | ]
446 | ```
447 | 
448 | 过程可能是这样的...
449 | 
450 | - 进入 `Identifier(params[0])`
451 | - 走到尽头
452 | - 退出 `Identifier(params[0])`
453 | - 进入 `Identifier(params[1])`
454 | - 走到尽头
455 | - 退出 `Identifier(params[1])`
456 | 
457 | 当然，`Babel` 中的 `Visitor` 模式远远比这复杂...
458 | 
459 | 回到上面的🌰，箭头函数是 `ES5` 不支持的语法，所以 `Babel` 得把它转换成普通函数，一层层遍历下去，找到了 `ArrowFunctionExpression` 节点，这时候就需要把它替换成 `FunctionDeclaration` 节点。所以，箭头函数可能是这样处理的：
460 | 
461 | ```
462 | import * as t from "@babel/types";
463 | 
464 | var visitor = {
465 |     ArrowFunction(path) {
466 |         path.replaceWith(t.FunctionDeclaration(id, params, body));
467 |     }
468 | };
469 | ```
470 | 
471 | 对细节感兴趣的可以翻翻源码[https://github.com/babel/babel/tree/master/packages/babel-traverse](https://github.com/babel/babel/tree/master/packages/babel-traverse)。
472 | 
473 | #### Generate(代码生成)
474 | 
475 | 经过上面两个阶段，需要转译的代码已经经过转换，生成新的 `AST` 了，最后一个阶段理所应当就是根据这个 `AST` 来输出代码。
476 | 
477 | `Babel` 是通过 [https://github.com/babel/babel/tree/master/packages/babel-generator](https://github.com/babel/babel/tree/master/packages/babel-generator) 来完成的。当然，也是深度优先遍历。
478 | 
479 | ```
480 | class Generator extends Printer {
481 |   constructor(ast, opts = {}, code) {
482 |     const format = normalizeOptions(code, opts);
483 |     const map = opts.sourceMaps ? new SourceMap(opts, code) : null;
484 |     super(format, map);
485 |     this.ast = ast;
486 |   }
487 |   ast: Object;
488 |   generate() {
489 |     return super.generate(this.ast);
490 |   }
491 | }
492 | ```
493 | 
494 | 经过这三个阶段，代码就被 `Babel` 转译成功了。
495 | 
496 | 任重而道远... 想真正掌握 `Babel` 还有很长的路...
497 | 
498 | 


--------------------------------------------------------------------------------
/2019/前端工程师都得掌握的 webpack Loader.md:
--------------------------------------------------------------------------------
  1 | ## 0. 前言
  2 | 
  3 | 本文将 `webpack` 的 `Loader` 相关的知识点整理了一下，部分文字是从官方文档中直接摘录过来的，并附上自己的理解。如果觉得看起来和官方文档差不多，直接看官方文档最好啦~
  4 | 
  5 | - [webpack Loaders](https://webpack.js.org/loaders/)
  6 | - [Loader api](https://webpack.js.org/api/loaders/)
  7 | - [Writing a Loader](https://webpack.js.org/contribute/writing-a-loader/)
  8 | 
  9 | ## 1. 简述 webpack 工作流程
 10 | 
 11 | 本文不过多描述 `webpack` 的作用和使用方法，如果还不是太熟悉，可以打开 [https://webpack.js.org/](https://webpack.js.org/) 先熟悉一下。
 12 | 
 13 | 关于 `webpack` 的工作流程，简单来说可以概括为以下几步：
 14 | 
 15 | 1. 参数解析
 16 | 2. 找到入口文件
 17 | 3. 调用 `Loader` 编译文件
 18 | 4. 遍历 `AST`，收集依赖
 19 | 5. 生成 `Chunk`
 20 | 6. 输出文件
 21 | 
 22 | 其中，真正起编译作用的便是 `Loader`，本文也就 `Loader` 进行详细的阐述，其余部分暂且不谈。
 23 | 
 24 | ## 2. 关于 Loader
 25 | 
 26 | > Loader allow webpack to process other types of files and convert them into valid modules.
 27 | 
 28 | `Loader` 的作用很简单，就是处理任意类型的文件，并且将它们转换成一个让 `webpack` 可以处理的有效模块。
 29 | 
 30 | ### 2.1 Loader 的配置和使用
 31 | 
 32 | #### 2.1.1 在 config 里配置
 33 | 
 34 | `Loader` 可以在 `webpack.config.js`里配置，这也是推荐的做法，定义在 `module.rules` 里：
 35 | 
 36 | ```javascript
 37 | // webpack.config.js
 38 | module.exports = {
 39 |   module: {
 40 |     rules: [
 41 |       { test: /\.js$/, use: 'babel-loader' },
 42 |       {
 43 |         test: /\.css$/,
 44 |         use: [
 45 |           { loader: 'style-loader' },
 46 |           { loader: 'css-loader' },
 47 |           { loader: 'postcss-loader' },
 48 |         ]
 49 |       }
 50 |     ]
 51 |   }
 52 | };
 53 | ```
 54 | 
 55 | 每一条 `rule` 会包含两个属性：`test` 和 `use`，比如 `{ test: /\.js$/, use: 'babel-loader' }` 意思就是：当 `webpack` 遇到扩展名为 `js` 的文件时，先用 `babel-loader` 处理一下，然后再打包它。
 56 | 
 57 | `use` 的类型：`string|array|object|function`：
 58 | 
 59 | - `string`: 只有一个 `Loader` 时，直接声明 `Loader`，比如 `babel-loader`。
 60 | - `array`: 声明多个 `Loader` 时，使用数组形式声明，比如上文声明 `.css` 的 `Loader`。
 61 | - `object`: 只有一个 `Loader` 时，需要有额外的配置项时。
 62 | - `function`: `use` 也支持回调函数的形式。
 63 | 
 64 | 关于 `use` 的多种配置方式，这里就不多说了，可以点击 [更多关于 use](https://webpack.js.org/configuration/module/#ruleuse)
 65 | 
 66 | **注意：** 当 `use` 是通过数组形式声明 `Loader` 时，`Loader` 的执行顺序是从右到左，从下到上。比如**暂且**认为上方声明是这样执行的：
 67 | 
 68 | `postcss-loader` -> `css-loader` -> `style-loader`
 69 | 
 70 | 其实就是：
 71 | 
 72 | ```javascript
 73 | styleLoader(cssLoader(postcssLoader(content)))
 74 | ```
 75 | 
 76 | 为什么说是暂且呢，因为 `style-loader` 有点特殊，有兴趣的看看这个 [webpack loader 从上手到理解系列：style-loader](https://juejin.im/post/5d959c2de51d45782a478ccf)。
 77 | 
 78 | `webpack` 提供了多种配置 `Loader` 的方法，不过一般来说，`use` 就已经足够用了，如果想了解更多，可以点击 [更多关于 rule 的配置](https://webpack.js.org/configuration/module/#rule)
 79 | 
 80 | #### 2.1.2 内联
 81 | 
 82 | 可以在 `import` 等语句里指定 `Loader`，使用 `!` 来将 `Loader`分开：
 83 | 
 84 | ```javascript
 85 | import style from 'style-loader!css-loader?modules!./styles.css';
 86 | ```
 87 | 
 88 | 内联时，通过 `query` 来传递参数，例如 `?key=value`。
 89 | 
 90 | 一般来说，推荐使用统一 `config` 的形式来配置 `Loader`，内联形式多出现于 `Loader` 内部，比如 `style-loader` 会在自身代码里引入 `css-loader`：
 91 | 
 92 | ```javascript
 93 | require("!!../../node_modules/css-loader/dist/cjs.js!./styles.css");
 94 | ```
 95 | 
 96 | ### 2.2 Loader 类型
 97 | 
 98 | #### 2.2.1 同步 Loader
 99 | 
100 | ```javascript
101 | module.exports = function(source) {
102 |   const result = someSyncOperation(source); // 同步逻辑
103 |   return result;
104 | }
105 | ```
106 | 
107 | 一般来说，`Loader` 都是同步的，通过 `return` 或者 `this.callback` 来同步地返回 `source`转换后的结果。
108 | 
109 | #### 2.2.2 异步 Loader
110 | 
111 | 有的时候，我们需要在 `Loader` 里做一些异步的事情，比如说需要发送网络请求。如果同步地等着，网络请求就会阻塞整个构建过程，这个时候我们就需要进行异步 `Loader`，可以这样做：
112 | 
113 | ```javascript
114 | module.exports = function(source) {
115 |   // 告诉 webpack 这次转换是异步的
116 |   const callback = this.async();
117 |   // 异步逻辑
118 |   someAsyncOperation(content, function(err, result) {
119 |     if (err) return callback(err);
120 |     // 通过 callback 来返回异步处理的结果
121 |     callback(null, result, map, meta);
122 |   });
123 | };
124 | ```
125 | 
126 | #### 2.2.3 Pitching Loader
127 | 
128 | `Pitching Loader` 是一个比较重要的概念，之前在 `style-loader` 里有提到过。
129 | 
130 | ```javascript
131 | {
132 |   test: /\.js$/,
133 |   use: [
134 |     { loader: 'aa-loader' },
135 |     { loader: 'bb-loader' },
136 |     { loader: 'cc-loader' },
137 |   ]
138 | }
139 | ```
140 | 
141 | 我们知道，`Loader` 总是从右到左被调用。上面配置的 `Loader`，就会按照以下顺序执行：
142 | 
143 | `cc-loader` -> `bb-loader` -> `aa-loader`
144 | 
145 | 每个 `Loader` 都支持一个 `pitch` 属性，通过 `module.exports.pitch` 声明。如果该 `Loader` 声明了 `pitch`，则该方法会优先于 `Loader` 的实际方法先执行，官方也给出了执行顺序：
146 | 
147 | ```
148 | |- aa-loader `pitch`
149 |   |- bb-loader `pitch`
150 |     |- cc-loader `pitch`
151 |       |- requested module is picked up as a dependency
152 |     |- cc-loader normal execution
153 |   |- bb-loader normal execution
154 | |- aa-loader normal execution
155 | ```
156 | 
157 | 也就是会先从左向右执行一次每个 `Loader` 的 `pitch` 方法，再按照从右向左的顺序执行其实际方法。
158 | 
159 | #### 2.2.4 Raw Loader
160 | 
161 | 我们在 `url-loader` 里和 `file-loader` 最后都见过这样一句代码：
162 | 
163 | ```javascript
164 | export const raw = true;
165 | ```
166 | 
167 | 默认情况下，`webpack` 会把文件进行 `UTF-8` 编码，然后传给 `Loader`。通过设置 `raw`，`Loader` 就可以接受到原始的 `Buffer` 数据。
168 | 
169 | ### 2.3 Loader 几个重要的 api
170 | 
171 | 所谓 `Loader`，也只是一个符合 `commonjs` 规范的 `node` 模块，它会导出一个可执行函数。`loader runner` 会调用这个函数，将文件的内容或者上一个 `Loader` 处理的结果传递进去。同时，`webpack` 还为 `Loader` 提供了一个上下文 `this`，其中有很多有用的 `api`，我们找几个典型的来看看。
172 | 
173 | #### 2.3.1 this.callback()
174 | 
175 | 在 `Loader` 中，通常使用 `return` 来返回一个字符串或者 `Buffer`。如果需要返回多个结果值时，就需要使用 `this.callback`，定义如下：
176 | 
177 | ```javascript
178 | this.callback(
179 |   // 无法转换时返回 Error，其余情况都返回 null
180 |   err: Error | null,
181 |   // 转换结果
182 |   content: string | Buffer,
183 |   // source map，方便调试用的
184 |   sourceMap?: SourceMap,
185 |   // 可以是任何东西。比如 ast
186 |   meta?: any
187 | );
188 | ```
189 | 
190 | 一般来说如果调用该函数的话，应该手动 `return`，告诉 `webpack` 返回的结果在 `this.callback` 中，以避免含糊不清的结果：
191 | 
192 | ```javascript
193 | module.exports = function(source) {
194 |   this.callback(null, source, sourceMaps);
195 |   return;
196 | };
197 | ```
198 | 
199 | #### 2.3.2 this.async()
200 | 
201 | 同上，异步 `Loader`。
202 | 
203 | #### 2.3.3 this.cacheable()
204 | 
205 | 有些情况下，有些操作需要耗费大量时间，每一次调用 `Loader` 转换时都会执行这些费时的操作。
206 | 
207 | 在处理这类费时的操作时， `webapck` 会默认缓存所有 `Loader` 的处理结果，只有当被处理的文件发生变化时，才会重新调用 `Loader` 去执行转换操作。
208 | 
209 | `webpack` 是默认可缓存的，可以执行 `this.cacheable(false)` 手动关闭缓存。
210 | 
211 | #### 2.3.4 this.resource
212 | 
213 | 当前处理文件的完整请求路径，包括 `query`，比如 `/src/App.vue?type=templpate`。
214 | 
215 | #### 2.3.5 this.resourcePath
216 | 
217 | 当前处理文件的路径，不包括 `query`，比如 `/src/App.vue`。
218 | 
219 | #### 2.3.6 this.resourceQuery
220 | 
221 | 当前处理文件的 `query` 字符串，比如 `?type=template`。我们在 `vue-loader` 里有见过如何使用它：
222 | 
223 | ```javascript
224 | const qs = require('querystring');
225 | 
226 | const { resourceQuery } = this;
227 | const rawQuery = resourceQuery.slice(1); // 删除前面的 ?
228 | const incomingQuery = qs.parse(rawQuery); // 解析字符串成对象
229 | // 取 query
230 | if (incomingQuery.type) {}
231 | ```
232 | 
233 | #### 2.3.7 this.emitFile
234 | 
235 | 让 `webpack` 在输出目录新建一个文件，我们在 `file-loader` 里有见过：
236 | 
237 | ```javascript
238 | if (typeof options.emitFile === 'undefined' || options.emitFile) {
239 |   this.emitFile(outputPath, content);
240 | }
241 | ```
242 | 
243 | 更多的 `api` 可在官方文档中查看：[Loader Interface](https://webpack.js.org/api/loaders/)
244 | 
245 | ## 3. Loader 工作流程简述
246 | 
247 | 我们来回顾一下 `Loader` 的一些特点：
248 | 
249 | - `Loader` 是一个 `node` 模块；
250 | - `Loader` 可以处理任意类型的文件，转换成 `webpack` 可以处理的模块；
251 | - `Loader` 可以在 `webpack.config.js` 里配置，也可以在 `require` 语句里内联；
252 | - `Loader` 可以根据配置从右向左链式执行；
253 | - `Loader` 接受源文件内容字符串或者 `Buffer`；
254 | - `Loader` 分为多种类型：同步、异步和 `pitching`，他们的执行流程不一样；
255 | - `webpack` 为 `Loader` 提供了一个上下文，有一些 `api` 可以使用；
256 | - ...
257 | 
258 | 我们根据以上暂时知道的特点，可以对 `Loader` 的工作流程有个猜测，假设有一个 `js-loader`，它的工作流程简单来说是这样的：
259 | 
260 | 1. `webpack.config.js` 里配置了一个 `js` 的 `Loader`；
261 | 2. 遇到 `js` 文件时，触发了 `js-loader`;
262 | 3. `js-loader` 接受了一个表示该 `js` 文件内容的 `source`;
263 | 4. `js-loader` 使用 `webapck` 提供的一系列 `api` 对 `source` 进行转换，得到一个 `result`;
264 | 5. 将 `result` 返回或者传递给下一个 `Loader`，直到处理完毕。
265 | 
266 | `webpack` 的编译流程非常复杂，暂时还不能看明白并且梳理清楚，在这里就不误导大家了。
267 | 
268 | 关于 `Loader` 的工作流程以及源码分析可以看 [【webpack进阶】你真的掌握了loader么？- loader十问](https://juejin.im/post/5bc1a73df265da0a8d36b74f#heading-1)。
269 | 
270 | ## 4. 如何编写一个 Loader
271 | 
272 | 虽然我们对于 `webpack` 的编译流程不是很熟悉，但是我们可以试着编写一个简单功能的 `Loader`，从而加深对 `Loader` 的理解。
273 | 
274 | ### 4.1 Loader 用法准则
275 | 
276 | 编写 `Loader` 时需要遵循一些准则，官方有很详细的文档，就不重复阐述了。点击 [Loaders 用法准则](https://webpack.js.org/contribute/writing-a-loader/#guidelines) 查看。
277 | 
278 | 这里说一下**单一任务和链式调用**。
279 | 
280 | 一个 `Loader` 应该只完成一个功能，如果需要多步的转换工作，则应该编写多个 `Loader` 来进行链式调用完成转换。比如 `vue-loader` 只是处理了 `vue` 文件，起到一个分发的作用，将其中的 `template/style/script` 分别交给不同的处理器来处理。
281 | 
282 | 这样会让维护 `Loader` 变得更简单，也能让不同的 `Loader` 更容易地串联在一起，而不是重复造轮子。
283 | 
284 | ### 4.2 Loader 工具库
285 | 
286 | 编写 `Loader` 的过程中，最常用的两个工具库是 `loader-utils` 和 `schema-utils`，在现在常见的 `Loader` 中都能看到它们的身影。
287 | 
288 | #### 4.2.1 loader-utils
289 | 
290 | 它提供了许多有用的工具，但最常用的一种工具是获取传递给 `Loader` 的选项：
291 | 
292 | ```javascript
293 | import { getOptions } from 'loader-utils';
294 | 
295 | export default function loader(src) {
296 |   // 加载 options
297 |   const options = getOptions(this) || {};
298 | }
299 | ```
300 | 
301 | [loader-utils](https://github.com/webpack/loader-utils)
302 | 
303 | #### 4.2.2 schema-utils
304 | 
305 | 配合 `loader-utils`，用于保证 `Loader` 选项，进行与 `JSON Schema` 结构一致的校验。
306 | 
307 | ```javascript
308 | import validateOptions from 'schema-utils';
309 | import schema from './options.json';
310 | 
311 | export default function loader(src) {
312 |   // 校验 options
313 |   validateOptions(schema, options, {
314 |     name: 'URL Loader',
315 |     baseDataPath: 'options',
316 |   });
317 | }
318 | ```
319 | 
320 | [schema-utils](https://github.com/webpack/schema-utils)
321 | 
322 | 更多关于如何编写一个 `Loader`，[传送门](https://webpack.js.org/contribute/writing-a-loader/)。
323 | 
324 | #### 5. 总结
325 | 
326 | 本文对 `webpack` 的 `Loader` 相关知识点进行整理和归纳，正在学习中，如有不足欢迎指出。
327 | 
328 | 


--------------------------------------------------------------------------------
/2020/babel_require.md:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/axuebin/articles/6a8775194be79cb6cf55a51885486063bacab671/2020/babel_require.md


--------------------------------------------------------------------------------
/2020/list.md:
--------------------------------------------------------------------------------
  1 | ## 前言
  2 | 
  3 | 之前写过一篇 [一年半经验如何准备阿里巴巴前端面试](https://juejin.im/post/5e5522b36fb9a07ce152c51c)，给大家分享了一个面试复习导图，有很多朋友说希望能够针对每个 case 提供一个参考答案。
  4 | 
  5 | ![](https://user-gold-cdn.xitu.io/2020/4/6/1714f6be896f22ad?w=255&h=255&f=png&s=47477)
  6 | 
  7 | 写答案就算了，一是**精力有限**，二是我觉得大家还是需要自己**理解总结会比较好**。
  8 | 
  9 | 给大家整理了一下每个 case 一些还算不错的文章吧（还包括一些躺在我收藏夹里的好文章），大家可以自己看文章总结一下答案，这样也会理解更深刻。
 10 | 
 11 | **并不是所有文章都需要看**，希望是一个抛砖引玉的作用，大家也可以锻炼一下自己寻找有效资料的能力 ~
 12 | 
 13 | ( 文章排序不分前后，随机排序 ~
 14 | 
 15 | ----
 16 | 
 17 | > 建议收藏文章，结合复习导图食用，效果更佳。
 18 | 
 19 | 完整复习导图全展开太大了，可关注公众号「**前端试炼**」回复【面试】获取。
 20 | 
 21 | 
 22 | ![](https://user-gold-cdn.xitu.io/2020/4/6/1714f5c8e2ffacdd?w=390&h=333&f=png&s=183050)
 23 | 
 24 | ## 1. JavaScript 基础
 25 | 
 26 | ![](https://user-gold-cdn.xitu.io/2020/4/6/1714f5038d18c52b?w=663&h=894&f=png&s=209830)
 27 | 
 28 | ### 1.1 执行上下文/作用域链/闭包
 29 | 
 30 | - [理解 JavaScript 中的执行上下文和执行栈](https://juejin.im/post/5ba32171f265da0ab719a6d7)
 31 | - [JavaScript深入之执行上下文栈](https://github.com/mqyqingfeng/Blog/issues/4)
 32 | - [一道js面试题引发的思考](https://github.com/kuitos/kuitos.github.io/issues/18)
 33 | - [JavaScript深入之词法作用域和动态作用域](https://github.com/mqyqingfeng/Blog/issues/3)
 34 | - [JavaScript深入之作用域链](https://github.com/mqyqingfeng/Blog/issues/6)
 35 | - [发现 JavaScript 中闭包的强大威力](https://juejin.im/post/5c4e6a90e51d4552266576d2)
 36 | - [JavaScript闭包的底层运行机制](http://blog.leapoahead.com/2015/09/15/js-closure/)
 37 | - [我从来不理解JavaScript闭包，直到有人这样向我解释它...](https://zhuanlan.zhihu.com/p/56490498)
 38 | - [破解前端面试（80% 应聘者不及格系列）：从闭包说起](https://juejin.im/post/58f1fa6a44d904006cf25d22#heading-0)
 39 | 
 40 | ### 1.2 this/call/apply/bind
 41 | 
 42 | - [JavaScript基础心法——this](https://github.com/axuebin/articles/issues/6)
 43 | - [JavaScript深入之从ECMAScript规范解读this](https://github.com/mqyqingfeng/Blog/issues/7)
 44 | - [前端基础进阶（七）：全方位解读this](https://www.jianshu.com/p/d647aa6d1ae6)
 45 | - [面试官问：JS的this指向](https://juejin.im/post/5c0c87b35188252e8966c78a)
 46 | - [JavaScript深入之call和apply的模拟实现](https://juejin.im/post/5907eb99570c3500582ca23c)
 47 | - [JavaScript基础心法—— call apply bind](https://github.com/axuebin/articles/issues/7)
 48 | - [面试官问：能否模拟实现JS的call和apply方法](https://juejin.im/post/5bf6c79bf265da6142738b29)
 49 | - [回味JS基础:call apply 与 bind](https://juejin.im/post/57dc97f35bbb50005e5b39bd)
 50 | - [面试官问：能否模拟实现JS的bind方法](https://juejin.im/post/5bec4183f265da616b1044d7)
 51 | - [不用call和apply方法模拟实现ES5的bind方法](https://github.com/jawil/blog/issues/16)
 52 | 
 53 | ### 1.3 原型/继承
 54 | 
 55 | - [深入理解 JavaScript 原型](https://mp.weixin.qq.com/s/1UDILezroK5wrcK-Z5bHOg)
 56 | - [【THE LAST TIME】一文吃透所有JS原型相关知识点](https://juejin.im/post/5dba456d518825721048bce9)
 57 | - [重新认识构造函数、原型和原型链](https://juejin.im/post/5c6a9c10f265da2db87b98f3)
 58 | - [JavaScript深入之从原型到原型链](https://github.com/mqyqingfeng/blog/issues/2)
 59 | - [最详尽的 JS 原型与原型链终极详解，没有「可能是」。（一）](https://www.jianshu.com/p/dee9f8b14771)
 60 | - [最详尽的 JS 原型与原型链终极详解，没有「可能是」。（二）](https://www.jianshu.com/p/652991a67186)
 61 | - [最详尽的 JS 原型与原型链终极详解，没有「可能是」。（三）](https://www.jianshu.com/p/a4e1e7b6f4f8)
 62 | - [JavaScript 引擎基础：原型优化](https://hijiangtao.github.io/2018/08/21/Prototypes/)
 63 | - [Prototypes in JavaScript](https://medium.com/better-programming/prototypes-in-javascript-5bba2990e04b)
 64 | - [JavaScript深入之创建对象的多种方式以及优缺点](https://github.com/mqyqingfeng/Blog/issues/15)
 65 | - [详解JS原型链与继承](http://louiszhai.github.io/2015/12/15/prototypeChain/)
 66 | - [从__proto__和prototype来深入理解JS对象和原型链](https://github.com/creeperyang/blog/issues/9)
 67 | - [代码复用模式](https://github.com/jayli/javascript-patterns/blob/master/chapter6.markdown)
 68 | - [JavaScript 中的继承：ES3、ES5 和 ES6](http://tianfangye.com/2017/12/31/inheritance-in-javascript-es3-es5-and-es6/)
 69 | 
 70 | ### 1.4 Promise
 71 | 
 72 | - [100 行代码实现 Promises/A+ 规范](https://mp.weixin.qq.com/s/qdJ0Xd8zTgtetFdlJL3P1g)
 73 | - [你好，JavaScript异步编程---- 理解JavaScript异步的美妙](https://juejin.im/post/5b56c3586fb9a04faa79a8e0)
 74 | - [Promise不会？？看这里！！！史上最通俗易懂的Promise！！！](https://juejin.im/post/5afe6d3bf265da0b9e654c4b)
 75 | - [一起学习造轮子（一）：从零开始写一个符合Promises/A+规范的promise](https://juejin.im/post/5b16800fe51d4506ae719bae#heading-34)
 76 | - [Promise实现原理（附源码）](https://juejin.im/post/5b83cb5ae51d4538cc3ec354)
 77 | - [当 async/await 遇上 forEach](https://objcer.com/2017/10/12/async-await-with-forEach/)
 78 | - [Promise 必知必会（十道题）](https://juejin.im/post/5a04066351882517c416715d)
 79 | - [BAT前端经典面试问题：史上最最最详细的手写Promise教程](https://juejin.im/post/5b2f02cd5188252b937548ab#heading-9)
 80 | 
 81 | ```js
 82 | async function async1() {
 83 |     console.log('async1 start');
 84 |     await async2();
 85 |     console.log('async1 end');
 86 | }
 87 | 
 88 | // 相当于
 89 | async function async1() {
 90 |     console.log('async1 start');
 91 |     Promise.resolve(async2()).then(() => {
 92 |       console.log('async1 end');
 93 |   })
 94 | }
 95 | ```
 96 | 
 97 | ### 1.5 深浅拷贝
 98 | 
 99 | - [JavaScript基础心法——深浅拷贝](https://github.com/axuebin/articles/issues/20)
100 | - [深拷贝的终极探索（90%的人都不知道）](https://juejin.im/post/5bc1ae9be51d450e8b140b0c)
101 | - [JavaScript专题之深浅拷贝](https://github.com/mqyqingfeng/Blog/issues/32)
102 | - [javaScript中浅拷贝和深拷贝的实现](https://github.com/wengjq/Blog/issues/3)
103 | - [深入剖析 JavaScript 的深复制](https://jerryzou.com/posts/dive-into-deep-clone-in-javascript/)
104 | - [「JavaScript」带你彻底搞清楚深拷贝、浅拷贝和循环引用](https://segmentfault.com/a/1190000015042902)
105 | - [面试题之如何实现一个深拷贝](https://github.com/yygmind/blog/issues/29)
106 | 
107 | ### 1.6 事件机制/Event Loop
108 | 
109 | - [Tasks, microtasks, queues and schedules](https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/)
110 | - [How JavaScript works](https://blog.sessionstack.com/how-javascript-works-event-loop-and-the-rise-of-async-programming-5-ways-to-better-coding-with-2f077c4438b5)
111 | - [从event loop规范探究javaScript异步及浏览器更新渲染时机](https://github.com/aooy/blog/issues/5)
112 | - [这一次，彻底弄懂 JavaScript 执行机制](https://juejin.im/post/59e85eebf265da430d571f89)
113 | - [【THE LAST TIME】彻底吃透 JavaScript 执行机制](https://juejin.im/post/5d901418518825539312f587)
114 | - [一次弄懂Event Loop（彻底解决此类面试问题）](https://juejin.im/post/5c3d8956e51d4511dc72c200)
115 | - [浏览器与Node的事件循环(Event Loop)有何区别?](https://zhuanlan.zhihu.com/p/54882306)
116 | - [深入理解 JavaScript Event Loop](https://zhuanlan.zhihu.com/p/34229323)
117 | - [The Node.js Event Loop, Timers, and process.nextTick()](https://nodejs.org/en/docs/guides/event-loop-timers-and-nexttick/)
118 | 
119 | 
120 | 这个知识点真的是重在理解，一定要理解彻底
121 | 
122 | ```js
123 | for (const macroTask of macroTaskQueue) {
124 |   handleMacroTask();
125 |   
126 |   for (const microTask of microTaskQueue) {
127 |     handleMicroTask(microTask);
128 |   }
129 | }
130 | ```
131 | 
132 | ### 1.7 函数式编程
133 | 
134 | - [函数式编程指北](https://llh911001.gitbooks.io/mostly-adequate-guide-chinese/content/)
135 | - [JavaScript专题之函数柯里化](https://github.com/mqyqingfeng/Blog/issues/42)
136 | - [Understanding Functional Programming in Javascript](https://levelup.gitconnected.com/understanding-functional-programming-in-javascript-a-complete-guide-e85ed13b42c8)
137 | - [What is Functional Programming?](https://medium.com/javascript-scene/master-the-javascript-interview-what-is-functional-programming-7f218c68b3a0)
138 | - [简明 JavaScript 函数式编程——入门篇](https://juejin.im/post/5d70e25de51d453c11684cc4)
139 | - [You Should Learn Functional Programming](https://dev.to/allanmacgregor/you-should-learn-functional-programming-in-2018-4nff)
140 | - [JavaScript 函数式编程到底是个啥](https://segmentfault.com/a/1190000009864459)
141 | - [JavaScript-函数式编程](https://github.com/ecmadao/Coding-Guide/blob/master/Notes/JavaScript/JavaScript%E5%87%BD%E6%95%B0%E5%BC%8F%E7%BC%96%E7%A8%8B.md)
142 | 
143 | ### 1.8 Service Worker / PWA
144 | 
145 | - [Service Worker：简介](https://developers.google.com/web/fundamentals/primers/service-workers)
146 | - [JavaScript 是如何工作的：Service Worker 的生命周期及使用场景](https://github.com/qq449245884/xiaozhi/issues/8)
147 | - [借助Service Worker和cacheStorage缓存及离线开发](https://www.zhangxinxu.com/wordpress/2017/07/service-worker-cachestorage-offline-develop/)
148 | - [PWA Lavas 文档](https://lavas.baidu.com/pwa/README)
149 | - [PWA 学习手册](https://pwa.alienzhou.com/)
150 | - [面试官：请你实现一个PWA](https://juejin.im/post/5e26aa785188254c257c462d#heading-24)
151 | 
152 | ### 1.9 Web Worker
153 | 
154 | - [浅谈HTML5 Web Worker](https://juejin.im/post/59c1b3645188250ea1502e46)
155 | - [JavaScript 中的多线程 -- Web Worker](https://zhuanlan.zhihu.com/p/25184390)
156 | - [JavaScript 性能利器 —— Web Worker](https://juejin.im/post/5c10e5a9f265da611c26d634)
157 | - [A Simple Introduction to Web Workers in JavaScript](https://medium.com/young-coder/a-simple-introduction-to-web-workers-in-javascript-b3504f9d9d1c)
158 | - [Speedy Introduction to Web Workers](https://auth0.com/blog/speedy-introduction-to-web-workers/)
159 | 
160 | ### 1.10 常用方法
161 | 
162 | 太多了... 总的来说就是 API 一定要熟悉...
163 | 
164 | - [近一万字的ES6语法知识点补充](https://juejin.im/post/5c6234f16fb9a049a81fcca5)
165 | - [ES6、ES7、ES8特性一锅炖(ES6、ES7、ES8学习指南)](https://juejin.im/post/5b9cb3336fb9a05d290ee47e)
166 | - [解锁多种JavaScript数组去重姿势](https://juejin.im/post/5b0284ac51882542ad774c45)
167 | - [Here’s how you can make better use of JavaScript arrays](https://www.freecodecamp.org/news/heres-how-you-can-make-better-use-of-javascript-arrays-3efd6395af3c/)
168 | - [一个合格的中级前端工程师需要掌握的 28 个 JavaScript 技巧](https://juejin.im/post/5cef46226fb9a07eaf2b7516)
169 | - [1.5万字概括ES6全部特性(已更新ES2020)](https://juejin.im/post/5d9bf530518825427b27639d)
170 | 
171 | ## 2. CSS 基础
172 | 
173 | ![](https://user-gold-cdn.xitu.io/2020/4/6/1714f50a0f3bd4f4?w=705&h=784&f=png&s=192559)
174 | 
175 | - [position - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/position)
176 | - [position | CSS Tricks](https://css-tricks.com/almanac/properties/p/position/)
177 | - [杀了个回马枪，还是说说position:sticky吧](https://www.zhangxinxu.com/wordpress/2018/12/css-position-sticky/)
178 | - [30 分钟学会 Flex 布局](https://zhuanlan.zhihu.com/p/25303493)
179 | - [css行高line-height的一些深入理解及应用](https://www.zhangxinxu.com/wordpress/2009/11/css%E8%A1%8C%E9%AB%98line-height%E7%9A%84%E4%B8%80%E4%BA%9B%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3%E5%8F%8A%E5%BA%94%E7%94%A8/)
180 | - [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
181 | - [写给自己看的display: flex布局教程](https://www.zhangxinxu.com/wordpress/2018/10/display-flex-css3-css/)
182 | - [从网易与淘宝的font-size思考前端设计稿与工作流](https://www.cnblogs.com/lyzg/p/4877277.html)
183 | - [细说移动端 经典的REM布局 与 新秀VW布局](https://cloud.tencent.com/developer/article/1352187)
184 | - [移动端1px解决方案](https://juejin.im/post/5d19b729f265da1bb2774865)
185 | - [Retina屏的移动设备如何实现真正1px的线？](https://jinlong.github.io/2015/05/24/css-retina-hairlines/)
186 | - [CSS retina hairline, the easy way.](http://dieulot.net/css-retina-hairline)
187 | - [浏览器的回流与重绘 (Reflow & Repaint)](https://juejin.im/post/5a9923e9518825558251c96a)
188 | - [回流与重绘：CSS性能让JavaScript变慢？](https://www.zhangxinxu.com/wordpress/2010/01/%E5%9B%9E%E6%B5%81%E4%B8%8E%E9%87%8D%E7%BB%98%EF%BC%9Acss%E6%80%A7%E8%83%BD%E8%AE%A9javascript%E5%8F%98%E6%85%A2%EF%BC%9F/)
189 | - [CSS实现水平垂直居中的1010种方式（史上最全）](https://juejin.im/post/5b9a4477f265da0ad82bf921)
190 | - [干货!各种常见布局实现](https://juejin.im/post/5aa252ac518825558001d5de)
191 | - [CSS 常见布局方式](https://juejin.im/post/599970f4518825243a78b9d5)
192 | - [彻底搞懂CSS层叠上下文、层叠等级、层叠顺序、z-index](https://juejin.im/post/5b876f86518825431079ddd6)
193 | - [深入理解CSS中的层叠上下文和层叠顺序](https://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/)
194 | - [Sass vs. Less](https://css-tricks.com/sass-vs-less/)
195 | - [2019年，你是否可以抛弃 CSS 预处理器？](https://aotu.io/notes/2019/10/29/css-preprocessor/index.html)
196 | - [浅谈 CSS 预处理器（一）：为什么要使用预处理器？](https://github.com/cssmagic/blog/issues/73)
197 | - [浏览器将rem转成px时有精度误差怎么办？](https://www.zhihu.com/question/264372456)
198 | - [Fighting the Space Between Inline Block Elements](https://css-tricks.com/fighting-the-space-between-inline-block-elements/)
199 | 
200 | ## 3. 框架(Vue 为主)
201 | 
202 | ![](https://user-gold-cdn.xitu.io/2020/4/6/1714f514eb24de9d?w=582&h=984&f=png&s=263513)
203 | 
204 | ### 3.1 MVVM
205 | 
206 | - [50行代码的MVVM，感受闭包的艺术](https://juejin.im/post/5b1fa77451882513ea5cc2ca)
207 | - [不好意思！耽误你的十分钟，让MVVM原理还给你](https://juejin.im/post/5abdd6f6f265da23793c4458)
208 | - [基于Vue实现一个简易MVVM](https://juejin.im/post/5cd8a7c1f265da037a3d0992)
209 | - [剖析Vue实现原理 - 如何实现双向绑定mvvm](https://github.com/DMQ/mvvm)
210 | 
211 | ### 3.2 生命周期
212 | 
213 | - [Vue 生命周期源码剖析](https://ustbhuangyi.github.io/vue-analysis/v2/components/lifecycle.html)
214 | - [你真的理解$nextTick么](https://juejin.im/post/5cd9854b5188252035420a13)
215 | - [React 源码剖析系列 － 生命周期的管理艺术](https://zhuanlan.zhihu.com/p/20312691)
216 | 
217 | ### 3.3 数据绑定
218 | 
219 | - [Vue 深入响应式原理](https://ustbhuangyi.github.io/vue-analysis/v2/reactive/)
220 | - [面试官: 实现双向绑定Proxy比defineproperty优劣如何?](https://juejin.im/post/5acd0c8a6fb9a028da7cdfaf)
221 | - [为什么Vue3.0不再使用defineProperty实现数据监听？](https://mp.weixin.qq.com/s/O8iL4o8oPpqTm4URRveOIA)
222 | 
223 | ### 3.4 状态管理
224 | 
225 | - [Vuex、Flux、Redux、Redux-saga、Dva、MobX](https://zhuanlan.zhihu.com/p/53599723)
226 | - [10行代码看尽redux实现](https://juejin.im/post/5def4831e51d45584b585000)
227 | - [Mobx 思想的实现原理，及与 Redux 对比](https://zhuanlan.zhihu.com/p/25585910)
228 | - [使用原生 JavaScript 构建状态管理系统](https://juejin.im/post/5b763528e51d45559e3a5b64)
229 | 
230 | ### 3.5 组件通信
231 | 
232 | - [vue中8种组件通信方式, 值得收藏!](https://juejin.im/post/5d267dcdf265da1b957081a3)
233 | - [Vue 组件间通信六种方式（完整版）](https://juejin.im/post/5cde0b43f265da03867e78d3)
234 | - [Vue组件间通信](https://github.com/answershuto/learnVue/blob/master/docs/Vue%E7%BB%84%E4%BB%B6%E9%97%B4%E9%80%9A%E4%BF%A1.MarkDown)
235 | 
236 | ### 3.6 Virtual DOM
237 | 
238 | - [Vue Virtual DOM 源码剖析](https://ustbhuangyi.github.io/vue-analysis/v2/data-driven/virtual-dom.html)
239 | - [面试官: 你对虚拟DOM原理的理解?](https://juejin.im/post/5d3f3bf36fb9a06af824b3e2)
240 | - [让虚拟DOM和DOM-diff不再成为你的绊脚石](https://juejin.im/post/5c8e5e4951882545c109ae9c)
241 | - [探索Virtual DOM的前世今生](https://zhuanlan.zhihu.com/p/35876032)
242 | - [虚拟 DOM 到底是什么？(长文建议收藏)](https://mp.weixin.qq.com/s/oAlVmZ4Hbt2VhOwFEkNEhw)
243 | 
244 | ### 3.7 Diff
245 | 
246 | - [详解vue的diff算法](https://juejin.im/post/5affd01551882542c83301da)
247 | - [Deep In React 之详谈 React 16 Diff 策略(二)](https://juejin.im/post/5d3e3231e51d4510926a7c39)
248 | - [React 源码剖析系列 － 不可思议的 react diff](https://zhuanlan.zhihu.com/p/20346379)
249 | - [浅入浅出图解 Dom Diff](https://juejin.im/post/5ad550f06fb9a028b4118d99)
250 | 
251 | ### 3.8 Vue 计算属性 VS 侦听属性
252 | 
253 | - [Vue 计算属性 VS 侦听属性源码剖析](https://ustbhuangyi.github.io/vue-analysis/v2/reactive/computed-watcher.html)
254 | - [Vue.js的computed和watch是如何工作的？](https://juejin.im/post/5b87f13bf265da436479f3c1)
255 | 
256 | ### 3.9 React Hooks
257 | 
258 | - [React Hooks 原理](https://github.com/brickspert/blog/issues/26)
259 | - [React hooks: not magic, just arrays](https://medium.com/@ryardley/react-hooks-not-magic-just-arrays-cd4f1857236e)
260 | - [Deep dive: How do React hooks really work?](https://www.netlify.com/blog/2019/03/11/deep-dive-how-do-react-hooks-really-work/)
261 | - [【React深入】从Mixin到HOC再到Hook](https://juejin.im/post/5cad39b3f265da03502b1c0a)
262 | - [React Hooks 详解 【近 1W 字】+ 项目实战](https://juejin.im/post/5dbbdbd5f265da4d4b5fe57d)
263 | - [30分钟精通React今年最劲爆的新特性——React Hooks](https://segmentfault.com/a/1190000016950339)
264 | - [React Hooks 详解（一）](http://huayifeng.top:2368/react-hooks/)
265 | 
266 | ### 3.10 React Hoc/Vue mixin
267 | 
268 | - [探索Vue高阶组件](http://hcysun.me/2018/01/05/%E6%8E%A2%E7%B4%A2Vue%E9%AB%98%E9%98%B6%E7%BB%84%E4%BB%B6/)
269 | - [React 高阶组件(HOC)入门指南](https://juejin.im/post/5914fb4a0ce4630069d1f3f6)
270 | - [深入理解 React 高阶组件](https://zhuanlan.zhihu.com/p/24776678)
271 | 
272 | ### 3.11 Vue 和 React 有什么不同
273 | 
274 | 从思想、生态、语法、数据、通信、diff等角度自己总结一下吧。
275 | 
276 | ## 4. 工程化
277 | 
278 | ![](https://user-gold-cdn.xitu.io/2020/4/6/1714f51b569488e2?w=789&h=902&f=png&s=232529)
279 | 
280 | ### 4.1 Webpack
281 | 
282 | - [前端工程师都得掌握的 webpack Loader](https://github.com/axuebin/articles/issues/38)
283 | - [webpack loader 从上手到理解系列：vue-loader](https://mp.weixin.qq.com/s/NO5jZfoHZbjOwR8qiWnXmw)
284 | - [webpack loader 从上手到理解系列：style-loader](https://mp.weixin.qq.com/s/alIKsKkGRU_yyjpeV8i0og)
285 | - [一文掌握Webpack编译流程](https://mp.weixin.qq.com/s?__biz=MzI0MTUxOTE5NQ==&mid=2247484030&idx=1&sn=d630d4b3995bbfd50f99e781074acfeb)
286 | - [手把手教你撸一个简易的 webpack](https://juejin.im/post/5b192afde51d45069c2efe5a)
287 | - [带你走进webpack世界，成为webpack头号玩家。](https://juejin.im/post/5ac9dc9af265da23884d5543)
288 | - [关于webpack4的14个知识点,童叟无欺](https://juejin.im/post/5cea1e1ae51d4510664d1652)
289 | - [手把手教你撸一个 Webpack Loader](https://juejin.im/post/5a698a316fb9a01c9f5b9ca0)
290 | - [webpack 如何通过作用域分析消除无用代码](https://diverse.space/2018/05/better-tree-shaking-with-scope-analysis)
291 | - [【webpack进阶】你真的掌握了loader么？- loader十问](https://juejin.im/post/5bc1a73df265da0a8d36b74f)
292 | - [Webpack小书](https://www.timsrc.com/article/2/webpack-book)
293 | - [聊一聊webpack-dev-server和其中socket，HMR的实现](https://github.com/879479119/879479119.github.io/issues/5)
294 | - [使用webpack4提升180%编译速度](http://louiszhai.github.io/2019/01/04/webpack4)
295 | - [Webpack 大法之 Code Splitting](https://zhuanlan.zhihu.com/p/26710831)
296 | - [轻松理解webpack热更新原理](https://mp.weixin.qq.com/s/2L9Y0pdwTTmd8U2kXHFlPA)
297 | - [轻松理解webpack热更新原理](https://juejin.im/post/5de0cfe46fb9a071665d3df0)
298 | - [揭秘webpack plugin](https://champyin.com/2020/01/12/%E6%8F%AD%E7%A7%98webpack-plugin/)
299 | 
300 | ### 4.2 Babel
301 | 
302 | - [一篇文章了解前端开发必须懂的 Babel](https://mp.weixin.qq.com/s/C-WmM5tjfc3r4sB52C4R0Q)
303 | - [不容错过的 Babel7 知识](https://juejin.im/post/5ddff3abe51d4502d56bd143)
304 | - [前端工程师需要了解的 Babel 知识](https://www.zoo.team/article/babel)
305 | - [深入浅出 Babel 上篇：架构和原理 + 实战](https://juejin.im/post/5d94bfbf5188256db95589be)
306 | - [深入浅出 Babel 下篇：既生 Plugin 何生 Macros](https://juejin.im/post/5da12397e51d4578364f6ffa)
307 | - [前端工程师的自我修养-关于 Babel 那些事儿](https://juejin.im/post/5e5b488af265da574112089f)
308 | - [前端与编译原理——用JS写一个JS解释器](https://segmentfault.com/a/1190000017241258)
309 | 
310 | ### 4.3 模板引擎
311 | 
312 | - [编写一个简单的JavaScript模板引擎](https://www.liaoxuefeng.com/article/1006272230979008)
313 | - [JavaScript模板引擎原理，几行代码的事儿](https://www.cnblogs.com/hustskyking/p/principle-of-javascript-template.html)
314 | - [Vue 模板编译原理](https://github.com/berwin/Blog/issues/18)
315 | - [JavaScript template engine in just 20 lines](https://krasimirtsonev.com/blog/article/Javascript-template-engine-in-just-20-line)
316 | - [Understanding JavaScript Micro-Templating](https://medium.com/wdstack/understanding-javascript-micro-templating-f37a37b3b40e)
317 | 
318 | ### 4.4 前端发布
319 | 
320 | - [大公司里怎样开发和部署前端代码？](https://www.zhihu.com/question/20790576)
321 | - [前端高级进阶：前端部署的发展历程](https://juejin.im/post/5e6836cc51882549052f56f5)
322 | 
323 | ### 4.5 weex
324 | 
325 | - [深入了解 Weex](https://juejin.im/post/5b18a03ce51d45069d2263e3)
326 | - [Weex原理概述](https://github.com/weexteam/article/issues/32)
327 | - [Weex 是如何在 iOS 客户端上跑起来的](https://halfrost.com/weex_ios/)
328 | - [详解 Weex 页面的渲染过程](https://segmentfault.com/a/1190000010415641)
329 | - [JSBridge 介绍及实现原理](http://coolnuanfeng.github.io/jsbridge)
330 | - [移动混合开发中的 JSBridge](https://mp.weixin.qq.com/s/I812Cr1_tLGrvIRb9jsg-A)
331 | 
332 | ### 4.6 前端监控
333 | 
334 | - [5 分钟撸一个前端性能监控工具](https://juejin.im/post/5b7a50c0e51d4538af60d995)
335 | - [把前端监控做到极致](https://zhuanlan.zhihu.com/p/32262716)
336 | - [GMTC 大前端时代前端监控的最佳实践](https://juejin.im/post/5b35921af265da598f1563cf)
337 | - [前端监控和前端埋点方案设计](https://juejin.im/post/5b62d68df265da0f9d1a1cd6)
338 | - [腾讯CDC团队：前端异常监控解决方案](https://mp.weixin.qq.com/s/W0i-Iu6nqkWttsGZ-RmOqw)
339 | 
340 | ## 5. 性能优化
341 | 
342 | ![](https://user-gold-cdn.xitu.io/2020/4/6/1714f5200d5859de?w=597&h=894&f=png&s=124793)
343 | 
344 | ### 5.1 打包阶段
345 | 
346 | - [Webpack优化——将你的构建效率提速翻倍](https://juejin.im/post/5d614dc96fb9a06ae3726b3e)
347 | - [性能优化篇---Webpack构建速度优化](https://segmentfault.com/a/1190000018493260)
348 | - [webpack构建速度与结果优化](https://huangxsu.com/2018/08/12/webpack-optimization/)
349 | - [让你的Webpack起飞—考拉会员后台Webpack优化实战](https://zhuanlan.zhihu.com/p/42465502)
350 | - [webpack dllPlugin打包体积和速度优化](https://zhuanlan.zhihu.com/p/39727247)
351 | - [使用webpack4提升180%编译速度](http://louiszhai.github.io/2019/01/04/webpack4/)
352 | - [Webpack 打包优化之速度篇](https://www.jeffjade.com/2017/08/12/125-webpack-package-optimization-for-speed/)
353 | - [多进程并行压缩代码](https://jkfhto.github.io/2019-10-17/webpack/%E5%A4%9A%E8%BF%9B%E7%A8%8B%E5%B9%B6%E8%A1%8C%E5%8E%8B%E7%BC%A9%E4%BB%A3%E7%A0%81/)
354 | - [Tree-Shaking性能优化实践 - 原理篇](https://juejin.im/post/5a4dc842518825698e7279a9)
355 | - [体积减少80%！释放webpack tree-shaking的真正潜力](https://juejin.im/post/5b8ce49df265da438151b468)
356 | - [你的Tree-Shaking并没什么卵用](https://zhuanlan.zhihu.com/p/32831172)
357 | - [webpack 如何通过作用域分析消除无用代码](https://diverse.space/2018/05/better-tree-shaking-with-scope-analysis)
358 | - [加速Webpack-缩小文件搜索范围](https://imweb.io/topic/5a40551ea192c3b460fce335)
359 | - [Brief introduction to scope hoisting in Webpack](https://medium.com/webpack/brief-introduction-to-scope-hoisting-in-webpack-8435084c171f)
360 | - [通过Scope Hoisting优化Webpack输出](https://imweb.io/topic/5a43064fa192c3b460fce360)
361 | - [webpack 的 scope hoisting 是什么？](https://ssshooter.com/2019-02-20-webpack-scope-hoisting/)
362 | - [webpack优化之code splitting](https://segmentfault.com/a/1190000013000463)
363 | - [webpack 4: Code Splitting和chunks切分优化](https://juejin.im/post/5d53f49bf265da03dc0766e2)
364 | - [Webpack 大法之 Code Splitting](https://zhuanlan.zhihu.com/p/26710831)
365 | - [Better tree shaking with deep scope analysis](https://medium.com/webpack/better-tree-shaking-with-deep-scope-analysis-a0b788c0ce77)
366 | - [Front-End Performance Checklist 2020](https://www.smashingmagazine.com/2020/01/front-end-performance-checklist-2020-pdf-pages/#top)
367 | - [（译）2019年前端性能优化清单 — 上篇](https://juejin.im/post/5c46cbaee51d453f45612a2c)
368 | 
369 | ### 5.2 其它优化
370 | 
371 | - [网站性能优化实战——从12.67s到1.06s的故事](https://juejin.im/post/5b6fa8c86fb9a0099910ac91)
372 | - [浏览器页面资源加载过程与优化](https://juejin.im/post/5a4ed917f265da3e317df515)
373 | - [聊聊前端开发中的长列表](https://zhuanlan.zhihu.com/p/26022258)
374 | - [再谈前端虚拟列表的实现](https://zhuanlan.zhihu.com/p/34585166)
375 | - [浅说虚拟列表的实现原理](https://github.com/dwqs/blog/issues/70)
376 | - [浏览器IMG图片原生懒加载loading=”lazy”实践指南](https://www.zhangxinxu.com/wordpress/2019/09/native-img-loading-lazy/)
377 | - [用 preload 预加载页面资源](https://juejin.im/post/5a7fb09bf265da4e8e785c38)
378 | - [App内网页启动加速实践：静态资源预加载视角](https://mp.weixin.qq.com/s?__biz=MzAwNTAzMjcxNg==&mid=2651425811&idx=1&sn=f839230a11fa269021c92b510dec47bc&chksm=80dff270b7a87b66abdf73cf9df18efa3e9594c68ab4ca46ba28eb6d3e832969afad031b48fa&mpshare=1&scene=1&srcid=&sharer_sharetime=1569234865992&sharer_shareid=14157f200c2bbcdb4b651ff5559c60ab&rd2werd=1#wechat_redirect)
379 | - [腾讯HTTPS性能优化实践](https://mp.weixin.qq.com/s/V62VYS8KFNKxJxfzMYefrw)
380 | - [Preload, Prefetch And Priorities in Chrome](https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf)
381 | - [ Front-End Performance Checklist  ](https://github.com/thedaviddias/Front-End-Performance-Checklist)
382 | - [图片与视频懒加载的详细指南](https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/)
383 | - [使用 Intersection Observer 来懒加载图片](http://deanhume.com/lazy-loading-images-using-intersection-observer/)
384 | 
385 | ## 6. TypeScript
386 | 
387 | ![](https://user-gold-cdn.xitu.io/2020/4/6/1714f527f714d0a0?w=601&h=322&f=png&s=72140)
388 | 
389 | - [TypeScript 是什么](https://mp.weixin.qq.com/s/OypiN7HOlUBprYUjJs_Rqw)
390 | - [为什么要在javascript中进行静态类型检查](https://www.jianshu.com/p/bda750e2d15e)
391 | - [TypeScript Start: 基础类型](https://github.com/axuebin/articles/issues/36)
392 | - [TypeScript真香系列——接口篇](https://mp.weixin.qq.com/s/KfOAu983zg8d0Uc-jhM84w)
393 | - [TypeScript 中高级应用与最佳实践](http://www.alloyteam.com/2019/07/13796/)
394 | - [typescript 高级技巧](https://mp.weixin.qq.com/s/nvYqDhhZzbNuifxck87aNQ)
395 | - [可能是你需要的 React + TypeScript 50 条规范和经验](https://juejin.im/post/5ce24f8ae51d45106477bd45)
396 | - [从 JavaScript 到 TypeScript](https://juejin.im/post/5958fdd7f265da6c40735085)
397 | - [TypeScript + 大型项目实战](https://juejin.im/post/5b54886ce51d45198f5c75d7)
398 | - [TypeScript - 一种思维方式](https://juejin.im/post/5cd6387d518825682348442d)
399 | - [如何编写一个d.ts文件](https://segmentfault.com/a/1190000009247663)
400 | - [TypeScript 的声明文件的使用与编写](https://my.oschina.net/fenying/blog/748805)
401 | - [TypeScript 进阶：给第三方库编写声明文件](http://imzc.me/dev/2016/11/30/write-d-ts-files/)
402 | - [TypeScript泛型](https://jkchao.github.io/typescript-book-chinese/typings/generices.html)
403 | - [TypeScript 重构 Axios 经验分享](https://juejin.im/post/5bf7f1c0e51d455ed74f625c)
404 | - [手把手教写 TypeScript Transformer Plugin](https://juejin.im/post/5a0a54425188253edc7f6e79)
405 | 
406 | ## 7. 网络
407 | 
408 | ![](https://user-gold-cdn.xitu.io/2020/4/6/1714f52c330fa88d?w=720&h=568&f=png&s=145113)
409 | 
410 | ### 7.1 HTTP
411 | 
412 | - [听说『99% 的人都理解错了 HTTP 中 GET 与 POST 的区别』？？](https://zhuanlan.zhihu.com/p/25028045)
413 | - [前端基础篇之HTTP协议](https://juejin.im/post/5cd0438c6fb9a031ec6d3ab2)
414 | - [都9102年了，还问GET和POST的区别](https://segmentfault.com/a/1190000018129846)
415 | - [HTTP 响应代码 | MDN](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Status)
416 | - [如何理解HTTP响应的状态码？](https://harttle.land/2015/08/15/http-status-code.html#header-11)
417 | - [你所知道的3xx状态码](https://aotu.io/notes/2016/01/28/3xx-of-http-status/index.html)
418 | - [关于浏览器缓存你知道多少](https://mp.weixin.qq.com/s/Wvc0lkLpgyEW_u7bbMdvpQ)
419 | - [浏览器缓存](https://github.com/xiangxingchen/blog/issues/9)
420 | - [HTTP协议头部与Keep-Alive模式详解](https://www.byvoid.com/zhs/blog/http-keep-alive-header)
421 | - [HTTP keep-alive 二三事](https://lotabout.me/2019/Things-about-keepalive/)
422 | 
423 | ### 7.2 HTTPS/HTTP2
424 | 
425 | - [深入理解HTTPS工作原理](https://juejin.im/post/5ca6a109e51d4544e27e3048)
426 | - [九个问题从入门到熟悉HTTPS](https://juejin.im/post/5a2ff29c6fb9a045132aac5a)
427 | - [谈谈 HTTPS](https://juejin.im/post/59e4c02151882578d02f4aca)
428 | - [看图学HTTPS](https://juejin.im/post/5b0274ac6fb9a07aaa118f49)
429 | - [分分钟让你理解HTTPS](https://juejin.im/post/5ad6ad575188255c272273c4)
430 | - [解密HTTP/2与HTTP/3 的新特性](https://segmentfault.com/a/1190000020714686#articleHeader16)
431 | - [浅谈 HTTP/2 Server Push](https://zhuanlan.zhihu.com/p/26757514)
432 | - [HTTP2基本概念学习笔记](https://juejin.im/post/5acccf966fb9a028d043c6ec)
433 | 
434 | ### 7.3 DNS
435 | 
436 | - [写给前端工程师的DNS基础知识](http://www.sunhao.win/articles/netwrok-dns.html)
437 | - [前端优化: DNS预解析提升页面速度](https://www.jianshu.com/p/95a0c0636d28)
438 | - [DNS解析](https://imweb.io/topic/55e3ba46771670e207a16bc8)
439 | 
440 | ### 7.4 TCP
441 | 
442 | - [通俗大白话来理解TCP协议的三次握手和四次分手](https://github.com/jawil/blog/issues/14)
443 | - [就是要你懂 TCP](http://jm.taobao.org/2017/06/08/20170608/)
444 | - [TCP协议详解](https://juejin.im/post/5ba895a06fb9a05ce95c5dac)
445 | - [面试时，你被问到过 TCP/IP 协议吗?](https://juejin.im/post/58e36d35b123db15eb748856)
446 | - [“三次握手，四次挥手”你真的懂吗？](https://zhuanlan.zhihu.com/p/53374516)
447 | 
448 | ### 7.5 CDN
449 | 
450 | - [五分钟了解CDN](https://juejin.im/post/5afa449c51882542ba07e70e)
451 | - [漫话：如何给女朋友解释什么是CDN？](https://juejin.im/post/5d478c48e51d453c135c5a5c)
452 | - [关于 cdn、回源等问题一网打尽](https://juejin.im/post/5af46498f265da0b8d41f6a3)
453 | - [CDN是什么？使用CDN有什么优势？](https://www.zhihu.com/question/36514327?rf=37353035)
454 | 
455 | ### 7.6 经典题
456 | 
457 | - [从输入URL到页面展示，这中间发生了什么？](https://time.geekbang.org/column/article/117637)
458 | - [前端经典面试题: 从输入URL到页面加载发生了什么？](https://segmentfault.com/a/1190000006879700)
459 | 
460 | ## 8. 设计模式
461 | 
462 | ![](https://user-gold-cdn.xitu.io/2020/4/6/1714f52effa97580?w=530&h=126&f=png&s=32930)
463 | 
464 | - [Javascript常用的设计模式详解](https://www.cnblogs.com/tugenhua0707/p/5198407.html)
465 | - [JavaScript设计模式](https://juejin.im/post/59df4f74f265da430f311909)
466 | - [JavaScript 中常见设计模式整理](https://juejin.im/post/5afe6430518825428630bc4d)
467 | - [JavaScript 常见设计模式解析](https://juejin.im/post/58f4c702a0bb9f006aa80f25)
468 | - [深入 JavaScript 设计模式，从此有了优化代码的理论依据](https://juejin.im/post/5d58ca046fb9a06ad0056cc7)
469 | - [设计模式之美-前端](https://zhuanlan.zhihu.com/p/111553641)
470 | 
471 | ## 9. 数据结构/算法
472 | 
473 | ![](https://user-gold-cdn.xitu.io/2020/4/6/1714f532035cf9fc?w=480&h=398&f=png&s=81416)
474 | 
475 | - [Linked Lists in JavaScript (ES6 code)](https://codeburst.io/linked-lists-in-javascript-es6-code-part-1-6dd349c3dcc3)
476 | - [DS with JS — Linked Lists — II](https://medium.com/dev-blogs/ds-with-js-linked-lists-ii-3b387596e27e)
477 | - [LeetCode List](https://zxi.mytechroad.com/blog/leetcode-list/)
478 | - [JS中的算法与数据结构——链表(Linked-list)](https://www.jianshu.com/p/f254ec665e57)
479 | - [前端笔试&面试爬坑系列---算法](https://juejin.im/post/5b72f0caf265da282809f3b5)
480 | - [漫画：什么是红黑树？](https://juejin.im/post/5a27c6946fb9a04509096248)
481 | - [前端你应该了解的数据结构与算法](https://juejin.im/post/5b331bc7f265da598451fd88)
482 | - [数据结构和算法在前端领域的应用（前菜）](https://juejin.im/post/5d3dc8466fb9a07efc49d0a9)
483 | - [数据结构与算法在前端领域的应用 - 第二篇](https://lucifer.ren/blog/2019/09/19/algorthimn-fe-2/)
484 | - [JavaScript 数据结构与算法之美](https://github.com/biaochenxuying/blog/issues/43)
485 | 
486 | ## 10. 安全
487 | 
488 | ![](https://user-gold-cdn.xitu.io/2020/4/6/1714f534da8f0d4c?w=363&h=279&f=png&s=33868)
489 | 
490 | - [前端安全系列（一）：如何防止XSS攻击？](https://tech.meituan.com/2018/09/27/fe-security.html)
491 | - [前端安全系列（二）：如何防止CSRF攻击？](https://tech.meituan.com/2018/10/11/fe-security-csrf.html)
492 | - [Security](https://almanac.httparchive.org/en/2019/security)
493 | - [前端也需要了解的 JSONP 安全](https://juejin.im/post/5b75b497e51d45666276251d)
494 | - [【面试篇】寒冬求职之你必须要懂的Web安全](https://juejin.im/post/5cd6ad7a51882568d3670a8e)
495 | - [谈谈对 Web 安全的理解](https://zhuanlan.zhihu.com/p/25486768?group_id=820705780520079360)
496 | - [程序员必须要了解的web安全](https://juejin.im/post/5b4e0c936fb9a04fcf59cb79)
497 | - [可信前端之路：代码保护](https://www.freebuf.com/articles/web/102269.html)
498 | - [前端如何给 JavaScript 加密（不是混淆）？](https://www.zhihu.com/question/47047191)
499 | - [常见 Web 安全攻防总结](https://zoumiaojiang.com/article/common-web-security/)
500 | 
501 | ## 11. Node
502 | 
503 | - [一篇文章构建你的 NodeJS 知识体系](https://juejin.im/post/5c4c0ee8f265da61117aa527)
504 | - [真-Node多线程](https://juejin.im/post/5c63b5676fb9a049ac79a798)
505 | - [浏览器与Node的事件循环(Event Loop)有何区别?](https://zhuanlan.zhihu.com/p/54882306)
506 | - [聊聊 Node.js RPC](https://www.yuque.com/egg/nodejs/dklip5)
507 | - [Understanding Streams in Node.js](https://nodesource.com/blog/understanding-streams-in-nodejs)
508 | - [深入理解 Node.js 进程与线程](https://mp.weixin.qq.com/s/VzXnnfn4gCBMd5wea3LRIg)
509 | - [如何通过饿了么 Node.js 面试](https://github.com/ElemeFE/node-interview/tree/master/sections/zh-cn)
510 | - [字节跳动面试官：请你实现一个大文件上传和断点续传](https://juejin.im/post/5dff8a26e51d4558105420ed)
511 | 
512 | ## 12. 项目/业务
513 | 
514 | 思考题，自由发挥
515 | 
516 | ## 13. 其它
517 | 
518 | - [深入浅出浏览器渲染原理](https://zhuanlan.zhihu.com/p/53913989)
519 | - [前端开发如何独立解决跨域问题](https://segmentfault.com/a/1190000010719058)
520 | - [探索 Serverless 中的前端开发模式](https://juejin.im/post/5cdc3dc2e51d453b6c1d9d3a)
521 | - [「NGW」前端新技术赛场：Serverless SSR 技术内幕](https://juejin.im/post/5dce7140f265da0bf80b5246?utm_source=gold_browser_extension)
522 | - [JavaScript与Unicode](https://cjting.me/web2.0/js-and-unicode/)
523 | - [九种跨域方式实现原理（完整版）](https://juejin.im/post/5c23993de51d457b8c1f4ee1)
524 | - [7分钟理解JS的节流、防抖及使用场景](https://juejin.im/post/5b8de829f265da43623c4261)
525 | - [浏览器的工作原理：新式网络浏览器幕后揭秘](https://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/)
526 | - [Different Types Of Observers Supported By Modern Browsers](https://www.zeolearn.com/magazine/different-types-of-observers-supported-by-modern-browsers)
527 | - [浏览器同源策略与ajax跨域方法汇总](https://www.jianshu.com/p/438183ddcea8)
528 | 
529 | ## 14. 面试
530 | 
531 | - [一年半经验如何准备阿里巴巴 P6 前端面试](https://juejin.im/post/5e5522b36fb9a07ce152c51c)
532 | - [面试分享：两年工作经验成功面试阿里P6总结](https://juejin.im/post/5d690c726fb9a06b155dd40d)
533 | - [总结了17年初到18年初百场前端面试的面试经验(含答案)](https://juejin.im/post/5b44a485e51d4519945fb6b7)
534 | - [2018春招前端面试: 闯关记(精排精校) | 掘金技术征文](https://juejin.im/post/5a998991f265da237f1dbdf9)
535 | - [20道JS原理题助你面试一臂之力！](https://juejin.im/post/5d2ee123e51d4577614761f8)
536 | - [一年半经验，百度、有赞、阿里前端面试总结](https://juejin.im/post/5befeb5051882511a8527dbe)
537 | - [22 道高频 JavaScript 手写面试题及答案](https://juejin.im/post/5d51e16d6fb9a06ae17d6bbc)
538 | - [面试分享：专科半年经验面试阿里前端P6+总结(附面试真题及答案)](https://juejin.im/post/5a92c23b5188257a6b06110b)
539 | - [写给女朋友的中级前端面试秘籍](https://juejin.im/post/5e7af0685188255dcf4a497e)
540 | - [阿里前端攻城狮们写了一份前端面试题答案，请查收](https://juejin.im/post/5e7426d15188254967069c00)
541 | - [字节跳动今日头条前端面经（4轮技术面+hr面）](https://juejin.im/post/5e6a14b1f265da572978a1d3)
542 | - [「面试题」20+Vue面试题整理(持续更新)](https://juejin.im/post/5e649e3e5188252c06113021)
543 | - [「吐血整理」再来一打Webpack面试题(持续更新)](https://juejin.im/post/5e6f4b4e6fb9a07cd443d4a5)
544 | - [高级前端开发者必会的34道Vue面试题系列](https://juejin.im/post/5e7410ed51882549087dc365)
545 | 
546 | 
547 | ## 15. 书单
548 | 
549 | 推荐一些值得看的书，基本都是我看完或者有翻过几页觉得不错但是还没时间看的书。
550 | 
551 | ### 15.1 JavaScript
552 | 
553 | - JavaScript 高级程序设计（高程就不多说了，第四版有英文版）
554 | - JavaScript 设计模式
555 | - 你不知道的 JavaScript
556 | - JavaScript 语言精粹
557 | - 高性能 JavaScript
558 | - Learning TypeScript 中文版
559 | - 深入理解 ES6
560 | - ES6 标准入门
561 | - 深入理解 JavaScript 特性
562 | 
563 | ### 15.2 CSS
564 | 
565 | - CSS 权威指南（建议看英文版）
566 | - 精通 CSS 高级 Web 标准解决方案
567 | - CSS 世界（张鑫旭老师的大作，但是建议需要有一定 CSS 实践后再看）
568 | 
569 | ### 15.3 Node
570 | 
571 | - Node.js 实战
572 | - 了不起的 Node.js
573 | 
574 | ### 15.4 计算机基础
575 | 
576 | - 大话数据结构
577 | - 图解 HTTP
578 | - 计算机/程序是怎样跑起来的
579 | - 学习 JavaScript 数据结构与算法
580 | 
581 | ### 15.5 工程化/浏览器/软技能
582 | 
583 | - 前端工程化体系设计与实践
584 | - webpack 实战：入门、进阶与优化（了解一下 webpack 的所有会涉及到的知识点）
585 | - WebKit 技术内幕（讲浏览器的，挺好的）
586 | - 重构：改善既有代码的涉及
587 | - 码农翻身
588 | - 程序员思维修炼
589 | - 编码：隐匿在计算机软硬件背后的语言
590 | - 写给大家看的设计书
591 | - 技术之瞳：阿里巴巴技术笔试心得
592 | 
593 | 
594 | ## 结束语
595 | 
596 | 上文整理了网上的一些相关文章和躺在我收藏夹里精选文章，有一些文章还没看，还需要持续学习呀 ~
597 | 
598 | 放弃了假期快落的岛上生活（动森），吐血整理这份资料，希望对大家有所帮助~
599 | 
600 | 欢迎关注公众号「**前端试炼**」，回复【面试】获取完整复习导图。公众号平时会分享一些实用或者有意思的东西，发现代码之美。专注深度和最佳实践，希望打造一个高质量的公众号。偶尔还会分享一些摄影 ~ 
601 | 
602 | 扫码_搜索联合传播样式-标准色版.png
603 | ![](https://imgkr.cn-bj.ufileos.com/6be7679b-ed91-4d37-8e17-694b508f9590.png)
604 | 
605 | 
606 | 也可以扫码加我微信，拉你进交流~~划水~~聊天群，有看到好文章/代码都会发在群里。
607 | 
608 | 
609 | ![](https://imgkr.cn-bj.ufileos.com/0f853475-ae55-4d77-bdd8-7a803ea9ee99.png)
610 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ## 文章归档
 2 | 
 3 | 个人博客：[http://axuebin.com/blog](http://axuebin.com/blog)
 4 | 
 5 | 个人博客（react版）：[http://axuebin.com/react-blog](http://axuebin.com/react-blog)
 6 | 
 7 | ### JavaScript
 8 | 
 9 | - [JavaScript基础心法——数据类型](https://github.com/axuebin/articles/issues/3)
10 | - [JavaScript基础心法——this](https://github.com/axuebin/articles/issues/6)
11 | - [JavaScript基础心法——call apply bind](https://github.com/axuebin/articles/issues/7)
12 | - [JavaScript基础心法——深浅拷贝](https://github.com/axuebin/articles/issues/20)
13 | - [ES6变量命名方式以及块级作用域](https://github.com/axuebin/articles/issues/8)
14 | - [原生JS实现最简单的图片懒加载](https://github.com/axuebin/articles/issues/1)
15 | - [JavaScript复制内容到剪贴板](https://github.com/axuebin/articles/issues/26)
16 | - [JavaScript 判断 iPhone X Series 机型](https://github.com/axuebin/articles/issues/28)
17 | - [ES2019](https://github.com/axuebin/articles/issues/29)
18 | - [Quill 富文本编辑器自定义格式化](https://github.com/axuebin/articles/issues/30)
19 | - [初学 Babel 工作原理](https://github.com/axuebin/articles/issues/31)
20 | - [如何用 Babel 为代码自动引入依赖](https://github.com/axuebin/articles/issues/40)
21 | 
22 | ### webpack
23 | 
24 | - [webpack loader 从上手到理解系列：file-loader](https://github.com/axuebin/articles/issues/33)
25 | - [webpack loader 从上手到理解系列：url-loader](https://github.com/axuebin/articles/issues/34)
26 | - [webpack loader 从上手到理解系列：style-loader](https://github.com/axuebin/articles/issues/35)
27 | - [webpack loader 从上手到理解系列：vue-loader （一）](https://github.com/axuebin/articles/issues/37)
28 | - [前端工程师都得掌握的 webpack Loader](https://github.com/axuebin/articles/issues/38)
29 | 
30 | ### TypeScript
31 | 
32 | - [什么是 TypeScript](https://github.com/axuebin/articles/issues/32)
33 | - [基础类型](https://github.com/axuebin/articles/issues/36)
34 | 
35 | ### React
36 | 
37 | - [React V15.6 实现一个简单的个人博客](https://github.com/axuebin/articles/issues/9)
38 | - [React中state和props分别是什么？](https://github.com/axuebin/articles/issues/4)
39 | - [React的生命周期到底是怎么一回事？](https://github.com/axuebin/articles/issues/5)
40 | - [用React实现一个简易的TodoList](https://github.com/axuebin/articles/issues/2)
41 | 
42 | ### 网络及浏览器
43 | 
44 | - [关于浏览器缓存我知道多少](https://github.com/axuebin/articles/issues/10)
45 | 
46 | ### 数据结构及算法
47 | 
48 | - [JavaScript数据结构及算法——排序](https://github.com/axuebin/articles/issues/12)
49 | - [JavaScript数据结构及算法——查找](https://github.com/axuebin/articles/issues/13)
50 | 
51 | ### 整理
52 | 
53 | - [2020年前端面试复习必读精选文章【赠复习导图】](https://github.com/axuebin/articles/issues/39)


--------------------------------------------------------------------------------
/images/ast-demo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/axuebin/articles/6a8775194be79cb6cf55a51885486063bacab671/images/ast-demo.png


--------------------------------------------------------------------------------
/images/avatar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/axuebin/articles/6a8775194be79cb6cf55a51885486063bacab671/images/avatar.png


--------------------------------------------------------------------------------
/images/babel-banner.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/axuebin/articles/6a8775194be79cb6cf55a51885486063bacab671/images/babel-banner.png


--------------------------------------------------------------------------------
/images/babel-try.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/axuebin/articles/6a8775194be79cb6cf55a51885486063bacab671/images/babel-try.png


--------------------------------------------------------------------------------
/images/es-finished-proposals.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/axuebin/articles/6a8775194be79cb6cf55a51885486063bacab671/images/es-finished-proposals.png


--------------------------------------------------------------------------------
/images/quill_format.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/axuebin/articles/6a8775194be79cb6cf55a51885486063bacab671/images/quill_format.png


--------------------------------------------------------------------------------
/images/quill_template.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/axuebin/articles/6a8775194be79cb6cf55a51885486063bacab671/images/quill_template.png


--------------------------------------------------------------------------------
/images/quill_toolbar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/axuebin/articles/6a8775194be79cb6cf55a51885486063bacab671/images/quill_toolbar.png


--------------------------------------------------------------------------------
/images/weixin.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/axuebin/articles/6a8775194be79cb6cf55a51885486063bacab671/images/weixin.png


--------------------------------------------------------------------------------
/images/yearly-arrow.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/axuebin/articles/6a8775194be79cb6cf55a51885486063bacab671/images/yearly-arrow.png


--------------------------------------------------------------------------------
/images/yearly-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/axuebin/articles/6a8775194be79cb6cf55a51885486063bacab671/images/yearly-logo.png


--------------------------------------------------------------------------------