+
+
+
+ 
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git "a/Cute-Angular/angualr\345\256\230\347\275\221demo/src/app/hero-detail/hero-detail.component.spec.ts" "b/Cute-Angular/angualr\345\256\230\347\275\221demo/src/app/hero-detail/hero-detail.component.spec.ts"
new file mode 100644
index 00000000..5e34497b
--- /dev/null
+++ "b/Cute-Angular/angualr\345\256\230\347\275\221demo/src/app/hero-detail/hero-detail.component.spec.ts"
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HeroDetailComponent } from './hero-detail.component';
+
+describe('HeroDetailComponent', () => {
+ let component: HeroDetailComponent;
+ let fixture: ComponentFixture{{hero.name | uppercase}} Details
+id: {{hero.id}}
+ name: {{hero.name}}
+
+
+
+
+
+
+
\ No newline at end of file
diff --git "a/Cute-Angular/angualr\345\256\230\347\275\221demo/src/app/hero-search/hero-search.component.spec.ts" "b/Cute-Angular/angualr\345\256\230\347\275\221demo/src/app/hero-search/hero-search.component.spec.ts"
new file mode 100644
index 00000000..901bb7f2
--- /dev/null
+++ "b/Cute-Angular/angualr\345\256\230\347\275\221demo/src/app/hero-search/hero-search.component.spec.ts"
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HeroSearchComponent } from './hero-search.component';
+
+describe('HeroSearchComponent', () => {
+ let component: HeroSearchComponent;
+ let fixture: ComponentFixtureHero Search
+ + +-
+
- + + + {{hero.name}} + +
My Heroes
+
+
+
+
+-
+
+
- + + {{hero.id}} {{hero.name}} + + + +
+
\ No newline at end of file
diff --git "a/Cute-Angular/angualr\345\256\230\347\275\221demo/src/app/messages/messages.component.spec.ts" "b/Cute-Angular/angualr\345\256\230\347\275\221demo/src/app/messages/messages.component.spec.ts"
new file mode 100644
index 00000000..66109cc1
--- /dev/null
+++ "b/Cute-Angular/angualr\345\256\230\347\275\221demo/src/app/messages/messages.component.spec.ts"
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MessagesComponent } from './messages.component';
+
+describe('MessagesComponent', () => {
+ let component: MessagesComponent;
+ let fixture: ComponentFixtureMessage
+ +
+ {{message}}
+
+
+
+```
+这里的`欢迎来到我的个人书屋!
+
+
+```
+**知识点**：
+`*ngFor` 是一个 Angular 的复写器（repeater）指令，就像**angular1**中的`ng-for`和**vuejs**中的`v-for`。 它会为列表中的每项数据复写它的宿主元素。
+这时候可以看到页面变成下面这个样子：
+
+
+
+接下来我们要把写死在HTML上面的数据，抽到JS中：
+
+现在先新建一个`books.ts`文件来定义一个`Book`类，并添加`id`，`url`，`title`和`author`四个属性：
+```js
+// src/app/books.ts
+export class Book {
+ id: number;
+ url: string;
+ title: string;
+ author: string;
+}
+```
+然后回到`index.component.ts`文件去引入它，并定义一个`books`属性，使用导入进来的`Book`类作为类型：
+```js
+// index.component.ts
+import { Book } from '../books';
+export class IndexComponent implements OnInit {
+ books: Book = {
+ id: 1,
+ url: 'https://img3.doubanio.com/view/subject/m/public/s29988481.jpg',
+ title: '像火焰像灰烬',
+ author: '程姬',
+ }
+}
+```
+然后再改造前面的组件文件`index.component.html`:
+```html
+
+
+ 
+
+```
+
+接着，我们再为每个课本添加一个点击事件，来实现点击封面图能查看大图的效果，现在`index.component.ts`中定义一个`getDetailImage`方法，并在`index.component.html`中绑定该方法：
+```js
+// index.component.ts
+export class IndexComponent implements OnInit {
+ getDetailImage(books){
+ alert(`正在查看id为${books.id}的大图！`);
+ }
+}
+```
+这边方法的具体实现，不写，不是本文重点。下面是增加点击事件的绑定：
+```html
+
+
+ {{books.title}}
+
+
+
+ 
+
+```
+
+### 3.编写主从组件
+当我们写完一个单一组件后，我们会发现，如果我们把每个组件都写到同一个HTML文件中，这是很糟糕的事情，这样做有缺点：
+* 代码复用性差；（导致每次相同功能要重新写）
+* 代码难维护；（因为一个文件会非常长）
+* 影响性能；（打开每个页面都要重复加载很多）
+
+为了解决这个问题，我们这里就要开始使用真正的**组件化思维**，将通用常用组件抽离出来，通过参数传递来控制组件的不同业务形态。
+这便是我们接下来要写的主从组件。
+
+思考一下，我们这里现在能抽成组件作为公共代码的，就是这个单个书本的内容，因为每个书本的内容都一致，只是里面数据的差异，于是我们再新建一个组件：
+```sh
+ng g component books
+```
+并将前面`index.component.html`中关于课本的代码剪切到`books.component.html`中来，然后删除掉`*ngFor`的内容，并将原本本地的变量`books`替换成`list`，这个变量我们等会会取到：
+```html
+
+
+ {{item.title}}
+
+
+
+ 
+
+```
+再将这个组件，引用到它的父组件中，这里是要引用到`index.component.html`的组件中，并将前面的`*ngFor`再次传入`
+ {{list.title}}
+
+
+
+
+```
+
+接下来要做的就是获取到`list`变量的值，显然这个值是要从外面组件传进来的，我们需要在`books.component.ts`引入前面定义的 `Books`类 和 `@Input() 装饰器`，还要添加一个带有 `@Input() 装饰器`的 `list` 属性，另外还要记得将`getDetailImage`方法也剪切过来：
+```js
+// books.component.ts
+import { Component, OnInit, Input } from '@angular/core';
+import { Books } from '../books';
+
+export class BooksComponent implements OnInit {
+ @Input() list: Books;
+ constructor() { }
+ ngOnInit() {}
+ getDetailImage(books){
+ alert(`正在查看id为${books.id}的大图！`);
+ }
+}
+```
+`@Input() 装饰器`介绍具体可以查看 [手册](https://angular.cn/guide/template-syntax#inputs-outputs)
+
+我们要获取的 `list` 属性必须是一个带有` @Input() `装饰器的输入属性，因为外部的 `IndexComponent` 组件将会绑定到它。就像这样：
+```html
+
+
+
+
+《{{books.title}}》介绍
+
+
+
+ 书本标题: {{books.title}}
+书本作者: {{books.author}}
+书本id: {{books.id}}
+
+
+```
+**知识点**：
+这里使用了`*ngIf`指令，当条件为`true`则显示其HTML内容。
+
+```js
+// detail.component.ts
+import { Books } from '../books';
+import { BooksService } from '../books.service';
+export class DetailComponent implements OnInit {
+ constructor(
+ private route: ActivatedRoute,
+ private location: Location,
+ private booksservice: BooksService // 引入BooksService服务
+ ) { }
+
+ books: Books; // 定义books类型
+ ngOnInit() {
+ this.getDetail()
+ }
+ getDetail(): void{
+ const id = +this.route.snapshot.paramMap.get('id');
+ this.getBooks(id);
+ }
+ getBooks(id: number): void {
+ this.books = this.booksservice.getBook(id);
+ }
+}
+```
+这段代码，主要定义了`getBooks`方法，当刚进入页面时，将书本`id`传入`getBooks`方法，去`BooksService`去获取对应id的书本信息，并复制给变量`books`，然后展示到页面。
+
+改造之后，我们的页面显示依旧正常。
+
+
+
+但是我们要知道，这背后的逻辑已经改变了。
+
+## 五、引入RxJS改造项目
+### 1.关于RxJS
+这里简单介绍关键概念，具体可以查看 [RxJS 官网](https://RxJS.dev/)，也可以参考 [浅析Angular之RxJS](https://www.jianshu.com/p/36d85f8cafdd)。
+
+#### 什么是RxJS
+
+RxJS全称`Reactive Extensions for JavaScript`，中文意思: JavaScript的响应式扩展。
+RxJS主要是提供一种更加强大和优雅的方式，来利用响应式编程的模式，实现JavaScript的异步编程。
+
+#### RxJS优点
+
+* 纯净性；
+* 流动性；
+
+#### RxJS核心概念
+
+RxJS 是基于观察者模式和迭代器模式以函数式编程思维来实现的。RxJS 中含有两个基本概念：`Observables` 与 `Observer`。
+`Observables` 作为被观察者，是一个值或事件的流集合；而 `Observer` 则作为观察者，根据 `Observables` 进行处理。它们之间的订阅发布关系(观察者模式) 如下：
+**订阅**：`Observer` 通过 `Observable` 提供的 `subscribe()` 方法订阅 `Observable`。
+**发布**：`Observable` 通过回调 `next` 方法向 `Observer` 发布事件。
+
+———— 来源[Angular修仙之路 RxJS Observable](http://www.semlinker.com/rxjs-observable/)
+
+另外这里列出来一些核心，具体还是看官网咯，并且下面使用到的时候会具体介绍。
+* `Observable` (可观察对象): 表示一个概念，这个概念是一个可调用的未来值或事件的集合。
+* `Observer`(观察者): 一个回调函数的集合，它知道如何去监听由 `Observable` 提供的值。
+* `Subscription` (订阅): 表示 `Observable` 的执行，主要用于取消 `Observable` 的执行。
+* `Operators` (操作符): 采用函数式编程风格的纯函数 (`pure function`)，使用像 `map`、`filter`、`concat`、`flatMap` 等这样的操作符来处理集合。
+* `Subject` (主体): 相当于 `EventEmitter`，并且是将值或事件多路推送给多个 `Observer` 的唯一方式。
+* `Schedulers` (调度器): 用来控制并发并且是中央集权的调度员，允许我们在发生计算时进行协调，例如 `setTimeout` 或` requestAnimationFrame `或其他。
+
+### 2.引入RxJS
+在我们的真实应用中，我们必须要等到服务器响应后，我们才能获取到数据，因此这天生就需要用异步思维来操作。
+
+由于Angular中已经自带RxJS，所以我们只要在需要使用的时候，引入即可使用：
+
+### 3.改造数据获取方式
+了解完RxJS的一些概念后，我们开始改造下这些书本的数据获取方式。
+
+* 改造`BooksService`
+
+首先我们从 RxJS 中导入 `Observable` 和 `of` 符号：
+```js
+// books.service.ts
+import { Observable, of } from 'rxjs';
+```
+**知识点**：
+`Observable`: 观察者模式中的观察者，具体可以参考 [Angular修仙之路 RxJS Observable](http://www.semlinker.com/rxjs-observable/)
+`of`: 用来获取观察者拿到的数据，通常是一个`Observable`。
+
+然后修改`getBookList`方法
+```js
+// books.service.ts
+getBookList(): Observable暂无信息
+
+
+```
+**代码解释**：
+`*ngIf="historyservice.history.length"`，是为了防止还没有拿到历史数据，导致后面的报错。
+`(click)="historyservice.clear()"`, 绑定我们服务中的`clear`事件，实现清除缓存。
+`*ngFor="let item of historyservice.history"`，将我们的历史数据渲染到页面上。
+
+
+到了这一步，就能看到历史数据了，每次也换到首页，都会增加一条。
+
+
+
+接下来，我们要在书本详情页也加上历史记录的统计，导入文件，注入服务，然后改造`getBooks`方法，实现历史记录的统计：
+```js
+// detail.component.ts
+import { HistoryService } from '../history.service';
+
+export class DetailComponent implements OnInit {
+ constructor(
+ private route: ActivatedRoute,
+ private location: Location,
+ private booksservice: BooksService,
+ private historyservice: HistoryService
+ ) { }
+ //...
+ getBooks(id: number): void {
+ this.books = this.booksservice.getBook(id);
+ this.historyservice.add(`查看书本${this.books.title}，id为${this.books.id}`);
+ console.log(this.books)
+ }
+}
+```
+
+
+这时候就可以在历史记录中，看到这些操作的记录了，并且**清除**按钮也正常使用。
+
+## 七、HTTP改造
+原本我只想写到上一章，但是想到，我们实际开发中，哪有什么本地数据，基本上数据都是要从服务端去请求，所以这边也有必要引入这一张，模拟实际的HTTP请求。
+
+### 1.引入HTTP
+在这一章，我们使用Angular提供的 `HttpClient` 来添加一些数据持久化特性。
+然后实现对书本数据进行**获取，增加，修改，删除和查找**功能。
+
+`HttpClient`是Angular通过 HTTP 与远程服务器通讯的机制。
+
+这里我们为了让`HttpClient`在整个应用全局使用，所以将`HttpClient`导入到根模块`app.module.ts`中，然后把它加入 `@NgModule.imports` 数组：
+```js
+import { HttpClientModule } from '@angular/common/http';
+@NgModule({
+ //...
+ imports: [
+ BrowserModule,
+ AppRoutingModule,
+ HttpClientModule
+ ],
+ //...
+})
+```
+
+这边我们使用 [内存 Web API（In-memory Web API） ](https://github.com/angular/in-memory-web-api)模拟出的远程数据服务器通讯。
+**注意：** 这个内存 Web API 模块与 Angular 中的 HTTP 模块无关。
+
+通过下面命令来安装：
+```sh
+npm install angular-in-memory-web-api --save
+```
+然后在`app.module.ts`中导入 `HttpClientInMemoryWebApiModule` 和 `InMemoryDataService` 类（后面创建）：
+```js
+// app.module.ts
+import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api';
+import { InMemoryDataService } from './in-memory-data.service';
+@NgModule({
+ // ...
+ imports: [
+ // ...
+ HttpClientInMemoryWebApiModule.forRoot(
+ InMemoryDataService, {dataEncapsulation:false}
+ )
+ ],
+ // ...
+})
+export class AppModule { }
+```
+**知识点：**
+`forRoot()` 配置方法接受一个 InMemoryDataService 类（初期的内存数据库）作为参数。
+
+然后我们要创建`InMemoryDataService`类：
+```sh
+ng g service InMemoryData
+```
+并将生成的`in-memory-data.service.ts`修改为：
+```js
+// in-memory-data.service.ts
+import { Injectable } from '@angular/core';
+import { InMemoryDbService } from 'angular-in-memory-web-api';
+import { Books } from './books';
+@Injectable({
+ providedIn: 'root'
+})
+export class InMemoryDataService implements InMemoryDbService {
+ createDb(){
+ const books = [
+ {
+ id: 1,
+ url: 'https://img3.doubanio.com/view/subject/m/public/s29988481.jpg',
+ title: '像火焰像灰烬',
+ author: '程姬',
+ },
+ // 省略其他9条数据
+ ];
+ return {books};
+ }
+ constructor() { }
+}
+```
+
+这里先总结`InMemoryDbService`所提供的RESTful API，后面都要用到：
+例如如果`url`是`api/books`，那么
+* 查询所有成员：以**GET**方法访问`api/books`
+* 查询某个成员：以**GET**方法访问`api/books/id`，比如`id`是`1`，那么访问`api/books/1`
+* 更新某个成员：以**PUT**方法访问`api/books/id`
+* 删除某个成员：以**DELETE**方法访问`api/books/id`
+* 增加一个成员：以**POST**方法访问`api/books`
+
+
+### 2.通过HTTP请求数据
+
+现在要为接下来的网络请求做一些准备，先在`books.service.ts`中引入HTTP符号，然后注入`HttpClient`并改造：
+```js
+// books.service.ts
+import { HttpClient, HttpHeaders} from '@angular/common/http';
+// ...
+export class BooksService {
+ constructor(
+ private historyservice: HistoryService,
+ private http: HttpClient
+ ) { }
+ private log(histories: string){
+ this.historyservice.add(`正在执行：${histories}`)
+ }
+ private booksUrl = 'api/books'; // 提供一个API供调用
+ // ...
+}
+```
+这里我们还新增一个私有方法`log`和一个私有变量`booksUrl`。
+
+接下来我们要开始发起http请求数据，开始改造`getBookList`方法：
+```js
+// books.service.ts
+// ...
+getBookList(): Observable操作历史：
+
+
+
+{{item}}
+
+
+```
+这边切记一点，一定要在`app.module.ts`中引入 `FormsModule`模块，并在`@NgModule`的`imports`中引入，不然要报错了。
+```js
+// app.module.ts
+// ...
+import { FormsModule } from '@angular/forms';
+@NgModule({
+ // ...
+ imports: [
+ // ...
+ FormsModule
+ ],
+ // ...
+})
+```
+`input`框绑定书本的标题`books.title`，而保存按钮绑定一个`save()`方法，这里还要实现这个方法：
+```js
+// detail.component.ts
+save(): void {
+ this.historyservice.updateBooks(this.books)
+ .subscribe(() => this.goBack());
+}
+goBack(): void {
+ this.location.back();
+}
+```
+这里通过调用`BooksService`的`updateBooks`方法，将当前修改后的书本信息修改到源数据中，这里我们需要去`books.service.ts`中添加`updateBooks`方法：
+```js
+// books.service.ts
+// ...
+updateBooks(books: Books): Observable修改信息：
+ + + +
+
+```
+初始化添加书本的数据：
+```js
+// add.component.ts
+// ...
+import { Books } from '../books';
+import { BooksService } from '../books.service';
+import { HistoryService } from '../history.service';
+import { Location } from '@angular/common';
+export class AddComponent implements OnInit {
+ books: Books = {
+ id: 0,
+ url: '',
+ title: '',
+ author: ''
+ }
+ constructor(
+ private location: Location,
+ private booksservice: BooksService,
+ private historyservice: HistoryService
+ ) { }
+ ngOnInit() {}
+ add(books: Books): void{
+ books.title = books.title.trim();
+ books.author = books.author.trim();
+ this.booksservice.addBooks(books)
+ .subscribe( book => {
+ this.historyservice.add(`新增书本${books.title}，id为${books.id}`);
+ this.location.back();
+ });
+ }
+}
+```
+然后在`books.service.ts`中添加`addBooks`方法，来添加一本书本的数据：
+```js
+// books.service.ts
+addBooks(books: Books): Observable添加书本：
+ + + + + +
+
+```
+这里的`欢迎来到我的个人书屋!
+
+
+```
+**知识点**：
+`*ngFor` 是一个 Angular 的复写器（repeater）指令，就像**angular1**中的`ng-for`和**vuejs**中的`v-for`。 它会为列表中的每项数据复写它的宿主元素。
+这时候可以看到页面变成下面这个样子：
+
+
+
+接下来我们要把写死在HTML上面的数据，抽到JS中：
+
+现在先新建一个`books.ts`文件来定义一个`Book`类，并添加`id`，`url`，`title`和`author`四个属性：
+```js
+// src/app/books.ts
+export class Book {
+ id: number;
+ url: string;
+ title: string;
+ author: string;
+}
+```
+然后回到`index.component.ts`文件去引入它，并定义一个`books`属性，使用导入进来的`Book`类作为类型：
+```js
+// index.component.ts
+import { Book } from '../books';
+export class IndexComponent implements OnInit {
+ books: Book = {
+ id: 1,
+ url: 'https://img3.doubanio.com/view/subject/m/public/s29988481.jpg',
+ title: '像火焰像灰烬',
+ author: '程姬',
+ }
+}
+```
+然后再改造前面的组件文件`index.component.html`:
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+接着，我们再为每个课本添加一个点击事件，来实现点击封面图能查看大图的效果，现在`index.component.ts`中定义一个`getDetailImage`方法，并在`index.component.html`中绑定该方法：
+```js
+// index.component.ts
+export class IndexComponent implements OnInit {
+ getDetailImage(books){
+ alert(`正在查看id为${books.id}的大图！`);
+ }
+}
+```
+这边方法的具体实现，不写，不是本文重点。下面是增加点击事件的绑定：
+```html
+
+
+ {{books.title}}
+
+
+
+
+
+```
+
+### 3.编写主从组件
+当我们写完一个单一组件后，我们会发现，如果我们把每个组件都写到同一个HTML文件中，这是很糟糕的事情，这样做有缺点：
+* 代码复用性差；（导致每次相同功能要重新写）
+* 代码难维护；（因为一个文件会非常长）
+* 影响性能；（打开每个页面都要重复加载很多）
+
+为了解决这个问题，我们这里就要开始使用真正的**组件化思维**，将通用常用组件抽离出来，通过参数传递来控制组件的不同业务形态。
+这便是我们接下来要写的主从组件。
+
+思考一下，我们这里现在能抽成组件作为公共代码的，就是这个单个书本的内容，因为每个书本的内容都一致，只是里面数据的差异，于是我们再新建一个组件：
+```sh
+ng g component books
+```
+并将前面`index.component.html`中关于课本的代码剪切到`books.component.html`中来，然后删除掉`*ngFor`的内容，并将原本本地的变量`books`替换成`list`，这个变量我们等会会取到：
+```html
+
+
+ {{item.title}}
+
+
+
+
+
+```
+再将这个组件，引用到它的父组件中，这里是要引用到`index.component.html`的组件中，并将前面的`*ngFor`再次传入`
+ {{list.title}}
+
+
+
+
+```
+
+接下来要做的就是获取到`list`变量的值，显然这个值是要从外面组件传进来的，我们需要在`books.component.ts`引入前面定义的 `Books`类 和 `@Input() 装饰器`，还要添加一个带有 `@Input() 装饰器`的 `list` 属性，另外还要记得将`getDetailImage`方法也剪切过来：
+```js
+// books.component.ts
+import { Component, OnInit, Input } from '@angular/core';
+import { Books } from '../books';
+
+export class BooksComponent implements OnInit {
+ @Input() list: Books;
+ constructor() { }
+ ngOnInit() {}
+ getDetailImage(books){
+ alert(`正在查看id为${books.id}的大图！`);
+ }
+}
+```
+`@Input() 装饰器`介绍具体可以查看 [手册](https://angular.cn/guide/template-syntax#inputs-outputs)
+
+我们要获取的 `list` 属性必须是一个带有` @Input() `装饰器的输入属性，因为外部的 `IndexComponent` 组件将会绑定到它。就像这样：
+```html
+
+
+
+
+《{{books.title}}》介绍
+
+
+
+ 书本标题: {{books.title}}
+书本作者: {{books.author}}
+书本id: {{books.id}}
+
+
+```
+**知识点**：
+这里使用了`*ngIf`指令，当条件为`true`则显示其HTML内容。
+
+```js
+// detail.component.ts
+import { Books } from '../books';
+import { BooksService } from '../books.service';
+export class DetailComponent implements OnInit {
+ constructor(
+ private route: ActivatedRoute,
+ private location: Location,
+ private booksservice: BooksService // 引入BooksService服务
+ ) { }
+
+ books: Books; // 定义books类型
+ ngOnInit() {
+ this.getDetail()
+ }
+ getDetail(): void{
+ const id = +this.route.snapshot.paramMap.get('id');
+ this.getBooks(id);
+ }
+ getBooks(id: number): void {
+ this.books = this.booksservice.getBook(id);
+ }
+}
+```
+这段代码，主要定义了`getBooks`方法，当刚进入页面时，将书本`id`传入`getBooks`方法，去`BooksService`去获取对应id的书本信息，并复制给变量`books`，然后展示到页面。
+
+改造之后，我们的页面显示依旧正常。
+
+
+
+但是我们要知道，这背后的逻辑已经改变了。
+
+## 五、引入RxJS改造项目
+### 1.关于RxJS
+这里简单介绍关键概念，具体可以查看 [RxJS 官网](https://RxJS.dev/)，也可以参考 [浅析Angular之RxJS](https://www.jianshu.com/p/36d85f8cafdd)。
+
+#### 什么是RxJS
+
+RxJS全称`Reactive Extensions for JavaScript`，中文意思: JavaScript的响应式扩展。
+RxJS主要是提供一种更加强大和优雅的方式，来利用响应式编程的模式，实现JavaScript的异步编程。
+
+#### RxJS优点
+
+* 纯净性；
+* 流动性；
+
+#### RxJS核心概念
+
+RxJS 是基于观察者模式和迭代器模式以函数式编程思维来实现的。RxJS 中含有两个基本概念：`Observables` 与 `Observer`。
+`Observables` 作为被观察者，是一个值或事件的流集合；而 `Observer` 则作为观察者，根据 `Observables` 进行处理。它们之间的订阅发布关系(观察者模式) 如下：
+**订阅**：`Observer` 通过 `Observable` 提供的 `subscribe()` 方法订阅 `Observable`。
+**发布**：`Observable` 通过回调 `next` 方法向 `Observer` 发布事件。
+
+———— 来源[Angular修仙之路 RxJS Observable](http://www.semlinker.com/rxjs-observable/)
+
+另外这里列出来一些核心，具体还是看官网咯，并且下面使用到的时候会具体介绍。
+* `Observable` (可观察对象): 表示一个概念，这个概念是一个可调用的未来值或事件的集合。
+* `Observer`(观察者): 一个回调函数的集合，它知道如何去监听由 `Observable` 提供的值。
+* `Subscription` (订阅): 表示 `Observable` 的执行，主要用于取消 `Observable` 的执行。
+* `Operators` (操作符): 采用函数式编程风格的纯函数 (`pure function`)，使用像 `map`、`filter`、`concat`、`flatMap` 等这样的操作符来处理集合。
+* `Subject` (主体): 相当于 `EventEmitter`，并且是将值或事件多路推送给多个 `Observer` 的唯一方式。
+* `Schedulers` (调度器): 用来控制并发并且是中央集权的调度员，允许我们在发生计算时进行协调，例如 `setTimeout` 或` requestAnimationFrame `或其他。
+
+### 2.引入RxJS
+在我们的真实应用中，我们必须要等到服务器响应后，我们才能获取到数据，因此这天生就需要用异步思维来操作。
+
+由于Angular中已经自带RxJS，所以我们只要在需要使用的时候，引入即可使用：
+
+### 3.改造数据获取方式
+了解完RxJS的一些概念后，我们开始改造下这些书本的数据获取方式。
+
+* 改造`BooksService`
+
+首先我们从 RxJS 中导入 `Observable` 和 `of` 符号：
+```js
+// books.service.ts
+import { Observable, of } from 'rxjs';
+```
+**知识点**：
+`Observable`: 观察者模式中的观察者，具体可以参考 [Angular修仙之路 RxJS Observable](http://www.semlinker.com/rxjs-observable/)
+`of`: 用来获取观察者拿到的数据，通常是一个`Observable`。
+
+然后修改`getBookList`方法
+```js
+// books.service.ts
+getBookList(): Observable暂无信息
+
+
+```
+**代码解释**：
+`*ngIf="historyservice.history.length"`，是为了防止还没有拿到历史数据，导致后面的报错。
+`(click)="historyservice.clear()"`, 绑定我们服务中的`clear`事件，实现清除缓存。
+`*ngFor="let item of historyservice.history"`，将我们的历史数据渲染到页面上。
+
+
+到了这一步，就能看到历史数据了，每次也换到首页，都会增加一条。
+
+
+
+接下来，我们要在书本详情页也加上历史记录的统计，导入文件，注入服务，然后改造`getBooks`方法，实现历史记录的统计：
+```js
+// detail.component.ts
+import { HistoryService } from '../history.service';
+
+export class DetailComponent implements OnInit {
+ constructor(
+ private route: ActivatedRoute,
+ private location: Location,
+ private booksservice: BooksService,
+ private historyservice: HistoryService
+ ) { }
+ //...
+ getBooks(id: number): void {
+ this.books = this.booksservice.getBook(id);
+ this.historyservice.add(`查看书本${this.books.title}，id为${this.books.id}`);
+ console.log(this.books)
+ }
+}
+```
+
+
+这时候就可以在历史记录中，看到这些操作的记录了，并且**清除**按钮也正常使用。
+
+## 七、HTTP改造
+原本我只想写到上一章，但是想到，我们实际开发中，哪有什么本地数据，基本上数据都是要从服务端去请求，所以这边也有必要引入这一张，模拟实际的HTTP请求。
+
+### 1.引入HTTP
+在这一章，我们使用Angular提供的 `HttpClient` 来添加一些数据持久化特性。
+然后实现对书本数据进行**获取，增加，修改，删除和查找**功能。
+
+`HttpClient`是Angular通过 HTTP 与远程服务器通讯的机制。
+
+这里我们为了让`HttpClient`在整个应用全局使用，所以将`HttpClient`导入到根模块`app.module.ts`中，然后把它加入 `@NgModule.imports` 数组：
+```js
+import { HttpClientModule } from '@angular/common/http';
+@NgModule({
+ //...
+ imports: [
+ BrowserModule,
+ AppRoutingModule,
+ HttpClientModule
+ ],
+ //...
+})
+```
+
+这边我们使用 [内存 Web API（In-memory Web API） ](https://github.com/angular/in-memory-web-api)模拟出的远程数据服务器通讯。
+**注意：** 这个内存 Web API 模块与 Angular 中的 HTTP 模块无关。
+
+通过下面命令来安装：
+```sh
+npm install angular-in-memory-web-api --save
+```
+然后在`app.module.ts`中导入 `HttpClientInMemoryWebApiModule` 和 `InMemoryDataService` 类（后面创建）：
+```js
+// app.module.ts
+import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api';
+import { InMemoryDataService } from './in-memory-data.service';
+@NgModule({
+ // ...
+ imports: [
+ // ...
+ HttpClientInMemoryWebApiModule.forRoot(
+ InMemoryDataService, {dataEncapsulation:false}
+ )
+ ],
+ // ...
+})
+export class AppModule { }
+```
+**知识点：**
+`forRoot()` 配置方法接受一个 InMemoryDataService 类（初期的内存数据库）作为参数。
+
+然后我们要创建`InMemoryDataService`类：
+```sh
+ng g service InMemoryData
+```
+并将生成的`in-memory-data.service.ts`修改为：
+```js
+// in-memory-data.service.ts
+import { Injectable } from '@angular/core';
+import { InMemoryDbService } from 'angular-in-memory-web-api';
+import { Books } from './books';
+@Injectable({
+ providedIn: 'root'
+})
+export class InMemoryDataService implements InMemoryDbService {
+ createDb(){
+ const books = [
+ {
+ id: 1,
+ url: 'https://img3.doubanio.com/view/subject/m/public/s29988481.jpg',
+ title: '像火焰像灰烬',
+ author: '程姬',
+ },
+ // 省略其他9条数据
+ ];
+ return {books};
+ }
+ constructor() { }
+}
+```
+
+这里先总结`InMemoryDbService`所提供的RESTful API，后面都要用到：
+例如如果`url`是`api/books`，那么
+* 查询所有成员：以**GET**方法访问`api/books`
+* 查询某个成员：以**GET**方法访问`api/books/id`，比如`id`是`1`，那么访问`api/books/1`
+* 更新某个成员：以**PUT**方法访问`api/books/id`
+* 删除某个成员：以**DELETE**方法访问`api/books/id`
+* 增加一个成员：以**POST**方法访问`api/books`
+
+
+### 2.通过HTTP请求数据
+
+现在要为接下来的网络请求做一些准备，先在`books.service.ts`中引入HTTP符号，然后注入`HttpClient`并改造：
+```js
+// books.service.ts
+import { HttpClient, HttpHeaders} from '@angular/common/http';
+// ...
+export class BooksService {
+ constructor(
+ private historyservice: HistoryService,
+ private http: HttpClient
+ ) { }
+ private log(histories: string){
+ this.historyservice.add(`正在执行：${histories}`)
+ }
+ private booksUrl = 'api/books'; // 提供一个API供调用
+ // ...
+}
+```
+这里我们还新增一个私有方法`log`和一个私有变量`booksUrl`。
+
+接下来我们要开始发起http请求数据，开始改造`getBookList`方法：
+```js
+// books.service.ts
+// ...
+getBookList(): Observable操作历史：
+
+
+
+{{item}}
+
+
+```
+这边切记一点，一定要在`app.module.ts`中引入 `FormsModule`模块，并在`@NgModule`的`imports`中引入，不然要报错了。
+```js
+// app.module.ts
+// ...
+import { FormsModule } from '@angular/forms';
+@NgModule({
+ // ...
+ imports: [
+ // ...
+ FormsModule
+ ],
+ // ...
+})
+```
+`input`框绑定书本的标题`books.title`，而保存按钮绑定一个`save()`方法，这里还要实现这个方法：
+```js
+// detail.component.ts
+save(): void {
+ this.historyservice.updateBooks(this.books)
+ .subscribe(() => this.goBack());
+}
+goBack(): void {
+ this.location.back();
+}
+```
+这里通过调用`BooksService`的`updateBooks`方法，将当前修改后的书本信息修改到源数据中，这里我们需要去`books.service.ts`中添加`updateBooks`方法：
+```js
+// books.service.ts
+// ...
+updateBooks(books: Books): Observable修改信息：
+ + + +
+
+```
+初始化添加书本的数据：
+```js
+// add.component.ts
+// ...
+import { Books } from '../books';
+import { BooksService } from '../books.service';
+import { HistoryService } from '../history.service';
+import { Location } from '@angular/common';
+export class AddComponent implements OnInit {
+ books: Books = {
+ id: 0,
+ url: '',
+ title: '',
+ author: ''
+ }
+ constructor(
+ private location: Location,
+ private booksservice: BooksService,
+ private historyservice: HistoryService
+ ) { }
+ ngOnInit() {}
+ add(books: Books): void{
+ books.title = books.title.trim();
+ books.author = books.author.trim();
+ this.booksservice.addBooks(books)
+ .subscribe( book => {
+ this.historyservice.add(`新增书本${books.title}，id为${books.id}`);
+ this.location.back();
+ });
+ }
+}
+```
+然后在`books.service.ts`中添加`addBooks`方法，来添加一本书本的数据：
+```js
+// books.service.ts
+addBooks(books: Books): Observable添加书本：
+ + + + + +
+
\ No newline at end of file
diff --git "a/Cute-Angular/books\351\241\271\347\233\256demo/books_angular/src/app/add/add.component.spec.ts" "b/Cute-Angular/books\351\241\271\347\233\256demo/books_angular/src/app/add/add.component.spec.ts"
new file mode 100644
index 00000000..fdcddf4c
--- /dev/null
+++ "b/Cute-Angular/books\351\241\271\347\233\256demo/books_angular/src/app/add/add.component.spec.ts"
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AddComponent } from './add.component';
+
+describe('AddComponent', () => {
+ let component: AddComponent;
+ let fixture: ComponentFixture添加书本：
+ + + + + +
+
+《{{books.title}}》介绍
+
+
+
+ 书本标题: {{books.title}}
+书本作者: {{books.author}}
+书本id: {{books.id}}
+
+
+
+暂无信息
+
+
\ No newline at end of file
diff --git "a/Cute-Angular/books\351\241\271\347\233\256demo/books_angular/src/app/detail/detail.component.spec.ts" "b/Cute-Angular/books\351\241\271\347\233\256demo/books_angular/src/app/detail/detail.component.spec.ts"
new file mode 100644
index 00000000..149b9be7
--- /dev/null
+++ "b/Cute-Angular/books\351\241\271\347\233\256demo/books_angular/src/app/detail/detail.component.spec.ts"
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DetailComponent } from './detail.component';
+
+describe('DetailComponent', () => {
+ let component: DetailComponent;
+ let fixture: ComponentFixture修改信息：
+ + +
+
\ No newline at end of file
diff --git "a/Cute-Angular/books\351\241\271\347\233\256demo/books_angular/src/app/history/history.component.spec.ts" "b/Cute-Angular/books\351\241\271\347\233\256demo/books_angular/src/app/history/history.component.spec.ts"
new file mode 100644
index 00000000..f68be4f2
--- /dev/null
+++ "b/Cute-Angular/books\351\241\271\347\233\256demo/books_angular/src/app/history/history.component.spec.ts"
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HistoryComponent } from './history.component';
+
+describe('HistoryComponent', () => {
+ let component: HistoryComponent;
+ let fixture: ComponentFixture操作历史：
+
+
+
+{{item}}
+
+
\ No newline at end of file
diff --git "a/Cute-Angular/books\351\241\271\347\233\256demo/books_angular/src/app/index/index.component.spec.ts" "b/Cute-Angular/books\351\241\271\347\233\256demo/books_angular/src/app/index/index.component.spec.ts"
new file mode 100644
index 00000000..03122420
--- /dev/null
+++ "b/Cute-Angular/books\351\241\271\347\233\256demo/books_angular/src/app/index/index.component.spec.ts"
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { IndexComponent } from './index.component';
+
+describe('IndexComponent', () => {
+ let component: IndexComponent;
+ let fixture: ComponentFixture
+
+
+
+回顾这一年，几句总结：
+> 再忙也要留点学习进步的时间；
+> 再小的事，都是未来的基石；
+
+## 零、与人为善
+
+
+## 一、2019 计划完成情况
+
+每年总结，写到回顾去年计划完成情况，各种事情便仿佛在眼前一闪而过。翻起去年[《130-【总结】2019全年计划》](http://pingan8787.com/2019/01/12/130-%E3%80%90%E6%80%BB%E7%BB%93%E3%80%912019%E5%85%A8%E5%B9%B4%E8%AE%A1%E5%88%92/)，隐约闻到时间的味道，还有太阳的味道，不知你们会不会这样觉得。
+
+先放几张这一年的代码 push 记录，累加起来接近一整年啦：
+
+* **Github**：
+
+
+
+* **Gitlab**：
+
+
+
+* **Gitee**：
+
+
+
+
+### 1. 回顾学习规划
+
+回顾今年学习规划，学习的知识范围更集中了，也做到知识沉淀，将沉淀的知识转化为自己的文章，并同步到各个前端技术社区、[博客](htt://www.pingan8787.com)和[语雀](https://www.yuque.com/wangpingan/cute-frontend)上。
+
+下面将几部分内容分别总结下：
+
+* **前端知识**
+
+前端基础知识，整理了包括 JavaScript / ECAMScript / TypeScript / HTTP / 数据结构与算法 / 正则表达式 / Hybrid / 设计模式 等一系列基础入门知识的文章。
+
+前端框架知识，整理了包括 Webpack / Angular / GraphQL / React / MobX 几个框架的基础入门知识的文章。
+
+今年也学习很多其他知识，包括 JSBridge / 前端原生端交互 / ionic-native 原理 / Auto2 / CSRF和CORS / Restful等等等等。
+
+很多已经汇总在[《Cute-Frontend》](https://www.yuque.com/wangpingan/cute-frontend)中。
+
+* **后端知识**
+
+学习 Eggjs + Mongodb + Redis ，并开发团队内部项目网盘项目，说真的也是学习了很多后端开发的思维。
+另外今年也有使用 Nodejs 写了几个简单工具，如：Fiddler 请求接口时间统计工具 / Excel 公众号数据清洗工具。
+
+* **个人品牌**
+
+公众号【前端自习课】：今年满勤，截止今天已经连续推送 461 篇（含删除/未获得白名单的转载/发重复），粉丝数涨了约 11 倍（从2019/7/24开始），阅读量稳定 160+（自然）。
+
+个人博客：将自己在其他社区发的文章都同步到博客，原创文章 57 篇，未达标。
+
+其他社区：今年推送的文章分享的平台包括：[掘金](https://juejin.im/user/586fc337a22b9d0058807d53/posts)、[思否](https://segmentfault.com/blog/pingan8787)、[知乎](https://zhuanlan.zhihu.com/cute-javascript)、[CSDN](https://blog.csdn.net/qq_36380426)、[语雀](https://www.yuque.com/wangpingan/cute-frontend)、[简书](https://www.jianshu.com/u/2ec5d94afd60)、[慕课手记](https://www.imooc.com/u/3591250/articles)还有自己[博客](http://www.pingan8787.com)和 [github](https://github.com/pingan8787)。掘金粉丝 4429 未达标，点赞数 8862 也未达标。
+
+[Github Reading](https://github.com/pingan8787/Leo_Reading/issues)：今年满勤，截止这个月已经连续打卡 30 个月了。
+
+### 2. 回顾工作规划
+
+工作上，对于迭代需求任务，已经养成开发前核对需求，提测前核对UI稿和原型稿这样的习惯，几次迭代任务实现 0 BUG。
+
+这一年也向团队前端学习了很多，为人处世，工作方式，工作技能等等。对于公司产品，今年积极参与各种运营活动（学习打卡、点赞活动、学习任务等），也发表一些自己对产品的看法，两个专栏号持续输出中。
+
+### 3. 回顾生活规划
+
+生活的规划中，2019年，熬夜少了很多，基本12点准时关电脑睡觉，除了自己喜欢的球赛啦~
+
+锻炼这方面也是陆陆续续，唯一做得好的可能就是坚持自己做早饭，牛奶燕麦，白米粥，绿豆粥，燕麦粥，烤面包，煎蛋，水煮蛋，培根鸡蛋堡，今年的早餐都是这些，也比较清淡。
+
+宿舍没换，不过住得舒适呀，另外独自去了很多地方，骑行 1100+ 公里：
+
+
+
+达成厦门岛换到骑行🚴的个人记录：
+
+
+
+
+## 二、2019 总结和分析
+
+老套路，继续按照每个类型选一件事情来说：
+
+### 2019 最正确的一件事
+
+回顾这一整年，发生的事情真的很多，做得正确的事情也很多，从对于职业生涯和自身性格出发，我觉得2019我做得最正确的一件事是**12月份去杭州参加语雀知识大会**，我也总结一篇[《北上 寻“雀”》](https://www.yuque.com/wangpingan/cute-frontend/uf68aa)。
+
+这趟三天旅行，是我独自一人制定所有行程和计划，我逛了阿里巴巴、支付宝、蚂蚁金服、湖畔花园这些互联网传奇的地方，也去了西湖、雷峰塔、钱塘江大桥、京杭大运河、浙江大学、黄龙洞等等。
+
+也面基玉伯大佬，并拿到签名与合影，😄哈哈。
+
+
+
+这次行程，很大程度拓展我的视野，一些只在互联网上存在的庞然大物，原来也是离我这么近的，并且今年有一次蚂蚁金服的面试，虽然挂了，还是自身本领不够。
+
+很多时候，人的眼界格局一下子产生变换，很多失败，我都将之视为经验，未来，再来。
+
+### 2019 最错误的一件事
+
+这应该算是那次顶撞母亲的事情，被催相亲催到发脾气，顶撞母亲，实在惭愧惭愧，虽然已经和母亲交谈，但心里还是挺惭愧。
+
+### 2019 最开心的一件事
+
+当然属于公众号【前端自习课】，全年满勤，截止今天已经连续推送 461 篇（含删除/未获得白名单的转载/发重复），粉丝数涨了约 11 倍（从2019/7/24开始），阅读量稳定 160+（自然）。
+
+公众号的初衷，是想**看看自己能坚持做这件事情做多久**，后面发现，做这个事情特别有意义，对我对他人都是。
+
+对我而已，是自己学习的素材库，坚持的动力，也是和圈子交流的话题。
+
+对他人而言，这也许是他们发现宝藏的时刻。
+
+* **[【前端自习课】的2019](https://cu2019.newrank.cn/h5.html?n=5903fb7)**
+
+2019.07.24 开始正式向外部宣传，至今收获 2300+ 粉丝，一个 100+ 人微信群。
+
+累计 3W 阅读量，693 个在看，362 天发布， 404 篇文章， 89 篇原创 ，267W 字...
+
+
+
+另外今年也将为【前端自习课】开发了[文章分类大全，点击链接即可体验](https://blog.pingan8787.com/weixin/index.html)，另外也有小程序，只是小程序有现在无法打开公众号文章。
+
+## 三、思考自省
+
+21世纪20年代已经开始。
+
+总结过往 10 年，人生两大事情改变了我，人的生老病死，爱情的现实。
+
+既然遇到了，那我就积极、勇敢面对，去改变。
+
+这 10 年，从一个娇生惯养的小孩，到一心只有这个家的年轻人，双手不再稚嫩，双肩不再轻荡。
+
+努力做好自己，强大自己，去学习，去进步。
+
+这 10 年，我尽力了。
\ No newline at end of file
diff --git "a/Cute-Article/article/2019-\345\205\250\345\271\264\350\256\241\345\210\222.md" "b/Cute-Article/article/2019-\345\205\250\345\271\264\350\256\241\345\210\222.md"
new file mode 100644
index 00000000..e4716209
--- /dev/null
+++ "b/Cute-Article/article/2019-\345\205\250\345\271\264\350\256\241\345\210\222.md"
@@ -0,0 +1,100 @@
+****
+|Author|王平安|
+|---|---|
+|E-mail|pingan8787@qq.com|
+|博 客|www.pingan8787.com|
+|微 信|pingan8787|
+|每日文章推荐|https://github.com/pingan8787/Leo_Reading/issues|
+|JS小册|js.pingan8787.com|
+****
+
+> 我相信每个人都是幸运，而且聪明。
+> 厚积才能薄发，基础牢固才能做好。
+> 做出改变，做好调整，接受挑战，对自己有好处。
+> 自律很重要。
+
+以上是摘自我的《2018-全年计划》(这里就不放地址了)
+
+也许还有一句，我比较喜欢的：你在成就公司，公司也在成就你
+
+2019年对我来说，应该会变得更加理性，为人处世，日常生活，今年剩下的12个月（到2020年春节前），计划依旧分三方面：`工作`、`学习`和`生活`。
+
+# 1、工作
+今年我会坚持在现在公司沉淀自己，完善自己，也多为公司出力。对于现在公司，我挺满意，产品也好，技术氛围也好，学习氛围还有同事间的氛围，我觉得都很符合我的理想工作环境。而且公司给我们提供很多很棒的资源，如**技术分享会**，**书籍借阅**，**设备支持**，**实践机会**等等，所以今年要利用好这些呢。
+今年呢，工作上有这样的安排：
+1. 跟着公司项目的脚步，学习和开发，另外在需求提交之前，一定要做好UI稿**核对**，原型逻辑**核对**等，减少BUG。
+2. 与小伙伴们分享自己的**知识总结**和**技术分享**，锻炼自己，思路和思维。
+3. 向公司老大前辈们学习，对于一些**问题的处理方式**，和**管理团队的方式**等。
+4. 努力尝试能为公司写一些工具，**简化工作流程**，或者**提高工作效率**等。
+5. 多**使用公司产品**，**参与产品运营**，发现问题，提出改善意见等。
+6. 研究一套项目基础架构（如公司现在这一套`flutter`的架构）。
+
+这一年工作上，会有更多的挑战，已经能感受到了，还是必须要相信自己，踩坑填坑踩坑填坑...，增长经验沉淀技术咯。
+
+# 2.学习
+经过这两年的程序员学习和工作生涯，也算是找到一套自己的学习方法，也是挺适合自己，相信今年的学习之路，效率和质量会高一些。
+今年的话，学习的内容会更加集中，而不会想去年那样涉及那么多方面：
+
+## 2.1学习内容
+
+**前端知识（核心）**：
+1. 前端基础：基础依然非常重要，今年需要更深入研究`JavaScript原理层面`（如引擎原理，工作原理等），还有CSS的一些不太常用的知识，另外ES规范还需复习，特别是如`Proxy`/`Set`和`Map`这类用的比较少的，但是用起来效率又特别高的这类知识。
+2. 前端框架：`Angular6`（也有可能升级到7）这个必须学会，而且能用在工作中使用，也需要针对一些知识点去研究原理（这方面可以多跟宝哥还有其他人学习），其他框架，就不需要太去研究，现在觉得学好一个框架，研究清楚原理，其他都会是一样的。
+3. 前端趋势：把握和跟进前端的发展趋势，新技术，新工具等，学着了解未来的变化。
+
+**后端知识**：
+1. 服务端开发：今年需要把`Nodejs`用于工作中了，开发一些工具，提高公司的开发效率，还是使用`Express`和`Koa`，重点朝`Koa`方向。
+2. 数据库开发：搭配服务端开发，使用`Mongodb`和它延伸出来的`Mongoose`进行实际应用。
+
+**混合开发**：
+1. APP开发：熟练mac环境开发，学习`flutter`，并且开始使用到公司的一些模块上面（看老大安排），毕竟这个技术很棒，今年自己也要自己开发一个App（demo会是现在在开始的TIMI，正式的后面再规划），`RN`和`Weex`今年不会花时间去研究，除非公司业务需要。
+
+**博客**：
+1. 个人博客：内容改版，新增栏目（待定），“作品”这个栏目内容要充实上去，同步自己在其他平台推送的文章。今年希望将【原创文章】突破到60篇（目前17篇）。
+2. Cute-JavaScrip：需要添加功能，访问量统计（博客也需要，使用百度流量统计），另外【JS基础系列】【面试题系列】必须完成，有空也需要改一改之前的文章。
+3. github：开源新项目，目前暂定2个（Flutter的两个），将学习过程中生产的一些笔记和代码，整理后也放到github上。另外【每日文章】继续维护，坚持第三年。
+4. 掘金/思否/CSDN/简书：各个平台同步自己的原创文章，首发掘金，另外掘金今年加油**粉丝突破5000**，**点赞突破1W**（虽然不太看重这些）。
+
+5. 公众号：继续维护，每日一篇，不做宣传，不去吸粉，只想积累，也许某一天，一个幸运的粉丝发现了它，希望能让他有种如获至宝的感觉。截至今天已经发了第106期
+
+**机器学习**：
+1. 深度学习：`tensorflow.js`有必要尝试下，毕竟对图像识别还是挺有兴趣的呢。
+
+**技术书籍**：
+1. CSS：《CSS世界》（喜欢）。
+2. JS：《你不知道的JavaScript》上中下，也是加强基础和原理理解。
+3. 算法：《算法图解》和《学习JavaScript数据结构与算法》（这本之前看过，但没看完），主要还是要多刷题，好的算法能提高代码质量和效率。
+书太多，要取舍，研究好几本就好。
+4. 架构：《前端技术架构》这本需要结合自己工作再去看。
+
+**非技术书籍**：
+1. 《地球上最后的夜晚》和《南方高速》，尝试着去理解作者想表达的思想和道理。
+
+## 2.2小结
+这学习计划，看上去真的多，但是在我看来，这些都是必须学的。
+所以，这当做是一整年的计划，我还需要拆分到具体的时间上面，做安排。
+坚持！
+自律！
+
+# 3.生活
+生活，我向往简单，人和事。
+新公司加班的现象比较常见，但是也是给我提供很多的学习机会。
+这一年的生活，应该是健康，且有更多幸福感的。
+
+**日常生活**：
+1. 业余生活：少熬夜（必须少熬夜），多锻炼（早操和睡前锻炼要坚持），坚持能自己做饭尽量自己做饭（早餐不吃外面），学习做饭做菜（找老妈讨教，换宿舍以后），毕竟我有做饭神器——小米电饭煲和小米电磁炉，研究下健康食谱。
+2. 住宿条件：换个宿舍，不用多么高档，安静舒适，适合自己或者和未来女票。
+3. 旅游：出去旅游一次，国内外都行（现在护照港澳通行证都有），需要旅游一次放松也开阔下视野。
+
+**家庭生活**：
+1. 未来的她：还需要好好加油，一起加油，一起做一件事的感觉会非常好。
+2. 母亲：为母亲分担更多的压力，每个月多汇钱给母亲，帮忙开个店铺给母亲做，照顾好母亲。
+3. 哥哥姐姐：常回家看看，多跟他们交流，今年找个项目再和哥哥一起做，亲兄弟团结。另外哥哥今年结婚，我要给他包个很大的红包。
+
+2019全年规划基本如此，不论多与少，需要分配好，偶尔迷茫的时候，会给我带来动力。和去年一样，加油让自己24小时过程26小时。
+
+沉淀自己，自律生活，为人和善，为公司，为家庭，也为自己。
+
+
+
+leo 2019.01.12
\ No newline at end of file
diff --git "a/Cute-Article/article/2020-\345\205\250\345\271\264\350\256\241\345\210\222.md" "b/Cute-Article/article/2020-\345\205\250\345\271\264\350\256\241\345\210\222.md"
new file mode 100644
index 00000000..e69de29b
diff --git "a/Cute-Article/article/2020\345\205\250\345\271\264\346\200\273\347\273\223.md" "b/Cute-Article/article/2020\345\205\250\345\271\264\346\200\273\347\273\223.md"
new file mode 100644
index 00000000..5cfc97f2
--- /dev/null
+++ "b/Cute-Article/article/2020\345\205\250\345\271\264\346\200\273\347\273\223.md"
@@ -0,0 +1,175 @@
+
+> 生活不可能像你想象的那么好，但也不会像你想象的那么糟。我觉得人的脆弱和坚强都超乎自己的想像，有时我脆弱得一句话就泪流满面，有时又发现自己咬着牙走了很长的路。
+
+回看 2020，我更加喜爱这句话了，每个小句子都有了不同味道。
+
+## 一、再见 2020 👋
+2020疫情复工后，我便开始进入“战斗模式”，深受公众号“全栈修仙之路”作者“[阿宝哥](https://juejin.cn/user/764915822103079)”影响🌟，开始把更多时间和精力用来修炼自身，努力成长和进阶，成为一位“靠谱的人”和一名“T 型人才”。
+
+- 靠谱的人：让自己靠谱，让别人放心；
+- T 型人才：深挖知识深度，拓展知识广度。
+
+（以下数据统计的时间，全部以 2020-12-19 日截止）
+
+🤗🤗🤗
+
+### 1. 走过的路
+
+疫情期间为了不给国家添麻烦，咱就天天家里窝着，闲来无事就给“貔貅”拍拍照啥的😎。
+
+
+
+
+复工后，骑上我的“绿豆”去了好多地方（快把厦门岛逛透透了），算是把疫情期间没去玩的地方都补上了🤠。
+
+
+
+还有这杯意义不同的咖啡，和一句“心之所在即为家”😜。
+
+
+
+当然，除了玩，这一年也做了很多重要的事情😊。
+
+2020 年，写了很多文章（包含未发布），基本都放在语雀上。数一数，将近 **150** 篇文档是在 2020 年完成的🤔。
+
+
+
+除了文章，我也画了很多图，慢慢形成自己的画图风格。
+
+
+
+当然，代码还是少不了的😎。
+
+程序员嘛，当然要看看代码提交次数，这一年提交了这些代码，感觉 [Github](https://github.com/pingan8787) + Gitlab + [Gitee](https://gitee.com/pingan8787) 三个提交记录合并一下，都快铺满了。
+
+1. Github 提交记录
+
+
+
+2. Gitlab 提交记录
+
+
+
+3. Gitee（码云） 提交记录
+
+
+
+
+另外自己的微信公众号“前端自习课”也完成“**连续推送 810+ 天**”的成绩，这一年，我也玩起短视频，视频号了，也开始自己做动画，将一些知识点通过动画和大家分享，视频可以查看[《1分钟了解 Axios 拦截器实现原理》](https://mp.weixin.qq.com/s/1s4_WXCZscB6MXsVP3lbzQ)。
+
+
+
+2020 这一年还有很多事情想和大家分享，考虑到本文主旨和内容篇幅，就不再多介绍咯～有兴趣的朋友欢迎私聊我（微信：pingan8787）💘。
+
+### 2. 感谢的人
+今年最需要感谢的，是**阿宝哥**和我们“**前端突击队**”**学习小组**的每位小伙伴啦💐～
+
+🌰最大感受是：原来前端还能这样玩！
+🌰最开心的是：团队学习更有动力，你不是一个人在战斗！
+
+在阿宝哥指导下，整理了一份自己的前端技能树，才知道自己的前端技能有几斤几两重，也才有更多动力和更清晰的方向。
+
+
+
+在我们学习小组中，采用“**专题学习 + 总结输出**”的方式一起学习，目前已经沉淀 **200+ **篇文章啦！
+小组目前 7 人（不含班主任），平均下来每人将近写了 30+ 篇！为小伙伴们点赞👍~
+
+
+
+2020 年 11 月的某一天，思考了最近学习的知识和接下来的需要做的事情，于是有了下面的这篇字数少，内容多的笔记（用手机敲的，就是有点手酸🙁）：
+
+
+
+慢慢的，越来越发现，学得越多，发现自己要学的越多。🤣
+
+这里再次感谢阿宝哥，感谢“前端突击队”的小伙伴们。未来继续冲🦆！
+
+### 3. 遗憾的事
+这一年，比较遗憾的事，是自己与阿里插肩而过呀🥺～倒也让我发现更多不足。
+
+
+
+这里也非常感谢内推的小伙伴，还有几位面试官，人都挺不错。😃
+
+我们闽南人嘛，喜欢“爱拼才会赢”，所以，趁年轻多拼多创。
+
+### 4. 点赞的事
+这一年为自己坚持的几件事情点赞~
+①自己微信公众号“前端自习课”连续推送 810+ 天文章，为此我把所有文章分类做了一张词云图，如下:
+
+
+
+可以看出，我主要分享的内容包括：“JS”、“CSS”、“拓展”和“Web技术”。🔔
+
+②自己坚持的每月学习文章整理，也超过 40+ 个月了，截图如下：
+
+详细请看 github 地址：[https://github.com/pingan8787/Leo_Reading](https://github.com/pingan8787/Leo_Reading)
+
+
+
+## 二、你好 2021 👏
+2021 年即将到来，希望新的一年，每一个“下次一定”都能实现完成承诺。
+
+⚽️⚽️⚽️
+
+### 1. 加油，前端工程师
+在这前端生涯的第五年伊始，回想自己踩过的坑，走过的弯路，才慢慢领悟自己的前端生涯应该如何去走。
+
+曾经和多数人一样，时常迷失学习什么知识，看到什么火，就去学什么，到头来，效果并不好。
+
+未来自己的前端生涯，更应该站在巨人肩膀上，看向更远的地方。定个小目标呗，早日晋升技术专家。
+
+接下来的时间里，做好自己在工作中的身份，做一个优秀的前端工程师。
+
+
+
+### 2. 加油，小儿子
+作为家中最小的孩子，被催婚已经成为这一年的常事，哈哈。
+
+也许性格如此，加上独自在外工作，每天只想把事情做得更好，学更多知识，提升自己的价值。
+
+很幸运这一年遇到了女孩 C。
+
+接下来的时间里，做好自己在家里的身份，做一个让父母放心的好儿子。
+
+
+
+### 3. 加油，骑行侠
+我这人，兴趣爱好不太多，比如：骑行🚴、足球⚽️、敲代码💻。
+
+骑行让我如此着迷。
+
+换上衣服，12 月的寒风，也依然无法阻挡我的脚步。
+
+接下来的时间里，坚持自己的热爱，做一个勇往直前大胆创的闽南人。
+
+
+
+### 4. 加油，前端自习课
+
+运营公众号“前端自习课”以后，认识了许多小伙伴，看见了许多从前的自己。
+
+后来也慢慢和大家分享一些自己的经验和经历。
+
+深刻记得，我简历中最后一句话：“希望自己的成⻓之路能帮助更多人，也希望在这个世界留下自己的一些足迹”。
+
+接下来的时间里，坚持自己的初心，做一个对这个社区、这个社会有帮助的人。
+
+
+## 三、总结
+每一年的总结，都是五味杂陈，才发现这一年来，自己又进步和成长了。
+
+回顾篇头的一句话：“有时又发现自己咬着牙走了很长的路”。有时候一瞬间，一个偶然，发现自己原来咬着牙前进这么久，改变这么多。
+
+最后，再思考一句话，希望对大家能有不同感受：
+
+> 除去睡眠，人的一生有一万多天。但是人与人之间的区别就在于，你究竟是活了一万多天，还是仅仅活了一天，却重复了一万多次。
+
+希望未来的我们，会感到自己的每一天都是崭新的。
+
+像武磊一样努力，加油！
+
+最后欢迎关注我呀~
+[](http://www.pingan8787.com)[](https://www.yuque.com/wangpingan/cute-frontend)[](https://zhuanlan.zhihu.com/cute-javascript)[](https://juejin.im/user/586fc337a22b9d0058807d53/posts)[](https://segmentfault.com/blog/pingan8787)[](https://blog.csdn.net/qq_36380426)[](https://www.jianshu.com/u/2ec5d94afd60)
+
+ [掘金年度征文 | 2020 与我的技术之路 征文活动正在进行中......](https://juejin.cn/post/6901125532729999374)
\ No newline at end of file
diff --git "a/Cute-Article/article/21 \345\274\240\345\233\276\346\200\273\347\273\223\346\210\221\347\232\204 2020 \345\271\264.md" "b/Cute-Article/article/21 \345\274\240\345\233\276\346\200\273\347\273\223\346\210\221\347\232\204 2020 \345\271\264.md"
new file mode 100644
index 00000000..5cfc97f2
--- /dev/null
+++ "b/Cute-Article/article/21 \345\274\240\345\233\276\346\200\273\347\273\223\346\210\221\347\232\204 2020 \345\271\264.md"
@@ -0,0 +1,175 @@
+
+> 生活不可能像你想象的那么好，但也不会像你想象的那么糟。我觉得人的脆弱和坚强都超乎自己的想像，有时我脆弱得一句话就泪流满面，有时又发现自己咬着牙走了很长的路。
+
+回看 2020，我更加喜爱这句话了，每个小句子都有了不同味道。
+
+## 一、再见 2020 👋
+2020疫情复工后，我便开始进入“战斗模式”，深受公众号“全栈修仙之路”作者“[阿宝哥](https://juejin.cn/user/764915822103079)”影响🌟，开始把更多时间和精力用来修炼自身，努力成长和进阶，成为一位“靠谱的人”和一名“T 型人才”。
+
+- 靠谱的人：让自己靠谱，让别人放心；
+- T 型人才：深挖知识深度，拓展知识广度。
+
+（以下数据统计的时间，全部以 2020-12-19 日截止）
+
+🤗🤗🤗
+
+### 1. 走过的路
+
+疫情期间为了不给国家添麻烦，咱就天天家里窝着，闲来无事就给“貔貅”拍拍照啥的😎。
+
+
+
+
+复工后，骑上我的“绿豆”去了好多地方（快把厦门岛逛透透了），算是把疫情期间没去玩的地方都补上了🤠。
+
+
+
+还有这杯意义不同的咖啡，和一句“心之所在即为家”😜。
+
+
+
+当然，除了玩，这一年也做了很多重要的事情😊。
+
+2020 年，写了很多文章（包含未发布），基本都放在语雀上。数一数，将近 **150** 篇文档是在 2020 年完成的🤔。
+
+
+
+除了文章，我也画了很多图，慢慢形成自己的画图风格。
+
+
+
+当然，代码还是少不了的😎。
+
+程序员嘛，当然要看看代码提交次数，这一年提交了这些代码，感觉 [Github](https://github.com/pingan8787) + Gitlab + [Gitee](https://gitee.com/pingan8787) 三个提交记录合并一下，都快铺满了。
+
+1. Github 提交记录
+
+
+
+2. Gitlab 提交记录
+
+
+
+3. Gitee（码云） 提交记录
+
+
+
+
+另外自己的微信公众号“前端自习课”也完成“**连续推送 810+ 天**”的成绩，这一年，我也玩起短视频，视频号了，也开始自己做动画，将一些知识点通过动画和大家分享，视频可以查看[《1分钟了解 Axios 拦截器实现原理》](https://mp.weixin.qq.com/s/1s4_WXCZscB6MXsVP3lbzQ)。
+
+
+
+2020 这一年还有很多事情想和大家分享，考虑到本文主旨和内容篇幅，就不再多介绍咯～有兴趣的朋友欢迎私聊我（微信：pingan8787）💘。
+
+### 2. 感谢的人
+今年最需要感谢的，是**阿宝哥**和我们“**前端突击队**”**学习小组**的每位小伙伴啦💐～
+
+🌰最大感受是：原来前端还能这样玩！
+🌰最开心的是：团队学习更有动力，你不是一个人在战斗！
+
+在阿宝哥指导下，整理了一份自己的前端技能树，才知道自己的前端技能有几斤几两重，也才有更多动力和更清晰的方向。
+
+
+
+在我们学习小组中，采用“**专题学习 + 总结输出**”的方式一起学习，目前已经沉淀 **200+ **篇文章啦！
+小组目前 7 人（不含班主任），平均下来每人将近写了 30+ 篇！为小伙伴们点赞👍~
+
+
+
+2020 年 11 月的某一天，思考了最近学习的知识和接下来的需要做的事情，于是有了下面的这篇字数少，内容多的笔记（用手机敲的，就是有点手酸🙁）：
+
+
+
+慢慢的，越来越发现，学得越多，发现自己要学的越多。🤣
+
+这里再次感谢阿宝哥，感谢“前端突击队”的小伙伴们。未来继续冲🦆！
+
+### 3. 遗憾的事
+这一年，比较遗憾的事，是自己与阿里插肩而过呀🥺～倒也让我发现更多不足。
+
+
+
+这里也非常感谢内推的小伙伴，还有几位面试官，人都挺不错。😃
+
+我们闽南人嘛，喜欢“爱拼才会赢”，所以，趁年轻多拼多创。
+
+### 4. 点赞的事
+这一年为自己坚持的几件事情点赞~
+①自己微信公众号“前端自习课”连续推送 810+ 天文章，为此我把所有文章分类做了一张词云图，如下:
+
+
+
+可以看出，我主要分享的内容包括：“JS”、“CSS”、“拓展”和“Web技术”。🔔
+
+②自己坚持的每月学习文章整理，也超过 40+ 个月了，截图如下：
+
+详细请看 github 地址：[https://github.com/pingan8787/Leo_Reading](https://github.com/pingan8787/Leo_Reading)
+
+
+
+## 二、你好 2021 👏
+2021 年即将到来，希望新的一年，每一个“下次一定”都能实现完成承诺。
+
+⚽️⚽️⚽️
+
+### 1. 加油，前端工程师
+在这前端生涯的第五年伊始，回想自己踩过的坑，走过的弯路，才慢慢领悟自己的前端生涯应该如何去走。
+
+曾经和多数人一样，时常迷失学习什么知识，看到什么火，就去学什么，到头来，效果并不好。
+
+未来自己的前端生涯，更应该站在巨人肩膀上，看向更远的地方。定个小目标呗，早日晋升技术专家。
+
+接下来的时间里，做好自己在工作中的身份，做一个优秀的前端工程师。
+
+
+
+### 2. 加油，小儿子
+作为家中最小的孩子，被催婚已经成为这一年的常事，哈哈。
+
+也许性格如此，加上独自在外工作，每天只想把事情做得更好，学更多知识，提升自己的价值。
+
+很幸运这一年遇到了女孩 C。
+
+接下来的时间里，做好自己在家里的身份，做一个让父母放心的好儿子。
+
+
+
+### 3. 加油，骑行侠
+我这人，兴趣爱好不太多，比如：骑行🚴、足球⚽️、敲代码💻。
+
+骑行让我如此着迷。
+
+换上衣服，12 月的寒风，也依然无法阻挡我的脚步。
+
+接下来的时间里，坚持自己的热爱，做一个勇往直前大胆创的闽南人。
+
+
+
+### 4. 加油，前端自习课
+
+运营公众号“前端自习课”以后，认识了许多小伙伴，看见了许多从前的自己。
+
+后来也慢慢和大家分享一些自己的经验和经历。
+
+深刻记得，我简历中最后一句话：“希望自己的成⻓之路能帮助更多人，也希望在这个世界留下自己的一些足迹”。
+
+接下来的时间里，坚持自己的初心，做一个对这个社区、这个社会有帮助的人。
+
+
+## 三、总结
+每一年的总结，都是五味杂陈，才发现这一年来，自己又进步和成长了。
+
+回顾篇头的一句话：“有时又发现自己咬着牙走了很长的路”。有时候一瞬间，一个偶然，发现自己原来咬着牙前进这么久，改变这么多。
+
+最后，再思考一句话，希望对大家能有不同感受：
+
+> 除去睡眠，人的一生有一万多天。但是人与人之间的区别就在于，你究竟是活了一万多天，还是仅仅活了一天，却重复了一万多次。
+
+希望未来的我们，会感到自己的每一天都是崭新的。
+
+像武磊一样努力，加油！
+
+最后欢迎关注我呀~
+[](http://www.pingan8787.com)[](https://www.yuque.com/wangpingan/cute-frontend)[](https://zhuanlan.zhihu.com/cute-javascript)[](https://juejin.im/user/586fc337a22b9d0058807d53/posts)[](https://segmentfault.com/blog/pingan8787)[](https://blog.csdn.net/qq_36380426)[](https://www.jianshu.com/u/2ec5d94afd60)
+
+ [掘金年度征文 | 2020 与我的技术之路 征文活动正在进行中......](https://juejin.cn/post/6901125532729999374)
\ No newline at end of file
diff --git "a/21-JavaScript\345\274\202\346\255\245\346\234\272\345\210\266\350\257\246\350\247\243.md" "b/Cute-Article/article/21-JavaScript\345\274\202\346\255\245\346\234\272\345\210\266\350\257\246\350\247\243.md"
similarity index 100%
rename from "21-JavaScript\345\274\202\346\255\245\346\234\272\345\210\266\350\257\246\350\247\243.md"
rename to "Cute-Article/article/21-JavaScript\345\274\202\346\255\245\346\234\272\345\210\266\350\257\246\350\247\243.md"
diff --git "a/22-JavaScript\344\270\255\346\234\211\350\266\243\347\232\204\345\214\272\345\210\206\345\220\214\346\255\245\345\222\214\345\274\202\346\255\245Ajax.md" "b/Cute-Article/article/22-JavaScript\344\270\255\346\234\211\350\266\243\347\232\204\345\214\272\345\210\206\345\220\214\346\255\245\345\222\214\345\274\202\346\255\245Ajax.md"
similarity index 100%
rename from "22-JavaScript\344\270\255\346\234\211\350\266\243\347\232\204\345\214\272\345\210\206\345\220\214\346\255\245\345\222\214\345\274\202\346\255\245Ajax.md"
rename to "Cute-Article/article/22-JavaScript\344\270\255\346\234\211\350\266\243\347\232\204\345\214\272\345\210\206\345\220\214\346\255\245\345\222\214\345\274\202\346\255\245Ajax.md"
diff --git "a/23-JavaScript\345\205\253\345\274\240\346\200\235\347\273\264\345\257\274\345\233\276.md" "b/Cute-Article/article/23-JavaScript\345\205\253\345\274\240\346\200\235\347\273\264\345\257\274\345\233\276.md"
similarity index 100%
rename from "23-JavaScript\345\205\253\345\274\240\346\200\235\347\273\264\345\257\274\345\233\276.md"
rename to "Cute-Article/article/23-JavaScript\345\205\253\345\274\240\346\200\235\347\273\264\345\257\274\345\233\276.md"
diff --git "a/24-Vue\346\212\230\350\205\276\350\256\260-\347\273\231Axios\345\201\232\344\270\252\346\214\272\351\235\240\350\260\261\347\232\204\345\260\201\350\243\205\357\274\210\346\212\245\351\224\231,\351\211\264\346\235\203,\350\267\263\350\275\254,\346\213\246\346\210\252,\346\217\220\347\244\272\357\274\211.md" "b/Cute-Article/article/24-Vue\346\212\230\350\205\276\350\256\260-\347\273\231Axios\345\201\232\344\270\252\346\214\272\351\235\240\350\260\261\347\232\204\345\260\201\350\243\205\357\274\210\346\212\245\351\224\231,\351\211\264\346\235\203,\350\267\263\350\275\254,\346\213\246\346\210\252,\346\217\220\347\244\272\357\274\211.md"
similarity index 100%
rename from "24-Vue\346\212\230\350\205\276\350\256\260-\347\273\231Axios\345\201\232\344\270\252\346\214\272\351\235\240\350\260\261\347\232\204\345\260\201\350\243\205\357\274\210\346\212\245\351\224\231,\351\211\264\346\235\203,\350\267\263\350\275\254,\346\213\246\346\210\252,\346\217\220\347\244\272\357\274\211.md"
rename to "Cute-Article/article/24-Vue\346\212\230\350\205\276\350\256\260-\347\273\231Axios\345\201\232\344\270\252\346\214\272\351\235\240\350\260\261\347\232\204\345\260\201\350\243\205\357\274\210\346\212\245\351\224\231,\351\211\264\346\235\203,\350\267\263\350\275\254,\346\213\246\346\210\252,\346\217\220\347\244\272\357\274\211.md"
diff --git "a/25-Webpack\345\205\245\351\227\250\346\225\231\347\250\213\346\225\264\347\220\206\357\274\210\346\225\264\347\220\206\344\270\255\357\274\211.md" "b/Cute-Article/article/25-Webpack\345\205\245\351\227\250\346\225\231\347\250\213\346\225\264\347\220\206\357\274\210\346\225\264\347\220\206\344\270\255\357\274\211.md"
similarity index 100%
rename from "25-Webpack\345\205\245\351\227\250\346\225\231\347\250\213\346\225\264\347\220\206\357\274\210\346\225\264\347\220\206\344\270\255\357\274\211.md"
rename to "Cute-Article/article/25-Webpack\345\205\245\351\227\250\346\225\231\347\250\213\346\225\264\347\220\206\357\274\210\346\225\264\347\220\206\344\270\255\357\274\211.md"
diff --git "a/26-Webpack\345\270\270\347\224\250\351\205\215\347\275\256\346\225\264\347\220\206\357\274\210\346\225\264\347\220\206\344\270\255\357\274\211.md" "b/Cute-Article/article/26-Webpack\345\270\270\347\224\250\351\205\215\347\275\256\346\225\264\347\220\206\357\274\210\346\225\264\347\220\206\344\270\255\357\274\211.md"
similarity index 100%
rename from "26-Webpack\345\270\270\347\224\250\351\205\215\347\275\256\346\225\264\347\220\206\357\274\210\346\225\264\347\220\206\344\270\255\357\274\211.md"
rename to "Cute-Article/article/26-Webpack\345\270\270\347\224\250\351\205\215\347\275\256\346\225\264\347\220\206\357\274\210\346\225\264\347\220\206\344\270\255\357\274\211.md"
diff --git "a/27-Markdowm\350\257\255\346\263\225\346\225\264\347\220\206.md" "b/Cute-Article/article/27-Markdowm\350\257\255\346\263\225\346\225\264\347\220\206.md"
similarity index 100%
rename from "27-Markdowm\350\257\255\346\263\225\346\225\264\347\220\206.md"
rename to "Cute-Article/article/27-Markdowm\350\257\255\346\263\225\346\225\264\347\220\206.md"
diff --git "a/28-JavaScript\344\270\255\347\232\204void\350\277\220\347\256\227\347\254\246.md" "b/Cute-Article/article/28-JavaScript\344\270\255\347\232\204void\350\277\220\347\256\227\347\254\246.md"
similarity index 100%
rename from "28-JavaScript\344\270\255\347\232\204void\350\277\220\347\256\227\347\254\246.md"
rename to "Cute-Article/article/28-JavaScript\344\270\255\347\232\204void\350\277\220\347\256\227\347\254\246.md"
diff --git "a/29-\345\205\263\344\272\216\351\232\217\346\234\272\346\225\260\347\232\204\344\270\200\344\272\233\346\200\273\347\273\223.md" "b/Cute-Article/article/29-\345\205\263\344\272\216\351\232\217\346\234\272\346\225\260\347\232\204\344\270\200\344\272\233\346\200\273\347\273\223.md"
similarity index 100%
rename from "29-\345\205\263\344\272\216\351\232\217\346\234\272\346\225\260\347\232\204\344\270\200\344\272\233\346\200\273\347\273\223.md"
rename to "Cute-Article/article/29-\345\205\263\344\272\216\351\232\217\346\234\272\346\225\260\347\232\204\344\270\200\344\272\233\346\200\273\347\273\223.md"
diff --git "a/3-Promise\347\256\200\345\215\225\347\224\250\346\263\225.md" "b/Cute-Article/article/3-Promise\347\256\200\345\215\225\347\224\250\346\263\225.md"
similarity index 100%
rename from "3-Promise\347\256\200\345\215\225\347\224\250\346\263\225.md"
rename to "Cute-Article/article/3-Promise\347\256\200\345\215\225\347\224\250\346\263\225.md"
diff --git "a/30-\344\270\200\346\254\241\350\256\260\344\275\217js\347\232\2046\344\270\252\346\255\243\345\210\231\346\226\271\346\263\225.md" "b/Cute-Article/article/30-\344\270\200\346\254\241\350\256\260\344\275\217js\347\232\2046\344\270\252\346\255\243\345\210\231\346\226\271\346\263\225.md"
similarity index 100%
rename from "30-\344\270\200\346\254\241\350\256\260\344\275\217js\347\232\2046\344\270\252\346\255\243\345\210\231\346\226\271\346\263\225.md"
rename to "Cute-Article/article/30-\344\270\200\346\254\241\350\256\260\344\275\217js\347\232\2046\344\270\252\346\255\243\345\210\231\346\226\271\346\263\225.md"
diff --git "a/31-ES6\350\277\231\344\272\233\345\260\261\345\244\237\344\272\206.md" "b/Cute-Article/article/31-ES6\350\277\231\344\272\233\345\260\261\345\244\237\344\272\206.md"
similarity index 100%
rename from "31-ES6\350\277\231\344\272\233\345\260\261\345\244\237\344\272\206.md"
rename to "Cute-Article/article/31-ES6\350\277\231\344\272\233\345\260\261\345\244\237\344\272\206.md"
diff --git "a/32-\350\201\212\344\270\200\350\201\212JavaScript\347\232\204IIFE.md" "b/Cute-Article/article/32-\350\201\212\344\270\200\350\201\212JavaScript\347\232\204IIFE.md"
similarity index 100%
rename from "32-\350\201\212\344\270\200\350\201\212JavaScript\347\232\204IIFE.md"
rename to "Cute-Article/article/32-\350\201\212\344\270\200\350\201\212JavaScript\347\232\204IIFE.md"
diff --git "a/33-javascript\347\232\204\347\272\257\345\207\275\346\225\260.md" "b/Cute-Article/article/33-javascript\347\232\204\347\272\257\345\207\275\346\225\260.md"
similarity index 100%
rename from "33-javascript\347\232\204\347\272\257\345\207\275\346\225\260.md"
rename to "Cute-Article/article/33-javascript\347\232\204\347\272\257\345\207\275\346\225\260.md"
diff --git "a/34-\346\210\221\347\234\274\344\270\255\347\232\204async&await.md" "b/Cute-Article/article/34-\346\210\221\347\234\274\344\270\255\347\232\204async&await.md"
similarity index 100%
rename from "34-\346\210\221\347\234\274\344\270\255\347\232\204async&await.md"
rename to "Cute-Article/article/34-\346\210\221\347\234\274\344\270\255\347\232\204async&await.md"
diff --git "a/35-ES6\344\270\255\347\232\204\346\250\241\345\235\227\345\257\274\345\205\245\345\257\274\345\207\272\346\225\264\347\220\206.md" "b/Cute-Article/article/35-ES6\344\270\255\347\232\204\346\250\241\345\235\227\345\257\274\345\205\245\345\257\274\345\207\272\346\225\264\347\220\206.md"
similarity index 97%
rename from "35-ES6\344\270\255\347\232\204\346\250\241\345\235\227\345\257\274\345\205\245\345\257\274\345\207\272\346\225\264\347\220\206.md"
rename to "Cute-Article/article/35-ES6\344\270\255\347\232\204\346\250\241\345\235\227\345\257\274\345\205\245\345\257\274\345\207\272\346\225\264\347\220\206.md"
index 7908ac22..73ae0428 100644
--- "a/35-ES6\344\270\255\347\232\204\346\250\241\345\235\227\345\257\274\345\205\245\345\257\274\345\207\272\346\225\264\347\220\206.md"
+++ "b/Cute-Article/article/35-ES6\344\270\255\347\232\204\346\250\241\345\235\227\345\257\274\345\205\245\345\257\274\345\207\272\346\225\264\347\220\206.md"
@@ -8,7 +8,7 @@
****
## 1、导出export命令
-如果需要外部获取文件内部变量，需要用`expor`t将变量输出，有三种方式：
+如果需要外部获取文件内部变量，需要用`export`将变量输出，有三种方式：
```js
//*方式一 单独输出
//main.js
@@ -102,4 +102,4 @@ function foo() {
export default foo;
```
-> 参考阮一峰[ES6 Module语法](http://es6.ruanyifeng.com/#docs/module)
\ No newline at end of file
+> 参考阮一峰[ES6 Module语法](http://es6.ruanyifeng.com/#docs/module)
diff --git "a/36-\345\245\275\345\245\275\345\255\246\344\271\240toLocaleString\346\226\271\346\263\225.md" "b/Cute-Article/article/36-\345\245\275\345\245\275\345\255\246\344\271\240toLocaleString\346\226\271\346\263\225.md"
similarity index 100%
rename from "36-\345\245\275\345\245\275\345\255\246\344\271\240toLocaleString\346\226\271\346\263\225.md"
rename to "Cute-Article/article/36-\345\245\275\345\245\275\345\255\246\344\271\240toLocaleString\346\226\271\346\263\225.md"
diff --git "a/37-JavaScript\344\272\213\344\273\266\345\247\224\346\211\230\350\257\246\350\247\243.md" "b/Cute-Article/article/37-JavaScript\344\272\213\344\273\266\345\247\224\346\211\230\350\257\246\350\247\243.md"
similarity index 100%
rename from "37-JavaScript\344\272\213\344\273\266\345\247\224\346\211\230\350\257\246\350\247\243.md"
rename to "Cute-Article/article/37-JavaScript\344\272\213\344\273\266\345\247\224\346\211\230\350\257\246\350\247\243.md"
diff --git "a/Cute-Article/article/38-JavaScript\344\270\255\345\270\270\350\247\201\350\256\276\350\256\241\346\250\241\345\274\217.md" "b/Cute-Article/article/38-JavaScript\344\270\255\345\270\270\350\247\201\350\256\276\350\256\241\346\250\241\345\274\217.md"
new file mode 100644
index 00000000..b1578d37
--- /dev/null
+++ "b/Cute-Article/article/38-JavaScript\344\270\255\345\270\270\350\247\201\350\256\276\350\256\241\346\250\241\345\274\217.md"
@@ -0,0 +1,1247 @@
+开发中，我们或多或少地接触了设计模式，但是很多时候不知道自己使用了哪种设计模式或者说该使用何种设计模式。本文意在梳理常见设计模式的特点，从而对它们有比较清晰的认知。
+
+### JavaScript 中常见设计模式
+* 单例模式
+* 策略模式
+* 代理模式
+* 迭代器模式
+* 发布-订阅模式
+* 命令模式
+* 组合模式
+* 模板方法模式
+* 享元模式
+* 职责链模式
+* 中介者模式
+* 装饰者模式
+* 状态模式
+* 适配者模式
+
+### 各设计模式关键词
+看完了上述设计模式后，把它们的关键词特点罗列出来，以后提到某种设计模式，进而联想相应的关键词和例子，从而心中有数。
+
+|设计模式|特点|案例|
+|-|-|-|
+|单例模式|一个类只能构造出唯一实例|创建菜单对象|
+|策略模式|根据不同参数可以命中不同的策略|动画库里的算法函数|
+|代理模式|代理对象和本体对象具有一致的接口|图片预加载|
+|迭代器模式|能获取聚合对象的顺序和元素|each([1, 2, 3], cb)|
+|发布-订阅模式|PubSub|瀑布流库|
+|命令模式|不同对象间约定好相应的接口|按钮和命令的分离|
+|组合模式|组合模式在对象间形成一致对待的树形结构|扫描文件夹|
+|模板方法模式|父类中定好执行顺序|咖啡和茶|
+|享元模式|减少创建实例的个数|男女模具试装|
+|职责链模式|通过请求第一个条件，会持续执行后续的条件，直到返回结果为止|if else 优化|
+|中介者模式|对象和对象之间借助第三方中介者进行通信|测试结束告知结果|
+|装饰者模式|动态地给函数赋能|天冷了穿衣服，热了脱衣服|
+|状态模式|每个状态建立一个类，状态改变会产生不同行为|电灯换挡|
+|适配者模式|一种数据结构改成另一种数据结构|枚举值接口变更|
+
+
+## 1.单例模式
+### 两个条件
+* 确保只有一个实例
+* 可以全局访问
+
+### 适用
+适用于弹框的实现，全局缓存
+### 实现单例模式
+```js
+const singleton = function(name) {
+ this.name = name
+ this.instance = null
+}
+
+singleton.prototype.getName = function() {
+ console.log(this.name)
+}
+
+singleton.getInstance = function(name) {
+ if (!this.instance) { // 关键语句
+ this.instance = new singleton(name)
+ }
+ return this.instance
+}
+
+// test
+const a = singleton.getInstance('a') // 通过 getInstance 来获取实例
+const b = singleton.getInstance('b')
+console.log(a === b)
+```
+### JavaScript 中的单例模式
+因为 JavaScript 是无类的语言，而且 JS 中的全局对象符合单例模式两个条件。很多时候我们把全局对象当成单例模式来使用，
+```js
+var obj = {}
+```
+### 弹框层的实践
+实现弹框的一种做法是先创建好弹框，然后使之隐藏，这样子的话会浪费部分不必要的 DOM 开销，我们可以在需要弹框的时候再进行创建，同时结合单例模式实现只有一个实例，从而节省部分 DOM 开销。下列为登入框部分代码：
+```js
+const createLoginLayer = function() {
+ const div = document.createElement('div')
+ div.innerHTML = '登入浮框'
+ div.style.display = 'none'
+ document.appendChild(div)
+ return div
+}
+```
+使单例模式和创建弹框代码解耦
+```js
+const getSingle = function(fn) {
+ const result
+ return function() {
+ return result || result = fn.apply(this, arguments)
+ }
+}
+```
+```js
+const createSingleLoginLayer = getSingle(createLoginLayer)
+
+document.getElementById('loginBtn').onclick = function() {
+ createSingleLoginLayer()
+}
+```
+
+***
+
+## 2.策略模式
+> 定义：根据不同参数可以命中不同的策略
+
+### JavaScript 中的策略模式
+观察如下获取年终奖的 demo，根据不同的参数（level）获得不同策略方法(规则)，这是策略模式在 JS 比较经典的运用之一。
+```js
+const strategy = {
+ 'S': function(salary) {
+ return salary * 4
+ },
+ 'A': function(salary) {
+ return salary * 3
+ },
+ 'B': function(salary) {
+ return salary * 2
+ }
+}
+
+const calculateBonus = function(level, salary) {
+ return strategy[level](salary)
+}
+
+calculateBonus('A', 10000) // 30000
+```
+在函数是一等公民的 JS 中，策略模式的使用常常隐藏在高阶函数中，稍微变换下上述 demo 的形式如下，可以发现我们平时已经在使用它了，恭喜我们又掌握了一种设计模式。
+```js
+const S = function(salary) {
+ return salary * 4
+}
+
+const A = function(salary) {
+ return salary * 3
+}
+
+const B = function(salary) {
+ return salary * 2
+}
+
+const calculateBonus = function(func, salary) {
+ return func(salary)
+}
+
+calculateBonus(A, 10000) // 30000
+```
+### 优点
+* 能减少大量的 if 语句
+* 复用性好
+
+***
+
+## 3.代理模式
+情景：小明追女生 A
+* 非代理模式：小明 =花=> 女生A
+* 代理模式：小明 =花=> 让女生A的好友B帮忙 =花=> 女生A
+
+### 代理模式的特点
+* 代理对象和本体对象具有一致的接口，对使用者友好
+
+代理模式的种类有很多，在 JS 中最常用的为虚拟代理和缓存代理。
+#### 虚拟代理实现图片预加载
+下面这段代码运用代理模式来实现图片预加载，可以看到通过代理模式巧妙地将创建图片与预加载逻辑分离，并且在未来如果不需要预加载，只要改成请求本体代替请求代理对象就行。
+```js
+const myImage = (function() {
+ const imgNode = document.createElement('img')
+ document.body.appendChild(imgNode)
+ return {
+ setSrc: function(src) {
+ imgNode.src = src
+ }
+ }
+})()
+
+const proxyImage = (function() {
+ const img = new Image()
+ img.onload = function() { // http 图片加载完毕后才会执行
+ myImage.setSrc(this.src)
+ }
+ return {
+ setSrc: function(src) {
+ myImage.setSrc('loading.jpg') // 本地 loading 图片
+ img.src = src
+ }
+ }
+})()
+
+proxyImage.setSrc('http://loaded.jpg')
+```
+
+缓存代理实现乘积计算
+```js
+const mult = function() {
+ let a = 1
+ for (let i = 0, l; l = arguments[i++];) {
+ a = a * l
+ }
+ return a
+}
+
+const proxyMult = (function() {
+ const cache = {}
+ return function() {
+ const tag = Array.prototype.join.call(arguments, ',')
+ if (cache[tag]) {
+ return cache[tag]
+ }
+ cache[tag] = mult.apply(this, arguments)
+ return cache[tag]
+ }
+})()
+
+proxyMult(1, 2, 3, 4) // 24
+```
+
+### 小 tip
+在开发时候不要先去猜测是否需要使用代理模式，如果发现直接使用某个对象不方便时，再来优化不迟。
+
+***
+
+## 4.迭代器模式
+> 定义：能访问到聚合对象的顺序与元素
+### 实现一个内部迭代器
+```js
+function each(arr, fn) {
+ for (let i = 0; i < arr.length; i++) {
+ fn(i, arr[i])
+ }
+}
+
+each([1, 2, 3], function(i, n) {
+ console.log(i) // 0 1 2
+ console.log(n) // 1 2 3
+})
+```
+可以看出内部迭代器在调用的时候非常简单，使用者不用关心迭代器内部实现的细节，但这也是内部迭代器的缺点。比如要比较两数组是否相等，只能在其回调函数中作文章了，代码如下：
+```js
+const compare = function(arr1, arr2) {
+ each(arr1, function(i, n) {
+ if (arr2[i] !== n) {
+ console.log('两数组不等')
+ return
+ }
+ })
+ console.log('两数组相等')
+}
+
+const arr1 = [1, 2, 3]
+const arr2 = [1, 2, 3]
+compare(arr1, arr2) // 两数组相等
+```
+### 实现一个外部迭代器
+
+相较于内部迭代器，外部迭代器将遍历的权利转移到外部，因此在调用的时候拥有了更多的自由性，不过缺点是调用方式较复杂。
+```js
+const iterator = function(arr) {
+ let current = 0
+ const next = function() {
+ current = current + 1
+ }
+ const done = function() {
+ return current >= arr.length
+ }
+ const value = function() {
+ return arr[current]
+ }
+ return {
+ next,
+ done,
+ value,
+ }
+}
+
+const arr1 = [1, 2 ,3]
+const arr2 = [1, 2, 3]
+const iterator1 = iterator(arr1)
+const iterator2 = iterator(arr2)
+
+const compare = function(iterator1, iterator2) {
+ while (!iterator1.done() && !iterator2.done()) {
+ if (iterator1.value() !== iterator2.value()) {
+ console.log('两数组不等')
+ return
+ }
+ iterator1.next() // 外部迭代器将遍历的权利转移到外部
+ iterator2.next()
+ }
+ console.log('两数组相等')
+}
+
+compare(iterator1, iterator2)
+```
+
+***
+
+## 5.发布订阅模式
+事件发布/订阅模式 (PubSub) 在异步编程中帮助我们完成更松的解耦，甚至在 MVC、MVVC 的架构中以及设计模式中也少不了发布-订阅模式的参与。
+优点：在异步编程中实现更深的解耦
+缺点：如果过多的使用发布订阅模式，会增加维护的难度
+
+### 实现一个发布订阅模式
+```js
+var Event = function() {
+ this.obj = {}
+}
+
+Event.prototype.on = function(eventType, fn) {
+ if (!this.obj[eventType]) {
+ this.obj[eventType] = []
+ }
+ this.obj[eventType].push(fn)
+}
+
+Event.prototype.emit = function() {
+ var eventType = Array.prototype.shift.call(arguments)
+ var arr = this.obj[eventType]
+ for (let i = 0; i < arr.length; i++) {
+ arr[i].apply(arr[i], arguments)
+ }
+}
+
+var ev = new Event()
+
+ev.on('click', function(a) { // 订阅函数
+ console.log(a) // 1
+})
+
+ev.emit('click', 1) // 发布函数
+```
+
+### 订阅函数逻辑一定要优先于发布函数吗
+考虑以下场景：
+```js
+$.ajax('', () => {
+ // 异步订阅函数逻辑
+})
+
+// 在其他地方执行发布函数，此时并不能保证执行发布函数的时候，订阅函数已经执行
+```
+我们需要实现这样的逻辑：
+```js
+var ev = new Event()
+ev.emit('click', 1)
+
+ev.on('click', function(a) {
+ console.log(a) // 1
+})
+```
+目标明确后，来着手实现它：
+```js
+var Event = function() {
+ this.obj = {}
+ this.cacheList = []
+}
+
+Event.prototype.on = function(eventType, fn) {
+ if (!this.obj[eventType]) {
+ this.obj[eventType] = []
+ }
+ this.obj[eventType].push(fn)
+
+ for (let i = 0; i < this.cacheList.length; i++) {
+ this.cacheList[i]()
+ }
+}
+
+Event.prototype.emit = function() {
+ const arg = arguments
+ const that = this
+ function cache() {
+ var eventType = Array.prototype.shift.call(arg)
+ var arr = that.obj[eventType]
+ for (let i = 0; i < arr.length; i++) {
+ arr[i].apply(arr[i], arg)
+ }
+ }
+ this.cacheList.push(cache)
+}
+```
+以上代码实现思路就是把原本在 `emit` 里触发的函数存到 `cacheList`，再转交到 `on` 中触发。从而实现了发布函数先于订阅函数执行。
+
+***
+
+## 6.命令模式
+命令模式与策略模式有些类似，在 JavaScript 中它们都是隐式的。
+重要性：较低
+### JavaScript 中的命令模式
+命令模式在 JavaScript 中也比较简单，下面代码中对按钮和命令进行了抽离，因此可以复杂项目中可以使用命令模式将界面的代码和功能的代码交付给不同的人去写。
+```js
+const setCommand = function(button, command) {
+ button.onClick = function() {
+ command.excute()
+ }
+}
+
+// -------------------- 上面的界面逻辑由A完成，下面的由B完成
+
+const menu = {
+ updateMenu: function() {
+ console.log('更新菜单')
+ },
+}
+
+const UpdateCommand = function(receive) {
+ return {
+ excute: receive.updateMenu,
+ }
+}
+
+const updateCommand = UpdateCommand(menu) // 创建命令
+
+const button1 = document.getElementById('button1')
+setCommand(button1, updateCommand)
+```
+
+***
+
+## 7.组合模式
+* 组合模式在对象间形成树形结构;
+* 组合模式中基本对象和组合对象被一致对待;
+* 无须关心对象有多少层，调用时只需在根部进行调用;
+
+### demo1 —— 宏命令
+
+想象我们现在手上有个万能遥控器，当我们回家，按一下开关，下列事情将被执行:
+1. 煮咖啡
+2. 打开电视、打开音响
+3. 打开空调、打开电脑
+
+我们把任务划分为 3 类，效果图如下：
+
+接着看看结合了命令模式和组合模式的具体实现：
+```js
+const MacroCommand = function() {
+ return {
+ lists: [],
+ add: function(task) {
+ this.lists.push(task)
+ },
+ excute: function() { // ①：组合对象调用这里的 excute，
+ for (let i = 0; i < this.lists.length; i++) {
+ this.lists[i].excute()
+ }
+ },
+ }
+}
+
+const command1 = MacroCommand() // 基本对象
+
+command1.add({
+ excute: () => console.log('煮咖啡') // ②：基本对象调用这里的 excute，
+})
+
+const command2 = MacroCommand() // 组合对象
+
+command2.add({
+ excute: () => console.log('打开电视')
+})
+
+command2.add({
+ excute: () => console.log('打开音响')
+})
+
+const command3 = MacroCommand()
+
+command3.add({
+ excute: () => console.log('打开空调')
+})
+
+command3.add({
+ excute: () => console.log('打开电脑')
+})
+
+const macroCommand = MacroCommand()
+macroCommand.add(command1)
+macroCommand.add(command2)
+macroCommand.add(command3)
+
+macroCommand.excute()
+
+// 煮咖啡
+// 打开电视
+// 打开音响
+// 打开空调
+// 打开电脑
+```
+
+可以看出在组合模式中基本对象和组合对象被一致对待，所以要保证基本对象(叶对象)和组合对象具有一致方法。
+
+### demo2 —— 扫描文件夹
+扫描文件夹时，文件夹下面可以为另一个文件夹也可以为文件，我们希望统一对待这些文件夹和文件，这种情形适合使用组合模式。
+```js
+const Folder = function(folder) {
+ this.folder = folder
+ this.lists = []
+}
+
+Folder.prototype.add = function(resource) {
+ this.lists.push(resource)
+}
+
+Folder.prototype.scan = function() {
+ console.log('开始扫描文件夹：', this.folder)
+ for (let i = 0, folder; folder = this.lists[i++];) {
+ folder.scan()
+ }
+}
+
+const File = function(file) {
+ this.file = file
+}
+
+File.prototype.add = function() {
+ throw Error('文件下不能添加其它文件夹或文件')
+}
+
+File.prototype.scan = function() {
+ console.log('开始扫描文件：', this.file)
+}
+
+const folder = new Folder('根文件夹')
+const folder1 = new Folder('JS')
+const folder2 = new Folder('life')
+
+const file1 = new File('深入React技术栈.pdf')
+const file2 = new File('JavaScript权威指南.pdf')
+const file3 = new File('小王子.pdf')
+
+folder1.add(file1)
+folder1.add(file2)
+
+folder2.add(file3)
+
+folder.add(folder1)
+folder.add(folder2)
+
+folder.scan()
+
+// 开始扫描文件夹： 根文件夹
+// 开始扫描文件夹： JS
+// 开始扫描文件： 深入React技术栈.pdf
+// 开始扫描文件： JavaScript权威指南.pdf
+// 开始扫描文件夹： life
+// 开始扫描文件： 小王子.pdf
+```
+
+***
+
+## 8.模板方法模式
+> 定义：在继承的基础上，在父类中定义好执行的算法。
+>
+### 泡茶和泡咖啡
+来对比下泡茶和泡咖啡过程中的异同
+
+|步骤|泡茶|泡咖啡|
+|-|-|-|
+|1|烧开水|烧开水|
+|2|浸泡茶叶|冲泡咖啡|
+|3|倒入杯子|倒入杯子|
+|4|加柠檬|加糖|
+
+可以清晰地看出仅仅在步骤 2 和 4 上有细微的差别，下面着手实现：
+```js
+const Drinks = function() {}
+
+Drinks.prototype.firstStep = function() {
+ console.log('烧开水')
+}
+
+Drinks.prototype.secondStep = function() {}
+
+Drinks.prototype.thirdStep = function() {
+ console.log('倒入杯子')
+}
+
+Drinks.prototype.fourthStep = function() {}
+
+Drinks.prototype.init = function() { // 模板方法模式核心：在父类上定义好执行算法
+ this.firstStep()
+ this.secondStep()
+ this.thirdStep()
+ this.fourthStep()
+}
+
+const Tea = function() {}
+
+Tea.prototype = new Drinks
+
+Tea.prototype.secondStep = function() {
+ console.log('浸泡茶叶')
+}
+
+Tea.prototype.fourthStep = function() {
+ console.log('加柠檬')
+}
+
+const Coffee = function() {}
+
+Coffee.prototype = new Drinks
+
+Coffee.prototype.secondStep = function() {
+ console.log('冲泡咖啡')
+}
+
+Coffee.prototype.fourthStep = function() {
+ console.log('加糖')
+}
+
+const tea = new Tea()
+tea.init()
+
+// 烧开水
+// 浸泡茶叶
+// 倒入杯子
+// 加柠檬
+
+const coffee = new Coffee()
+coffee.init()
+
+// 烧开水
+// 冲泡咖啡
+// 倒入杯子
+// 加糖
+```
+
+### 钩子
+假如客人不想加佐料(糖、柠檬)怎么办，这时可以引人钩子来实现之，实现逻辑如下：
+```js
+// ...
+
+Drinks.prototype.ifNeedFlavour = function() { // 加上钩子
+ return true
+}
+
+Drinks.prototype.init = function() { // 模板方法模式核心：在父类上定义好执行算法
+ this.firstStep()
+ this.secondStep()
+ this.thirdStep()
+ if (this.ifNeedFlavour()) { // 默认是 true，也就是要加调料
+ this.fourthStep()
+ }
+}
+
+// ...
+const Coffee = function() {}
+
+Coffee.prototype = new Drinks()
+// ...
+
+Coffee.prototype.ifNeedFlavour = function() {
+ return window.confirm('是否需要佐料吗？') // 弹框选择是否佐料
+}
+```
+
+***
+
+## 9.享元模式
+享元模式是一种优化程序性能的模式，本质为减少对象创建的个数。
+
+以下情况可以使用享元模式：
+* 有大量相似的对象，占用了大量内存
+* 对象中大部分状态可以抽离为外部状态
+
+### demo
+某商家有 50 种男款内衣和 50 种款女款内衣，要展示它们
+
+方案一：造 50 个塑料男模和 50 个塑料女模，让他们穿上展示，代码如下：
+```js
+const Model = function(gender, underwear) {
+ this.gender = gender
+ this.underwear = underwear
+}
+
+Model.prototype.takephoto = function() {
+ console.log(`${this.gender}穿着${this.underwear}`)
+}
+
+for (let i = 1; i < 51; i++) {
+ const maleModel = new Model('male', `第${i}款衣服`)
+ maleModel.takephoto()
+}
+
+for (let i = 1; i < 51; i++) {
+ const female = new Model('female', `第${i}款衣服`)
+ female.takephoto()
+}
+```
+
+方案二：造 1 个塑料男模特 1 个塑料女模特，分别试穿 50 款内衣
+```js
+const Model = function(gender) {
+ this.gender = gender
+}
+
+Model.prototype.takephoto = function() {
+ console.log(`${this.sex}穿着${this.underwear}`)
+}
+
+const maleModel = new Model('male')
+const femaleModel = new Model('female')
+
+for (let i = 1; i < 51; i++) {
+ maleModel.underwear = `第${i}款衣服`
+ maleModel.takephoto()
+}
+
+for (let i = 1; i < 51; i++) {
+ femaleModel.underwear = `第${i}款衣服`
+ femaleModel.takephoto()
+}
+```
+对比发现：方案一创建了 100 个对象，方案二只创建了 2 个对象，在该 demo 中，gender(性别) 是内部对象，underwear(穿着) 是外部对象。
+
+当然在方案二的 demo 中，还可以进一步改善：
+
+* 一开始就通过构造函数显示地创建实例，可用工场模式将其升级成可控生成
+* 在实例上手动添加 underwear 不是很优雅，可以在外部单独在写个 manager 函数
+```js
+const Model = function(gender) {
+ this.gender = gender
+}
+
+Model.prototype.takephoto = function() {
+ console.log(`${this.gender}穿着${this.underwear}`)
+}
+
+const modelFactory = (function() { // 优化第一点
+ const modelGender = {}
+ return {
+ createModel: function(gender) {
+ if (modelGender[gender]) {
+ return modelGender[gender]
+ }
+ return modelGender[gender] = new Model(gender)
+ }
+ }
+}())
+
+const modelManager = (function() {
+ const modelObj = {}
+ return {
+ add: function(gender, i) {
+ modelObj[i] = {
+ underwear: `第${i}款衣服`
+ }
+ return modelFactory.createModel(gender)
+ },
+ copy: function(model, i) { // 优化第二点
+ model.underwear = modelObj[i].underwear
+ }
+ }
+}())
+
+for (let i = 1; i < 51; i++) {
+ const maleModel = modelManager.add('male', i)
+ modelManager.copy(maleModel, i)
+ maleModel.takephoto()
+}
+
+for (let i = 1; i < 51; i++) {
+ const femaleModel = modelManager.add('female', i)
+ modelManager.copy(femaleModel, i)
+ femaleModel.takephoto()
+}
+```
+
+***
+
+## 10.职责链模式
+职责链模式：类似多米诺骨牌，通过请求第一个条件，会持续执行后续的条件，直到返回结果为止。
+
+重要性：4 星，在项目中能对 if-else 语句进行优化
+### 场景 demo
+场景：某电商针对已付过定金的用户有优惠政策，在正式购买后，已经支付过 500 元定金的用户会收到 100 元的优惠券，200 元定金的用户可以收到 50 元优惠券，没有支付过定金的用户只能正常购买。
+```js
+// orderType: 表示订单类型，1：500 元定金用户；2：200 元定金用户；3：普通购买用户
+// pay：表示用户是否已经支付定金，true: 已支付；false：未支付
+// stock: 表示当前用于普通购买的手机库存数量，已支付过定金的用户不受此限制
+
+const order = function( orderType, pay, stock ) {
+ if ( orderType === 1 ) {
+ if ( pay === true ) {
+ console.log('500 元定金预购，得到 100 元优惠券')
+ } else {
+ if (stock > 0) {
+ console.log('普通购买，无优惠券')
+ } else {
+ console.log('库存不够，无法购买')
+ }
+ }
+ } else if ( orderType === 2 ) {
+ if ( pay === true ) {
+ console.log('200 元定金预购，得到 50 元优惠券')
+ } else {
+ if (stock > 0) {
+ console.log('普通购买，无优惠券')
+ } else {
+ console.log('库存不够，无法购买')
+ }
+ }
+ } else if ( orderType === 3 ) {
+ if (stock > 0) {
+ console.log('普通购买，无优惠券')
+ } else {
+ console.log('库存不够，无法购买')
+ }
+ }
+}
+
+order( 3, true, 500 ) // 普通购买，无优惠券
+```
+
+下面用职责链模式改造代码：
+```js
+const order500 = function(orderType, pay, stock) {
+ if ( orderType === 1 && pay === true ) {
+ console.log('500 元定金预购，得到 100 元优惠券')
+ } else {
+ order200(orderType, pay, stock)
+ }
+}
+
+const order200 = function(orderType, pay, stock) {
+ if ( orderType === 2 && pay === true ) {
+ console.log('200 元定金预购，得到 50 元优惠券')
+ } else {
+ orderCommon(orderType, pay, stock)
+ }
+}
+
+const orderCommon = function(orderType, pay, stock) {
+ if (orderType === 3 && stock > 0) {
+ console.log('普通购买，无优惠券')
+ } else {
+ console.log('库存不够，无法购买')
+ }
+}
+
+order500( 3, true, 500 ) // 普通购买，无优惠券
+```
+
+改造后可以发现代码相对清晰了，但是链路代码和业务代码依然耦合在一起，进一步优化：
+```js
+// 业务代码
+const order500 = function(orderType, pay, stock) {
+ if ( orderType === 1 && pay === true ) {
+ console.log('500 元定金预购，得到 100 元优惠券')
+ } else {
+ return 'nextSuccess'
+ }
+}
+
+const order200 = function(orderType, pay, stock) {
+ if ( orderType === 2 && pay === true ) {
+ console.log('200 元定金预购，得到 50 元优惠券')
+ } else {
+ return 'nextSuccess'
+ }
+}
+
+const orderCommon = function(orderType, pay, stock) {
+ if (orderType === 3 && stock > 0) {
+ console.log('普通购买，无优惠券')
+ } else {
+ console.log('库存不够，无法购买')
+ }
+}
+
+// 链路代码
+const chain = function(fn) {
+ this.fn = fn
+ this.sucessor = null
+}
+
+chain.prototype.setNext = function(sucessor) {
+ this.sucessor = sucessor
+}
+
+chain.prototype.init = function() {
+ const result = this.fn.apply(this, arguments)
+ if (result === 'nextSuccess') {
+ this.sucessor.init.apply(this.sucessor, arguments)
+ }
+}
+
+const order500New = new chain(order500)
+const order200New = new chain(order200)
+const orderCommonNew = new chain(orderCommon)
+
+order500New.setNext(order200New)
+order200New.setNext(orderCommonNew)
+
+order500New.init( 3, true, 500 ) // 普通购买，无优惠券
+```
+
+重构后，链路代码和业务代码彻底地分离。假如未来需要新增 order300，那只需新增与其相关的函数而不必改动原有业务代码。
+另外结合 AOP 还能简化上述链路代码：
+```js
+// 业务代码
+const order500 = function(orderType, pay, stock) {
+ if ( orderType === 1 && pay === true ) {
+ console.log('500 元定金预购，得到 100 元优惠券')
+ } else {
+ return 'nextSuccess'
+ }
+}
+
+const order200 = function(orderType, pay, stock) {
+ if ( orderType === 2 && pay === true ) {
+ console.log('200 元定金预购，得到 50 元优惠券')
+ } else {
+ return 'nextSuccess'
+ }
+}
+
+const orderCommon = function(orderType, pay, stock) {
+ if (orderType === 3 && stock > 0) {
+ console.log('普通购买，无优惠券')
+ } else {
+ console.log('库存不够，无法购买')
+ }
+}
+
+// 链路代码
+Function.prototype.after = function(fn) {
+ const self = this
+ return function() {
+ const result = self.apply(self, arguments)
+ if (result === 'nextSuccess') {
+ return fn.apply(self, arguments) // 这里 return 别忘记了~
+ }
+ }
+}
+
+const order = order500.after(order200).after(orderCommon)
+
+order( 3, true, 500 ) // 普通购买，无优惠券
+```
+职责链模式比较重要，项目中能用到它的地方会有很多，用上它能解耦 1 个请求对象和 n 个目标对象的关系。
+
+***
+
+## 11.中介者模式
+中介者模式：对象和对象之间借助第三方中介者进行通信。
+
+### 场景 demo
+一场测试结束后，公布结果：告知解答出题目的人挑战成功，否则挑战失败。
+```js
+const player = function(name) {
+ this.name = name
+ playerMiddle.add(name)
+}
+
+player.prototype.win = function() {
+ playerMiddle.win(this.name)
+}
+
+player.prototype.lose = function() {
+ playerMiddle.lose(this.name)
+}
+
+const playerMiddle = (function() { // 将就用下这个 demo，这个函数当成中介者
+ const players = []
+ const winArr = []
+ const loseArr = []
+ return {
+ add: function(name) {
+ players.push(name)
+ },
+ win: function(name) {
+ winArr.push(name)
+ if (winArr.length + loseArr.length === players.length) {
+ this.show()
+ }
+ },
+ lose: function(name) {
+ loseArr.push(name)
+ if (winArr.length + loseArr.length === players.length) {
+ this.show()
+ }
+ },
+ show: function() {
+ for (let winner of winArr) {
+ console.log(winner + '挑战成功;')
+ }
+ for (let loser of loseArr) {
+ console.log(loser + '挑战失败;')
+ }
+ },
+ }
+}())
+
+const a = new player('A 选手')
+const b = new player('B 选手')
+const c = new player('C 选手')
+
+a.win()
+b.win()
+c.lose()
+
+// A 选手挑战成功;
+// B 选手挑战成功;
+// C 选手挑战失败;
+```
+在这段代码中 A、B、C 之间没有直接发生关系，而是通过另外的 playerMiddle 对象建立链接，姑且将之当成是中介者模式了。
+
+***
+
+## 12.装饰者模式
+装饰器模式：动态地给函数赋能。
+
+### JavaScript 的装饰者模式
+生活中的例子：天气冷了，就添加衣服来保暖；天气热了，就将外套脱下；这个例子很形象地含盖了装饰器的神韵，随着天气的冷暖变化，衣服可以动态的穿上脱下。
+```js
+let wear = function() {
+ console.log('穿上第一件衣服')
+}
+
+const _wear1 = wear
+
+wear = function() {
+ _wear1()
+ console.log('穿上第二件衣服')
+}
+
+const _wear2 = wear
+
+wear = function() {
+ _wear2()
+ console.log('穿上第三件衣服')
+}
+
+wear()
+
+// 穿上第一件衣服
+// 穿上第二件衣服
+// 穿上第三件衣服
+```
+
+这种方式有以下缺点：1：临时变量会变得越来越多；2：this 指向有时会出错
+### AOP 装饰函数
+```js
+// 前置代码
+Function.prototype.before = function(fn) {
+ const self = this
+ return function() {
+ fn.apply(this, arguments)
+ return self.apply(this, arguments)
+ }
+}
+
+// 后置代码
+Function.prototype.after = function(fn) {
+ const self = this
+ return function() {
+ self.apply(this, arguments)
+ return fn.apply(this, arguments)
+ }
+}
+```
+用后置代码来实验下上面穿衣服的 demo，
+```js
+const wear1 = function() {
+ console.log('穿上第一件衣服')
+}
+
+const wear2 = function() {
+ console.log('穿上第二件衣服')
+}
+
+const wear3 = function() {
+ console.log('穿上第三件衣服')
+}
+
+const wear = wear1.after(wear2).after(wear3)
+wear()
+
+// 穿上第一件衣服
+// 穿上第二件衣服
+// 穿上第三件衣服
+```
+
+但这样子有时会污染原生函数，可以做点通变
+```js
+const after = function(fn, afterFn) {
+ return function() {
+ fn.apply(this, arguments)
+ afterFn.apply(this, arguments)
+ }
+}
+
+const wear = after(after(wear1, wear2), wear3)
+wear()
+```
+
+***
+
+## 13.状态模式
+状态模式：将事物内部的每个状态分别封装成类，内部状态改变会产生不同行为。
+
+优点：用对象代替字符串记录当前状态，状态易维护
+缺点：需编写大量状态类对象
+
+### 场景 demo
+某某牌电灯，按一下按钮打开弱光，按两下按钮打开强光，按三下按钮关闭灯光。
+```js
+// 将状态封装成不同类
+const weakLight = function(light) {
+ this.light = light
+}
+
+weakLight.prototype.press = function() {
+ console.log('打开强光')
+ this.light.setState(this.light.strongLight)
+}
+
+const strongLight = function(light) {
+ this.light = light
+}
+
+strongLight.prototype.press = function() {
+ console.log('关灯')
+ this.light.setState(this.light.offLight)
+}
+
+const offLight = function(light) {
+ this.light = light
+}
+
+offLight.prototype.press = function() {
+ console.log('打开弱光')
+ this.light.setState(this.light.weakLight)
+}
+
+const Light = function() {
+ this.weakLight = new weakLight(this)
+ this.strongLight = new strongLight(this)
+ this.offLight = new offLight(this)
+ this.currentState = this.offLight // 初始状态
+}
+
+Light.prototype.init = function() {
+ const btn = document.createElement('button')
+ btn.innerHTML = '按钮'
+ document.body.append(btn)
+ const self = this
+ btn.addEventListener('click', function() {
+ self.currentState.press()
+ })
+}
+
+Light.prototype.setState = function(state) { // 改变当前状态
+ this.currentState = state
+}
+
+const light = new Light()
+light.init()
+
+// 打开弱光
+// 打开强光
+// 关灯
+```
+
+### 非面向对象实现的状态模式
+借助于 JavaScript 的委托机制，可以像如下实现状态模式：
+```js
+const obj = {
+ 'weakLight': {
+ press: function() {
+ console.log('打开强光')
+ this.currentState = obj.strongLight
+ }
+ },
+ 'strongLight': {
+ press: function() {
+ console.log('关灯')
+ this.currentState = obj.offLight
+ }
+ },
+ 'offLight': {
+ press: function() {
+ console.log('打开弱光')
+ this.currentState = obj.weakLight
+ }
+ },
+}
+
+const Light = function() {
+ this.currentState = obj.offLight
+}
+
+Light.prototype.init = function() {
+ const btn = document.createElement('button')
+ btn.innerHTML = '按钮'
+ document.body.append(btn)
+ const self = this
+ btn.addEventListener('click', function() {
+ self.currentState.press.call(self) // 通过 call 完成委托
+ })
+}
+
+const light = new Light()
+light.init()
+```
+
+***
+
+## 14.适配者模式
+适配者模式：主要用于解决两个接口之间不匹配的问题。
+### demo
+```js
+// 老接口
+const zhejiangCityOld = (function() {
+ return [
+ {
+ name: 'hangzhou',
+ id: 11,
+ },
+ {
+ name: 'jinhua',
+ id: 12
+ }
+ ]
+}())
+
+console.log(getZhejiangCityOld())
+
+// 新接口希望是下面形式
+{
+ hangzhou: 11,
+ jinhua: 12,
+}
+
+// 这时候就可采用适配者模式
+const const adaptor = (function(oldCity) {
+ const obj = {}
+ for (let city of zhejiangCityOld) {
+ obj[city.name] = city.id
+ }
+ return obj
+}())
+```
+
+
+> 原文地址 [JavaScript 中常见设计模式整理](https://juejin.im/post/5afe6430518825428630bc4d)
\ No newline at end of file
diff --git "a/Cute-Article/article/39-\344\275\234\344\270\272\345\211\215\347\253\257\351\234\200\350\246\201\344\272\206\350\247\243\347\232\204\345\274\200\346\272\220\345\215\217\350\256\256\347\237\245\350\257\206.md" "b/Cute-Article/article/39-\344\275\234\344\270\272\345\211\215\347\253\257\351\234\200\350\246\201\344\272\206\350\247\243\347\232\204\345\274\200\346\272\220\345\215\217\350\256\256\347\237\245\350\257\206.md"
new file mode 100644
index 00000000..8345ff42
--- /dev/null
+++ "b/Cute-Article/article/39-\344\275\234\344\270\272\345\211\215\347\253\257\351\234\200\350\246\201\344\272\206\350\247\243\347\232\204\345\274\200\346\272\220\345\215\217\350\256\256\347\237\245\350\257\206.md"
@@ -0,0 +1,112 @@
+* 作为前端工程师，开发中在所难免会用到一些开源框架，而每个框架都有自己的开源协议，每个开源协议之间有什么差别呢？ 如果你要开源一个项目，又应该选择哪种开源协议呢？
+* 许多开发者，对于开源协议的认知很少，本文从这些常用的前端框架入手，介绍开源常用开源协议的基础知识。
+
+### 什么是开源协议？
+根据 [开源协议](https://en.wikipedia.org/wiki/Open-source_license) 在维基百科的定义：
+> 开源许可是一种计算机软件和其他产品的许可类型，允许使用、修改或在定义的条款和条件下使用、修改或共享的源代码、蓝图和设计。
+> 这允许终端用户和商业公司对源代码、图纸或设计进行审查和修改，以满足自己的定制、好奇心或故障排除的需要。
+> 开源许可的软件大多是免费的，尽管这并不一定是必须的。许可证只允许非商业的重新分配或修改个人使用的源代码，通常不被认为是开源许可。
+> 然而,开源许可可能会有一些限制,尤其是对软件的起源的表达,比如要求保留作者的名字和代码中的版权声明,或要求重新分配授权软件只有在相同的许可(如copyleft许可证)。
+> 一组流行的开源软件许可证是由开源计划(OSI)根据其开源定义(OSD)批准的。
+
+
+### 为什么要选用开源协议？
+在 [GcsSloop](http://www.gcssloop.com/) 写的文章 [程序员不可不知的版权协议](http://www.gcssloop.com/tips/choose-license) 中给出了很好的概括。
+* 首先是对作者的保护，防止知识成果被恶意利用。开源协议中一般都包含免责声明(禁止代码的作者承担代码被使用后产生的风险及后果)，比如你开源了一个破解智能锁的代码，如果有人利用这个去盗窃导致他人损失，你是无需承担责任的。
+* 其次是对使用者的保护，方便使用者。使用者一看就知道自己允许进行哪些操作，不允许进行哪些操作。未添加协议的代码默认是作者保留所有权利的(对此不同国家的法律可能稍微存在区别)，这就像一颗定时炸弹，如果你在项目中使用了这一份没有协议的代码，原作者只要能证明你未经许可使用了他的代码，是能够起诉你的。
+
+### 当前主流开源许可证(GPL、BSD、MIT、Mozilla、Apache、LGPL)和它们的异同？
+
+相关概念解析：
+> * 协议和版权信息(License and copyright notice)：在代码中保留作者提供的协议和版权信息
+> * 声明变更(State Changes)：在代码中声明对原来代码的重大修改及变更
+> * 公开源码(Disclose Source)：代码必需公开。如果是基于LGPL协议 下，则只需使用的开源代码公开，不必将整个软件源码公开
+> * 库引用(Library usage)：该库可以用于商业软件中
+> * 责任承担(Hold Liable)：代码的作者承担代码使用后的风险及产生的后果
+> * 商标使用(Use Trademark)：可以使用作者的姓名，作品的Logo，或商标
+> * 附加协议(Sublicensing)：允许在软件分发传播过程中附加上原来没有的协议条款等
+
+
+### 当前前端主流框架选取的开源协议
+纵观比较常用的前端框架，用的最广泛的便是 MIT 开源协议。
+> * Vue： MIT [点击阅读](https://github.com/vuejs/vue/blob/dev/LICENSE )
+> * React：MIT [点击阅读]( https://github.com/facebook/react/blob/master/LICENSE)
+> * Element： MIT [点击阅读](https://github.com/ElemeFE/element/blob/master/LICENSE )
+> * Ant Design：MIT [点击阅读](https://github.com/ant-design/ant-design/blob/master/LICENSE )
+
+列举的框架开源协议都是 MIT 。那么为什么选择 MIT 呢？
+MIT是一种简短而简单的许可，只需要保留版权和许可通知。许可的作品、修改和更大的作品可以在不同的条件下分发，并且没有源代码。MIT允许别人用作者的代码做任何事情，但必须保证作者的所有权，并且作者无须承担代码使用产生的风险。
+其中，要重点说一下 React 的开源协议，从 github 的提交历史来看，React 的开源协议经历了一个动荡的过程。从 LICENCE 的提交历史看，Facebook 对专利的重视程度可见一斑。
+
+去年知乎上一个《如何看待百度要求内部全面停止使用 React / React Native?》的文章引起了前端界的热议，事情的起因是大家发现了 Facebook 专利许可证上的描述暗藏玄机。在技术开源的世界，对于开发者而言，许可证就是他们使用开源软件的 “用户协议”。而 Facebook 的开源方式跟其他家都不太一样，别家一般用的都是开源社区公认通用的许可证，而 Facebook 使用的是两个许可证，第一个是通用的 BSD 许可证，第二个是自己写的专利许可证 (patent grant)。
+而在 React 的开源协议中这么写到：
+
+意思就是：
+当发生下列情况时，facebook 有权益吊销你的 React 使用权：
+> * 与 facebook 及其附属机构发生利益冲突
+> * 同任何一个和 facebook 有关的组织发生了法律纠纷
+> * 同任何与 React 有关的组织发生利益冲突
+
+
+翻译成大白话就是：如果你觉得 Facebook 侵犯了你的知识产权，同时你的核心产品是基于 React 实现，如果你想起诉 Facebook，就要权衡一下了，因为根据条款它有权利吊销你的 React 使用权。或者说你用 React 做了一个产品并且在某些领域对 Facebook 构成了利益冲突，那么它就可以强制你的产品下线。
+
+可以说，一旦你开始使用 React 去构建你的核心产品，你的公司就被 facebook 埋下了一颗定时炸弹，并且，炸弹的引爆按钮就握在 facebook 手中。
+
+其实这种事情，从去年就在前端技术圈开吵，后来愈演愈烈，形势每况日下：开源社区在更多 Facebook 开源的热门项目中发现了相同的许可证模式和条款。开发者认为 Facebook 的这种许可证模式正在毒害社区，污染开源精神。而且 Apache 软件基金会宣布所有使用 Apache 开源协议的软件都不得使用带有 Facebook BSD + 专利许可证模式的组件。
+
+不过 Facebook 最后还是意识到了这些问题，修改了开源协议。
+
+
+### 如何为我们的项目选择一个开源协议？
+首先，我们要清楚我们选择开源的目的是什么？
+作为个人，在开源的情况下，我们可以帮助他人，也可以获得他人的帮助，还是一个提升个人代码质量的好方法，同样，也是一个展示自己能力的好方法。世界上开源软件协议的种类非常之多，并且同一款协议有很多变种，协议太宽松会导致作者丧失对作品的很多权利，太严格又不便于使用者使用及作品的传播，所以开源作者要考虑自己对作品想保留哪些权利，放开哪些限制。
+作为公司，代码开源后，会提升公司的地位，树立一个良好的品牌形象，也可以帮助公司发掘潜在员工。
+那么，我们如何选择适合我们的开源许可证呢？
+
+由一张图直观了解如何选取所需要的开源许可证。（原著：乌克兰程序员Paul Bagwell，翻译：阮一峰）
+
+
+举例来说：
+如果我只是想专心的写代码，那么可以选择 MIT ，MIT在保证了作者的所有权的前提下允许别人使用作者的代码，且作者不需要承担使用时的风险。如果我想保护我的代码、专利，那么可以选择 Apache ，Apache 与 MIT 的区别就是提供了专利贡献者的授权，使用者需要明确这一点。
+
+Github 专门发布了一个网站 [Choosing an OSS license doesn’t need to be scary](https://choosealicense.com/) 来帮助开源项目开发者。
+
+> * 我想要一个简单宽松的许可证建议： MIT 许可证。这是一个宽松的、简明扼要的许可证，只要用户在项目副本中包含了版权声明和许可声明，他们就可以拿你的代码做任何想做的事情，你也无需承担任何责任。
+> 使用该许可证的项目：jQuery、Rails
+> * 我比较关心专利
+> 建议： Apache许可证。这类似于 MIT 许可证，但它同时还包含了贡献者向用户提供专利授权相关的条款。
+> 使用该许可证的项目：Apache、SVN和NuGet
+> * 我关心项目的共享改进
+> 建议：GPL（ V2或 V3）许可证。这是一种 copyleft 许可证，要求修改项目代码的用户再次分发源码或二进制代码时，必须公布他的相关修改。V3版本与V2类>似，但其进一步约束了在某些限制软件更改的硬件上的使用范围。
+> 使用该许可证的项目：Linux、Git
+> * 我的开源项目不是代码
+> 建议： Creative Commons。这是一个相对宽松的版权协议。它只保留几种了权利（some rights reserved）。使用者可以明确知道所有者的权利，不容易侵犯对>方的版权，作品可以得到有效传播。作为作者，你可以选择以下1~4种权利组合:
+> 1) 署名（Attribution，简写为BY）：必须提到原作者。
+> 2) 非商业用途（Noncommercial，简写为NC）：不得用于盈利性目的。
+> 3) 禁止演绎（No Derivative Works，简写为ND）：不得修改原作品, 不得再创作。
+> 4) 相同方式共享（Share Alike，简写为SA）：允许修改原作品，但必须使用相同的许可证发布。
+> * 更多选择
+> Licenses - [http://ChooseALicense.com](https://choosealicense.com/)，这里提供了Apache/ GPL/ MIT/ Artistic/ Eclipse/ BSD/ LGPL/ Mozilla/ No License/ Public Domain >Dedication 协议的适用情形、许可内容、禁止内容，及协议全文。
+
+### 如何为代码添加开源协议？
+#### GitHub
+1. 首先需要注册一个 GitHub 账号，并登录
+2. 在 GitHub 上选择创建一个新的 repository
+
+3. 进入创建 repository 页面后，输入基本信息后，点击右下角的 Add a license 选择开源协议，默认是 none。对应的 license 可以直接选择，也可以输入自己想要的 license
+
+
+
+4. 点击最下方 Create repository，就创建成功了。
+5. 创建成功后，代码库中就可以看到自动生成了一个 LICENSE 文件。
+
+### 参考文献
+> [选择一个开源软件协议](http://choosealicense.online/)
+> [程序员不可不知的版权协议](http://www.gcssloop.com/tips/choose-license)
+> [开源许可证都有什么区别,一般开源项目用什么许可证?](https://www.zhihu.com/question/28292322)
+> [都在封杀 React/React Native ，那我到底还该不该继续学呢？](https://zhuanlan.zhihu.com/p/29492362)
+> [React开源协议之争知多少?](https://cauu.github.io/2017/09/React-Opensource-license/)
+> [how to choose a license](https://www.cnblogs.com/Wayou/p/how_to_choose_a_license.html)
+
+
+> [原文地址](https://zhuanlan.zhihu.com/p/35876146)
\ No newline at end of file
diff --git "a/4-\345\237\272\344\272\216Vue\351\205\215\347\275\256axios.md" "b/Cute-Article/article/4-\345\237\272\344\272\216Vue\351\205\215\347\275\256axios.md"
similarity index 100%
rename from "4-\345\237\272\344\272\216Vue\351\205\215\347\275\256axios.md"
rename to "Cute-Article/article/4-\345\237\272\344\272\216Vue\351\205\215\347\275\256axios.md"
diff --git "a/Cute-Article/article/40-\350\247\243\345\257\206Vue SSR.md" "b/Cute-Article/article/40-\350\247\243\345\257\206Vue SSR.md"
new file mode 100644
index 00000000..ab2faccf
--- /dev/null
+++ "b/Cute-Article/article/40-\350\247\243\345\257\206Vue SSR.md"
@@ -0,0 +1,251 @@
+## 1.引言
+最近笔者和小伙伴在研究Vue SSR，但是市面上充斥了太多的从0到1的文章，对大家理解这其中的原理帮助并不是很大，因此，本文将从 *Vue SSR的构建流程、运行流程、SSR的特点和利弊* 这几方面对Vue SSR有一个较为详细的介绍。最后还将附上一个笔者实现的 *去除Vue全家桶的Demo案例* 。
+
+## 2.剖析构建流程
+首先我们镇上一张官网给出的构建图：
+
+
+### app.js入口文件
+`app.js` 是我们的通用`entry`，它的作用就是构建一个Vue的实例以供服务端和客户端使用，注意一下，在纯客户端的程序中我们的`app.js`将会挂载实例到`dom`中，而在`ssr`中这一部分的功能放到了`Client entry`中去做了。
+
+### 两个entry
+接下里我们来看`Client entry`和`Server entry`，这两者分别是客户端的入口和服务端的入口。*Client entry的功能很简单，就是挂载我们的Vue实例到指定的dom元素上*；`Server entry`是一个使用`export`导出的函数。主要负责调用组件内定义的获取数据的方法，获取到SSR渲染所需数据，并存储到上下文环境中。*这个函数会在每一次的渲染中重复的调用*。
+
+### webpack打包构建
+然后我们的服务端代码和客户端代码通过`webpack`分别打包，生成`Server Bundle`和`Client Bundle`，前者会运行在服务器上通过node生成预渲染的`HTML字符串`，发送到我们的客户端以便完成初始化渲染；而客户端bundle就自由了，初始化渲染完全不依赖它了。客户端拿到服务端返回的HTML字符串后，会去“激活”这些静态HTML，是其变成由`Vue动态管理`的DOM，以便响应后续数据的变化。
+
+## 3.剖析运行流程
+到这里我们该谈谈`ssr`的程序是怎么跑起来的了。首先我们得去构建一个vue的实例，也就是我们前面构建流程中说到的`app.js`做的事情，但是这里不同于传统的客户端渲染的程序，我们*需要用一个工厂函数去封装它，以便每一个用户的请求都能够返回一个新的实例，也就是官网说到的避免交叉污染了*。
+
+然后我们可以暂时移步到服务端的`entry`中了，这里要做的就是拿到当前路由匹配的组件，调用组件里定义的一个方法（官网取名叫`asyncData`）拿到初始化渲染的数据，而这个方法要做的也很简单，就是去调用我们`vuex store`中的方法去异步获取数据。
+
+接下来`node服务器`如期启动了，跑的是我们刚写好的服务端`entry`里的函数。在这里还要做的就是将我们刚刚构建好的Vue实例渲染成`HTML字符串`，然后将拿到的数据混入我们的`HTML字符串`中，最后发送到我们客户端。
+
+打开浏览器的network，我们看到了初始化渲染的HTML，并且是我们想要初始化的结构，且完全不依赖于客户端的js文件了。再仔细研究研究，里面有初始化的dom结构，有css，还有一个script标签。script标签里把我们在服务端`entry`拿到的数据挂载了`window`上。原来只是一个纯静态的HTML页面啊，没有任何的交互逻辑，所以啊，现在知道为啥子需要服务端跑一个`vue客户端`再跑一个`vue`了，服务端的`vue`只是混入了个数据渲染了个静态页面，客户端的`vue`才是去实现交互的！
+
+
+顺着前面的思路，我们该看客户端的`entry`了。在这里客户端拿到存在`window`中的数据混入我们客户端的`vuex`中，然后分析数据去执行我们熟悉的其余客户端操作了。
+
+## 4.SSR独特之处
+在SSR中，创建`Vue实例`、创建`store`和创建`router`都是套了一层`工厂函数`的，目的就是`避免数据的交叉污染`。
+
+在服务端只能执行生命周期中的`created`和`beforeCreate`，原因是在服务端是无法操纵dom的，所以可想而知其他的周期也就是不能执行的了。
+
+服务端渲染和客户端渲染不同，需要创建两个`entry`分别跑在`服务端`和`客户端`，并且需要*webpack对其分别打包*；
+
+SSR服务端请求不带`cookie`，需要手动拿到浏览器的`cookie`传给服务端的请求。[实现方式戳这里](https://www.mmxiaowu.com/article/596cbb2d436eb550a5423c30)。
+
+SSR要求dom结构规范，因为浏览器会自动给HTML添加一些结构比如tbody，但是客户端进行混淆服务端放回的HTML时，不会添加这些标签，导致混淆后的HTML和浏览器渲染的HTML不匹配。
+
+*性能问题需要多加关注*。
+* vue.mixin、axios拦截请求使用不当，会内存泄漏。[原因戳这里](https://github.com/vuejs/vue/issues/5089)
+* lru-cache向内存中缓存数据，需要合理缓存改动不频繁的资源。
+
+## 5.可能是把双刃剑
+### SSR的优点
+
+* 更利于SEO。
+
+不同爬虫工作原理类似，只会爬取源码，不会执行网站的任何脚本（Google除外，据说Googlebot可以运行javaScript）。
+使用了`Vue`或者其它`MVVM框架`之后，页面大多数DOM元素都是在客户端根据js动态生成，可供爬虫抓取分析的内容大大减少。
+另外，浏览器爬虫不会等待我们的数据完成之后再去抓取我们的页面数据。服务端渲染返回给客户端的是已经获取了异步数据并执行JavaScript脚本的最终HTML，网络爬中就可以抓取到完整页面的信息。
+
+* 更利于首屏渲染
+首屏的渲染是node发送过来的html字符串，并不依赖于js文件了，这就会使用户更快的看到页面的内容。尤其是针对大型单页应用，打包后文件体积比较大，普通客户端渲染加载所有所需文件时间较长，首页就会有一个很长的白屏等待时间。
+
+
+## 6.SSR的局限
+
+* 服务端压力较大
+本来是通过客户端完成渲染，现在统一到服务端node服务去做。尤其是高并发访问的情况，会大量占用服务端CPU资源；
+
+* 开发条件受限
+在服务端渲染中，`created`和`beforeCreate`之外的生命周期钩子不可用，因此项目引用的第三方的库也不可用其它生命周期钩子，这对引用库的选择产生了很大的限制；
+
+* 学习成本相对较高
+除了对`webpack`、`Vue`要熟悉，还需要掌握`node`、`Express`相关技术。相对于客户端渲染，项目构建、部署过程更加复杂。
+
+## 6.去除VUEX的SSR实践
+先附上demo地址，[戳这里](https://github.com/LNoe-lzy/vue-ssr-demo/tree/vue-ssr-without-vuex)！
+
+说在前面：
+
+* vue-router不是必须的，不用router其实做个vue的[preRender](https://github.com/chrisvfritz/prerender-spa-plugin)就可以了，完全没必要做ssr；
+* vuex不是必须的，vuex是实现我们客户端和服务端的状态共享的关键，我们可以不使用vuex，但是我们得去实现一套数据预取的逻辑；
+
+官网的demo大而全，集成了`vue-router`和`vuex`，想想我们的项目如果没有使用到这两者，光引入就又需要改造成本，这并不是我们想搞的“丝滑般”过渡，接下来笔者将带领大家一步一步的做个“啥都没有的”demo。
+
+在此笔者的思路是：*构造一个Vue的实例，那么我们可以用这个实例的data来存储我们的预取数据，而用methods中的方法去做数据的异步获取，这样我们只在需要预取数据的组件中去调用这个方法就可以了*。
+
+首先我们需要让我们的组件“共享”这个EventBus，为此笔者简单的封装了一个plugin：
+```js
+export default {
+ install (Vue) {
+ const EventBus = new Vue({
+ data () {
+ return {
+ list: [],
+ nav: []
+ }
+ },
+ methods: {
+ getList () {
+ // get list
+ },
+ getNav () {
+ // get nav
+ }
+ }
+ })
+
+ Vue.prototype.$events = EventBus
+ Vue.$events = EventBus
+ }
+}
+```
+
+然后我们需要在`main.js`中`export`出我们的`EventBus`以便两个`entry`使用。这样我们的`main.js`就像下面这样：
+```js
+import Vue from 'vue'
+import App from './App'
+import EventBus from './event'
+
+Vue.use(EventBus)
+Vue.config.devtools = true
+
+export function createApp () {
+ const app = new Vue({
+ // 注入 router 到根 Vue 实例
+ router,
+ render: h => h(App)
+ })
+
+ return { app, router, eventBus: app.$events }
+}
+```
+
+接下来是我们的两个`entry`了。`server`用来匹配我们的组件并调用组件的`asyncData`方法去获取数据，`client`用来将预渲染的数据存储到我们`eventBus`中的`data`中。
+```js
+// server
+import { createApp } from './main'
+
+export default context => {
+ return new Promise((resolve, reject) => {
+ const { app, eventBus, App } = createApp()
+ // 这里笔者的demo比较简单，仅app组件需要预取数据，复杂业务可以递归遍历哈；
+ const matchedComponents = [App]
+
+ Promise.all(matchedComponents.map(({ asyncData }) => asyncData && asyncData({
+ eventBus
+ }))).then(() => {
+ context.state = eventBus._data
+ resolve(app)
+ }).catch(reject)
+ })
+}
+
+
+// client
+import Vue from 'vue'
+import { createApp } from './main'
+const { app, eventBus } = createApp()
+
+if (window.__INITIAL_STATE__) {
+ eventBus._data = window.__INITIAL_STATE__
+}
+
+app.$mount('#app')
+```
+
+然后我们需要改造我们的组件了，只需要定义一个`async`方法去调用`EventBus`中的方法获取，考虑到服务端只会执行`beforeCreate`和`created`两个生命周期而`beforeCreate`不能拿到`data`，所以我们需要在`created`中去做数据的获取。
+```js
+// 服务端渲染数据预取；
+asyncData ({ store, eventBus }) {
+ return eventBus.getNav()
+}
+// 将服务端拿到的数据混入vue组件中；
+created () {
+ this.nav = this.$events.nav
+}
+```
+
+然后是`webpack`的改造了，`webpack`的配置其实和纯客户端应用类似，为了区分客户端和服务端两个环境我们将配置分为`base`、`client`和`server`三部分，`base`就是我们的通用基础配置，而`client`和`server`分别用来打包我们的客户端和服务端代码。
+
+首先是`webpack.server.conf.js`，用于生成`server bundle`来传递给`createBundleRenderer函数`在node服务器上调用，入口文件是我们的`entry-server`：
+```js
+const webpack = require('webpack')
+const merge = require('webpack-merge')
+const nodeExternals = require('webpack-node-externals')
+const baseConfig = require('./webpack.base.conf.js')
+const VueSSRServerPlugin = require('vue-server-renderer/server-plugin')
+// 去除打包css的配置
+baseConfig.module.rules[1].options = ''
+
+module.exports = merge(baseConfig, {
+ entry: './src/entry-server.js',
+ // 以 Node 适用方式导入
+ target: 'node',
+ // 对 bundle renderer 提供 source map 支持
+ devtool: '#source-map',
+ output: {
+ filename: 'server-bundle.js',
+ libraryTarget: 'commonjs2'
+ },
+ externals: nodeExternals({
+ whitelist: /\.css$/
+ }),
+ plugins: [
+ new webpack.DefinePlugin({
+ 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
+ 'process.env.VUE_ENV': '"server"'
+ }),
+ // 这是将服务器的整个输出
+ // 构建为单个 JSON 文件的插件。
+ // 默认文件名为 `vue-ssr-server-bundle.json`
+ new VueSSRServerPlugin()
+ ]
+})
+```
+其次是`webpack.client.conf.js`，这里我们可以根据官方的配置生成`clientManifest`，自动推断和注入资源预加载，以及 css 链接 / script 标签到所渲染的 HTML。入口是我们的`client-server`:
+```js
+const webpack = require('webpack')
+const merge = require('webpack-merge')
+const base = require('./webpack.base.conf')
+const VueSSRClientPlugin = require('vue-server-renderer/client-plugin')
+
+const config = merge(base, {
+ entry: {
+ app: './src/entry-client.js'
+ },
+ plugins: [
+ new webpack.DefinePlugin({
+ 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
+ 'process.env.VUE_ENV': '"client"'
+ }),
+ new webpack.optimize.CommonsChunkPlugin({
+ name: 'vendor',
+ minChunks: function (module) {
+ return (
+ /node_modules/.test(module.context) &&
+ !/\.css$/.test(module.request)
+ )
+ }
+ }),
+ // 这将 webpack 运行时分离到一个引导 chunk 中，
+ // 以便可以在之后正确注入异步 chunk。
+ // 这也为你的 应用程序/vendor 代码提供了更好的缓存。
+ new webpack.optimize.CommonsChunkPlugin({
+ name: 'manifest'
+ }),
+ new VueSSRClientPlugin()
+ ]
+})
+```
+
+从`localhost`中我们看到`ssr`预取的数据已经成功出来了，大功告成！
+
+
+## 7.结语
+本文介绍了Vue的SSR的构建和运行流程，也分析了SSR的特点和利弊，希望对大家了解SSR有一定的帮助。最后针对不使用vuex的SSR实现方案进行了介绍，如果感兴趣或者有疑问，欢迎大家留言交流。
+
+[阅读原文](https://zhuanlan.zhihu.com/p/35871344)
\ No newline at end of file
diff --git "a/Cute-Article/article/41-ES2018\357\274\210ES9\357\274\211\347\232\204\346\226\260\347\211\271\346\200\247.md" "b/Cute-Article/article/41-ES2018\357\274\210ES9\357\274\211\347\232\204\346\226\260\347\211\271\346\200\247.md"
new file mode 100644
index 00000000..a10e3cdc
--- /dev/null
+++ "b/Cute-Article/article/41-ES2018\357\274\210ES9\357\274\211\347\232\204\346\226\260\347\211\271\346\200\247.md"
@@ -0,0 +1,226 @@
+在这篇文章中，我将介绍ES2018（ES9）的新特性，并介绍如何使用它们。
+
+JavaScript（ECMAScript）是跨多个平台的许多厂商实施的不断发展的标准。ES6（ECMAScript 2015）花费六年的时间敲定，是一个很大的发行版。新的年度发布流程被制定，以简化流程并更快地添加功能。 ES9（ES2018）是撰写本文时的最新版本。
+
+TC39由包括浏览器厂商在内的各方组成，他们开会推动JavaScript提案沿着一条严格的发展道路前进:
+
+* Stage 0: strawman——最初想法的提交。
+* Stage 1: proposal（提案）——由TC39至少一名成员倡导的正式提案文件，该文件包括API事例。
+* Stage 2: draft（草案）——功能规范的初始版本，该版本包含功能规范的两个实验实现。
+* Stage 3: candidate（候选）——提案规范通过审查并从厂商那里收集反馈
+* Stage 4: finished（完成）——提案准备加入ECMAScript，但是到浏览器或者Nodejs中可能需要更长的时间
+
+## ES2016
+ES2016添加了两个小的特性来说明标准化过程：
+
+1. 数组`includes()`方法，用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回`true`，否则返回`false`。
+
+2. `a ** b`指数运算符，它与 `Math.pow(a, b)`相同。
+
+## ES2017
+ES2017提供了更多的新特性：
+
+1. `Async` 函数呈现更清晰的 `Promise` 语法
+
+2. `Object.values` 方法返回一个给定对象自己的所有可枚举属性值的数组，值的顺序与使用`for...in`循环的顺序相同（区别在于`for...in`循环枚举原型链中的属性）
+
+3. `Object.entries()`方法返回一个给定对象自身可枚举属性的键值对数组，其排列与使用`for...in`循环遍历改对象时返回的顺序一致（区别在于`for...in`循环也枚举原型链中的属性）
+
+4. `Object.getOwnPropertyDescriptors()`返回一个对象的所有自身属性的描述符（`.value`,`.writable`,`.get`,`.set`,`.configurable`,`enumerable`）
+
+5. `padStart()`和`padEnd()`，填充字符串达到当前长度
+
+6. 结尾逗号，数组定义和函数参数列表
+
+7. `ShareArrayBuffer`和`Atomics`用于从共享内存位置读取和写入
+
+关于ES2017的更多信息请[参阅](https://www.sitepoint.com/es2017-whats-new/)
+
+## ES2018
+ECMAScript 2018（或者叫ES9）现在已经可用了。以下功能已经到达 stage 4，但是在撰写本文时在各个浏览器的实现还不完整。
+
+### 异步迭代
+在`async/await`的某些时刻，你可能尝试在同步循环中调用异步函数。例如：
+```js
+async function process(array) {
+ for (let i of array) {
+ await doSomething(i);
+ }
+}
+```
+这段代码不会正常运行，下面这段同样也不会：
+```js
+async function process(array) {
+ array.forEach(async i => {
+ await doSomething(i);
+ });
+}
+```
+这段代码中，循环本身依旧保持同步，并在在内部异步函数之前全部调用完成。
+ES2018引入异步迭代器（asynchronous iterators），这就像常规迭代器，除了`next()`方法返回一个`Promise`。因此`await`可以和`for...of`循环一起使用，以串行的方式运行异步操作。例如：
+```js
+async function process(array) {
+ for await (let i of array) {
+ doSomething(i);
+ }
+}
+```
+
+### Promise.finally()
+一个`Promise`调用链要么成功到达最后一个`.then()`，要么失败触发`.catch()`。在某些情况下，你想要在无论`Promise`运行成功还是失败，运行相同的代码，例如清除，删除对话，关闭数据库连接等。
+`.finally()`允许你指定最终的逻辑：
+```js
+function doSomething() {
+ doSomething1()
+ .then(doSomething2)
+ .then(doSomething3)
+ .catch(err => {
+ console.log(err);
+ })
+ .finally(() => {
+ // finish here!
+ });
+}
+```
+
+## Rest/Spread 属性
+ES2015引入了[Rest参数](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Rest_parameters)和[扩展运算符](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Spread_syntax)。三个点（...）仅用于数组。Rest参数语法允许我们将一个布丁数量的参数表示为一个数组。
+```js
+restParam(1, 2, 3, 4, 5);
+
+function restParam(p1, p2, ...p3) {
+ // p1 = 1
+ // p2 = 2
+ // p3 = [3, 4, 5]
+}
+```
+
+展开操作符以相反的方式工作，将数组转换成可传递给函数的单独参数。例如`Math.max()`返回给定数字中的最大值：
+```js
+const values = [99, 100, -1, 48, 16];
+console.log( Math.max(...values) ); // 100
+```
+
+ES2018为对象解构提供了和数组一样的Rest参数（）和展开操作符，一个简单的例子：
+```js
+const myObject = {
+ a: 1,
+ b: 2,
+ c: 3
+};
+
+const { a, ...x } = myObject;
+// a = 1
+// x = { b: 2, c: 3 }
+```
+
+或者你可以使用它给函数传递参数：
+```js
+restParam({
+ a: 1,
+ b: 2,
+ c: 3
+});
+
+function restParam({ a, ...x }) {
+ // a = 1
+ // x = { b: 2, c: 3 }
+}
+```
+跟数组一样，Rest参数只能在声明的结尾处使用。此外，它只适用于每个对象的顶层，如果对象中嵌套对象则无法适用。
+扩展运算符可以在其他对象内使用，例如：
+```js
+const obj1 = { a: 1, b: 2, c: 3 };
+const obj2 = { ...obj1, z: 26 };
+// obj2 is { a: 1, b: 2, c: 3, z: 26 }
+```
+
+可以使用扩展运算符拷贝一个对象，像是这样`obj2 = {...obj1}`，但是 这只是一个对象的浅拷贝。另外，如果一个对象A的属性是对象B，那么在克隆后的对象cloneB中，该属性指向对象B。
+
+### 正则表达式命名捕获组（Regular Expression Named Capture Groups）
+JavaScript正则表达式可以返回一个匹配的对象——一个包含匹配字符串的类数组，例如：以YYYY-MM-DD的格式解析日期：
+```js
+const
+ reDate = /([0-9]{4})-([0-9]{2})-([0-9]{2})/,
+ match = reDate.exec('2018-04-30'),
+ year = match[1], // 2018
+ month = match[2], // 04
+ day = match[3]; // 30
+```
+
+这样的代码很难读懂，并且改变正则表达式的结构有可能改变匹配对象的索引。
+ES2018允许命名捕获组使用符号`?
+```
+
+## 8.transform 属性影响 position:fixed？
+(1) 规范中有规定：如果元素的 transform 值不为 none，则该元素会生成包含块和层叠上下文。CSS Transforms Module Level 1 不只在手机上，电脑上也一样。除了 fixed 元素会受影响之外，z-index（层叠上下文）值也会受影响。绝对定位元素等和包含块有关的属性都会受到影响。当然如果 transform 元素的 display 值为 inline 时又会有所不同。最简单的解决方法就是 transform 元素内部不能有 absolute、fixed 元素.
+
+## 9.iOS 对 position: fixed 不太友好，有时我们需要加点处理？
+在安卓上面，点击页面底部的输入框，软键盘弹出，页面移动上移。 而 iOS 上面，点击页面底部输入框，软键盘弹出，输入框看不到了。。。查资料说什么的都有，iscroll,jquery-moblie，absolute，fixe，static 都非常复杂，要改很多。。。 让他弹出时让滚动条在最低部
+```js
+var u = navigator.userAgent, app = navigator.appVersion;
+var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //iOS终端
+if (isiOS) {
+ $('textarea').focus(function () {
+ window.setTimeout('scrollBottom()', 500);
+ });
+}
+function scrollBottom() {
+ window.scrollTo(0, $('body').height());
+}
+```
+
+## 10.jQuery validate 插件验证问题？
+所有的 input 必须有 name 不然会出错
+
+## 11.有时手机会出现断网的情况，我没可能会对断网的情况做一些处理？
+`navigator.onLine` 可判断是否是脱机状态.
+
+## 12.判断对象的长度？
+(1) 用 `Object.keys`，`Object.keys` 方法返回的是一个数组，数组里面装的是对象的属性。
+```js
+var person = {
+ "name" : "zhangshan",
+ "sex" : "man",
+ "age" : "50",
+ "height" : "180",
+ "phone" : "1xxxxxxxxxx",
+ "email" : "xxxxxxxxx@xxx.com"
+};
+var arr = Object.keys(person);
+console.log(arr.length);
+```
+(2)Object.getOwnPropertyNames(obj).length
+
+## 13.上一题我们用到了 Object.keys 与 Object.getOwnPropertyNames 他们的区别？
+`Object.keys` 定义：返回一个对象可枚举属性的字符串数组；
+`Object.getOwnPropertyNames` 定义：返回一个对象可枚举、不可枚举属性的名称；
+属性的可枚举性、不可枚举性：定义：可枚举属性是指那些内部 “可枚举” 标志设置为 true 的属性，对于通过直接的赋值和属性初始化的属性，该标识值默认为即为 true，对于通过 `Object.defineProperty` 等定义的属性，该标识值默认为 false。
+```js
+var obj = { "prop1": "v1" };
+Object.defineProperty(obj, "prop2", { value: "v2", enumerable: false });
+console.log(Object.keys(obj).length); //output：1
+console.log(Object.getOwnPropertyNames(obj).length); //output：2
+console.log(Object.keys(obj)); //output：Array[1] => [0: "prop1"]
+console.log(Object.getOwnPropertyNames(obj)); //output：Array[2] => [0: "prop1", 1: "prop2"]
+```
+
+综合实例：
+```js
+var obj = { "prop1": "v1" };
+Object.defineProperty(obj, "prop2", { value: "v2", enumerable: false});
+console.log(obj.hasOwnProperty("prop1")); //output: true
+console.log(obj.hasOwnProperty("prop2")); //output: true
+console.log(obj.propertyIsEnumerable("prop1")); //output: true
+console.log(obj.propertyIsEnumerable("prop2")); //output: false
+console.log('prop1' in obj); //output: true
+console.log('prop2' in obj); //output: true
+for (var item in obj) {
+ console.log(item);
+}
+//output：prop1
+for (var item in Object.getOwnPropertyNames(obj)) {
+ console.log(Object.getOwnPropertyNames(obj)[item]);
+}
+//ouput:[prop1,prop2]
+```
+
+## 14.移动开发不同手机弹出数字键盘问题？
+#### 1. type="tel"
+iOS 和 Android 的键盘表现都差不多
+
+#### 2. type="number"
+**优点**：Android 下实现的一个真正的数字键盘
+**缺点一**：iOS 下不是九宫格键盘，输入不方便
+**缺点二**：旧版 Android（包括微信所用的 X5 内核）在输入框后面会有超级鸡肋的小尾巴，好在 Android 4.4.4 以后给去掉了。 不过对于缺点二，我们可以用 webkit 私有的伪元素给 fix 掉：
+```js
+input[type=number]::-webkit-inner-spin-button,
+input[type=number]::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ appearance: none;
+ margin: 0;
+}
+```
+#### 3. pattern 属性
+pattern 用于验证表单输入的内容，通常 HTML5 的 type 属性，比如 email、tel、number、data 类、url 等，已经自带了简单的数据格式验证功能了，加上 pattern 后，前端部分的验证更加简单高效了。
+显而易见，pattern 的属性值要用正则表达式。
+实例 简单的数字验证
+数字的验证有两个：
+```html
+
+
+```
+
+## 15.input[number] 类型输入非数字字符
+js 获取的值是空；比如 - 12，+123 等
+
+## 16.Javascript：history.go() 和 history.back() 的用法与区别？
+`go(-1)`: 返回上一页，原页面表单中的内容会丢失；
+`back()`: 返回上一页，原页表表单中的内容会保留；
+`history.go(-1)`: 后退 + 刷新；
+`history.back()`: 后退；
+
+之所以注意到这个区别，是因为不同的浏览器后退行为也是有区别的，而区别就跟 `javascript：history.go()` 和 `history.back()` 的区别类似。
+Chrome 和 ff 浏览器后退页面，会刷新后退的页面，若有数据请求也会提交数据申请。类似于 `history.go(-1)`;
+而 safari（包括桌面版和 ipad 版）的后退按钮则不会刷新页面，也不会提交数据申请。类似于 `javascript：history.back()`;
+
+## 17.Meta 基础知识：
+```html
+
+// width 设置viewport宽度，为一个正整数，或字符串‘device-width’
+// height 设置viewport高度，一般设置了宽度，会自动解析出高度，可以不用设置
+// initial-scale 默认缩放比例，为一个数字，可以带小数
+// minimum-scale 允许用户最小缩放比例，为一个数字，可以带小数
+// maximum-scale 允许用户最大缩放比例，为一个数字，可以带小数
+// user-scalable 是否允许手动缩放
+空白页基本meta标签
+
+
+
+
+
+
+
+
+其他meta标签
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+## 18.移动端如何定义字体 font-family？
+@ ------------ 中文字体的英文名称
+@ 宋体 SimSun
+@ 黑体 SimHei
+@ 微信雅黑 Microsoft Yahei
+@ 微软正黑体 Microsoft JhengHei
+@ 新宋体 NSimSun
+@ 新细明体 MingLiU
+@ 细明体 MingLiU
+@ 标楷体 DFKai-SB
+@ 仿宋 FangSong
+@ 楷体 KaiTi
+@ 仿宋GB2312 FangSongGB2312
+@ 楷体GB2312 KaiTiGB2312
+**说明**：中文字体多数使用宋体、雅黑，英文用 Helvetica
+```css
+body {font-family: Microsoft Yahei,SimSun,Helvetica;}
+```
+
+## 19.打电话发短信写邮件怎么实现？
+```html
+// 一、打电话
+打电话给:0755-10086
+// 二、发短信，winphone系统无效
+发短信给: 10086
+// 三、写邮件
+点击我发邮件
+//2.收件地址后添加?cc=开头，可添加抄送地址（Android存在兼容问题）
+点击我发邮件
+//3.跟着抄送地址后，写上&bcc=,可添加密件抄送地址（Android存在兼容问题）
+点击我发邮件
+//4.包含多个收件人、抄送、密件抄送人，用分号(;)隔开多个邮件人的地址
+点击我发邮件
+//5.包含主题，用?subject=
+点击我发邮件
+//6.包含内容，用?body=;如内容包含文本，使用%0A给文本换行
+点击我发邮件
+//7.内容包含链接，含http(s)://等的文本自动转化为链接
+点击我发邮件
+//8.内容包含图片（PC不支持）
+点击我发邮件
+//9.完整示例
+点击我发邮件
+```
+
+## 20.移动端 touch 事件（区分 webkit 和 winphone）？
+#### 1. 以下支持 webkit
+**touchstart**——当手指触碰屏幕时候发生。不管当前有多少只手指
+**touchmove**——当手指在屏幕上滑动时连续触发。通常我们再滑屏页面，会调用 event 的 **preventDefault() 可以阻止默认情况的发生：阻止页面滚动
+**touchend**——当手指离开屏幕时触发
+**touchcancel**——系统停止跟踪触摸时候会触发。例如在触摸过程中突然页面 alert() 一个提示框，此时会触发该事件，这个事件比较少用
+
+#### 2. TouchEvent 说明：
+**touches**：屏幕上所有手指的信息
+**targetTouches**：手指在目标区域的手指信息
+**changedTouches**：最近一次触发该事件的手指信息
+touchend 时，touches 与 targetTouches 信息会被删除，changedTouches 保存的最后一次的信息，最好用于计算手指信息
+#### 3.参数信息 (changedTouches[0])
+**clientX**、**clientY** 在显示区的坐标
+**target**：当前元素
+#### 4.事件响应顺序
+ontouchstart > ontouchmove > ontouchend > onclick
+
+## 21.点击元素产生背景或边框怎么去掉
+* **iOS用户** 点击一个链接，会出现一个半透明灰色遮罩, 如果想要禁用，可设置`-webkit-tap-highlight-color`的alpha值为`0`去除灰色半透明遮罩；
+* **android用户** 点击一个链接，会出现一个边框或者半透明灰色遮罩, 不同生产商定义出来额效果不一样，可设置`-webkit-tap-highlight-color`的alpha值为`0`去除部分机器自带的效果；
+* **winphone系统** 点击标签产生的灰色半透明背景，能通过设置``去掉；
+* 特殊说明：有些机型去除不了，如小米2。对于按钮类还有个办法，不使用a或者input标签，直接用div标签
+```css
+a,button,input,textarea {
+ -webkit-tap-highlight-color: rgba(0,0,0,0);
+ -webkit-user-modify:read-write-plaintext-only;
+ //-webkit-user-modify 副作用 输入法不再能够输入多个字符
+}
+```
+也可以
+```css
+* { -webkit-tap-highlight-color: rgba(0,0,0,0); }
+```
+winphone下
+```html
+
+```
+## 22.美化表单元素
+#### 1. 使用 appearance 改变 webkit 浏览器的默认外观
+```css
+input,select {-webkit-appearance:none; appearance: none;}
+```
+#### 2.winphone 下，使用伪元素改变表单元素默认外观
+* 1） 禁用 select 默认箭头，`::-ms-expand` 修改表单控件下拉箭头，设置隐藏并使用背景图片来修饰
+```css
+select::-ms-expand {display:none;}
+```
+* 2） 禁用 radio 和 checkbox 默认样式，`::-ms-check` 修改表单复选框或单选框默认图标，设置隐藏并使用背景图片来修饰
+```css
+input[type=radio]::-ms-check,
+input[type=checkbox]::-ms-check { display:none; }
+```
+* 3） 禁用 pc 端表单输入框默认清除按钮，`::-ms-clear` 修改清除按钮，设置隐藏并使用背景图片来修饰
+```css
+input[type=text]::-ms-clear,
+input[type=tel]::-ms-clear,
+input[type=number]::-ms-clear { display:none; }
+```
+
+## 23.移动端字体单位 font-size 选择 px 还是 rem？
+如需适配多种移动设备，建议使用 rem。以下为参考值：
+```css
+html {font-size: 62.5%;} //10*16 = 62.5%
+```
+设置 12px 字体 这里注意在 rem 前要加上对应的 px 值，解决不支持 rem 的浏览器的兼容问题，做到优雅降级
+```css
+body {font-size:12px; font-size:1.2rem;}
+```
+
+## 24.input 标签添加上 disable 属性在 iOS 端字体颜色不兼容的问题？
+```css
+input[disabled],input:disabled,input.disabled{
+ color: #3e3e3e;
+ -webkit-text-fill-color: #3e3e3e;
+ -webkit-opacity:1;
+ opacity: 1;
+}
+```
+
+## 25.iOS 的光标大小问题
+#### IE：
+不管该行有没有文字，光标高度与 font-size 一致。
+#### FF：
+该行有文字时，光标高度与 font-size 一致。该行无文字时，光标高度与 input 的 height 一致。
+#### Chrome：
+该行无文字时，光标高度与 line-height 一致；该行有文字时，光标高度从 input 顶部到文字底部 (这两种情况都是在有设定 line-height 的时候)，如果没有 line-height，则是与 font-size 一致。
+
+iOS 中情况和 Chrome 相似。
+设置字体大小和行高一致，然后通过 padding 撑开大小，只给 IE 浏览器设置
+```css
+line-height：-ms-line-height:40px;
+```
+
+原文：https://segmentfault.com/a/1190000015178877 作者：键盘上的眼泪
\ No newline at end of file
diff --git "a/Cute-Article/article/44-\345\211\215\347\253\257\346\234\254\345\234\260\346\226\207\344\273\266\346\223\215\344\275\234\345\222\214\344\270\212\344\274\240.md" "b/Cute-Article/article/44-\345\211\215\347\253\257\346\234\254\345\234\260\346\226\207\344\273\266\346\223\215\344\275\234\345\222\214\344\270\212\344\274\240.md"
new file mode 100644
index 00000000..195d40fc
--- /dev/null
+++ "b/Cute-Article/article/44-\345\211\215\347\253\257\346\234\254\345\234\260\346\226\207\344\273\266\346\223\215\344\275\234\345\222\214\344\270\212\344\274\240.md"
@@ -0,0 +1,352 @@
+[原文地址](https://juejin.im/post/5a193b4bf265da43052e528a)
+
+前端无法像原生APP一样直接操作本地文件，否则的话打开个网页就能把用户电脑上的文件偷光了，所以需要通过用户触发，用户可通过以下三种方式操作触发：
+
+1. 通过input type="file" 选择本地文件
+2. 通过拖拽的方式把文件拖过来
+3. 在编辑框里面复制粘贴
+
+### 第一种
+第一种是最常用的手段，通常还会自定义一个按钮，然后盖在它上面，因为`type="file"`的input不好改变样式。如下代码写一个选择控件，并放在form里面：
+```html
+
+```
+然后就可以用FormData获取整个表单的内容：
+```js
+$("#file-input").on("change", function() {
+ console.log(`file name is ${this.value}`);
+ let formData = new FormData(this.form);
+ formData.append("fileName", this.value);
+ console.log(formData);
+});
+```
+把input的value和formData打印出来是这样的：
+
+
+可以看到文件的路径是一个假的路径，也就是说在浏览器无法获取到文件的真实存放位置。同时FormData打印出来是一个空的Objet，但并不是说它的内容是空的，只是它对前端开发人员是透明的，无法查看、修改、删除里面的内容，只能`append`添加字段。
+
+`FormData`无法得到文件的内容，而使用`FileReader`可以读取整个文件的内容。用户选择文件之后，`input.files`就可以得到用户选中的文件，如下代码：
+```js
+$("#file-input").on("change", function() {
+ let fileReader = new FileReader(),
+ fileType = this.files[0].type;
+ fileReader.onload = function() {
+ if (/^image/.test(fileType)) {
+ // 读取结果在fileReader.result里面
+ $(`
+ drop your image here
+
+```
+这将在页面显示一个框：
+
+
+然后监听它的拖拽事件：
+```js
+$(".img-container").on("dragover", function (event) {
+ event.preventDefault();
+})
+
+.on("drop", function(event) {
+ event.preventDefault();
+ // 数据在event的dataTransfer对象里
+ let file = event.originalEvent.dataTransfer.files[0];
+
+ // 然后就可以使用FileReader进行操作
+ fileReader.readAsDataURL(file);
+
+ // 或者是添加到一个FormData
+ let formData = new FormData();
+ formData.append("fileContent", file);
+})
+```
+数据在`drop`事件的`event.dataTransfer.files`里面，拿到这个`File`对象之后就可以和输入框进行一样的操作了，即使用`FileReader`读取，或者是新建一个空的`formData`，然后把它`append`到`formData`里面。
+
+
+### 第三种
+第三种粘贴的方式，通常是在一个编辑框里操作，如把`div`的`contenteditable`设置为true：
+```html
+
+ hello, paste your image here
+
+```
+粘贴的数据是在`event.clipboardData.files`里面：
+```js
+$("#editor").on("paste", function(event) {
+ let file = event.originalEvent.clipboardData.files[0];
+});
+```
+但是Safari的粘贴不是通过`event`传递的，它是直接在输入框里面添加一张图片，如下图所示：
+
+
+它新建了一个`img`标签，并把`img`的`src`指向一个`blob`的本地数据。什么是`blob`呢，如何读取`blob`的内容呢？
+blob是一种类文件的存储格式，它可以存储几乎任何格式的内容，如json：
+```js
+let data = {hello: "world"};
+let blob = new Blob([JSON.stringify(data)],
+ {type : 'application/json'});
+```
+为了获取本地的blob数据，我们可以用ajax发个本地的请求：
+```js
+$("#editor").on("paste", function(event) {
+ // 需要setTimeout 0等图片出来了再处理
+ setTimeout(() => {
+ let img = $(this).find("img[src^='blob']")[0];
+ console.log(img.src);
+ // 用一个xhr获取blob数据
+ let xhr = new XMLHttpRequest();
+ xhr.open("GET", img.src);
+ // 改变mime类型
+ xhr.responseType = "blob";
+ xhr.onload = function () {
+ // response就是一个Blob对象
+ console.log(this.response);
+ };
+ xhr.send();
+ }, 0);
+});
+```
+上面代码把blob打印出来是这样的：
+
+
+能得到它的大小和类型，但是具体内容也是不可见的，它有一个`slice`的方法，可用于切割大文件。和`File`一样，可以使用`FileReader`读取它的内容：
+```js
+function readBlob(blobImg) {
+ let fileReader = new FileReader();
+ fileReader.onload = function() {
+ console.log(this.result);
+ }
+ fileReader.onerror = function(err) {
+ console.log(err);
+ }
+ fileReader.readAsDataURL(blobImg);
+}
+readBlob(this.response);
+```
+除此，还能使用`window.URL`读取，这是一个新的API，经常和`Service Worker`配套使用，因为SW里面常常要解析url。如下代码：
+```js
+function readBlob(blobImg) {
+ let urlCreator = window.URL || window.webkitURL;
+ // 得到base64结果
+ let imageUrl = urlCreator.createObjectURL(this.response);
+ return imageUrl;
+}
+
+readBlob(this.response);
+```
+关于src使用的是blob链接的，除了上面提到的img之外，另外一个很常见的是video标签，如youtobe的视频就是使用的blob：
+
+
+这种数据不是直接在本地的，而是通过持续请求视频数据，然后再通过`blob`这个容器媒介添加到`video`里面，它也是通过URL的API创建的：
+```js
+let mediaSource = new MediaSource();
+video.src = URL.createObjectURL(mediaSource);
+let sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
+sourceBuffer.appendBuffer(buf);
+```
+具体我也没实践过，不再展开讨论。
+
+上面，我们使用了三种方式获取文件内容，最后得到：
+
+1. `FormData`格式
+2. `FileReader`读取得到的`base64`或者`ArrayBuffer`二进制格式
+
+如果直接就是一个`FormData`了，那么直接用`ajax`发出去就行了，不用做任何处理：
+```js
+let form = document.querySelector("form"),
+ formData = new FormData(form),
+formData.append("fileName", "photo.png");
+
+let xhr = new XMLHttpRequest();
+// 假设上传文件的接口叫upload
+xhr.open("POST", "/upload");
+xhr.send(formData);
+```
+如果用jQuery的话，要设置两个属性为false：
+```js
+$.ajax({
+ url: "/upload",
+ type: "POST",
+ data: formData,
+ processData: false, // 不处理数据
+ contentType: false // 不设置内容类型
+});
+```
+因为jQuery会自动把内容做一些转义，并且根据`data`自动设置请求`mime`类型，这里告诉jQuery直接用`xhr.send`发出去就行了。
+
+观察控制台发请求的数据：
+
+
+可以看到这是一种区别于用`&`连接参数的方式，它的编码格式是`multipart/form-data`，就是上传文件`form`表单写的`enctype`：
+```html
+
+```
+如果`xhr.send`的是`FormData`类型话，它会自动设置`enctype`，如果你用默认表单提交上传文件的话就得在`form`上面设置这个属性，因为上传文件只能使用`POST`的这种编码。常用的`POST`编码是`application/x-www-form-urlencoded`，它和`GET`一样，发送的数据里面，参数和参数之间使用`&`连接，如：
+```js
+key1=value1&key2=value2
+```
+特殊字符做转义，这个数据`POST`是放在请求`body`里的，而`GET`是拼在`url`上面的，如果用jq的话，jq会帮你拼并做转义。
+
+而上传文件用的这种`multipart/form-data`，参数和参数之间是且一个相同的字符串隔开的，上面的是使用：
+```
+------WebKitFormBoundary72yvM25iSPYZ4a3F
+```
+这个字符通常会取得比较长、比较随机，因为要保证正常的内容里面不会出现这个字符串，这样内容的特殊字符就不用做转义了。
+
+请求的contentType被浏览器设置成：
+```
+Content-Type:
+multipart/form-data; boundary=----WebKitFormBoundary72yvM25iSPYZ4a3F
+```
+后端服务通过这个就知道怎么解析这么一段数据了。（通常是使用的框架处理了，而具体的接口不需要关心应该怎么解析）
+
+如果读取结果是`ArrayBuffer`的话，也是可以直接用`xhr.send`发送出去的，但是一般我们不会直接把一个文件的内容发出去，而是用某个字段名等于文件内容的方式。如果你读取为`ArrayBuffer`的话再上传的话其实作用不是很大，还不如直接用`formData`添加一个`File`对象的内容，因为上面三种方式都可以拿到`File`对象。如果一开始就是一个`ArrayBuffer`了，那么可以转成`blob`然后再`append`到`FormData`里面。
+
+使用比较多的应该是`base64`，因为前端经常要处理图片，读取为`base64`之后就可以把它画到一个`canvas`里面，然后就可以做一些处理，如压缩、裁剪、旋转等。最后再用`canvas`导出一个`base64`格式的图片，那怎么上传`base64`格式的呢？
+
+### 怎么上传`base64`格式
+第一种是拼一个表单上传的`multipart/form-data`的格式，再用`xhr.sendAsBinary`发出去，如下代码：
+```js
+let base64Data = base64Data.replace(/^data:image\/[^;]+;base64,/, "");
+let boundary = "----------boundaryasoifvlkasldvavoadv";
+xhr.sendAsBinary([
+ // name=data
+ boundary,
+ 'Content-Disposition: form-data; name="data"; filename="' + fileName + '"',
+ 'Content-Type: ' + "image/" + fileType, '',
+ atob(base64Data), boundary,
+ //name=imageType
+ boundary,
+ 'Content-Disposition: form-data; name="imageType"', '',
+ fileType,
+ boundary + '--'
+].join('\r\n'));
+```
+上面代码使用了`window.atob`的api，它可以把`base64`还原成原始内容的字符串表示，如下图所示：
+
+
+`btoa`是把内容转化成`base64`编码，而`atob`是把`base64`还原。在调`atob`之前，需要把表示内容格式的不属于`base64`内容的字符串去掉，即上面代码第一行的`replace`处理。
+
+这样就和使用`formData`类似了，但是由于`sendAsBinary`已经被`deprecated`了，所以新代码不建议再使用这种方式。那怎么办呢？
+
+可以把`base64`转化成`blob`，然后再`append`到一个`formData`里面，下面的函数（来自b64-to-blob）可以把`base64`转成`blob`：
+```js
+function b64toBlob(b64Data, contentType, sliceSize) {
+ contentType = contentType || '';
+ sliceSize = sliceSize || 512;
+
+ var byteCharacters = atob(b64Data);
+ var byteArrays = [];
+
+ for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
+ var slice = byteCharacters.slice(offset, offset + sliceSize);
+
+ var byteNumbers = new Array(slice.length);
+ for (var i = 0; i < slice.length; i++) {
+ byteNumbers[i] = slice.charCodeAt(i);
+ }
+
+ var byteArray = new Uint8Array(byteNumbers);
+
+ byteArrays.push(byteArray);
+ }
+
+ var blob = new Blob(byteArrays, {type: contentType});
+ return blob;
+}
+```
+然后就可以`append`到`formData`里面：
+```js
+let blob = b64toBlob(b64Data, "image/png"),
+ formData = new FormData();
+formData.append("fileContent", blob);
+```
+这样就不用自己去拼一个`multipart/form-data`的格式数据了。
+
+上面处理和上传文件的API可以兼容到IE10+，如果要兼容老的浏览器应该怎么办呢？
+
+可以借助一个`iframe`，原理是默认的`form`表单提交会刷新页面，或者跳到`target`指定的那个url，但是如果把`ifrmae`的`target`指向一个`iframe`，那么刷新的就是`iframe`，返回结果也会显示在`ifame`，然后获取这个`ifrmae`的内容就可得到上传接口返回的结果。
+
+如下代码：
+```js
+let iframe = document.createElement("iframe");
+iframe.display = "none";
+iframe.name = "form-iframe";
+document.body.appendChild(iframe);
+// 改变form的target
+form.target = "form-iframe";
+
+iframe.onload = function() {
+ //获取iframe的内容，即服务返回的数据
+ let responseText = this.contentDocument.body.textContent
+ || this.contentWindow.document.body.textContent;
+};
+
+form.submit();
+```
+`form.submit`会触发表单提交，当请求完成（成功或者失败）之后就会触发iframe的onload事件，然后在onload事件获取返回的数据，如果请求失败了的话，iframe里的内容就为空，可以用这个判断请求有没有成功。
+
+
+
+使用iframe没有办法获取上传进度，使用xhr可以获取当前上传的进度，这个是在XMLHttpRequest 2.0引入的：
+```js
+xhr.upload.onprogress = function (event) {
+ if (event.lengthComputable) {
+ // 当前上传进度的百分比
+ duringCallback ((event.loaded / event.total)*100);
+ }
+};
+```
+这样就可以做一个真实的loading进度条。
+
+
+本文讨论了3种交互方式的读取方式，通过`input`控件在`input.files`可以得到File文件对象，通过拖拽的是在`drop`事件的`event.dataTransfer.files`里面，而通过粘贴的`paste`事件在`event.clipboardData.files`里面，Safari这个怪胎是在编辑器里面插入一个src指向本地的img标签，可以通过发送一个请求加载本地的`blob`数据，然后再通过`FileReader`读取，或者直接`append`到`formData`里面。得到的File对象就可以直接添加到`FormData`里面，如果需要先读取`base64`格式做处理的，那么可以把处理后的`base64`转化为`blob`数据再`append`到`formData`里面。对于老浏览器，可以使用一个iframe解决表单提交刷新页面或者跳页的问题。
+
+总之，前端处理和上传本地文件应该差不多就是这些内容了，但是应该还有好多细节没有提及到，读者可通过本文列的方向自行实践。如果有其它的上传方式还请告知。
\ No newline at end of file
diff --git "a/Cute-Article/article/45-js\344\270\255reduce\347\232\204\347\245\236\345\245\207\347\224\250\346\263\225.md" "b/Cute-Article/article/45-js\344\270\255reduce\347\232\204\347\245\236\345\245\207\347\224\250\346\263\225.md"
new file mode 100644
index 00000000..01b61708
--- /dev/null
+++ "b/Cute-Article/article/45-js\344\270\255reduce\347\232\204\347\245\236\345\245\207\347\224\250\346\263\225.md"
@@ -0,0 +1,135 @@
+最近经常在项目中经常看到别人用reduce处理数据，很是牛掰，很梦幻， 不如自己琢磨琢磨。先看w3c语法。
+## w3c语法
+```js
+array.reduce(function(total, currentValue, currentIndex, arr), initialValue);
+/*
+total: 必需。初始值, 或者计算结束后的返回值。
+currentValue： 必需。当前元素。
+currentIndex： 可选。当前元素的索引；
+arr： 可选。当前元素所属的数组对象。
+initialValue: 可选。传递给函数的初始值，相当于total的初始值。
+*/
+```
+
+## 常见用法
+
+### 1.数组求和
+```js
+const arr = [12, 34, 23];
+const sum = arr.reduce((total, num) => total + num);
+// 设定初始值求和
+const arr = [12, 34, 23];
+const sum = arr.reduce((total, num) => total + num, 10); // 以10为初始值求和
+// 对象数组求和
+var result = [
+{ subject: 'math', score: 88 },
+{ subject: 'chinese', score: 95 },
+{ subject: 'english', score: 80 }
+];
+const sum = result.reduce((prev, cur) => prev + cur.score, 0);
+const sum = result.reduce((prev, cur) => prev + cur.score, -10); // 总分扣除10分
+```
+
+### 2.数组最大值
+```js
+const a = [23,123,342,12];
+const max = a.reduce(function(pre,cur,inde,arr){return pre>cur?pre:cur;}); // 342
+```
+
+## 进阶用法
+
+### 1.数组对象中的用法
+```js
+// 比如生成“老大、老二和老三”
+const objArr = [{name: '老大'}, {name: '老二'}, {name: '老三'}];
+const res = objArr.reduce((pre, cur, index, arr) => {
+if (index === 0) {
+return cur.name;
+}
+else if (index === (arr.length - 1)) {
+return pre + '和' + cur.name;
+}
+else {
+return pre + '、' + cur.name;
+}
+}, '');
+```
+### 2.求字符串中字母出现的次数
+```js
+const str = 'sfhjasfjgfasjuwqrqadqeiqsajsdaiwqdaklldflas-cmxzmnha';
+const res = str.split('').reduce((prev, cur) => {prev[cur] ? prev[cur]++ : prev[cur] = 1; return prev;}, {});
+```
+
+### 3.数组转数组
+```js
+// 按照一定的规则转成数组
+var arr1 = [2, 3, 4, 5, 6]; // 每个值的平方
+var newarr = arr1.reduce((prev, cur) => {prev.push(cur * cur); return prev;}, []);
+```
+
+### 4.数组转对象
+```js
+// 按照id 取出stream
+var streams = [{name: '技术', id: 1}, {name: '设计', id: 2}];
+var obj = streams.reduce((prev, cur) => {prev[cur.id] = cur; return prev;}, {});
+```
+
+## 高级用法
+
+### 1.多维的叠加执行操作
+```js
+// 各科成绩占比重不一样， 求结果
+var result = [
+{ subject: 'math', score: 88 },
+{ subject: 'chinese', score: 95 },
+{ subject: 'english', score: 80 }
+];
+var dis = {
+math: 0.5,
+chinese: 0.3,
+english: 0.2
+};
+var res = result.reduce((prev, cur) => dis[cur.subject] * cur.score + prev, 0);
+
+// 加大难度， 商品对应不同国家汇率不同，求总价格
+var prices = [{price: 23}, {price: 45}, {price: 56}];
+var rates = {
+us: '6.5',
+eu: '7.5',
+};
+var initialState = {usTotal:0, euTotal: 0};
+var res = prices.reduce((prev1, cur1) => Object.keys(rates).reduce((prev2, cur2) => {
+console.log(prev1, cur1, prev2, cur2);
+prev1[`${cur2}Total`] += cur1.price * rates[cur2];
+return prev1;
+}, {}), initialState);
+
+var manageReducers = function() {
+return function(state, item) {
+return Object.keys(rates).reduce((nextState, key) => {
+state[`${key}Total`] += item.price * rates[key];
+return state;
+}, {});
+}
+};
+var res1= prices.reduce(manageReducers(), initialState);
+```
+
+### 2.扁平一个多维数组
+```js
+var arr = [[1, 2, 8], [3, 4, 9], [5, 6, 10]];
+var res = arr.reduce((x, y) => x.concat(y), []);
+```
+
+### 3.对象数组去重
+```js
+const hash = {};
+chatlists = chatlists.reduce((obj, next: Object) => {
+const hashId = `${next.topic}_${next.stream_id}`;
+if (!hash[hashId]) {
+hash[`${next.topic}_${next.stream_id}`] = true;
+obj.push(next);
+}
+return obj;
+}, []);
+```
diff --git "a/Cute-Article/article/46-\345\234\250JavaScript\344\270\255\346\233\264\345\245\275\347\232\204\344\275\277\347\224\250\346\225\260\347\273\204.md" "b/Cute-Article/article/46-\345\234\250JavaScript\344\270\255\346\233\264\345\245\275\347\232\204\344\275\277\347\224\250\346\225\260\347\273\204.md"
new file mode 100644
index 00000000..f6ed44b0
--- /dev/null
+++ "b/Cute-Article/article/46-\345\234\250JavaScript\344\270\255\346\233\264\345\245\275\347\232\204\344\275\277\347\224\250\346\225\260\347\273\204.md"
@@ -0,0 +1,142 @@
+[阅读原文](https://juejin.im/post/5b8d0a74f265da431d0e7ec0)
+[MDN Array 介绍](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array)
+
+本文短小精悍，我保证。在过去的数个月里，我注意到在我审阅的 pull request 中有四个（关于数组使用的）错误经常出现。同时，我自己也会犯这些错误，因此有了这篇文章。让我们一起学习，以确保以后能正确地使用数组方法！
+
+## 1.使用 `Array.includes` 替代 `Array.indexOf`
+
+> "如果需要在数组中查找某个元素，请使用 `Array.indexOf`。"
+
+我记得在我学习 JavaScript 的课程中有类似的这么一句话。毫无疑问，这完全正确！
+
+在 MDN 文档中，对 `Array.indexOf` 的描述是：返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回`-1`。因此，如果在之后的代码中需要用到（给给定元素的）索引，那么` Array.indexOf` 是不二之选。
+
+然而，如果我们仅需要知道数组中是否包含给定元素呢？这意味着只是是与否的区别，这是一个布尔问题（boolean question）。针对这种情况，我建议使用直接返回布尔值的 `Array.includes`。
+```js
+'use strict';
+
+const characters = [
+ 'ironman',
+ 'black_widow',
+ 'hulk',
+ 'captain_america',
+ 'hulk',
+ 'thor',
+];
+
+console.log(characters.indexOf('hulk'));
+// 2
+console.log(characters.indexOf('batman'));
+// -1
+
+console.log(characters.includes('hulk'));
+// true
+console.log(characters.includes('batman'));
+// false
+```
+
+## 2.使用 `Array.find` 替代 `Array.filter`
+`Array.filter` 是一个十分有用的方法。它通过回调函数过滤原数组，并将过滤后的项作为新数组返回。正如它的名字所示，我们将这个方法用于过滤，（一般而言）会获得一个长度更短的新数组。
+
+然而，如果知道经回调函数过滤后，只会剩余唯一的一项，那么我不建议使用 `Array.filter`。比如：使用等于某个唯一 ID 为过滤条件去过滤一个数组。在这个例子中，`Array.filter` 返回一个仅有一项的新数组。然而，我们仅仅是为了获取 ID 为特定 ID 的那一项，这个新数组显得毫无用处。
+
+让我们讨论一下性能。为了获取所有符合回调函数过滤条件的项，`Array.filter` 必须遍历整个数组。如果原数组中有成千上万项，回调函数需要执行的次数是相当多的。
+
+为避免这些情况，我建议使用 `Array.find`。它与 `Array.filter` 一样需要一个回调函数，（但只是返回）符合条件的第一项。当找到符合回调函数过滤条件的第一个元素时，它会立即停止往下的搜寻。不再遍历整个数组。
+```js
+'use strict';
+
+const characters = [
+ { id: 1, name: 'ironman' },
+ { id: 2, name: 'black_widow' },
+ { id: 3, name: 'captain_america' },
+ { id: 4, name: 'captain_america' },
+];
+
+function getCharacter(name) {
+ return character => character.name === name;
+}
+
+console.log(characters.filter(getCharacter('captain_america')));
+// [
+// { id: 3, name: 'captain_america' },
+// { id: 4, name: 'captain_america' },
+// ]
+
+console.log(characters.find(getCharacter('captain_america')));
+// { id: 3, name: 'captain_america' }
+```
+
+## 3.使用 `Array.some` 替代 `Array.find`
+我承认我经常犯这个错误。之后，一位朋友建议我去查看 [MDN 文档](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/some) 以寻找更好的方法。事实上（这错误）与上面 `Array.indexOf`/`Array.includes` 的例子十分相像。
+
+在上面的例子中，我们知道 `Array.find` 需要一个回调函数作为参数，并返回（符合条件的）第一个元素。然而，当我们需要知道数组中是否存在一个元素时，`Array.find` 是最好的选择吗？不一定是，因为它返回一个元素，而不是一个布尔值。
+
+在下面的例子中，我建议使用 `Array.some`，它返回你需要的布尔值。
+```js
+'use strict';
+
+const characters = [
+ { id: 1, name: 'ironman', env: 'marvel' },
+ { id: 2, name: 'black_widow', env: 'marvel' },
+ { id: 3, name: 'wonder_woman', env: 'dc_comics' },
+];
+
+function hasCharacterFrom(env) {
+ return character => character.env === env;
+}
+
+console.log(characters.find(hasCharacterFrom('marvel')));
+// { id: 1, name: 'ironman', env: 'marvel' }
+
+console.log(characters.some(hasCharacterFrom('marvel')));
+// true
+```
+译者注：补充一下 `Array.some` 与 `Array.includes` 使用上的区别。两者都返回一个布尔值，表示某项是否存在于数组之中，一旦找到对应的项，立即停止遍历数组。不同的是 `Array.some` 的参数是回调函数，而 `Array.includes` 的参数是一个值（均不考虑第二个可选参数）。
+假设希望知道值为 value 的项是否存在于数组中，既可以编写代码：`[].includes(value)`， 也可以给 `Array.some` 传入 `item => item === value` 作为回调函数。`Array.includes` 使用更简单，`Array.some` 可操控性更强。
+
+## 4.使用 `Array.reduce` 替代 `Array.filter` 与 `Array.map` 的组合
+事实上说，`Array.reduce` 不太容易理解。然而，如果我们先使用 `Array.filter` 过滤原数组，之后（对结果）再调用 `Array.map` （以获取一个新数组）。这看起似乎有点问题，是我们忽略了什么吗？
+
+这样做的问题是：我们遍历了两次数组。第一次是过滤原数组以获取一个长度稍短的新数组，第二次遍历（译者注：指 `Array.map`）是对 `Array.filter` 的返回的新数组进行加工，再次创造了一个新数组！为得到最终的结果，我们结合使用了两个数组方法。每个方法都有它自己的回调函数，而且供 `Array.map` 使用的临时数组是由 `Array.filter` 提供的，（一般而言）该数组无法复用。
+
+为避免如此低效场景的出现，我的建议是使用 `Array.reduce` 。一样的结果，更好的代码！`Array.reduce` 允许你将过滤后切加工过的项放进累加器中。累加器可以是需要待递增的数字、待填充的对象、 待拼接的字符串或数组等。
+
+在上面的例子中，我们使用了 `Array.map`，（但更）建议使用累加器为待拼接数组的 `Array.reduce` 。在下面的例子中，根据变量 `env` 的值，我们会将它加进累加器中或保持累加器不变（即不作任何处理）。
+```js
+'use strict';
+
+const characters = [
+ { name: 'ironman', env: 'marvel' },
+ { name: 'black_widow', env: 'marvel' },
+ { name: 'wonder_woman', env: 'dc_comics' },
+];
+
+console.log(
+ characters
+ .filter(character => character.env === 'marvel')
+ .map(character => Object.assign({}, character, { alsoSeenIn: ['Avengers'] }))
+);
+// [
+// { name: 'ironman', env: 'marvel', alsoSeenIn: ['Avengers'] },
+// { name: 'black_widow', env: 'marvel', alsoSeenIn: ['Avengers'] }
+// ]
+
+console.log(
+ characters
+ .reduce((acc, character) => {
+ return character.env === 'marvel'
+ ? acc.concat(Object.assign({}, character, { alsoSeenIn: ['Avengers'] }))
+ : acc;
+ }, [])
+)
+// [
+// { name: 'ironman', env: 'marvel', alsoSeenIn: ['Avengers'] },
+// { name: 'black_widow', env: 'marvel', alsoSeenIn: ['Avengers'] }
+// ]
+```
+
+### 这就是本文的全部内容！
+希望这对你有帮助。如果你对本文有任何意见或（关于数组方法使用的）例子需要讨论，请在评论中告诉我。如果你觉得本文不错，请给我点赞 👏 （译者注：对灯发誓，这是原文，不是译者骗赞！）并分享给更多的小伙伴。感谢你的阅读！
+
+注意：请在使用 `Array.find` 和 `Array.includes` 前检查浏览器是否支持相关方法，上述两个方法在 Internet Explorer 上并不支持（译者注：可以使用` Polyfill`）。
diff --git "a/Cute-Article/article/47-http\350\257\267\346\261\202\345\244\264\344\270\216\345\223\215\345\272\224\345\244\264\347\232\204\345\272\224\347\224\250.md" "b/Cute-Article/article/47-http\350\257\267\346\261\202\345\244\264\344\270\216\345\223\215\345\272\224\345\244\264\347\232\204\345\272\224\347\224\250.md"
new file mode 100644
index 00000000..5d93ba9c
--- /dev/null
+++ "b/Cute-Article/article/47-http\350\257\267\346\261\202\345\244\264\344\270\216\345\223\215\345\272\224\345\244\264\347\232\204\345\272\224\347\224\250.md"
@@ -0,0 +1,547 @@
+> [阅读原文](https://juejin.im/post/5b854ddef265da43635d9302)
+
+## Chap1 发现headers
+当我们随便打开一个网址（比如大家经常拿来测试网络的百度）时，打开Network,会看到如下请求头，响应头：
+
+究竟这些headers都有什么用呢？ 咱们挨个探个究竟。
+
+## Chap2 headers用途
+
+### 2.1 Content-Type
+`Content-Type`表示请求头或响应头的内容类型。作为请求头时，利用它可以进行`body-parser`。
+Sooo~ What is body-parser?
+body-parser是node常用的中间件，其作用是:
+
+> Parse incoming request bodies in a middleware before your handlers, available under the req.body property.
+
+即在处理数据之前用中间件对post请求体进行解析。
+[body-parser](https://www.npmjs.com/package/body-parser)的例子为：
+
+下面的例子展示了如何给路由添加`body parser`。通常，这是在`express`中最为推荐的使用`body-parser`的方法。
+```js
+var express = require('express')
+var bodyParser = require('body-parser')
+var app = express()
+// create application/json parser
+var jsonParser = bodyParser.json()
+// create application/x-www-form-urlencoded parser
+var urlencodedParser = bodyParser.urlencoded({ extended: false })
+// POST /login gets urlencoded bodies
+app.post('/login', urlencodedParser, function (req, res) {
+ if (!req.body) return res.sendStatus(400)
+ res.send('welcome, ' + req.body.username)
+})
+// POST /api/users gets JSON bodies
+app.post('/api/users', jsonParser, function (req, res) {
+ if (!req.body) return res.sendStatus(400)
+ // create user in req.body
+})
+```
+`body-parser`核心源码为：
+```js
+ // this uses a switch for static require analysis
+ switch (parserName) {
+ case 'json':
+ parser = require('./lib/types/json')
+ break
+ case 'raw':
+ parser = require('./lib/types/raw')
+ break
+ case 'text':
+ parser = require('./lib/types/text')
+ break
+ case 'urlencoded':
+ parser = require('./lib/types/urlencoded')
+ break
+ }
+```
+以`json`为例：
+```js
+var contentType = require('content-type')
+//...
+/**
+ * Get the charset of a request.
+ *
+ * @param {object} req
+ * @api private
+ */
+function getCharset (req) {
+ try {
+ return (contentType.parse(req).parameters.charset || '').toLowerCase()
+ } catch (e) {
+ return undefined
+ }
+}
+//...
+// assert charset per RFC 7159 sec 8.1
+var charset = getCharset(req) || 'utf-8'
+if (charset.substr(0, 4) !== 'utf-') {
+ debug('invalid charset')
+ next(createError(415, 'unsupported charset "' + charset.toUpperCase() + '"', {
+ charset: charset,
+ type: 'charset.unsupported'
+ }))
+ return
+}
+```
+可以看出：其背后工作原理就是通过分析请求头中的`Content-Type`的类型，根据不同的类型进行相应数据处理，我们自己模拟一下：
+
+step1: 先建立`server.js`:
+```js
+ req.on('end',function (params) {
+ let r = Buffer.concat(arr).toString();
+ // body-parser 解析请求，根据不同的格式进行不同的解析
+ if (req.headers['content-type'] === www.js){
+ let querystring = require('querystring');
+ r = querystring.parse(r); // a=1&b=2
+ console.log(r,1);
+ } else if (req.headers['content-type'] === 'application/json'){
+ console.log(JSON.parse(r),2);
+ } else{
+ console.log(r,3);
+ }
+ res.end('end');
+ })
+```
+step2: 客户端模拟请求：
+```js
+let opts = {
+ host:'localhost',
+ port:3000,
+ path:'/hello',
+ headers:{
+ 'a':1,
+ 'Content-Type':'application/json',
+ "Content-Length":7 //模拟的时候需要带上长度，不然客户端会当成没有传递数据
+ }
+}
+let http = require('http');
+let client = http.request(opts,function (res) {
+ res.on('data',function (data) {
+ console.log(data.toString());
+ })
+});
+client.end("{\"a\":1}"); // 表示把请求发出去
+```
+step3: 测试。
+先启动server,再启动client，服务端收到按照`application/json`格式解析的数据： `{ a: 1 } 2`.`Content-Type`与`body-parser`之间的关系就先分析到这里了。后面我们接着看请求头。
+
+### 2.2 Range:bytes
+请求头通过`Range:bytes`可以请求资源的某一部分。利用这个字段可模拟部分读取。如下：
+```js
+ http.createServer(function (req, res) {
+ let range = req.headers['range'];
+ }）
+```
+server:
+```js
+let http = require('http');
+let fs = require('fs');
+let path = require('path');
+// 当前要下载的文件的大小
+let size = fs.statSync(path.join(__dirname, 'my.txt')).size;
+let server = http.createServer(function (req, res) {
+ let range = req.headers['range']; // 0-3
+ if (range) {
+ // 模拟请求 curl -v --header "Range:bytes=0-3" http://localhost:3000
+ let [, start, end] = range.match(/(\d*)-(\d*)/);
+ start = start ? Number(start) : 0;
+ end = end ? Number(end) : size - 1; // 10个字节 size 10 （0-9）
+ res.setHeader('Content-Range', `bytes ${start}-${end}/${size - 1}`);
+ fs.createReadStream(path.join(__dirname, 'my.txt'), { start, end }).pipe(res);
+ } else {
+ // 会把文件的内容写给客户端
+ fs.createReadStream(path.join(__dirname, 'my.txt')).pipe(res);
+ //可读流可以通过pipe导到可写流
+ }
+});
+server.listen(3000);
+```
+client:
+```js
+let opts = {
+ host:'localhost',
+ port:3000,
+ headers:{}
+}
+let http = require('http');
+let start = 0;
+let fs = require('fs');
+function download() {
+ opts.headers.Range = `bytes=${start}-${start+3}`;
+ start+=4;
+ console.log(`start is ${start}`)
+ let client = http.request(opts,function (res) {
+ let total = res.headers['content-range'].split('/')[1];
+ // console.log(half)
+ res.on('data',function (data) {
+ fs.appendFileSync('./download1.txt',data);
+ });
+ res.on('end',function () {
+ setTimeout(() => {
+ if ((!pause)&&(start < total))
+ download();
+ }, 1000);
+ })
+ });
+ client.end();
+}
+download()
+```
+分段读取添加暂停功能，监听用户输入
+```js
+let pause = false;
+process.stdin.on('data',function (data) {
+ if (data.toString().includes('p')){
+ pause = true
+ }else{
+ pause = false;
+ download()
+ }
+})
+```
+测试结果：
+
+
+分段读取有以下好处：
+
+> 提高读取速度，多线程并行，分块读取
+> 断点续传
+
+模拟并行下载：
+```js
+let halfFlag = 20
+function download() {
+ opts.headers.Range = `bytes=${start}-${start+3}`;
+ start+=4;
+ console.log(`start is ${start}`)
+ let client = http.request(opts,function (res) {
+ let total = res.headers['content-range'].split('/')[1];
+ let halfFlag = Math.floor(total/2)
+ // console.log(half)
+ res.on('data',function (data) {
+ fs.appendFileSync('./download1.txt',data);
+ });
+ res.on('end',function () {
+ setTimeout(() => {
+ if ((!pause)&&(start < halfFlag))
+ download();
+ }, 1000);
+ })
+ });
+ client.end();
+}
+let half = halfFlag
+
+function downloadTwo() {
+ opts.headers.Range = `bytes=${half}-${half+3}`;
+ half+=4;
+ console.log(`half is ${half}`)
+ let client = http.request(opts,function (res) {
+ let total = res.headers['content-range'].split('/')[1];
+ res.on('data',function (data) {
+ fs.appendFileSync('./download2.txt',data);
+ });
+ res.on('end',function () {
+ setTimeout(() => {
+ if (!pause&&half < total)
+ downloadTwo();
+ }, 1000);
+ })
+ });
+ client.end();
+}
+download();
+downloadTwo();
+```
+运行结果，会把原文件分成两部分下载到download1.txt和download2.txt。
+测试：
+
+
+理论上，这样的下载方式会比第一种方法节约一半的时间。但是实际中的文件下载怎样实现加速以及并行下载的，还有待考究。
+
+### 2.3 Cache-Control与Expires之强制缓存
+Response Header响应头中`Cache-Control: max-age=1233`可以设置相对当前的时间的强制缓存，与它相关的`Expires`可以设置某个绝对时间点限定读取缓存的时间。
+模拟实现：
+```js
+let url = require('url'); // 专门用来处理url路径的核心模块
+// http://username:password@hostname:port/pathname?query
+let server = http.createServer(async function (req,res) {
+ console.log(req.url)
+ let { pathname,query} = url.parse(req.url,true);
+ // true就是将query转化成对象
+ let readPath = path.join(__dirname, 'public', pathname);
+ try {
+ let statObj = await stat(readPath);
+ // 根客户端说 10s 内走缓存
+ res.setHeader('Cache-Control','max-age=10');
+ res.setHeader('Expires',new Date(Date.now()+10*1000).toGMTString());
+ // 10s之内的请求都会走cache 返回200， (from disk cache)不发生请求
+ if (statObj.isDirectory()) {
+ let p = path.join(readPath, 'index.html');
+ await stat(p);
+ // 如果当前目录下有html那么就返回这个文件
+ fs.createReadStream(p).pipe(res);
+ } else {
+ fs.createReadStream(readPath).pipe(res);
+ }
+ }catch(e){
+ res.statusCode = 404;
+ res.end(`Not found`);
+ }
+}).listen(3000);
+```
+测试：
+
+10s内刷新：
+
+
+### 2.4 对比缓存之Last-Modified和If-Modified-Since
+对比响应头Last-Modified and 与请求头If-Modified-Since，可以通过文件修改时间看文件是否修改，从而决定是重新请求还是走缓存。
+模拟如下：
+step1 不设置强制缓存
+```js
+res.setHeader('Cache-Control','no-cache');
+```
+step2 应用文件修改时间比对是否修改，
+```js
+res.setHeader('Last-Modified', statObj.ctime.toGMTString());
+if (req.headers['if-modified-since'] === statObj.ctime.toGMTString()) {
+ res.statusCode = 304;
+ res.end();
+ return; // 走缓存
+}
+fs.createReadStream(readPath).pipe(res);
+```
+测试：
+
+
+### 2.5 对比缓存之Etag和 If-None-Match
+对比响应头:Etag 与请求头:If-None-Match，Etag和If-None-Match如果相等，即返回304。
+etag如何添加?
+
+> 根据文件内容,生成一个md5的摘要，给实体加一个标签。
+
+这种方法虽然比较耗性能，但是能够更加精确的对比出文件是否进行了修改。依靠文件修改时间进行对比并不够准确。因为有时文件有改动Last-Modified发生了变化，但是文件的内容可能根本没有变化。所以这种方案要优于2.4.
+
+实现方法：
+```js
+let rs = fs.createReadStream(p);
+let md5 = crypto.createHash('md5'); // 不能写完响应体再写头
+let arr = [];
+rs.on('data',function (data) {
+ md5.update(data);
+ arr.push(data);
+});
+```
+设置Etag
+```js
+rs.on('end',function () {
+let r = md5.digest('base64');
+res.setHeader('Etag', r);
+if (req.headers['if-none-match'] === r ){
+ res.statusCode = 304;
+ res.end();
+ return;
+}
+res.end(Buffer.concat(arr));
+})
+```
+测试：
+
+
+### 2.6 Accept-Encoding
+依靠请求头： `Accept-Encoding: gzip, deflate`, br告诉服务端可接受的数据格式。服务端返回后会把数据格式通过响应格式通过Content-Encoding来标记。
+在客户端接受gzip的格式下，后端可通过文件压缩处理传递，提高性能。
+node api中提供了[zlib](http://nodejs.cn/api/zlib.html#zlib_class_zlib_gzip)模块:
+> zlib模块提供通过 Gzip 和` Deflate/Inflate` 实现的压缩功能
+
+下面我们来应用zlib与请求头`Accept-Encoding`来实现压缩功能。
+```js
+let zlib = require('zlib');
+let fs = require('fs');
+let path = require('path');
+function gzip(filePath) {
+ let transform = zlib.createGzip();//转化流通过transform压缩，然后再写
+ fs.createReadStream(filePath).pipe(transform).pipe(fs.createWriteStream(filePath+'.gz'));
+}
+gzip('2.txt')
+```
+解压：
+```js
+function gunzip(filePath) {
+ let transform = zlib.createGunzip();
+ fs.createReadStream(filePath).pipe(transform).pipe(fs.createWriteStream(path.basename(filePath,'.gz')));
+}
+```
+`path.basename(filePath,'.gz')`用来去掉filePath文件名的后缀`.gz`。
+根据请求头接受的类型后端的具体操作 ：
+```js
+if(req.url === '/download'){
+ res.setHeader('Content-Disposition', 'attachment' )
+ return fs.createReadStream(path.join(__dirname, '1.html')).pipe(res);
+}
+```
+
+```js
+let http = require('http');
+let fs = require('fs');
+let path = require('path');
+let zlib = require('zlib');
+http.createServer(function (req,res) {
+ if(req.url === '/download'){
+ res.setHeader('Content-Disposition', 'attachment' )
+ return fs.createReadStream(path.join(__dirname, '1.html')).pipe(res);
+ }
+ let rule = req.headers['accept-encoding'];
+ if(rule){
+ if(rule.match(/\bgzip\b/)){
+ res.setHeader('Content-Encoding','gzip');
+ fs.createReadStream(path.join(__dirname, '1.html'))
+ .pipe(zlib.createGzip())
+ .pipe(res);
+ } else if (rule.match(/\bdeflate\b/)){
+ res.setHeader('Content-Encoding', 'deflate');
+ fs.createReadStream(path.join(__dirname, '1.html'))
+ .pipe(zlib.createDeflate())
+ .pipe(res);
+ }else{
+ fs.createReadStream(path.join(__dirname, '1.html')).pipe(res);
+ }
+ }else{
+ fs.createReadStream(path.join(__dirname, '1.html')).pipe(res);
+ }
+}).listen(3000);
+```
+
+test deflate:
+```docker
+curl -v --header "Accept-Encoding:deflate" http://localhost:3000
+* Rebuilt URL to: http://localhost:3000/
+* Trying 127.0.0.1...
+* TCP_NODELAY set
+* Connected to localhost (127.0.0.1) port 3000 (#0)
+> GET / HTTP/1.1
+> Host: localhost:3000
+> User-Agent: curl/7.54.0
+> Accept: */*
+> Accept-Encoding:deflate
+>
+< HTTP/1.1 200 OK
+< Content-Encoding: deflate
+< Date: Thu, 23 Aug 2018 03:01:13 GMT
+< Connection: keep-alive
+< Transfer-Encoding: chunked
+```
+test others:
+```docker
+curl -v --header "Accept-Encoding:nn" http://localhost:3000
+* Rebuilt URL to: http://localhost:3000/
+* Trying 127.0.0.1...
+* TCP_NODELAY set
+* Connected to localhost (127.0.0.1) port 3000 (#0)
+> GET / HTTP/1.1
+> Host: localhost:3000
+> User-Agent: curl/7.54.0
+> Accept: */*
+> Accept-Encoding:nn
+>
+< HTTP/1.1 200 OK
+< Date: Thu, 23 Aug 2018 03:02:51 GMT
+< Connection: keep-alive
+< Transfer-Encoding: chunked
+<
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+
+## 四、Vue组件间的参数传递
+
+### 1、父组件与子组件传值
+父组件传给子组件：子组件通过`props`方法接受数据；
+
+子组件传给父组件： `$emit` 方法传递参数
+
+### 2、非父子组件间的数据传递，兄弟组件传值
+`eventBus`，就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件。项目比较小时，用这个比较合适（虽然也有不少人推荐直接用VUEX，具体来说看需求咯。技术只是手段，目的达到才是王道）。
+
+## 五、Vue的路由实现：hash模式 和 history模式
+**hash模式**：在浏览器中符号 `#`，#以及#后面的字符称之为`hash`，用 `window.location.hash` 读取。
+特点：`hash`虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，`hash`不会重加载页面。
+
+**history模式**：`history`采用HTML5的新特性；且提供了两个新方法： `pushState()`， `replaceState()`可以对浏览器历史记录栈进行修改，以及`popState`事件的监听到状态变更。
+
+## 六、Vue与Angular以及React的区别？
+版本在不断更新，以下的区别有可能不是很正确。我工作中只用到vue，对angular和react不怎么熟。
+
+### 1、与AngularJS的区别
+#### 相同点：
+* 都支持指令：内置指令和自定义指令；
+* 都支持过滤器：内置过滤器和自定义过滤器；
+* 都支持双向数据绑定；
+* 都不支持低端浏览器。
+
+#### 不同点：
+* AngularJS的学习成本高，比如增加了Dependency Injection特性，而Vue.js本身提供的API都比较简单、直观；
+* 在性能上，AngularJS依赖对数据做脏检查，所以Watcher越多越慢；
+* Vue.js使用基于依赖追踪的观察并且使用异步队列更新，所有的数据都是独立触发的。
+
+### 2、与React的区别
+#### 相同点：
+* React采用特殊的`JSX`语法，Vue.js在组件开发中也推崇编写`.vue`特殊文件格式，对文件内容都有一些约定，两者都需要编译后使用；
+* 中心思想相同：一切都是组件，组件实例之间可以嵌套；都提供合理的钩子函数，可以让开发者定制化地去处理需求；
+* 都不内置列数AJAX，Route等功能到核心包，而是以插件的方式加载；
+* 在组件开发中都支持`mixins`的特性。
+
+#### 不同点：
+* React采用的Virtual DOM会对渲染出来的结果做脏检查；
+* Vue.js在模板中提供了指令，过滤器等，可以非常方便，快捷地操作Virtual DOM。
+
+## 七、vue路由的钩子函数
+首页可以控制导航跳转，`beforeEach`，`afterEach`等，一般用于页面`title`的修改。一些需要登录才能调整页面的重定向功能。
+
+**beforeEach**主要有3个参数`to`，`from`，`next`。
+**`to`**：route即将进入的目标路由对象。
+**`from`**：route当前导航正要离开的路由。
+**`next`**：function一定要调用该方法`resolve`这个钩子。执行效果依赖`next`方法的调用参数。可以控制网页的跳转。
+
+## 八、vuex是什么？怎么使用？哪种功能场景使用它？
+只用来读取的状态集中放在`store`中；
+改变状态的方式是提交`mutations`，这是个同步的事物；
+异步逻辑应该封装在`action`中。
+
+在`main.js`引入`store`，注入。新建了一个目录`store`，`… export` 。
+
+场景有：单页应用中，组件之间的状态、音乐播放、登录状态、加入购物车。
+
+
+**state**：Vuex 使用单一状态树,即每个应用将仅仅包含一个`store` 实例，但单一状态树和模块化并不冲突。存放的数据状态，不可以直接修改里面的数据。
+
+**mutations**：`mutations`定义的方法动态修改`Vuex `的 `store` 中的状态或数据。
+
+**getters**：类似`vue`的计算属性，主要用来过滤一些数据。
+
+**action**：`actions`可以理解为通过将`mutations`里面处里数据的方法变成可异步的处理数据的方法，简单的说就是异步操作数据。`view` 层通过` store.dispath` 来分发 `action`。
+```js
+onst store = new Vuex.Store({ //store实例
+ state: {
+ count: 0
+ },
+ mutations: {
+ increment (state) {
+ state.count++
+ }
+ },
+ actions: {
+ increment (context) {
+ context.commit('increment')
+ }
+ }
+})
+
+```
+**modules**：项目特别复杂的时候，可以让每一个模块拥有自己的`state`、`mutation`、`action`、`getters`，使得结构非常清晰，方便管理。
+```js
+const moduleA = {
+ state: { ... },
+ mutations: { ... },
+ actions: { ... },
+ getters: { ... }
+}
+const moduleB = {
+ state: { ... },
+ mutations: { ... },
+ actions: { ... }
+}
+const store = new Vuex.Store({
+ modules: {
+ a: moduleA,
+ b: moduleB
+})
+
+```
+
+
+## 九、其它小知识点
+
+### 1、css只在当前组件起作用
+答：在`style`标签中写入`scoped`即可 例如： ``
+
+### 2、`v-if` 和 `v-show` 区别
+答：`v-if`按照条件是否渲染，`v-show`是`display`的`block`或`none`；
+
+### 3、`$route`和`$router` 区别
+
+答：`$route`是 `路由信息对象`，包括`path`，`params`，`hash`，`query`，`fullPath`，`matched`，`name`等路由信息参数。而`$router`是 `路由实例` 对象包括了路由的跳转方法，钩子函数等。
+
+PS：缺少的案例代码，这几天再补上去。有些地方可能描述的不够清楚，如果有歧义，可能是我理解错了。
\ No newline at end of file
diff --git "a/5-[\345\216\237\345\210\233]VUE\344\270\255\345\256\236\347\216\260\351\200\232\347\224\250js\345\207\275\346\225\260\345\272\223\345\260\201\350\243\205.md" "b/Cute-Article/article/5-[\345\216\237\345\210\233]VUE\344\270\255\345\256\236\347\216\260\351\200\232\347\224\250js\345\207\275\346\225\260\345\272\223\345\260\201\350\243\205.md"
similarity index 100%
rename from "5-[\345\216\237\345\210\233]VUE\344\270\255\345\256\236\347\216\260\351\200\232\347\224\250js\345\207\275\346\225\260\345\272\223\345\260\201\350\243\205.md"
rename to "Cute-Article/article/5-[\345\216\237\345\210\233]VUE\344\270\255\345\256\236\347\216\260\351\200\232\347\224\250js\345\207\275\346\225\260\345\272\223\345\260\201\350\243\205.md"
diff --git "a/Cute-Article/article/50-js\344\270\255get\345\222\214post\347\232\204\345\214\272\345\210\253.md" "b/Cute-Article/article/50-js\344\270\255get\345\222\214post\347\232\204\345\214\272\345\210\253.md"
new file mode 100644
index 00000000..f6027312
--- /dev/null
+++ "b/Cute-Article/article/50-js\344\270\255get\345\222\214post\347\232\204\345\214\272\345\210\253.md"
@@ -0,0 +1,33 @@
+在常见的客户端传递参数的方式有`GET`和`POST`两种：
+* **浏览器地址栏直接输入**：一定是`GET`请求；
+* **超链接**：一定是`GET`请求；
+* **表单**：可以是`GET`，也可以是`POST`，这取决与`