```
```css
/* 匹配父元素div 中子元素 p 的第一个 */
div p:first-child { }
/* 匹配父元素div 中子元素p 的最后一个 */
div p:last-child { }
/* 匹配父元素div 中子元素p 的第n个子元素（🔥 n可以是公式，是公式的时候从0开始） */
div p:nth-child(n) { }
/*
* 🔥 这个和上面唯一不同的是，上面是按照顺序的，建议使用下面这个，否则稍微复杂一点的选择就做不了
*/
div p:first-of-type { }
div p:last-of-type { }
div p:nth-of-type(n) {}
```
### 3.伪元素选择器
```html
```
```css
/* 在元素内部的前面插入内容 */
.app::before {
/* 必有 */
content: '内容'
}
/* 在元素内部的后面插入内容 */
.app::after { }
/* 🔥 备注：这个属于行内元素，并且权重和标签选择器一样，都是1 */
```
## 🥡第二部分：媒体查询（media）
```css
@media mediatype and|not|only (media feature) { }
/* mediatype 媒体类型 | all 所有设备 | print 用于打印机和打印机预览 | scree 用于电脑屏幕，平板，手机等 */
/* 关键字 and 且 | not 非 | only 指定 */
/* media feature 媒体特性 | width 宽度 | min-width | max-width */
/* 例如：在屏幕上并且屏幕大于 1024px 的时候 触发 */
@media scree and (max-width: 1024px) { }
```
---
**引入资源**
> 这个需求是，当页面是小屏幕的时候，就引入小屏幕的css，这个怎么做？
```html
```
## 🥬第三部分：动画
> 动画（animation）可以通过设置多个节点来精确的控制一个或者一组动画，常用来实现复杂的动画效果
**先定义动画，再使用动画**
```css
/* 定义动画（经常和transform一起使用） */
@keyframes 动画名称 {
/* form 也代表了开始 */
0% {
}
50% {
}
...
/* to 也代表了结束 */
100% {
}
}
/* 使用动画 */
.test {
animation-name: 动画名称;
animation-duration: 持续时间(2s);
/* 运动曲线，默认是ease */
animation-timing-function: ease;
/* 何时开始（可以实现延迟执行） */
animation-delay: 1s;
/* 重复多少次，默认一次，infinite 无限 */
animation-iteration-count: 1;
/* 是否进行逆向播放 | 默认是 normal | 如果想的话，就写 alternate */
animation-direction: normal;
/* 规定浏览器是否正在运行或者暂停 默认是running | pause 是暂停 */
animation-play-state: running;
/* 规定动画结束后状态，保持 forwards | 回到原始状态 backwards */
animation-fill-mode: backwards;
}
/* 🔥 简写（只有前两个必须写） */
animation: 动画名称 持续运行时间 运动曲线 何时开始 播放次数 是否反方向 动画开始或者结束时候的状态
```
## 🥤第四部分：2D,3D转换
### 1.2D转换
> 转换（transform）CSS3中具有颠覆性的特征之一，可以实现元素的位移，旋转，缩放等效果
```css
/* 🔥 移动，可以改变元素在页面中的位置，类似于定位（要有单位，px...） */
transform: translate(x, y);
transform: translateX(n);
transform: translateY(n);
/* 🔥 transform的优点：不会影响到其他元素的位置，对行内元素没有效果，百分比单位是相对于自身元素来说的 */
/* 使用 transform 实现水平垂直居中 */
.test {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
```
---
> 旋转（rotate）是指让元素在二维平面内顺时针或者逆时针旋转
```css
transform: rotate(度数)
/* 旋转45度，如果写正值就是顺时针，如果 -45deg 就是逆时针 */x
transform: rotate(45deg);
/* 🔥 设置旋转中心点（缩放中心点也是这么设置） 默认中心点事元素中心（50%, 50%），单位可以是像素，也可以是方向名词（top,left...） */
transform-origin: x y;
```
---
> 缩放（scale）控制元素的放大和缩小
```css
transform: scale(x, y);
/* x, y 都放大两倍，简写是 transform: scale(2) */
transform: scale(2, 2)
/* scale的优势：不会影响其他盒子，而且可以设置缩放的中心点 */
```
---
## 🥥第五部分：移动端rem适配布局
### 1.简介
> 问题引入
- 页面布局文字是否随着屏幕大小变化而变化？
- 流式布局和flex布局主要针对宽度布局，那高度如何设置呢？
- 怎么让屏幕发生变化的时候，元素宽度和高度等比缩放呢？
### 2.rem适配以及原理
> rem是一个单位（root em），类似于em，em是父元素字体大小，不同的是rem的基准是相对于html元素的字体大小，因为html是唯一的，所以就实现了 在各个屏幕下的适配
**js版本适配**
```js
!(function(win, doc) {
var htmlDom = doc.getElementsByTagName('html')[0];
var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
var recalc = function() {
var htmlWidth = doc.documentElement.clientWidth || doc.body.clientWidth;
htmlDom.style.fontSize = htmlWidth / 10 + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
}(window, document));
```
## 📚参考列表（致敬）
- 日常工作
- [博学谷](https://www.boxuegu.com/)
================================================
FILE: docs/blog/3.CSS/3.预处理器和后处理器.md
================================================
---
title: 3.预处理器和后处理器
date: 2020-01-30 00:00:00
permalink:
tag:
- blog
- 3.CSS
---
> 注意此处：内容不全，结构完整...
> 什么都不说了，神器，都不知道那时候的人咋想的，能想出来这些东西，大大提高了 CSS的书写体验
> 并且后来集成到前端工程化之中，使其成为其中重要的一环
> 预处理器：代表是 less, sass, 等，为什么叫前处理器呢，因为它们都是将 .less 或者 .sass 的语法转为 .css，不会添加一些厂商前缀等操作
> 后处理器：代表是 Postcss等，它会在 .css的基础上（注意，这里是.css的基础上，所以是后处理）添加一些厂商前缀等操作
## 🥭第一部分：Less（预处理器）
### 1.CSS的弊端
- CSS是一种非程序式的语言，没有变量，函数，作用域等概念
- CSS需要书写大量没有逻辑的代码，冗余度很高
- CSS没有很好的计算能力（例如px转rem...）
---
### 2.Less基本使用
> Less（Leaner Style Sheets）是一门CSS拓展语言（CSS预处理器），引入了变量，Mixin（混入），运算以及函数等功能
- 安装less：npm install less -g
- 编译less：easyless（vs code 插件），或者集成到webpack中进行编译
```css
/* index.less */
/* 变量名不能包含特殊字符，不能以数字开头，并且大小写敏感 */
@color: pink;
/* 嵌套 */
.test {
.test1 {
/* & 表示自己，写伪类的时候有用 */
&:hover {
}
}
}
/* Less运算 支持 加减乘除 */
@borderpx: 10px;
div {
width: 200px + @borderpx;
height: (20px + @borderpx) / 2;
}
```
## 🧁第二部分：Sass（预处理器）
## 🧂第三部分：Postcss（后处理器）
## 📚参考列表（致敬）
- [博学谷](https://www.boxuegu.com/)
================================================
FILE: docs/blog/3.CSS/4.现代化CSS.md
================================================
---
title: 4.现代化CSS
date: 2020-01-30 00:00:00
permalink:
tag:
- blog
- 3.CSS
---
> 如果你CSS掌握的不错，那么可以来更深的探索一下CSS了，下面的内容就是为你准备的
> 内容我没有写全，但是一个结构是有的
---
## 🍀第一部分：CSS分层 & 面向对象
**前言：CSS就是一个类，有继承，封装**
---
### 1.简介
为什么要有CSS分层，因为如果不分层的话，项目大的话，你的CSS会乱成一团的
---
### 2.BEM
---
### 3.ACSS（原子CSS）
---
### 4.其他分层思想
---
## 🎋第二部分：CSS Houdini
---
### 1.CSS Houdini介绍（现在还是没有应用上，了解的还是少）
**CSS Houdini 提供了API, 能让程序员控制浏览器的重绘重排过程**
---
## 🌱第三部分：CSS与数学
---
### 1.CSS矩阵
**概念（了解概念就行了，我现在也是不懂）**
**学习矩阵有什么用么？**
- 粗浅的举一个例子：transform 实现的原理，在浏览器中就是矩阵的应用
---
### 2.一些工具网站
**2D矩阵 转 3D矩阵，可以开启硬件加速，调用GPU，提高性能，让GPU直接合成层，节省了重绘和重排（还是不太懂）**
## 📚参考列表（致敬）
- [腾讯课堂](https://ke.qq.com)
================================================
FILE: docs/blog/4.JavaScript/1.JavaScript根基.md
================================================
---
title: 1.JavaScript根基
date: 2020-01-30 00:00:00
permalink:
tag:
- blog
- 4.JavaScript
---
> 注意此处：内容不全，结构完整，等待完善...
> JavaScript的基础 决定了你的高度，建议熟读 红宝石 和 绿犀牛🦏
## 🐲第零章：JavaScript简介
### 1.什么是JavaScript
- JavaScript是世界上最流行的脚本语言（不需要编译，边运行边解析）
- JavaScript可以增强浏览器交互
- JavaScript可以运行在服务端（Node.js）
- 移动端JavaScript（HTML5让JavaScript赋予了神一般的能力，穿透了所有的端 iOS，android,window, mac, linux）
---
### 2.JavaScript的历史
---
### 3.JavaScript的组成
- ECMAScript: JavaScript用法
- DOM：JavaScript操作网页上的元素的API
- BOM：JavaScript操作浏览器的部分功能的API
---
### 4.引入JavaScript
```html
alert(123)
src：规定外部脚本文件的URL
async: 立即异步下载脚本，但是不影响下载HTML（仅适用于外部引用脚本）| 值 async
defer ...
charset ...
```
### 5.浏览器的组成（拓展）
- shell部分（能看到的，浏览上边，设置，历史记录，下载记录这些用户能够操作的）
- 内核部分（看不到的，但是能让浏览器运行起来的部分）
- 渲染引擎（语法规则和渲染）
- JS引擎
- 其他模块（负责异步等）
---
## 🌵第一章：JavaScript基础语法
### 1.标识符命名规则
- 标识符也就是 变量，函数，属性，参数等的名字（Js是区分大小写的）
- 标识符第一个字符只能是 字母，下划线（_），或者美元符号（$）
---
### 2.变量
```js
// Number 数值类型
var a = 123 // ES3
let b = 123 // ES6 推荐
// String 字符类型
let c = 'Hello World'
// Boolean 布尔类型
let d = true
// Array 数组类型
let e = [1, 2, 3]
// Function 函数类型
let f = function fn() {}
// Object 对象类型（引用类型）
let g = {}
// 变量可以先声明，后赋值
let h;
h = 1;
h = [1, 2, 3] // 变量类型可以变化类型（❌ 不推荐）
```
---
### 3.关键字和保留字
> 不能把关键字、保留字、true、false和null用作标识符。
> js中的关键字可用于表示控制语句的开始或结束，或者用于执行特定操作等。按照规则，关键字也是语言保留的，不能用作标识符。以下就是ECMAScription的全部关键字：
> **break、else、new、var、 case、 finally 、 return、 void 、 catch 、for 、switch 、 while 、 continue、 function 、this 、 with 、default 、 if 、 throw 、 delete 、 in 、 try 、do 、 instranceof、 typeof**
> ECMA还描述了另外一组不能用作标识符的保留字。尽管保留字在这门语言中还没有任何特定的用途，但它们有可能将来被用作关键字。下面是ECMA第3版定义的全部保留字：
> **abstract 、 enum 、int 、 short 、 boolean 、export 、interface、 static、 byte 、extends 、 long 、 super 、 char 、 final 、native 、synchronized 、 class 、float 、 package 、throws 、 const 、goto 、private 、transient 、 debugger 、 implements 、protected 、 volatile 、 double 、import 、public**
> 在代码中使用关键字作为标识符在大多数浏览器中都会倒是“Identifier Expected”（缺少标识符）错误。而使用保留字可能不会导致同样的错误，这要视具体的浏览器而定。一般来说，最好不要使用关键字和保留字作为标识符，一遍与ECMAScript未来的版本保持兼容。
> 本文摘自 《JavaScripti 高级程序员设计（第2版）》
---
### 4.JavaScript数据类型
```js
// ===== ES3基础类型 =====
// 数值类型（Number）
123
// 布尔类型（Boolean）
true false
// 字符串类型（String）
'hello world'
// 未定义类型（undefined）
undefined
// null类型（本质上是一个特殊的object）
null
// Object类型（引用类型）
{}
// Function类型（函数类型）
function fn() {}
// ===== ES6新增类型 =====
```
---
## 🌴第二章：数值（Number）
### 1.数值类型
- Number类型包括了所有的数字类型（小数，整数，正负数，实数等）
- 整数，合理的取值范围是 2的-53次方 - 2的53次方
- 小数（浮点数），如果以0开头，可以省略，例如 .3 === 0.3
- 表示十六进制：以0x开头的数据
---
### 2.浮点数
- 浮点数的最高精度只有17位数，一般情况够用
- 浮点数的原理：一个浮点数由：符号位，指数，尾数表示
- 浮点数不能精确的表示小数，只能取近似值
**这里还有更高级的一些解释**
---
### 3.数据的范围
看浏览器的具体支持，有的不一样
```js
// 以谷歌浏览器举例
Number.MAX_VALUE // 最大值 1.7976931348623157e+308
Number.MIN_VALUE // 最小值 5e-324
// 超过这个范围之后 -Infinity，Infinity
```
---
### 4.NaN
- NaN：not a number，是数字类型，是非常特殊的数字类型值
- paresInt('s')，把字符串s转为 数值类型，会出错，就会返回 NaN
- 涉及NaN的所有操作都会返回 NaN
- 可以使用 isNaN 判断一个值是不是 NaN
---
### 5.算数运算符
```js
// 加号
1 + 1 // 2
// 减号
1 - 1 // 0
// 乘号
2 * 2 // 4
// 除号
2 / 2 // 1
// 取余
5 % 3 // 2
```
---
## 🌱第三章：字符（String）
### 1.字符串类型
- 字符串：由字符组成的串
- toString() 可以将其他类型的转为字符串（其实直接 '' + 也可以实现）
```js
let name = '朱昆鹏'
// ES6
let test = `my name is ${name}` // my name is 朱昆鹏
```
---
### 2.字面量转义
```js
let a = 'hello '1' // 语法错误
let b = 'hello \'1' // 语法正确
// \n 换行 | \t 制表符 | \b 空格
// \r 回车 | \f
// \\ \ | \' ' | \" "
```
---
## 🍃第四章：布尔（Boolean）
### 1.布尔类型
- 布尔类型只有两个值：真 true，假 false（区分大小写，两个都是小写）
```js
10 < 9 // false
1 === 1 // true
NaN === NaN // false
```
---
## 🎄第五章：逻辑运算
### 1.乘法运算符
- 除了正常的规则，乘法运算符还遵循下面规则
- 数值如果超过 ECMAScript 范围，会展示 Infinity 或 -Infinity
- 如果有一个操作数是 NaN，则结果是 NaN
- Infinity * 0 为 NaN（其余为 Infinity）
- 如果一个操作数不是数值，相乘的话会先转换为 数值类型，再相乘
```js
'1' * 2 // 2
'zhu' * 2 // NaN | 因为 'zhu' 转为 数值类型为 NaN
```
---
### 2.除法运算符
- 除了正常的规则，乘法运算符还遵循下面规则
- 数值如果超过 ECMAScript 范围，会展示 Infinity 或 -Infinity
- 如果有一个操作数是 NaN，则结果是 NaN
- Infinity / Infinity 为 NaN（其余为 Infinity）
```js
// 备注
0 / 0 // NaN
0 / 1 // 0
0 / 2 // 0
1 / 0 // Infinity
2 / 0 // Infinity
```
---
### 3.求余运算符
---
### 类型转换
**很多语言中都有类型转换，例如 '123' 这是字符串类型，我们可以通过类型转换变为 123，这种类型转换是最常用的，JavaScript中的类型转换坑还是比较多的，所以我要整理一下这里，做到了解，并尽量避免发生隐式类型转换**
---
**显示类型转换**
```js
// 显示类型转换的方法
Number() // 转为数值类型
parseInt() // 转为整数
parseFloat() // 转为浮点数
Boolean() // 转为布尔类型
String() // 转为字符串
xxx.toString() // 转为字符串（undefind 和 null 不能转，会报错，因为这两个上面没有toString()）
```
---
**隐式类型转换**
```js
// ❣️ 数字优先原则，如果有数字能触发隐式的话，先触发数字转换
// isNaN() 传入其中的参数先调用Number()进行转换，再和NaN进行比较
isNaN(1) // false
isNaN(true) // fasle
isNaN(NaN) // ture
isNaN('zhu') // ture| Number('zhu') // NaN
// 加加 减减 正号 负号 隐式调用Number()
++ -- + -
// 加号 会隐式调用 toString，例如 'zhu' + 1 ==> 'zhu1'
+
// 隐式调用 Number()
- * / %
// 会触发类型转换，具体调用哪个转换方法，根据情况来
&& || !
// 会触发类型转换，具体调用哪个转换方法，根据情况来
// < > <= >=
// 会触发类型转换，具体调用哪个转换方法，根据情况来
== !=
// 特殊的
undefined == null // true
NaN === NaN // false 谁都不等
=== !== // 不发生类型转换
```
---
## 🌿第六章：数组（Array）
---
## 🌲第七章：函数（Function）
### 1.函数基础
```js
// ****** 🔥定义函数（有两种，函数声明 和 函数表达式）******
// 函数声明
function fn1 () {
}
// 函数表达式
let fn2 = function () {
}
// 1. function () {} 这种叫做匿名表达式
// 2. (function () {})() 这个是IIEF立即执行函数（立即执行函数还有好几种）
// 3. 函数调用我就不写了...
// ****** 🔥函数的参数 ******
// 函数的参数，可以传递任何类型，包括一个函数，并且实参或者形参都不限制位数
// 什么形参，实参，我就不想解释了
// arguments 是js函数的 实参列表（类数组），我也不解释了
// ****** 🔥函数的返回值 ******
// 1.如何函数里面没写 return 那么会默认返回 undefined
```
---
### 2.函数的属性和方法
**属性**
- name: 函数名
- arguments: 实参列表
- length:
- caller:
**方法**
- apply(): 改变this指向
- bind(): 改变this指向
- call(): 改变this指向
- toString(): 将函数转为字符串（是真的转为字符串了）
---
### 3.递归
---
### 4.call/apply（改变this指向）
- call 需要把实参按照形参的个数穿进去
- apply 只能传一个值，那个值必须是数组（有就是实参列表，arguments）
- 他们两个都只有一个功能，就是 改变 this 的指向，然后根据这个现象 可以导出一个功能，那就是 借助别人的方法来实现自己的功能
---
## 🍀第八章：对象（Object）
**对象是引用类型**
### 1.对象的基本使用
```js
// 对象定义（对象字面量 推荐）
let me = {
name: '朱昆鹏',
age: 20,
// 方法
say: function () {
console.log(me.age) // 20
console.log(this.age) // 20，this 其实就是 AO 里面的一个属性，具体可以看3.JavaScript深入
},
// 方法的另一种写法（ES6）
look () {}
}
// 对象属性的增删改查
me.test = '测试属性' // 增
delete me.test // 删 | 后期可以知道 一个对象的对象，能不能被删除其实都可以控制的（Object.defineProperties)
me.age = 21 // 改
me.age // 21 查
// 其他定义对象的方式
// 1.构造函数创建对象（需要new）
let obj1 = new Object() // 系统自带的构造函数 Object()
let obj2 = new Zhu() // 自己写的一个构造函数
// 2.
let obj = Object.create(null)
```
---
### 2.构造函数示例
**这里面就涉及到this，具体请看3.JavaScript深入 this解释**
```js
function Car (carName) {
// 属性
this.name = carName || 'BMW'
// 方法
this.run = function () {
console.log(this.name + '跑了起来')
}
}
let byd = new Car('byd')
let dz = new Car('dz')
byd.run() // byd跑了起来
dz.run() // dz跑了起来
```
---
### 3.new 操作符做了什么（构造函数内部原理）
- 第一步：在函数体最前面隐式的加上 this = {}
- 第二步：执行 this.xxx = xxx
- 第三步：隐式的返回this
**我们根据这三步，来写一个显示的函数，不用new，看看是否能达到上面的效果**
```js
function Car (carName) {
let that = {} // this 是关键字，不行，所以，我们用 that 代替，效果是一样的
// 属性
that.name = carName || 'BMW'
// 方法
that.run = function () {
console.log(that.name + '跑了起来')
}
return that
}
let byd = Car('byd')
let dz = Car('dz')
byd.run() // byd跑了起来
dz.run() // dz跑了起来
```
---
**❣️❣️❣️ 因为new 最后隐式的返回了对象，这个对象中如果有 函数的话，就会形成闭包，也就是这个函数具有 构造函数的作用域**
```js
function Zhu () {
this.age = 20,
this.addAge = function () {
this.age += 1
}
}
let zhu1 = new Zhu() // 产生 Zhu 的 AO 和 addAge的 AO
let zhu2 = new Zhu() // 产生 Zhu 的 AO 和 addAge 的 AO ，注意 这里面的
zhu1.addAge() // 这里的 addAge 里面有三个作用域：0 addAge的AO，1 Zhu的AO，和GO
zhu1.age // 21
zhu2.addAge() // 这里的 addAge 里面有三个作用域：0 addAge的AO，1 Zhu的AO，和GO，但是其中的 Zhu的AO 和 上面的不一样，虽然内容一样，但是相互独立的
zhu2.age // 21
// ❓ 在运用我发现，Zhu 和 zhu1.addAge 都只有两个作用域 Script 和 Global 这是为什么
```
**❣️如果使用了new关键字的话，因为有隐式返回，所以就算在函数中写返回，还是会被忽略**
---
### 4.原型，原型链
**首先要明确：函数也是对象，是对象都有 __proto__ 和 constructor，函数有特定的属性 prototype**
- 原型（prototype）：是function对象的一个属性，它定义了构造函数制造出来的对象的公共祖先
- 通过该构造函数产生的对象，可以继承该原型的属性和方法，原型也是一个对象，利用原型的特点和概念，可以提取公共属性
- 对象查看原型 __ proto __
- 拓展：对象如何查看 对象的构造函数 --> constructor
- 原型链：
```js
function Zhu () { }
Zhu.prototype.say = function () {
console.log('我会说话')
}
let zhu1 = new Zhu()
let zhu2 = new Zhu()
```
**啥都不说，补一张图，什么都明白了（有空话一张）**
---
### 5.继承实现
- 继承需要满足两个，一个是继承属性，一个是继承方法
- 继承属性：父.call(this, ...)
- 继承方法：将父的prototype给 子类，并且让 子类的 constructor 保持正常（一般是写一个方法做这个事情）
```js
// 最佳实践
function Father (name) {
this.name = name
}
Father.prototype.say = funciton () { }
// 如何让 Son 继承 Father
function Son (name) {
Father.call(this, name) // 继承属性
}
inheritPropertype(Father, Son)
// 继承方法的函数（可能还有其他的版本，但是大致意思是 将父的prototype给 子类，并且让 子类的 constructor保持正常）
funciton inheritPropertype(father, son) {
let protoType = Object.create(father.prototype)
prototype.constructor = son
son.prototype = protoType
}
```
**❣️ ES6 有了 Class之后，继承方便了很多，所以上面那种方式，一般感觉只有面试可以用到**
---
### 6.包装类
我们知道在JavaScript中有原始值和引用值，原始值是没有属性和方法的，但是包装类产生的原始值是有的
- new String()
- new Boolean()
- new Number()
```js
let num1 = 100;
num1 // 100 是没有属性和方法的
let num2 = new Number(100)
num2 // Number {100} 是有属性和方法的
num2 + 1 // 101 可以参与运算，运算之后就变为了原始值
// 解释一个匪夷所思的问题
num1.length = 1
console.log(num1.length) // undefined，为什么不报错？，因为先隐式的调用了 包装类
// ******* 试题一 *******
let str = 'zhu'
str = str + 1
let test = typeof str // 'string'
if (test.length == 6) { // test.length // undefined
test.sign = '返回'
}
console.log(test.sign) // undefined
```
---
### 7.命名空间,对象枚举
**对象枚举（又叫对象属性遍历）**
- 我们的数组很好遍历，for 循环就可以搞定，但是 你的对象怎么遍历呢 ？
- for in 循环 ：实现对象的遍历
**但是这个有个问题，就是通过 for in 遍历对象，也可以把对象的原型链上的属性遍历出来，怎么办呢？ -----> hasOwnProperty() 参数传入字符串类型的属性名，返回布尔值，表示是否是自己的属性**
**拓展 ：in 操作符 ：判断你是否可以访问到某个属性（和 hasOwnProperty() 的功能不同哦）（基本用不到，了解就可以）**
- 重点拓展 ：instanceof
- a instanceof A // 判断 a对象 是否是 A构造函数构造出来的 （当然这个用法没有想象的那么简单）（ a instanceof Object 也会返回 true）
- 其实根本的理解应该是 ：判断a对象的原型链上 有没有 A的原型
- 这个instanceof解决了一个很重要的问题，就是之前，typeof [ ] typeof { } 返回的都是 object 没办法区分
- 第一种方法 ：constraint
- 第二种方法 ：instanceof
- 第三种方法 ：Object.prototype.toString.call(里面写需要判断的)
---
### undefined类型及null区别
---
## 🎋第九章：日期（Data）
### 1.日期对象基础
---
### 2.Date 常用API
```js
new Date() // 创建一个时间对象 Fri Jul 12 2019 19:59:59 GMT+0800 (中国标准时间)
// 返回自1970年1月1日 00:00:00 UTC到当前时间的毫秒数。
Date.now(); // 1562932828164
// 解析一个表示某个日期的字符串，并返回从1970-1-1 00:00:00 UTC 到该日期对象（该日期对象的UTC时间）的毫秒数
Date.parse('2019.7.12') // 1562860800000
// 年月日时分秒 获取
let dateMe = new Date()
dateMe.getFullYear() // 2019 | 根据本地时间返回指定日期的年份
dateMe.getMonth() // 6 | 根据本地时间，返回一个指定的日期对象的月份，为基于0的值（0表示一年中的第一月）。
dateMe.getDate() // 12 | 根据本地时间，返回一个指定的日期对象为一个月中的哪一日（从1--31）
dateMe.getHours() // 20 |根据本地时间，返回一个指定的日期对象的小时。
dateMe.getMinutes() // 11 | 根据本地时间，返回一个指定的日期对象的分钟数。
dateMe.getSeconds() // 29 | 方法根据本地时间，返回一个指定的日期对象的秒数
dateMe.getMilliseconds() // 363 | 根据本地时间，返回一个指定的日期对象的毫秒数。
dateMe.toJSON() // 🔥 "2019-07-12T12:05:15.363Z" | 返回 Date 对象的字符串形式
dateMe.getDay() // 5 | 根据本地时间，返回一个具体日期中一周的第几天，0 表示星期天（0 - 6）
dateMe.getTime() // 1562933115363 | 方法返回一个时间的格林威治时间数值。
dateMe.toString() // "Fri Jul 12 2019 20:05:15 GMT+0800 (中国标准时间)" | 返回一个字符串，表示该Date对象
dateMe.getTimezoneOffset() // -480（说明比正常时区慢480分钟，所以要加480分钟才对） | 返回协调世界时（UTC）相对于当前时区的时间差值，单位为分钟。
dateMe.toDateString() // "Fri Jul 12 2019" | 以美式英语和人类易读的形式返回一个日期对象日期部分的字符串。
```
[MDN 更多详细](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date)
---
### 3.定时器
```js
// 定时循环器（一直循环执行），会返回一个数字，作为唯一标识，可以用于清除定时器
let timer = setInterval( () => {
}, 1000)
// 清空定时器
clearInterval(timer)
// 定时器（推迟一段时间执行）
let timer = setTimeout( () => {
}, 1000)
// 清除定时器
clearTimeout(timer)
// ❣️是全局window上的方法，内部的this指向window
```
---
## 🍄第十章：正则（Regex）
### 1.正则基础
```js
// 🔥 创建一个正则表达式
const regex1 = /ab+c/gi;
const regex2 = new RegExp("ab+c", "gi");
// 🔥 JS正则表达式的方法
//【判断】test：一个在字符串中测试是否匹配的RegExp方法，它返回true或false
let str = 'hello world';
/world/.test(str); // true
/ /.test(str); // true
/good/.test(str); // false
//【替换】replace：一个在字符串中执行查找匹配的String方法，并且使用替换字符串替换掉匹配到的子字符串
let str = 'hello world'
let repStr = str.replace('world', 'replace') // 注意不会改变原内容
console.log(repStr) // "hello replace"
//【分隔】split 使用正则表达式 或 一个固定字符串分隔 一个字符串，返回 分隔后的子字符串数组
let str = 'hello RegExp';
str.split(' '); // ["hello", "RegExp"]
str.split('hello'); // ["", "RegExp"]
str.split('l'); // ["he", "", "o RegExp"]
str.split('good') // ["hello RegExp"]
// exec：一个在字符串中执行查找匹配的RegExp方法，它返回一个数组（未匹配到则返回null）
// search：一个在字符串中测试匹配的String方法，它返回匹配到的位置索引，或者在失败时返回-1（略）
// match：一个在字符串中执行查找匹配的String方法，它返回一个数组或者在未匹配到时返回null（略）
```
**正则匹配规则速查**
---
## 🌾第十一章：其他内置对象
---
## 🌻第十二章：DOM
### 1.DOM基本解释
**什么是DOM**
DOM（document object model） 文档对象模型，定义了表示和修改文档的方法，DOM对象既为宿主对象，由浏览器厂商定义，用来操作HTML和XML功能的一类对象的集合（web标准编程接口）
DOM结构树（先用网上的图，后期自己画一下）
---
### 2.常用DOM接口
```js
// 获取DOM节点
document.getElementById() // 通过ID获取
document.getElementsByTagName() // 标签名
document.getElementsByClassName() // 类名
document.querySelector() // 通过选择器获取一个元素
document.querySelectorAll() // 通过选择器获取一组元素
document.body // 获取body的方法
document.getElementsByName(name) // 通过name属性查找元素节点
document.documentElement // 获取html的方法
// 节点类型
元素节点（标签） // 属性nodeType返回值1
属性节点（标签里的属性）// 返回值2
文本节点 // 返回值3
注释节点（comment） // 返回值8
document // 返回值9
DocumentFragment // 返回值11
// 节点接口
dom元素.parentNode // 返回当前元素的父节点
dom元素.childNodes // 子节点们
dom元素.firstChild // 第一个子节点
dom元素.lastChild // 最后一个子节点
dom元素.nextSibling // 后一个兄弟节点 previousSibling -> 前一个兄弟节点
// 元素节点接口
dom元素.parentElement // 返回当前元素的父元素节点
dom元素.children // 返回当前元素的元素子节点
dom元素.firstElementChild // 第一个元素子节点（IE不兼容）
dom元素.lastElementChild // 最后一个元素子节点（IE不兼容）
dom元素.nextElementSibling // 返回后一个兄弟元素节点
dom元素.previousElementSibling // 返回前一个兄弟元素节点
// 节点的四个属性和一个方法
节点.nodeName // 元素的标签名，以大写形式表示（只读）
节点.nodeValue // Text节点或者Comment节点的文本内容，（读写）
节点.nodeType // 该节点的类型（只读）
节点.attributes // Element节点的属性集合
节点.hasChildNodes() // 判断节点 是否有子节点
// Element节点的 属性和方法
dom元素.innerHtml
dom元素.innerText
dom元素.attributes // 获取元素身上所有属性构成的集合
dom元素.setAttribute("属性名","属性值")// 给元素设置属性和属性值
dom元素.getAttribute("属性名")// 获取属性值的方法
dom元素.removerAttribute("属性") // 删除属性
// ============== 操作接口 ==================
// 增
document.createElement() // 创建元素节点
document.createTextNode() // 创建文本节点
document.creaetComment() //创建注释节点
document.createDocumentFragment() // 创建文档碎片节点
// 插
父元素节点.appendChild(子元素对象) // 在元素节点的子元素最后插入子元素
父元素节点.insertBefore(父元素中的子元素a, 需要插入的子元素b) // 最后的结果是，父元素节点中 b元素插入到了 a的前面
// 删
元素节点.remove() // 删除DOM元素（自己）
父元素节点.removeChild(子元素节点) // 删除子元素
// 替换
父元素节点.replaceChild(新的节点, 需要被替换的子节点)
// 复制
元素节点.cloneChild() // 返回值是 复制出来的节点
// 查看滚动条的滚动距离
window.pageXOffset // x轴滚动距离
window.pageYOffset // y轴滚动距离
document.body.scrollLeft // x轴滚动距离（兼容低版本IE）
document.body.scrollTop // y轴滚动距离（兼容低版本IE）
// 如何兼容，因为如果有 pageXOffset，那么另一个兼容性的结果就是0，所以相加就能解决兼容性问题了
// 让滚动条滚动
window.scroll(x, y) // 滚动到某个位置
window.scrollTo(x, y) // 滚动到某个位置
window.scrollBy(x, y) // 累加滚动，就是每执行一次，就滚动多少位置
// 查看视口的尺寸
window.innerWidth // 视口的宽度
window.innerHeight // 视口的高度
document.documentElement.clientWidth // 兼容低版本IE
document.documentElement.clientHeight // 兼容低版本IE
document.body.clientWidth // 兼容怪异模式
document.body.clientHeight //兼容怪异模式
document.compatMode // 查看渲染模式 | 'CSS1Compat' 标准模式 | 'BackCompat' 怪异模式
// 查看元素的几何尺寸
dom元素.offsetWidth // 元素的宽度
dom元素.offsetHeight // 元素的高度
dom元素.offsetLeft // 元素相当于父级的位置（如果父级有定位的话，如果没有就是相对于文档的距离）
dom元素.offsetTop // 元素相对于父级的位置（如果父级有定位的话，如果没有就是相对于文档的距离）
dom元素.offsetParent // 返回最近有定位的父级DOM节点
// 脚本化css
dom元素.style // 查看所有样式表接口（内容可读可写）
dom元素.style. = ... // 碰到float这样的保留字，前面加css，例如 cssFloat
dom元素.style.width = ...
dom元素.style.backgroundColor = ...
dom元素.className = ...
window.getComputedStyle(ele, null) // 返回某个元素，最后展示效果的 样式表对象（CSSStyleDeclaration）| 只读 | IE8以下不兼容
```
---
### 3.DOM继承树
**有那么几点需要注意❣️**
- getElementById 方法定义在 Document.prototype 上（Element节点不能使用）（感觉这点面试的时候可以问，可以问出来面试者的DOM节点基础）
- getElementsByName 方法定义在HTMLDocument.prototype上（非document节点不能使用）
- getElementsByTagName 方法定义在 Document.prototype 和 Element.prototype
- HTMLDocument.prototype定义了一些常用属性，body, head分别指代HTML文档中的 body 和 head 标签
- Document.prototype 上定义了documentElement属性，指代元素的根元素，在HTML文档中，他总是指代 html 元素
- getElementsByClassName,querySelectAll,querySelector在 Document.prototype, Element.prototype类中均有定义
---
### 4.试题
**遍历某元素节点树（在原型链上编程）**
```js
```
**封装函数，返回某元素的第n层祖先元素节点**
```html
```
**模块的导入和导出**
```js
// 导出 a.js
let a = 10;
let b = 20;
// export c = 30; 定义时导出
export default {
a,
b
}
// 导入 a.js
import { a, b } from './a.js'
console.log(a) // 10
console.log(b) // 20
import * as m from './a.js' // 全部引入
// Module {
// default: Object,
// Symbol(Symbol.toStringTag): "Module"
// }
import('./a.js').then( m => {console.log('m', m)}) // 异步引入
// Module {
// default: Object,
// Symbol(Symbol.toStringTag): "Module"
// }
```
---
### 1.基础（定义变量，模板字符串）
**定义变量的新方式**
- let关键字
- 块级作用域
- 变量提升，暂时性死区
- 不允许重复声明
- const关键字（定义常量）
- 类似于let
- 不允许重复赋值
---
**let 和 const 到底有没有变量提升？有的话，为什么不能在定义前使用？**
- var 的「创建」和「初始化」都被提升了
- function 的「创建」「初始化」和「赋值」都被提升了
- let 的「创建」过程被提升了，但是初始化没有提升
- const 只有「创建」和「初始化」，没有「赋值」过程
[原文链接](https://zhuanlan.zhihu.com/p/28140450)
---
**模板字符串**
```js
// 实现这个效果
// 你好世界!
// 早上好
// ES5
let str = '世界'
let str = '你好' + str + '!\n' + '早上好'
// ES6
let strEs6 = `
你好${str}!
早上好
`
```
---
### 2.数组拓展
**拓展运算符**
```js
// 求数组这里面最大的值
let arr = [1,2,34,5,6,9]
// 原生API Math.max(1,2,34,5,6,9) 接收的是一组数，所以还需要转一下
Math.max.apply(null, arr) //ES5 34
Math.max(...arr) // ES6 34
```
**❣️注意：数组的拓展运算符是浅拷贝**
---
**解构赋值：本质是模式匹配**
```js
let arr = [1,2,3]
let { x, y, z } = arr
x // 1
y // 2
z // 3
```
---
**ES6新增的静态方法：Array.from() && Array.of()**
```js
// Array.from() 将类数组或者具有迭代器接口的 转为 真正数组
Array.from(arguments)
// Array.of() 传入参数，创建一个数组（对标 new Array() 创建一个时候有问题的，用of更规范）
Array.of(13) // [13]
Array.of(13, 14) // [13, 14]
new Array(13) // 会创建一个长度 13的数组
new Array(13, 14) // [13, 14]
```
---
**ES6新增原型上的方法：**
- Array.prototype.find() 找数组中是否有满足条件的内容，返回 true/false
- Array.prototype.findIndex() 找数组中是否有满足条件的内容，返回 坐标/-1
- Array.prototype.includes() 找数组中是否有满足条件的内容（❣️和find不一样的是，这个内部判断依据是 ==，而 find判断依据是 ===）
- 也就是这个可以判断是否存在 NaN
- Array.prototype.fill() 传入一个数，这个数组每一项 都会变成这个数
- Array.prototype.flat() 降纬数组，参数如果是Infinity可以把任意纬度，降到一维
- Array.prototype.
```js
// 做个题吧 [1,2,3] 变成 [1,0,2,0,0,3,0,0,0] （1后面加上1个0，2后面加上2个0，3后面加上3个0）
let arr = [1,2,3]
arr.map( item => [item, ...new Array(item).fill(0)]).flat() // [1, 0, 2, 0, 0, 3, 0, 0, 0]
```
---
### 3.解构赋值详解
我看着这个功能，看不到底层，只能看这个的规则
```js
// 结构对象
let obj = {
name: '朱昆鹏',
age: 21
}
{ name, age } = obj // name = '朱昆鹏', age = 20
{ name: onName, age: onAge } = obj // onName = '朱昆鹏', onAge = 20
{ name: onName, age: onAge, sex = 'man' } = obj // onName = '朱昆鹏', onAge = 20, sex = 'man'
// 解构数组
let arr = [1, 2, 3]
{x , y, z} = arr // undefined
{0: x , 1: y, 2: z} = arr // x = 1, y = 2, z = 3
[x, y, z] = arr // x = 1, y = 2, z = 3
{ length } = arr // length = 3
```
---
**❣️本质上是模式匹配，主要是为了让你更方便的拿到数据，简化代码**
```js
// 示例
let obj = {
data: {
name: '朱昆鹏',
age: 21
}
}
// 不用解构赋值的时候
let name = obj.data.name
let age = obj.data.age
// 使用解构赋值
let { name, age } = obj.data
```
---
### 4.箭头函数
**特点**
- 不用写function关键字
- 可以不写return（如果不是一样的话，不写的话，就会在最后一样返回 return undefined）
- 参数不能重复
- 只能作为函数，不能 new ，没有原型
- ❣️内部的 this 由定义时外围最接近一层的非箭头函数的 this 组成（箭头函数外层没有包着function，那么恒为this）
- ❣️箭头函数没有 arguments，但是有拓展参数，是ES6用来取代 arguments的
```js
const sum = (num1, num2) => num1 + num2;
const sum = (num1, num2) => ({num1 + num2}); // ❣️返回的如果是一行，并且是对象的时候，语法可能会报错，这时候，就要加一个 () 在外面了
const fn1 = () => {
console.log(arguments, this) // arguments 没定义 | this 是 window
}
let obj = {
fn2 () {
const fn1 = () => {
console.log(arguments, this) // fn2 的 arguments | this 是 obj（因为箭头函数外层有 function 函数 🔥）
}
}
}
```
---
**拓展参数**
```js
// 注意事项，...args 必须放到尾部才行，后面不能跟任何参数（前面可以加，这样拓展参数就是剩下的参数）
const sum = (...args) => {
// args是一个真正的数组，而arguments是类数组
args.forEach( item => {
console.log(item)
})
}
sum(1,2,3,4,5)
```
---
**babel编译之后的箭头函数（箭头函数就就是一个语法糖）**
---
### 5.对象的拓展
**Object新增的静态方法**
```js
let obj1 = { a: 1, b: 2 }
let obj2 = { c: 3, d: 4 }
// Object.assign() 浅拷贝
Object.assign(obj1, obj2) // 和拓展运算符写法基本一样，不一样的在于，这个会改变参数一的值
obj1 // { a: 1, b: 2, c: 3, d: 4 } | Object.assign({}, obj1, obj2) 这样写
Object.keys(obj1) // [a, b]
Object.values(obj1) // [1, 2]
Object.entries(obj1) // [ ['a', 1], ['b', 2] ]
Object.is(NaN, NaN) // true | Number.isNaN()也能判断
Object.is(0, -1) // false |
```
---
### 🔥6.Object.defineProperty
- 简介：ES5规范开始，后续版本迭代，致力于做一件事情，就是把JS底层的功能提供给开发者使用。
- Object.defineProperty 就是其中的一个（之前是浏览器内部使用的，开发者没办法使用），此方法会直接在一个对象上定义一个新的具有详细描述的属性，或者修改一个对象的现有属性，并返回这个对象
- 使用
- 数据描述符
- value: 'xxx' 属性值 | 默认 ''
- writable: true 是否可写 | 默认 false
- configurable: true 是否可配置 | 默认 false
- enumerable: true 是否可枚举 | 默认 false
- 存取描述符
- set: function () {} 属性访问器 进行写操作时调用该方法
- get: function () {} 属性访问器 进行读操作时调用该方法
---
**之前浏览器 内部使用 Object.defineProperty 的示例**
```js
// 不可写的案例
Function.prototype = '不可写'
console.log(Function.prototype) // ƒ () { [native code] } | 没变
// 不可配置案例
window.a = 10
delete window.a // false
// 可枚举案例
let obj = {
name: '朱昆鹏',
__proto__: {
age: 20
}
}
for (let prop in obj) {
console.log(prop) // name age
}
// 不可枚举的案例
for (let prop in Object.prototype) {
console.log(prop) // 虽然 Object.prototype 上有很多对象 ，但是结果是 无
}
```
---
**Object.defineProperty 数据描述符**
```js
let obj = {
// name: '朱昆鹏' // 如果写上的话，默认配置都是 true
}
// 参数一：对象 | 参数二：属性名 | 参数三：对这个属性的 配置
Object.defineProperty(obj, 'name', {
value: '朱昆鹏',
writable: false, // 是否可写 | 默认 false
configurable: true, //是否可配置 | 默认 false
enumerable: true // 是否可枚举 | 默认 false
})
obj.name = 1
obj.name // 朱昆鹏
delete obj.name // true
obj.name // {}
```
---
**Object.defineProperty 存取描述符**
```js
let obj = {
// name: '朱昆鹏' // 如果写上的话，默认配置都是 true
}
let tempValue = '朱昆鹏 get'
// 参数一：对象 | 参数二：属性名 | 参数三：对这个属性的 配置
Object.defineProperty(obj, 'name', {
// value: '朱昆鹏',
// writable: false, // 是否可写 | 默认 false
configurable: true, //是否可配置 | 默认 false
enumerable: true // 是否可枚举 | 默认 false
// set , get 和 value writable 不能共存（会报错）
set(newValue) {
tempValue = newValue
},
get() {
return tempValue
}
})
// 另一种写法
let obj1 = {
tempValue: '朱昆鹏',
get name () {
return this.tempValue
},
set name (newValue) {
this.tempValue = newValue
}
}
obj1.name = '测试'
obj1 // {tempValue: '测试', name: '测试'}
```
**❣️我觉得这个写法定义了一个多余的变量，不是很好，肯定有更好的方法，我还是多学习一下吧**
---
### 🔥7.数据劫持
- Vue双向数据绑定核心功能是由 Observer, Compile, Watcher 三部分实现
- 其中 Observer（监听数据变化进行相应的回调 - 数据劫持） 部分功能就是用 Object.defineProperty 来实现的（Vue2.x之后用 Proxy&Reflect 重构了）
**我们来做一个案例：当我们的数据改变的时候，让视图（页面）也随之改变**
```html
Document
```
---
**思考：Vue是怎么监听到 数组中改变的呢？**
```js
// 在Vue中 数组中改变想要监听，需要用特定的方法，例如 push pop unshift shift...等等
// 原理是 Vue 重写了这些方法
Object.defineProperty(Array.property, 'push', {
})
```
---
### 🔥8.Proxy & Reflect
- 这个东西有兼容性问题，你可能会想了，可以通过 babel 进行编译，编译成ES5不就可以了么，但是 babel 编译本质上是将 ES6语法糖编成 ES5代码，但是 Proxy 和 Reflect 不是语法糖，这是浏览器内部实现的东西，编译之后其实还是他们本身
**Proxy（代理）**
- 植入代理模式的思想，以简洁易懂的方式控制对外部对象的访问
- 利用内置的 set, get 方法控制属性的读写功能用处比较大，其余 has, delePropery...等方法不太在工作开发中使用，有兴趣可以了解下
```html
Document
```
**❣️ obj.me.age Proxy监听不到变化，这怎么办？**
---
### 9.Class（面向对象）
**ES5时代的 面向对象**
```js
// 工厂模式 创建对象
function Preson () {
this.name = '人'
}
// 方法写到原型链上
Preson.prototype.say = function () {
console.log('说话')
}
// =======+ ES5 继承 +=========
// 圣杯模式继承方法
```
---
**ES6时代 面向对象**
```js
class Preson {
constructor (name, age) {
this.name = name || '人'
this.age = age || 20
}
say () {
console.log('说')
}
// ES7 才能这么写 static name = '人'， ES6 只能写函数
// 静态写法
static name () {
return '人'
}
// ES7 私有属性
// name = 10
}
class Zhu extends Preson{
constructor (sex) {
super()
this.sex = sex || '男'
}
}
let zhukunpeng = new Zhu('朱昆鹏', 21, '男') // {name: "人", age: 20, sex: "朱昆鹏"}
```
---
**ES5 模拟Class**
略...
---
**ES7 Class（提案，最新的浏览器有的也没支持，需要babel降级，先了解吧）**
- static property = xxx 静态属性
- property = xxx 私有属性
- @decorator 装饰器
---
### 10.Set
- 简介：Set是ES6提供给我们的一个构造函数（需要new），能构造出一种新的存储数据的结构
- 特点：只有属性值（和数组差不多 0:... 这样的），成员值唯一（不重复）
- 用途：可以转成数组，其本身具备去重，取交集，并集，差集的错用
- 备注：
- babel无法降级（编译之后还是它本身），因为和 proxy 一样，属于浏览器内置的实现
- new Set() 参数必须要是 具有迭代接口的（数组是，字符串是，Set也是，......）(原型上具备 Symbol的就是具备迭代接口)
```js
let setArr = new Set('abc') // Set(3) {"a", "b", "c"}
// 添加 add()
setArr.add('z') // {"a", "b", "c", "z"}
setArr.add('a') // {"a", "b", "c", "z"}
// 删除 delete()
setArr.delete('z') // true {"a", "b", "c"}
// 清空 clear()
setArr.clear() // Set(0) {}
// 判断有没有某值 has() | 数组中可以用 some() every()
setArr.has('z') // fasle
// 遍历 forEach()
setArr.forEach(value => {
console.log(value) // a | b c
})
// 拓展：迭代接口遍历 for of
for (let prop of setArr) {
console.log(prop) // a | b c
}
// 🔥Set 和 数组的转换
let arr = [1, 2, 3]
let setArr2 = new Set(arr) // 数组 ---》 Set
...setArr2 // Set ---》数组
Array.from(setArr2) // 🔥能把类数组，和具备迭代接口的类型，转为 数组
```
---
**🔥Set应用场景**
```js
// 数组去重
[...new Set([2,3,4,5,6,6,2,1,4])] // [2, 3, 4, 5, 6, 1]
let arr1 = [1, 2, 3]
let arr2 = [3, 4, 5]
// 并集
[...new Set([...arr1, ...arr2])] // [1, 2, 3, 3, 4, 5]
// 交集
let setArr1 = new Set(arr1)
let setArr2 = new Set(arr2)
[...setArr1].filter(item => setArr2.has(item)) // [3]
// 差集
let setArr1 = new Set(arr1)
let setArr2 = new Set(arr2)
[...setArr1].filter(item => !setArr2.has(item)) // [1, 2]
[...setArr2].filter(item => !setArr1.has(item)) // [4, 5]
// 把上面 合并就好了
```
---
### 11.Map（键值对）
```js
const pres = new Map()
pres.set(name, '朱昆鹏')
pres.set(age, 20)
```
---
### 12.Symbol
这是一种新的数据类型（ES9或者其他版本中，有bigint这个类型）
```js
// 用处：当做对象的唯一键值
const s1 = Symbol()
const obj = {
[s1]: '朱昆鹏'
}
obj[s1] // 朱昆鹏
```
---
### 🔥13.异步编程
##### 1.promise初探
- 异步编程概念：
- 无论是浏览器还是Node环境中，都会使用JavaScript进行异步操作，例如定时器，事件，ajax，或者node环境中的文件读取等
- 随着异步编程的就是回调机制，也就是说异步避免不了要使用回调
- 异步编程的问题
- 产生回调地狱，难于维护和拓展
- try catch只能捕获同步代码中出现的异常
- 同步并发的异步存在一定的问题
**Promise介绍**
- ES6 的 promise 可以解决回调地狱，以及同步并发的异步问题（异步操作的异常捕获有其他方法解决）
- 但依旧会有明显的回调痕迹，之后学习 async/await 就能让异步代码看起来和同步一样
---
##### 2.异步的使用场景（我们使用Node来试试）
```js
// Node文件读取，演示异步使用中 回调的问题 ❌
// 文件读取
let fs = require('fs')
fs.readFile('./a.js', 'utf-8', (err, data1) => {
console.log(data1)
fs.readFile(data1.url, 'utf-8', (err, data2) => {
console.log(data2)
fs.readFile(data2.url, 'utf-8', (err, data3) => {
console.log(data3)
})
})
})
// 定时器，演示异步使用场景中 捕获不到 异常的问题 ❌
try {
setTimeout( () => {
console.log(a)
}, 1000)
} catch (e) {
console.log(e)
}
// 并发异步操作（我们想等所有的异步都结束之后，再干一件事情）
// 我想想读几个文件，然后需要等都完成之后，再做操作，这个应该怎么做❓
// 这里有个发布订阅者模式很好用，而且那个 --时间的非常的妙
```
---
##### 3.Promise使用1
```js
// 传递一个参数，注意，这个参数是 同步执行的
let promise = new Promise( () => {
console.log(0)
})
console.log(1)
// 0 1
```
**基本使用**
```js
let promise = new Promise((res, rej) => {
setTimeout( () => {
Math.random() * 100 > 60 ? res('ok') : rej('no')
}, 1000)
})
// Promise 有三种状态 pending 进行时 | onFulfilled 成功 | onRejected 失败
// ❣️：.then 里面的函数，是异步执行的（放到了微队列里面）
promise.then( (res) => {
console.log('res', res)
}, (rej) => {
console.log('rej', rej)
})
```
**链式操作**
```js
let promise = new Promise((res, rej) => {
setTimeout( () => {
Math.random() * 100 > 60 ? res('ok') : rej('no')
}, 1000)
})
// Promise 有三种状态 pending 进行时 | onFulfilled 成功 | onRejected 失败
// ❣️：.then 里面的函数，是异步执行的（放到了微队列里面）
promise.then( (res) => {
console.log('res', res)
return 20
}, (rej) => {
console.log('rej', rej)
return 30
}).then( (res) => {
console.log('ok:', res) // ok:20 | ok:30
}, (rej) => {
console.log('no:', rej) // 只有上面抛出错误才会执行到这里（这里有点绕，但是没事）
})
```
---
##### 4.Promise使用2
- then() 注册函数返回值
- catch() 异常捕获
- finally() 最后处理函数
- Promise.all() 同步并发异步的结果
- Promise.race() 谁先成功就处理谁
```js
let promise = new Promise( (res, rej) => {
res()
})
promise.then( res => {
throw new Error('出错')
}).catch( err => {
console.log(err) // Error: 出错 at /Users/zhukunpeng/Desktop/Git-notes/b.js:6:11
}).then( res => {
}).finally( () => {
console.log('最后处理的函数')
})
// .catch() 不是结束，后面还可以进行 .then() 操作，.finally() 是最后处理的函数，后面不能 .then() 了
```
**Promise.all() && Promise.rece()**
```js
function readFile (path) {
return new Promise( (res, rej) => {
fs.readFile(path, 'utf-8', (err, data) => {
if (data) res(data);
})
})
}
// Promise.all() 可以将多个promise实例包装成一个新的 promise实例
// ❣️：如果都成功，那么会返回一个包含各个数据的数组
// ❣️：如果有失败的话，会返回第一个触发失败的值的内容
Promise.all([readFile('./a.js'), readFile('./b.js'), readFile('./c.js')]).then( res => {
console.log(res) // ['a.js', 'b.js', 'c.js']
})
Promise.rece([readFile('./a.js'), readFile('./b.js'), readFile('./c.js')]).then( res => {
console.log(res) // 'a.js' || 'b.js' || 'c.js'
})
```
---
##### 5.async/await
- 返回一个Promise对象
- 类似于同步的代码，来写异步代码
- try catch 可以捕获到异常
- 同步并发 需要写额外的 函数
---
## JS 各个内置API功能实现
### 1.forEach实现
```js
Array.prototype.myForEach = function(func) {
let _arr = this,
len = _arr.length,
parmas = arguments[1] || window;
for (let i = 0; i < len; i++) {
func.apply(parmas, [_arr[i], i, _arr])
}
}
let arr = [1, 2, 3]
arr.myForEach( (item, index, self) => {
console.log(item, index, self, this)
}, {name: '123'})
// 体会：forEach 的主要作用还是遍历，并不能修改里面各个的值；map 才是那种可以操作数组每一项的值
```
---
### 2.filter（过滤）
```js
// 执行完成之后，会返回一个新数组 | 参数和 forEach 一样， ele index self this
// 每一项执行中会返回 true false 如果是 true 就将这一项返回给最后返回的新数组中
Array.prototype.myFilter = function (func) {
let _arr = this,
len = _arr.length,
parmas = arguments[1] || window,
newArr = [];
for (let i = 0; i < len; i++) {
func.apply(parmas, [_arr[i], i, _arr]) ? newArr.push(_arr[i]) : '';
}
return newArr
}
let arr = [1, 2, 3]
arr.myFilter( item => item > 1); // [2, 3]
```
---
### 3.map（映射）
```js
Array.prototype.myMap = function (func) {
let _arr = this,
len = _arr.length,
params = arguments[1] || window,
newArr = [];
for (let i = 0; i < len; i++) {
newArr.push(func.apply(params, [_arr[i], i, _arr]))
}
return newArr
}
let arr = [1, 2, 3]
arr.myMap(item => item += 2) // [3, 4, 5]
// 到这里我才知道为什么 Map 可以控制循环每一个的值，而forEach不行，因为 forEach 就是遍历用的，不做返回的操作
```
---
### 4.every（是否都符合要求）
```js
Array.prototype.myEvery = function (func) {
let _arr = this,
len = _arr.length,
params = arguments[1] || window;
for (let i = 0; i < len; i++) {
if (!func.apply(params, [_arr[i], i, _arr])) {
return false;
}
}
return true;
}
let arr = [1, 2, 3]
arr.myEvery( item => item > 1) // false
arr.myEvery( item => item > 0) // true
```
---
### 5.some（是否有至少一个符合要求）
```js
Array.prototype.mySome = function (func) {
let _arr = this,
len = _arr.length,
params = arguments[1] || window;
for (let i = 0; i < len; i++) {
if (func.apply(params, [_arr[i], i, _arr])) {
return true;
}
}
return false;
}
let arr = [1, 2, 3]
arr.mySome( item => item > 2) // true
arr.mySome( item => item > 3) // false
```
---
## Promise+
### AOP
```js
/**
* AOP 编程
*/
function fn(name) {
console.log('hello world ' + name)
}
Function.prototype.before = function(callback) {
return (...args) => {
callback();
this(...args);
}
}
let newFn = fn.before(() => {
console.log('在函数执行前 执行')
})
newFn('朱昆鹏')
// 在函数执行前 执行
// hello world
```
---
### 函数柯里化
```js
/**
* 函数柯里化
*/
const curring = (fn, arr = []) => {
let len = fn.length // 函数的length就是参数的个数
return (...args) => {
let newArgs = [...arr, ...args]
return newArgs.length == len
? fn(...newArgs)
: curring(fn, newArgs)
}
}
let newSum = curring((a, b, c, d, f) => {
return a + b + c + d + f
})
console.log(newSum(1)(2)(3)(4)(5)) // 15
```
---
### 延迟执行原理
```js
/**
* 拓展：loash after 函数原理（函数在第几次执行之后执行，运用了闭包，Promise.all 差不多也是这个原理）
*/
function after(times, callback) {
return (...args) => {
if (--times === 0) {
callback(...args)
}
}
}
let newFn = after(3, (name) => {
console.log('hello world ' + name)
})
newFn()
newFn()
newFn('朱昆鹏') // hello world 朱昆鹏
```
---
> 发布订阅模式 和 订阅观察者模式 之间的关系
> 发布订阅，发布 和 订阅 之间没有联系，就和中介模式一样，由中介来进行处理
> 订阅和观察者 之间有关系，观察者里面存着 订阅者的方法，到时候 观察者变化了，会通知订阅者执行方法
---
或者举个生活中的例子：租房
- 发布订阅模式，就相当于，租户的，和房东 不认识，租户租房要找中介，房东先把房子租出去，也要找房东，租户通知中介要租房了，中介找到合适的了，就通知房东签合同
- 观察订阅模式，相当于，租户和房东 认识，租户想租房直接找房东租就行了，租户这里存放这 房东租房的方法，少了一个中介的
---
### 发布订阅
> 其实对这里我还是不太理解，感觉还有更好的示例
```js
const eventObj = {
_arr: [], // 中介存放，订阅事件
on(fn) {
this._arr.push(fn)
},
emit() {
this._arr.forEach(fn => fn())
}
}
function fn1() {
console.log('租房1')
}
function fn2() {
console.log('租房1')
}
eventObj.on(fn1) // 订阅
eventObj.on(fn2) // 订阅
eventObj.emit() // 执行所有的订阅事件
```
---
### 观察者模式
```js
/**
* 观察者模式
*/
class Subject {
constructor(name) {
this.name = name
this.Observers = []
this.state = '玩'
}
// 被观察者中要存放所有的观察者
attach(o) {
this.Observers.push(o)
}
setState(newState) {
this.state = newState
this.Observers.forEach(o => o.update(this))
}
}
class Observer {
constructor(name) {
this.name = name
}
update(body) {
console.log(`${body.name}跟${this.name}说${body.state}`)
}
}
// 小宝宝
let body = new Subject('小宝宝')
let o1 = new Observer('爸爸')
let o2 = new Observer('妈妈')
body.attach(o1)
body.attach(o2)
body.setState('有人打我')
// 小宝宝跟爸爸说有人打我
// 小宝宝跟妈妈说有人打我
```
---
### 简单版本
```js
class MyPromise{
constructor(executor) {
this.status = 'pending' // pending Fulfilled Rejected
this.value = undefined; // 正确返回信息
this.reason = undefined; // 错误返回信息
this.resovleArr = [] // resovle
this.rejectArr = [] // reject
// 成功
const resolve = (val) => {
if (this.status === 'pending') {
this.status = 'Fulfilled';
this.value = val;
this.resovleArr.forEach(fn => fn(this.val));
}
}
// 失败
const reject = (reason) => {
if (this.status === 'pending') {
this.status = 'Rejected';
this.reason = reason;
this.resovleArr.forEach(fn => fn(this.reason));
}
}
try {
executor(resolve, reject)
} catch (error) {
reject(e)
}
}
then(onFulfilled, onRejected) {
if (this.status == 'Fulfilled') {
onFulfilled(this.value)
}
if (this.status == 'Rejected') {
onRejected(this.reason)
}
if (this.status == 'pending') {
this.resovleArr.push(() => {
onFulfilled(this.value)
})
this.rejectArr.push(() => {
onRejected(this.reason)
})
}
}
}
const promise = new MyPromise((resovle, reject) => {
setTimeout(() => {
resovle('成功')
}, 1000);
})
promise.then(res => {
console.log('res', res);
})
// 问题1：.then 是怎么链式调用的
```
---
### 传统实现
```js
// 实现的原理
// promise是一个状态机，能根据不同的状态 触发不同的回调
// Pending 等待 | Fulfilled 成功 | Rejected 失败
// 参数传一个函数，
function MyPromise (fn) {
// promise是一个状态机，能根据不同的状态 触发不同的回调
// pending 等待 | Fulfilled 成功 | Rejected 失败
let that = this
that.status = 'pending';
that.resolveValue = null;
that.rejectValue = null;
// 如何解决异步呢？我们执行的时候先不执行，等到res() 触发的时候才触发，我们先记录下
that.ResoveCallBackLisst = []
that.RejctCallBackList = []
// 成功
function resolve (val) {
if (that.status === 'pending') {
that.status = 'Fulfilled'
that.resolveValue = val
that.ResoveCallBackLisst.forEach(ele => ele())
}
}
// 失败
function reject (val) {
if (that.status === 'pending') {
that.status = 'Rejected'
that.rejectValue = val
that.RejctCallBackList.forEach(ele => ele())
}
}
try {
fn(resolve, reject)
} catch(e) {
reject(e)
}
}
MyPromise.prototype.then = function (onFulfilled, onRejected) {
var that = this
if (that.status === 'pending') {
that.ResoveCallBackLisst.push(() => {
onFulfilled(that.resolveValue)
})
that.RejctCallBackList.push(() => {
onRejected(that.rejectValue)
})
}
if (that.status === 'Fulfilled') {
onFulfilled(that.resolveValue);
}
if (that.status === 'Rejected') {
onRejected(that.rejectValue);
}
}
let promise = new MyPromise( ( res, rej) => {
// setTimeout( () => {
// res('你好世界')
// }, 3000)
res('你好世界')
})
promise.then( res => {
console.log(res)
})
```
================================================
FILE: docs/blog/4.JavaScript/5.Underscore库源码分析.md
================================================
---
title: 5.Underscore库源码分析
date: 2020-01-30 00:00:00
permalink:
tag:
- blog
- 4.JavaScript
---
> 等待书写中...
**[网址](https://www.html.cn/doc/underscore/)**
================================================
FILE: docs/blog/4.JavaScript/6.Lodashjs库源码分析.md
================================================
---
title: 6.Lodashjs库源码分析
date: 2020-01-30 00:00:00
permalink:
tag:
- blog
- 4.JavaScript
---
> 等待书写中...
**[网址](https://www.lodashjs.com/)**
================================================
FILE: docs/blog/4.JavaScript/7.函数式编程.md
================================================
---
title: 7.函数式编程
date: 2020-01-30 00:00:00
permalink:
tag:
- blog
- 4.JavaScript
---
> 等待书写中...
---
## 第一部分：函数式编程基础
> **函数式编程不是用函数来编程，也不是传统的面向过程编程。** 主要是将复杂的函数 符合成简单的函数（计算理论，递归论，或者拉姆达演算）。运算过程尽量写成一系列嵌套的函数调用
> 举例：React高阶组件
---
### 函数编程的基本概念
- 函数是第一等公民
- 只用表达式，不用语句
- 没有副作用
- 不修改状态
- 引用透明（函数运行只靠参数）
---
### 核心概念
- 纯函数
- 函数的柯里化
- 函数组合
- Point Free
- 声明式与命令式代码
- 惰性求值
---
### 纯函数
对于相同的输入，永远会得到相同的输出，而且没有任何可观察的副作用，也不依赖外部环境的状态
鉴于这个特性能做什么？
- 可以做缓存，因为第一次，我知道输入什么了，第二次就不用计算了，提高性能
- 纯函数不仅可以有效降低系统的复杂度，还有很多很棒的特性，例如可缓存性
---
### 函数的柯里化
- 传递给函数一部分参数来调用它，让它返回一个函数去处理剩下的参数
- 作用就是解决了函数不纯的问题，将函数依赖的变量以参数的形式组合成 新的函数
- 好处：事实上柯里化是一种预加载函数的方法，通过传递较少的参数，得到一个已经记住了这些参数的新函数。某种意义上讲，这是一种对参数的缓存，是一种非常高效的编写函数的方式
---
### 函数组合
- 将需要层层嵌套的函数 通过一个组合函数包一层，使其使用起来更舒适
---
### Point Free
- 把一些对象自带的方法转化成纯函数，不要命名转瞬即逝的中间变量
- 例如：const f = str => str.toString().split('')
```js
// 解决
let toString = str => str.toString();
let split = str => str.split();
let fn = compost(split(' '), toString)
fn(123) // [1, 2, 3]
// 这种风格能帮助我们减少不必要的命名，让代码保持简洁和通用
```
---
### 声明式与命令式代码
- 命令式代码：我们通过编写一条又一条指令去让计算机执行一些动作，这其中会涉及到很多繁杂的细节
- 声明式代码：通过写表达式的方式来声明我们想干什么，而不是通过一步一步的指示
- 优缺点：
- 函数式编程这种声明式的代码，对于无副作用的纯函数，我们完全可以不考虑函数内部是如何实现的，专注于编写业务代码，优化代码时，目光只需要集中在这些稳定坚固的函数内部即可
- 不纯的函数式代码会产生副作用，或者依赖外部系统环境，使用他们的时候总要考虑这些不干净的副作用。在复杂的系统中，这对于程序员的心智来说是极大的负担
---
### 惰性求值，惰性函数
- 在指令式语言中以下代码会按顺序执行，由于每个函数都有可能改动或者依赖于其内部的状态。因此必须顺序执行
```js
// 求累加的函数（未使用惰性函数）
function add(num) {
let addVale = 0;
for (let i = 0; i <= num; i++) {
addVale += i
}
return addVale
}
add(2000000000) // 1s
add(2000000000) // 1s
add(2000000000) // 1s
add(2000000000) // 1s
// 总共4s
```
```js
// 求累加的函数（使用 惰性函数）
function add(num) {
let addVale = 0;
for (let i = 0; i <= num; i++) {
addVale += i
}
// 函数函数
add = function () {
addVale
}
return addVale
}
add(2000000000) // 1s
add(2000000000) // 0s
add(2000000000) // 0s
add(2000000000) // 0s
// 总共1s
```
---
## 第二部分：更加专业的术语
- 高阶函数
- 尾递归优化
- 闭包
- 容器，Functor
- 错误处理，Either，AP
- IO
- Monad
---
### 高阶函数
- 本来我函数不能做很复杂的事情，你给我传过来一个复杂的函数，我一组合就能干很复杂的事情了
- 将函数当参数，把传入的函数做一个封装，然后返回这个封装函数，达到更高程度的抽象。
---
### 尾递归优化
---
### 闭包
- 在函数里面返回一个函数就会造成闭包，更深层次的我好像也知道，给忘了
---
## 第三部分：流行的函数式编程库
- RxJS
- cycleJs
- **lodash.js**, lazy（惰性求值）
- underscoreJS
- ramadjs
---
### 1.RxJS（必学）
- 诞生以来一直不温不火，单它的函数响应式编程（FRP）理念非常先进（函数式编程 FP）
- 在RxJS中，所有的外部输入（用户输入，网络请求等等）都被试做一种事件流（这种机制特别适合处理游戏，上上下下）
---
### 2.lodash
---
### 3.underscoreJS（以后学）
================================================
FILE: docs/blog/4.JavaScript/8.TypeScript.md
================================================
---
title: 8.TypeScript
date: 2020-01-30 00:00:00
permalink:
tag:
- blog
- 4.JavaScript
---
> 注意此处：内容不全，待完善...
> TypeScript 是 JavaScript 的超集 [中文网站...](https://www.tslang.cn/)
---
## 🐬第一部分：TypeScript介绍
### 1.安装
- 前置：需要Node环境
- 安装：npm i -g typescript
- 验证：tsc -v（tsc是ts的编译器）
```sh
# 生成package.json
npm init
# 生成配置信息（生成 tsconfig.json）
tsc --init
# 工程化（自动化的帮你buid ts 项目，方便学习）
npm install webpack webpack-cli webpack-dev-server ts-loader typescript html-webpack-plugin
```
---
## 🐌第二部分：TypeScript数据类型
### 1.基本数据类型
```js
// JavaScript中也有的
let age: Number = 10;
let myName: String = '朱昆鹏';
let married: Boolean = true;
let arr1: number[] = [1, 2, 3]
let arr2: Array
= [1, 2, 3]
// 元组
let yuanzu: [string, number] = ['朱昆鹏', 20];
// 枚举（性别，月份...）
enum Gender {
boy,
girl
}
// 常量枚举
const enum Colors {
red, green, blue
}
let myColor = [Colors.red, Colors.blue]
// 任意类型（就不会进行类型检查了）
let root:any = document.getElementById('#app')
root.style.color = 'red'
// HTMLElement
let element: (HTMLElement | null) = document.getElementById('#app');
element!.style.color = 'red'; // !非空断言
// null undefined 是其他类型的子类型
let x: number;
x = 1;
x = undefined;
x = null;
// never 代表不会出现的值
// void 表示没有任何返回值（void 可以被复制给 null | undefined，never不能返回任何值）
function voidFn(): void {
console.log('void')
}
// Symbol
const s1 = Symbol('key')
const s2 = Symbol('key')
// BigInt
const max = BigInt(Number.MAX_SAFE_INTEGER); // 2 的 53次幂 - 1
// 类型推导
let mName = '朱昆鹏' // string 类型
// 为什么一个 数字类型 可以用 .toString() 不是对象才有属性么，原因是因为 包装类，内部 new 了
// 联合类型
let zName: string | number;
zName = '朱昆鹏'
zName = 22;
// 类型断言
let kName: string | number | any
// kName.toFixed(2) 会报错，因为不知道你是不是number类型，这时候可以用类型断言
(kName as number).toFixed(2)
// (kName as number as any) // 双重断言
// 字面量类型
const up:'Up' = 'up';
type Direction = 'Up';
function move(direction: Direction) {}
move("Up"); // 可以实现枚举的效果
// 类型字面量
type My = {
name: string,
age: number
}
let myN: My = {
name: "zkp",
age: 22
}
```
---
### 2.函数和类
```js
// 函数
// ? 是可选参数
function hello(name: string, age?: number, say: string = 'hello'): void {
console.log(say + name + age)
}
// 函数的重载（函数参数不一样）
// 类
class Person {
name: string;
getName(): void {
console.log('my name is zkp')
}
}
let p1 = new Person()
p1.getName();
```
---
## 📚参考列表
- [慕课网课程...基于TypeScript从零重构axios](https://coding.imooc.com/class/330.html)
- [珠峰教育](http://www.javascriptpeixun.cn/)
================================================
FILE: docs/blog/4.JavaScript/9.Cocos2d.md
================================================
---
title: 9.Cocos2d
date: 2020-01-30 00:00:00
permalink:
tag:
- blog
- 4.JavaScript
---
## 第一章：三小时开发FlappyBird
---
### 1.Cocos的安装和IDE
- [cocos2d 下载](https://www.cocos.com/products#CocosCreator)
- [编辑器：vscode](https://code.visualstudio.com/)
---
### 2.场景，精灵，节点树 等名词
- 场景（Scene）：类似于 拍电影中的一个场景
- 精灵（Sprite）：相当于 电影中的一个个演员
- 节点树（NodeTree）：和网页的节点树有类似的感觉（就是在 cocos creator 里面可以操作节点的树形结构）
- 节点（Node）:
- 画布（Canvas）:
- 资源（Assets）:
---
### 3.节点和组件
> 我给一个节点设置，让它当Lable组件，这样可以，设置让它当精灵（Sprite）组件，这也可以，这就是他们之间的关系。这个对于有编程经验的我来讲，还是比较好理解的。（例如Button 是由 按钮精灵图 + 按钮组件 组合而成的）
- Button节点简单使用
- 节点右键：创建一个UI节点 --> 创建一个Button组件
- Transition 可以选择 COLOR 可以设置各个情况下按钮的点击状态
---
### 4.第一个脚本
- 创建脚本：在 Assets面板，Script文件夹下 右键创建 Ts脚本文件
---
### 5.帧和函数（基础知识普及）
- 帧：FPS 影像动画中最小单位的单幅影像画面
- 函数：实现某一种功能的代码块
```javascript
// 每刷新一帧页面 都会调用这个函数
update (dt: number) {
console.log('dt', dt)
}
```
---
### 6.制作小鸟翅膀
```javascript
const {ccclass, property} = cc._decorator;
@ccclass
export default class NewClass extends cc.Component {
@property(cc.Label)
label: cc.Label = null;
// 小鸟图片1
@property(cc.Sprite)
bird1: cc.Sprite = null;
// 小鸟图片2
@property(cc.Sprite)
bird2: cc.Sprite = null;
// 小鸟图片3
@property(cc.Sprite)
bird3: cc.Sprite = null;
// LIFE-CYCLE CALLBACKS:
// onLoad () {}
time: number = 10; // 距离上次切换显示小鸟，流逝的时间
playSeq: number = 0; // 播放顺序
start () {
}
/**
* 小鸟动画播放函数
* @param { Node } startNode 会默认全部取消，然后需要传入需要播放的节点
*/
seditionReset(startNode: any) {
this.bird1.node.active = false
this.bird2.node.active = false
this.bird3.node.active = false
startNode.node.active = true;
}
// 每刷新一帧页面 都会调用这个函数
update (dt: number) {
this.time += dt
if (this.time > 0.5) {
if (this.bird1.node.active) {
this.seditionReset(this.bird2)
this.playSeq = 0;
} else if (this.bird2.node.active && this.playSeq == 0) { // 正向播放
this.seditionReset(this.bird3)
} else if (this.bird2.node.active && this.playSeq == -1) { // 逆向播放
this.seditionReset(this.bird1)
} else if (this.bird3.node.active) {
this.seditionReset(this.bird2)
this.playSeq = -1;
}
this.time = 0;
}
}
}
```
---
## 第三章：物理弹球
> 这一章主要是讲 cocos的物理引擎
### 1.物理简介
================================================
FILE: docs/blog/5.jQuery/1.jQuery基础.md
================================================
---
title: 1.jQuery基础
date: 2020-01-30 00:00:00
permalink:
tag:
- blog
- 5.jQuery
---
> 注意此处：内容不全，结构混乱，待重构...
---
## jQuery介绍
### 1.什么是jQuery
- jQuery其实就是一堆的JS函数（JS库），也是普通的JS而已，不要畏惧!
- 特点：写得少，做得多
---
### 2.为什么要用jQuery
- jQuery面向用户良好的设计，使得在使用过程中彻底解放了你记忆中的原生操作DOM的接口
- jQuery中大量可复用的函数和发展过程中常年积累下来的插件库，可以极大的简化JavaScript开发
- jQuery在搬书以上并没有复杂交互的网站中大部分使用，因为它们仅仅是需要兼容一些低版本浏览器，又要呈现出炫酷的效果，这时候使用jQuery更好
- jQuery改变了数百万人编写JavaScript的方式，虽然现在组件化，工程化流行，但不要忘掉jQuery，面试中还是会问到的
---
### 3.jQuery学习注意点
- jQuery知识辅助工具，不能完全替代JS，原生，jQuery二者经常并存
- jQuery很庞杂，要会使用，但应重学思想
- jQuery方法很多，按需学习，把常用的有价值的学会
- jQuery API可以先用现查
---
## 基本使用
### 1.$() 使用
- jQuery CDN引入：https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js
```js
// $ === jQuery // true
$('div ul li:last') // 选择元素（传CSS选择器，规则也可以）
$(null) // 不会报错，这是因为jQuery内部有容错机制
$(dom) // 传原生DOM，就会变成 jQuery DOM
$(fn) // 传递一个函数，当DOM加载完毕之后执行（相当于一个事件函数）相当于 $(document).rendy(function () { })
```
**jQuery精髓**
- 精髓一：封闭作用域（IIEF）
```js
(function () {
fucntion jQuery (selector) {
return new jQuery.prototype.init(selector)
}
jQuery.prototype.init = funciton (selector) {
// 选出 DOM 并且包装成jQuery对象，并返回
}
jQuery.prototype.css = function () {
// 精髓二：链式调用
return this
}
window.$ = window.jQuery = jQuery
})()
```
---
### 2.选择元素 get,eq,find,filter...
```html
选择元素
```
```js
// get() | 返回原生DOM对象
$('.demo').get() // 返回所有选中的 原生DOM对象
$('.demo').get(0) // 选中第一个 原生DOM对象
$('.demo').get(-1) // 选择倒数第一个 原生DOM对象
// get() 源码实现
jQuery.prototype.get = function (num = 0) {
num >= 0 ? return this[num] : return this[num + this[num]]
}
// eq() | 返回jQuery对象（和 get() 对比看）
$('.demo').eq() // 返回所有选中的 jQuery对象
$('.demo').eq(0) // 选中第一个 jQuery对象
$('.demo').eq(-1) // 选择倒数第一个 jQuery对象
// eq() 源码实现
jQuery.prototype.eq = function (num = 0) {
let dom = num >= 0 ? this[num] : this[num + this[num]]
return $(dom) // 返回jQuery对象
}
// find() | 查找 经常使用在链式调用中 🔥
$('.wrapper')
.css({color: 'red'})
.find('.demo')
.eq(0)
.css({color: 'greed'}) // 查找 第一个 wrapper下面 第一个 demo 并设置css
// ❣️注意：find() 会调用前一个的 prevObject（这个保存的是上一次链式调用的jQuery对象） 节省了jQuery的性能
// filter() | 过滤
$('.wrapper')
.find('.demo')
.filter('.filt') // 就能筛选到特定的一项了，也能传函数，参数是 index, ele ，其他的都一样，true 也是，false 不返回
// has() |
$('demo').has('wrapper')
// is() |
```
================================================
FILE: docs/blog/5.jQuery/2.jQuery第三方库.md
================================================
---
title: 2.jQuery第三方库
date: 2020-01-30 00:00:00
permalink:
tag:
- blog
- 5.jQuery
---
# 2.jQuery第三方库
> 等待书写中...
================================================
FILE: docs/blog/5.jQuery/3.jQuery源码解析以及实现.md
================================================
---
title: 3.jQuery源码解析以及实现
date: 2020-01-30 00:00:00
permalink:
tag:
- blog
- 5.jQuery
---
# 3.jQuery源码解析以及实现
> 等待书写中...
================================================
FILE: docs/blog/6.Vue/1.MVVM框架绪论.md
================================================
---
title: 1.MVVM框架绪论
date: 2020-01-30 00:00:00
permalink:
tag:
- blog
- 6.Vue
---
> 了解MVVM框架产生的背景，有助于掌握未来的发展，也能渐进的感受技术的演进，这样对技术的探索是很有帮助的
## 🐣第一部分：MVVM的前世今生
### 1.MVC,MVP,MVVM介绍
- MVC：传统的前后端不分离项目
- MVP：单向的 View - Presenter - Model
- MVVM：View - ViewModel - Model
---
### 2.MVVM的起源
MVVM是 Model - ViewModel - View 的简写。微软的WPF带来了新的技术体验，例如Silverlight，音频，视频，3D，动画，这导致了软件UI层更加细节化，可定制化。同时，在技术层面，WPF也带来了诸如 Binding, Routed, Events, Command, DataTemplate, ControlTemplate等新特性
MVVM框架的由来便是MVP（View - Presenter - Model）模式 与 WPF结合起来的应用方式，演变过来的一种新型架构框架。他立足于原有的MVP框架，并把WPF的新特性融合进去，以应对客户日益复杂的需求变化
拓展：WPF做了什么：将 View 和 Presenter 做了双向
---
### 3.MV*框架的演变
- [dojo](https://dojotoolkit.org/)
- jQuery：无可替代，操作DOM服务（链式调用，等思想我们可以学习，都很经典）
- backbone：函数式编程，让代码MVC，解决代码又丑又烂
- splie && canjs：也是MVC，但是加了绑定的思想
- 第一个MVVM框架：O8年出现，[Knockout官网](https://knockoutjs.com/)
- batman.js && emben
- angler && vue && react
- meteor：前后端统一框架
---
### 4.对MVMM的思考
- MVC,MVP,MVVM
- DI,IOC,AOP,OOP
- ORM,RESTful
> 框架是过眼云烟，思想才是永恒
---
================================================
FILE: docs/blog/6.Vue/10.Vue3.md
================================================
---
title: 10.Vue3
date: 2020-01-30 00:00:00
permalink:
tag:
- blog
- 6.Vue
---
# 9.Vue3
### Vue3新增了什么
- 性能（比vue2快了2倍）
- tree shaking（按需编译代码）
- composition apu （类似 hooks 未来）
- ts support（typescript 面向未来）
- custom renderer api（自定义渲染）
---
### 起步
- 体验
- vue-cli：
- webpack：vue-next-webpack-preview
- vite：
```sh
#
vue create vue3-demo
#
vue add vue-next
```
================================================
FILE: docs/blog/6.Vue/2.Vue基础.md
================================================
---
title: 2.Vue基础
date: 2020-01-30 00:00:00
permalink:
tag:
- blog
- 6.Vue
---
> 说实话，Vue的官网更好一些，我有一些忘记的，不会来这，而是直接去官网
> 这个只是我当初不会的时候整理的内容，现在会了，就直接去官网了
> 如果你还不会，那么建议自己也整理一遍吧，然后再去官网
---
## 🥜第一部分：前言
> 我感觉Vue的官网已经很详细了，但我还是想再简化一点，作为我自己查阅使用
### 1.为什么要用Vue
> 我们有jQuery，为什么要用Vue，Vue好在哪里
- 性能更好
- jQuery主要是操作DOM的一个库，但是操作DOM是十分消耗性能的，修改DOM会导致重绘重排
- 而Vue使用 虚拟DOM（不是一个真实的DOM，而是由JS来模拟出来的具有真实DOM结构的一个树形结构），性能更好
- 见 使用虚拟DOM库
- 视图，数据分离
- 主要是模板引擎的作用，见实现一个模板引擎
- 维护成本低
---
### 2.Vue介绍
> 是一套用于构建用户界面的渐进式框架
---
### 2.虚拟DOM
> DOM的操作是昂贵的，JS的运行效率更高，将DOM对比放到JS层，减少DOM操作，效率更高
[snabbdom](https://github.com/snabbdom/snabbdom) 是一个比较火的 虚拟DOM库，Vue2.0虚拟DOM就借鉴了这个库，我可以先使用一下这个库
```html
年龄+1
```
---
### 3.模板引擎解析
---
### 4.双向数据绑定实现原理
---
## 🍯第二部分：Vue基础
### 1.安装
---
### 2.创建实例
```html
姓名：{{my.name}}
年龄：{{my.age}}
数组：{{my.arrTest}}
```
---
### 3.数组，对象问题
> 2.创建实例中，有个数组的示例，但是有一些问题，其实对象也有这些问题
- vm.my.arrTest = [1,2,3,4] 没问题，可以变
- vm.my.arrTest.push(4) 没问题，可以变
- ❎ vm.my.arrTest[0] = 5 变不了
- ❎ vm.my.arrTest.length = 1 变不了
**❣️ 更新的原理是 Object.defineProperty，其实是监听不到 引用对象里面数据改变的**
**🔥 数组解决方法：也就是数组 push 也不能触发，但是Vue改写了 数组原型上的方法，这个称之为 数组变异方法，除了 push 还有 pop, shift, unfhift, sort, reverse, splice**
**🔥 对象解决方法：通过 $set(要改的是谁，要改成什么，改成什么样的的值)，一般常用于对象**
**拓展：vm.$el 表示我们那个 app 的DOM**
**拓展：vm.$nextTick() 再次渲染DOM之后的，例如vm.my.age = 23，vm.$el.innerText 其实获取的是上一个状态的，怎么才能拿到渲染之后的DOM呢，就需要 vm.$nextTick(() => {})**
**拓展：vm.$mount() 挂载元素**
---
### v-pre（会跳过模板解析过程）
```js
{{name}}
// 输出朱昆鹏
{{name}}
// 输出 {{name}}
```
---
### v-cloak（在模板解析之前存在，编译之后消除）
```js
// 这个有什么用呢，因为页面是先加载DOM之后，才加载JS，然后Vue才动用模板解析，进行渲染的，也就是页面有段时间，是 {{}} 这种的展示形式，这种体验不好，可以用 cloak 进行占位
// 使用方式是主要配合css进行
[v-clock] {
display: none
}
```
---
### v-once（让某个元素不再更改）
内部原理是使用了缓存
```js
{{name}}
// 朱昆鹏
// vm.name = 111 视图不变（原理是调用了缓存）
```
---
### v-html（渲染网页内容）
底层原理是innerHtml
```js
// 容易造成XSS攻击
```
---
### v-text（渲染文本）
使用v-text的标签，内部内容都会被替换层 v-text绑定的内容，底层原理是 innerText
```js
{{name}}
// 21
```
---
### v-if v-else v-else-if
```js
示例1
示例2
示例3
```
---
### v-show
```js
示例
```
---
### v-if 和 v-show的区别
- v-if 是真正让元素消失，或者插入
- v-show 是控制css，让其显示或者隐藏，并且不支持template标签
---
### v-bind（当属性想使用数据的时候）
```js
点击
new Vue({
el: '#app',
data: {},
methods: {
click () {
alert('打印')
}
}
})
```
---
### v-for
```js
// 注意 :key 不能写到 template 上
{{ index }} : {{ item }}
// 拓展：还能遍历数字，字符串
{{item}} // 1 2 3 4 5
{{ item }} // z h u
```
---
### v-model（双向数据绑定）
**主要用于输入框，做了一层简单的优化，使之有双向绑定的效果，效果就是，输入框内数据改变，data中的数据也一起改变**
原理解析：监听 input 值改变事件，将改变的值，赋予 v-model 绑定的 属性，本质上是 input + value 语法糖
```js
请选择
A
B
C
```
---
### 单向数据流 和 双向数据绑定原理探索以及实现
---
### 修饰符
---
### 写一个todoList
```html
Document
```
---
## 🍖第三部分：Vue进阶
### 1.自定义指令（directive）
> 全局指令，挂载Vue构造函数中，所有实例都能使用，局部指令，挂到具体实例中
**例如我们需求是，让 input 标签 最多只能输入5个字符**
```html
```
---
**自定义指令，参数二还能传递对象**
[官方教程...](https://cn.vuejs.org/v2/guide/custom-directive.html)
---
**局部自定义指令是需要在实例上写 directives属性**
```js
new Vue({
el: '#app',
directives: {}
})
```
---
### 2.自定义指令进阶
---
### 3.过滤器（filter）
> 在不改变原有数据的情况下，改变了展示的数据
```js
// 例如我们将 1000000 变为 1,000,000 这种展示形式
{{ num | toNum(2) | 过滤器二 | ...}}
// 全局过滤器
Vue.filter('toNum', (value, times) => {
console.log('原来的数据', value)
console.log('参数', times)
return 处理之后的数据
})
// ❣️ 有种函数式编程的感觉
```
[过滤器官方文档...](https://cn.vuejs.org/v2/guide/filters.html)
---
### 4.el template render
**问题一：为什么我们写到 div#app 里面的东西，就能使用 Vue的语法了？**
过程是：通过el来确定读取那个标签里面的内容（HTML字符串） ---> 生成抽象语法树（AST），其实这一步就已经将插值表达式转换了 ---> 通过render 生成 Vnode ---> 变成真是的DOM元素
**❣️ 备注：el其实还能传真实的DOM节点，如果不写el的话，会看有没有 $mount,不会解析了**
---
**如果有了 template ，那么会怎么解析呢？**
首先判断是否有 el（没有就看是否有 $mount）---> 然后判断是否有 template（没有的话 template = $el.outerHTML，也就是 el#app里面的内容）---> 生成AST ---> render ---> vnode ---> 真实DOM
---
**render ?**
```js
```
---
### 5.渲染函数 & JSX
[官方文档...](https://cn.vuejs.org/v2/guide/render-function.html)
---
### 6.生命周期
> 执行到某个阶段，自己去执行的函数,只要将渲染流程搞懂，就很清晰了（要想理解，还是要看官网的这张图，很是经典）
```
---
### 2.组件数据传递（props）
```html
```
[官方文档...](https://cn.vuejs.org/v2/guide/components-props.html)
---
### 3.组件通信
- props
- $emit/$on
- event bus
- $parent
- $root
- $children
- $refs
- $attrs
- $listeners
- provide/inject
- vuex
> 问题一：为什么有那么多种组件通信的手段，用Vuex不能解决所有问题么？
如果你要写一个组件库，里面的组件通信难道要依赖Vuex么，可以回想一下，目前的组件库，似乎都没有让你安装Vuex
所以，越往深处学，就越能了解到，上面每种的试用场景
---
> 问题二：$refs 和 $chilren 的区别
$refs 不管是原生的标签还是自定义的组件，都可以获取
$chilren 只能获取自定义组件
---
### 4.组件通信 代码示例
根节点
```
**Children1.vue**
```html
节点1
{{ name }}
{{ $attrs.attrsTest }}
节点1 通过 $emit/$on 发送数据（可以跨层级）
通过 $chilren 改变 子节点数据
通过 $refs 改变 子节点值数据
测试 provide/inject 不是响应式 {{ provideNum }}
```
---
**Children2.vue**
```html
节点2
通过 $parent 获取直接父组件 信息
{{ text }}
```
---
**Children3.vue**
```html
节点3
{{ text }}
{{ provideText }}
{{ $attrs.attrsTest }}
```
---
### 5.插槽
```html
首页
首页
首页
{{ name }}
{{ age }}
```
---
### 3.getter（Vuex中的计算属性，先这么理解吧）
```js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex) // 给Vue注入了一个 $state
export default new Vuex.Store({
// 定义数据的地方
state: {
name: '朱昆鹏',
age: 21
},
getters: {
nameAndAge (state) {
return `姓名：${state.name} 年龄：${state.age}`
}
}
})
```
```html
{{ nameAndAge }}
{{ nameAndAge1 }}
```
---
### 4.mutations（store 中的状态的唯一方法）
```js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex) // 给Vue注入了一个 $state
export default new Vuex.Store({
// 定义数据的地方
state: {
name: '朱昆鹏',
age: 21
},
mutations: {
changeName (state, name) {
state.name = name
}
ageAdd (state, { num }) {
ageAdd += num
},
}
})
```
```html
```
> 注意 mutations 里面的 内容 不会有延迟，按着顺序就执行完成了，里面写上异步代码也是没有用，怎么解决呢，用 active 来做异步的提交改变
---
### 5.action（内部可以写异步，然后异步触发mutations）
> 我们可以在action内部执行异步
```js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex) // 给Vue注入了一个 $state
export default new Vuex.Store({
// 定义数据的地方
state: {
name: '朱昆鹏',
age: 21
},
mutations: {
changeName (state, name) {
state.name = name
}
},
actions: {
// commit 是 全局上下文
changeName ( { commit }, name ) {
setTimeout( () => {
commit('changeName', name)
}, 1000)
}
}
})
```
```html
1s后改变名字
```
---
### 6.module（分模块）
> 一般都是建立一个文件夹（store），里面有 index.js 和 modules文件夹，我下面举例 zhukunpeng & girlfriend 两个模块
```js
import Vue from 'vue'
import Vuex from 'vuex'
import zhu from './modules/zhukunpeng.js'
import lin from './modules/girlfriend.js'
Vue.use(Vuex)
export default new Vuex.Store({
modules: {
zhu,
lin
}
})
```
```js
// store/modules/zhukunpeng.js
export default {
state: {
name: '朱昆鹏',
age: 21
},
getters: {},
mutations: {},
actions: {}
}
```
```js
// store/modules/girlfriend.js
export default {
state: {
name: '朱昆鹏的女朋友',
age: 21
},
getters: {},
mutations: {},
actions: {}
}
```
```html
姓名：{{ $store.state.zhu.name }}
女朋友：{{ $store.state.lin.name }}
```
> 注意：这种分层之后，可以通过 mapXXX 方式 拿到 getters mutations action，但是不能拿到 state，如果想通过 mapXXX 的方式获取 state，需要给每个模块 加上命名空间 namespaced: true
- 但是这样的话，获取方式就会发生改变 例如 ： $store.getters.xxx ===> $store['命名空间名称/getters'].xxx || ...mapGetters(['xxx']) ===> ...mapGetters('命名空间名称',['xxx'])
- ❣️ 推荐是使用命名空间
---
## 🎾第五部分：Vue测试（Jest）
[我写的更详细的 Jest 内容（还没整理完成）...](https://zhukunpenglinyutong.github.io/2.note/8.4%E5%89%8D%E7%AB%AF%E4%BB%A3%E7%A0%81%E8%B4%A8%E9%87%8F/2.%E5%89%8D%E7%AB%AF%E6%B5%8B%E8%AF%95%E6%A1%86%E6%9E%B6Jest.html#%E2%9B%84%EF%B8%8F%E7%AC%AC%E4%B8%80%E9%83%A8%E5%88%86%EF%BC%9Ajest%E5%9F%BA%E7%A1%80)
### 1.Jest基础使用
> 内置断言库，
如果你生成了选择了需要测试的话，会生成一个 tests 文件夹，我们的内容就是写到这里面的
```js
// ① 测试函数
import { testFn } from '函数的地址'
describe('', () => {
it('', () => {
// 函数测试
})
})
// ② 测试组件
import { hello } from '引入hello组件'
import { mount } from '@vue/test-utils'
describe('hello.vue', () => {
it('', () => {
const wrapper = mount(hello) // 注入灵魂（拿到被挂载的元素）
helloData.text // 'hello world'
// 组件内容测试
})
})
```
---
### 2.Jest异步
```js
import asyncHello from '异步函数的地址'
import { mount } from '@vue/test-utils'
describe('测试异步组件', done => {
// 方法一
it('获取内容', () => {
const wrapper = mount(asyncHello)
wrapper.findAll('button').at(0).trigger('click') // 让 button 第一个标签，触发点击事件，这个事件会触发发送请求
Vue.nextTick(() => {
expect(wrapper.findAll('h1').at(0).text()).toBe('测试异步组件')
done()
})
})
// 方法二
it('获取内容', () => {
const wrapper = mount(asyncHello)
wrapper.findAll('button').at(0).trigger('click') // 让 button 第一个标签，触发点击事件，这个事件会触发发送请求
return Promise.resolve().then(() => {
expect(wrapper.findAll('h1').at(0).text()).toBe('测试异步组件')
})
})
// 方法三：使用 async/await，但是不方便
})
```
```js
// tests/__mocks__/axios.js
export default {
get: url => {
return Promise.resolve({
status: 200,
data: {
url: url
}
})
}
}
```
---
### 3.Jest测试Vuex
> 这块等我有空写吧
---
## 🎱第六部分：Vue测试（mocha + chai）
> Mocha 是一个测试框架， chai（Jest是一个断言库）
因为我现在也不常用了，我先占个位，有空写
---
## ⛳️第七部分：UI组件库（Element）
### 1.Layout布局
---
### 2.Container容器
---
### 3.Color色彩
---
### 4.Typography字体 &
---
### 5.Icon图标
---
## 📚参考列表（致敬）
- [Vue官网](https://cn.vuejs.org/)
- [Vuex官网](https://vuex.vuejs.org/zh/)
- [Vue-Router官网](https://router.vuejs.org/zh/)
- [Axios中文网](http://www.axios-js.com/zh-cn/)
- [Element官网](https://element.eleme.cn/#/zh-CN)
- [Vue-Cli官网](https://cli.vuejs.org/zh/)
- [Jest官网]()
- [腾讯课堂](https://ke.qq.com/)
- [慕课网](https://www.imooc.com/)
================================================
FILE: docs/blog/6.Vue/4.Vue源码解析以及实现.md
================================================
---
title: 4.Vue源码解析以及实现
date: 2020-01-30 00:00:00
permalink:
tag:
- blog
- 6.Vue
---
> 根据vue源码，实现一个简单的vue
## 搭建基础环境
### 安装 rollup
> 这个库打包js，打包出的代码更加简洁
- rollup：打包工具
- rollup-plugin-babel：rollup 和 babel做一个关联（已废弃，现在用 @rollup/plugin-babel）
- @babel/core：这个会调用 @babel/preset-env 转义我们的代码
- @babel/preset-env：将es6转为es5
- rollup-plugin-serve：启动一个本地环境
```sh
npm install rollup @rollup/plugin-babel @babel/core @babel/preset-env rollup-plugin-serve -D
```
---
### 配置 rollup.config.js 和 .babelrc
```js
import babel from '@rollup/plugin-babel'
import serve from 'rollup-plugin-serve'
export default {
input: './src/index.js',
output: {
format: 'umd', // 模块化的类型 esm，commonjs | umd amd
name: 'Vue', // 全局变量的名字
file: 'dist/umd/vue.js',
sourcemap: true // 可以调整转换转换后的代码
},
plugin: [
babel({
exclude: 'node_modules/**'
}),
serve({
port: 3000,
contentBase: '',
openPage: './index.html'
})
]
}
```
> .babelrc
```js
{
"presets": [
"@babel/preset-env"
]
}
```
---
### 启动
```json
"scripts": {
"dev": "rollup -c -w"
},
```
> 访问：http://localhost:3000/
---
## vue初始化流程
---
> html模板
> index.html
```html
Document
```
---
> 入口函数
> src/index.js
```js
import { initMixin } from './init'
// 暂时不用ES6的Class,因为 class有整体性，函数需要写到class里面，不利于拆分
function Vue(options) {
this._init(options) // 入口方法，做初始化操作
}
// 🔥 写成一个个插件，进行对原型的拓展
initMixin(Vue) // 专门做初始化的文件
export default Vue
```
---
> 初始化文件
> src/init.js
```js
import { initState } from "./state"
/**
* 初始化操作函数
* @param {*} Vue 构造函数
*/
export function initMixin(Vue) {
Vue.prototype._init = function(options) {
const vm = this // 这里的this指向，当前new出来的实例
vm.$options = options
// 初始化状态（将数据做一个初始化的劫持，当我改变数据的时候更新视图）
// 有很多类型的状态：data props watch computed
initState(vm)
}
}
```
---
> 初始化状态
> src/state.js
```js
import { observe } from "./observer/index";
export function initState(vm) {
const opts = vm.$options;
// 先初始化属性
if (opts.props) initProps(vm)
if (opts.methods) initMethods(vm)
if (opts.data) initData(vm)
if (opts.computed) initComputed(vm)
if (opts.watch) initWatch(vm)
}
// 初始化 Data
function initData(vm) {
let data = vm.$options.data
// 传过来可能是对象或者函数，但是我们就想要对象（下面的写法就可以）
// data.call() 会执行函数，作用域是 vm
data = vm._data = typeof data == 'function' ? data.call(vm) : data;
// 数据劫持方案：对象：Object.defineProperty | 数组：单独处理
observe(data)
}
// 初始化 Computed
function initComputed(vm) {}
// 初始化 Watch
function initWatch(vm) {}
// 初始化 Props
function initProps(vm) {}
// 初始化 Methods
function initMethods(vm) {}
```
---
> 工具函数
> src/utils.js
```js
// 判断是否是数组
export function isFunction(val) {
return typeof val === 'function';
}
// 判断是否是对象
export function isObject(val) {
return typeof val === 'object' || val === null
}
```
---
> 数据响应式功能实现
> src/observer/index.js
```js
import { isObject } from '../utils'
// 检测数据变化
class Observer {
// 对对象中的所有属性 进行劫持
constructor(data) {
this.walk(data)
}
walk(data) {
Object.keys(data).forEach(key => {
defineReactive(data, key, data[key])
})
}
}
/**
*
* vue2 会对对象进行遍历，将每个属性 用 defineProperty 重新定义，所以性能差
*
* @param {*} data
* @param {*} key
* @param {*} value
*/
function defineReactive(data, key, value) {
// 对象套对象
observe(value)
Object.defineProperty(data, key, {
get() {
return value
},
set(newValue) {
observe(value) // 用户自己赋值了一个新对象，也需要递归劫持
value = newValue
}
})
}
//
export function observe(data) {
// 如果是对象才观测
if (!isObject(data)) return;
new Observer(data)
}
```
---
## 模板编译
> 模板编译原理：AST语法树
- 1.需要将模板变成 render函数
- 2.去当前实例上取值
- 3.生成虚拟DOM（就是个对象，好处就是可以描述dom结构，还能用diff算法来增加性能）
- 4.生成一个真实的dom结构扔到页面里
---
## HTML编译成ast语法树
================================================
FILE: docs/blog/6.Vue/5.VueRouter源码解析以及实现.md
================================================
---
title: 5.VueRouter源码解析以及实现
date: 2020-01-30 00:00:00
permalink:
tag:
- blog
- 6.Vue
---
> 注意此处：等待重构
---
## 之前的部分，等待重构之后删除
### 1.路由注册（还是听不懂，以后再来）
**Vue插件注册原理**
```js
Vue.use(VueRouter) // Vue.use是核心，我们来看下源码
```
```js
/* @flow */
import { toArray } from '../util/index'
export function initUse (Vue: GlobalAPI) {
Vue.use = function (plugin: Function | Object) {
const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
if (installedPlugins.indexOf(plugin) > -1) {
return this
}
// additional parameters
const args = toArray(arguments, 1)
args.unshift(this)
if (typeof plugin.install === 'function') {
plugin.install.apply(plugin, args)
} else if (typeof plugin === 'function') {
plugin.apply(null, args)
}
installedPlugins.push(plugin)
return this
}
}
```
**路由注册实现流程**
================================================
FILE: docs/blog/6.Vue/6.Vuex源码解析以及实现.md
================================================
---
title: 6.Vuex源码解析以及实现
date: 2020-01-30 00:00:00
permalink:
tag:
- blog
- 6.Vue
---
# 6.Vuex源码解析以及实现
> 等待书写中...
================================================
FILE: docs/blog/6.Vue/7.Axios源码解析以及实现.md
================================================
---
title: 7.Axios源码解析以及实现
date: 2020-01-30 00:00:00
permalink:
tag:
- blog
- 6.Vue
---
# 7.Axios源码解析以及实现
> 注意此处：等待重构
**🔥备注：[XMLHttpRequest...MDN教程](https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest)**
## 第一部分：项目构建
### 1.需要做的
- 在浏览器端使用XMLHttpRequest对象通讯
- 支持 Promise API
- 支持 请求和响应拦截器
- 支持 请求数据和响应数据的转换
- 支持 请求的取消
- JSON数据自动转换
- 客户端防止 XSRF
---
### 2.初始化项目
- 脚手架：git clone https://github.com/alexjoverm/typescript-library-starter.git
- 这个脚手架集成的优秀工具
- 使用 RollupJS 帮助我们打包
- 使用 Prettier 和 TSLint 帮助我们格式化代码以及保证代码风格一致性
- 使用 TypeDoc 帮助我们自动生成文档并部署到GitHub pages
- 使用 Jest 帮助我们做单元测试
- 使用 Commitizen 帮助我们生成规范化的提交注释
- 使用 Semantic release 帮助我们管理版本和发布
- 使用 husky 帮助我们更简单的使用 Git Hooks
- 使用 Conventional changelog 帮助我们通过代码提交信息 自动生成 change log
---
### 3.创建入口文件
**我们在src文件夹下，建立 index.ts 文件作为入口文件**
```js
import { AxiosRequestConfig } from './types/index'
function axios(config: AxiosRequestConfig) {
// TODE
}
export default axios
```
**再定义一个 types文件夹 管理我们的类型**
```js
// 这个文件放着公共接口类型（src/types/index.ts）
export type Method = 'get' | 'GET' | 'post' | 'POST' | 'delete' | 'DELETE' | 'head' | 'HEAD' | 'OPTIONS' | 'options' | 'put' | 'PUT' | 'PATCH' | 'patch'
export interface AxiosRequestConfig {
url: string
method?: Method
data?: any
param?: any
}
```
---
> 本着模块化的思想，我们抽离出来 xhr.ts 文件
```js
import { AxiosRequestConfig } from './types/index'
export default function xhr(config: AxiosRequestConfig): void {
const { data = null, url, method = 'get'} = config
const request = new XMLHttpRequest()
request.open(method.toUpperCase(), url, async: true)
request.send(data)
}
```
---
## 第二部分：axios基础功能实现
---
## 📚参考列表
- [慕课网课程...基于TypeScript从零重构axios](https://coding.imooc.com/class/330.html)
================================================
FILE: docs/blog/6.Vue/8.Vue SSR.md
================================================
---
title: 8.Vue SSR
date: 2020-01-30 00:00:00
permalink:
tag:
- blog
- 6.Vue
---
# 8.0 Vue SSR
## 🍡第一部分：服务器端渲染技术演进历史
### 1.最开始的阶段
> 客户端请求网站，服务器端给一个html文件，这个时候页面文字有一点不同都是一个新的页面（其实这时候淘宝是很难做的，因为商店都是一个模板的，但是因为商品不一样，都是不一样的页面，所以当前淘宝服务器存储了很多页面）
---
### 2.后端模板阶段
> ajax出现，页面可以局部刷新
> 那个时代微软IE一家独大，Node虽然也能做后端模板渲染，但是当时Node还未出现，当时有的就是 Java，PHP，C#，Python...
---
### 3.前后端分离阶段
> 这时候客户端的能力越来越强，前端能做到事情越来越多（谷歌浏览器开发 v8引擎，使js的执行效率提升很多，并且浏览器市场微软节节败退）
> 前后端分离的好处：后端可以专注的处理数据以及业务逻辑，前端专注制作样式和逻辑交互
> 前后端分离的坏处：首屏加载慢（需要等JS解析好，页面才能出来），不好的SEO
---
### 4.Node中间层
> Node作为中间层 拼接数据和HTML，返回新的HTML（Vue SSR就是在此基础上演进的）
> 这里实现的原理主要是使用模板引擎，例如Node自带的 Ejs
---
### 5.Vue SSR
> 在Node中间层这个思想的基础上，为了能使用Vue全家桶，所以就演进了Vue SSR 的模式
> 将Node代替PHP，JSP，ASP 作为服务端渲染语言，就能使用Node的生态链，如webpack等工具，通过一系列的套路，就能实现Vue SSR
---
### 6.总结
> 前端发展速度越来越快，现在 VR,人工智能，都可以在前端运行，以后5G普及之后，我们的技术会演变成什么样，我们也不清楚
> 了解 Vue SSR 产生的历史背景，可以让我们应对未来 新的架构体系的时候，有一份 快速过渡到新体系的把握
> 题外话：我觉得下一个阶段的架构，Serverless（无服务架构）会火起来
- Faas 函数即服务
- Baas 后端即服务
[掘金文章：写给前端工程师的 Serverless 入门](https://juejin.im/post/5d9c47dce51d4578045a3569)
---
## 🍧第二部分：实现一个 Vue SSR
[GitHub代码地址](https://github.com/zhukunpenglinyutong/vue-ssr-study)
### 1.node-serve
> 将Vue实例，通过Bundle Renderer 输出 HTML字符串
> HTML字符串通过模板拼接成一个真实的HTML页面，返回给客户端
---
### 2.服务端渲染
> 这里主要是对 Vue-SSR 中 服务端渲染部分的实践
> 作用就是通过 webpack，使我们写的Vue代码，能够输出一个 Vue实例
> 然后交给 Bundle Renderer 函数 输出 HTML字符串，通过Node将拼接好的HTML页面发送给客户端
---
### 3.客户端渲染
> 上述通过服务端渲染，可以输出一个完整页面，但是不具有Vue的特性，于是还需要客户端渲染
> 原理是：服务端渲染的页面会携带上特定的字段，例如 #app，并且页面解析到最后 会请求用于客户端渲染的 bunndle.client.js
> 这个会文件 会将Vue实例 挂载到 #app 上，使客户端具有Vue的特性
[Vue SSR 指南-源码结构](https://ssr.vuejs.org/zh/guide/structure.html#%E9%81%BF%E5%85%8D%E7%8A%B6%E6%80%81%E5%8D%95%E4%BE%8B)
---
## 🍭第三部分：Nuxt基础使用
### 1.初始化项目和项目目录介绍
- 安装：npx create-nuxt-app <项目名>
- 备注：npx在NPM版本5.2.0默认安装了
- 然后就让你选择一些配置
---
- assets：资源目录（用于组织未编译的静态资源如 LESS、SASS 或 JavaScript）
- components：组件目录（用于组织应用的 Vue.js 组件。Nuxt.js 不会扩展增强该目录下 Vue.js 组件，即这些组件不会像页面组件那样有 asyncData 方法的特性）
- layouts：布局目录（用于组织应用的布局组件）
- middleware：中间件目录（用于存放应用的中间件）
- pages：页面目录（用于组织应用的路由及视图。Nuxt.js 框架读取该目录下所有的 .vue 文件并自动生成对应的路由配置。
若无额外配置，该目录不能被重命名）
- plugins：插件目录（用于组织那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件）
- static：静态文件目录（用于存放应用的静态文件，此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。 服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下）
- store：Store 目录（用于组织应用的 Vuex 状态树 文件。 Nuxt.js 框架集成了 Vuex 状态树 的相关功能配置，在 store 目录下创建一个 index.js 文件可激活这些配置）
---
### 2.基础路由
> 路由规则是根据pages下的文件自动生成的
**示例**
```sh
# 在 pages/test.vue
访问 localhost:3000/test 可以
# 建立 pages/test1/test1.vue
访问 localhost:3000/test1 不行
访问 localhost:3000/test1/test1 可以
# 建立 pages/test1/index.vue
访问 localhost:3000/test1 可以
```
---
### 3.路由跳转
```js
跳转到test页面
this.$router.push({path: '/test'})
// 文件夹类型的name跳转名称是 test1-index 这种用 - 分隔的
this.$router.push({name: 'test'})
```
注意：别用a标签进行跳转，因为会刷新页面
---
### 4.动态路由
> 在Nuxt中定义带参数的动态路由，需要创建对应的以下划线作为前缀的Vue文件或者目录
**例如在根目录下参数设置动态路由，而跳转的依据是 name 字段**
- 首先就是先在pages下建立 _name/index.vue
- 然后在 _name/index.vue 中有通过
$route.params.name 来获取到这个参数，进而进行一些操作
---
### 5.路由参数校验
> 假设我们希望传入的名字是字符类型，而不是数字，这个怎么校验呢？
```js
// pages/_name/index.vue
export default {
validate (obj) {
obj.params.name // 传的参数，通过正则来规定参数的规则，返回 false || true
// 注意这里面不能用 $route.params 可以用 obj.params
return true
}
}
```
---
### 6.嵌套路由
- 添加一个Vue文件，作为父组件
- 添加一个与父组件同名的文件夹来存放子视图组件
- 在父组件中，添加组件，用于展示匹配到的子视图（nuxt-chilid标签）
```html
我是朱昆鹏：
我的信息是：{{ $route.params.data }}
我是朱昆鹏：
我的信息是：年龄21
```
---
### 7.布局组件
```html
我是布局组件（头部导航组件）
我是朱昆鹏：
>
我是布局组件（头部导航组件）
我是朱昆鹏：
我的信息是：年龄21
```
---
**error布局组件**
> 凡是匹配到出错的路由，都会匹配 /layouts/error.vue
---
### 8.全局样式引入
- 写一个 assets/styles/index.css
- 然后再nuxt.config.js 进行全局样式文件的引入
```js
export default {
// ...
/*
** Global CSS
*/
css: [
'~/assets/style/index.css'
],
}
```
---
### 9.element.ui使用
- 第一步：安装：npm i element-ui -S
- 第二步：在 plugins 文件夹下，创建 ElementUI.js 文件
```js
// plugins/ElementUI.js 就是启用了一下 element.ui
import Vue from 'vue'
import ElementUI from 'element-ui'
Vue.use(ElementUI)
```
第三步：在nuxt.config.js中添加配置
```js
export default {
css: [
'element-ui/lib/theme-chalk/index.css'
],
/*
** Plugins to load before mounting the App
*/
plugins: [
// ssr: true 表示是服务端渲染
{src: '~/plugins/ElementUI', ssr: true}
],
build: {
vendor: ['element-ui']
}
}
```
---
### 10.异步数据的获取
> 在Nuxt中，生命周期函数只有 created 以及 beforeCreate 这两个生命周期函数能够在服务端正常使用，而Nuxt中的异步请求，不能再 created里面去发，因为它会在前端执行，那怎么办呢？
**我们可以使用 asyncData方法，这个方法会在组件（限于页面组件）每次加载之后被调用。它可以在服务器端或者路由更新之前被调用，所以注意，这个函数不能使用this**
```js
export default {
// 使用方法
asyncData(context, callback) {
callback(null, data)
},
// context.route.params.xxx 获取参数
// callback(new Error(), data)渲染出错的页面
}
```
---
## 🍶第四部分：使用Nuxt遇到的问题以及解决方案
### 1.适合放到static目录下的内容
> 例如 放不支持服务端渲染的情况的JS库 ，用于在某个页面加载完成后 进行请求并加载，例如gt.js
> 例如 doc文件，视频音频文件等
> 引用方式： / 就代表static目录
---
### 2.页面如何引入JS
```js
head: {
script: [
{
type: 'text/javascript',
src: '/js/gt.js'
}
]
}
```
---
### 3.动态设置 head
```js
head() {
return {
title: '标题'
}
}
```
---
### 4.有些库需要用到 window & document ，但是服务端没有window & document怎么办
```js
if (process.client) {
// 使用
}
```
---
### 5.非页面组件无法使用 asyncData怎么办？
> 方法一：在组件的 mounted 方法里面实现异步获取数据的逻辑，之后设置组件的数据，限制是：不支持服务端渲染。
> 方法二：在页面中使用asyncData，然后通过 props 传递给子组件，此方法可以支持服务端渲染
---
### 6.操作DOM节点有时候不起效果（例如利用轮播插件 swiper 的时候，需要操作DOM但是就不起效果）
```js
// Nuxt更新DOM是异步的，需要在Vue.$nextTick 进行更新DOM
this.$nextTick(() => {
// 操作DOM
})
```
---
[Nuxt常见问题](https://zh.nuxtjs.org/faq)
================================================
FILE: docs/blog/6.Vue/9.项目 开发Ant Design Pro Vue.md
================================================
---
title: 9.项目 开发Ant Design Pro Vue
date: 2020-01-30 00:00:00
permalink:
tag:
- blog
- 6.Vue
---
# 8.1项目 开发Ant Design Pro Vue
> 注意：此篇内容可能要被删除...
> 原因是结构混乱，不适合放到这个版块下
---
### 1.使用Vue-cli3.0快速搭建环境
安装其他内容：npm i ant-design-vue moment
```js
import Antd from "ant-design-vue";
import "ant-design-vue/dist/antd.less";
Vue.use(Antd);
// 这里会报一个错，说的是引入 .less 的文件还需要一些配置啥的吧，这样就引出了下面要整的 自定义webpack配置
```
---
### 2.如何自定义Webpack和Babel配置
**自定义webpack配置（vue.config.js）**
```js
// 新建 vue.config.js
module.exports = {
css: {
loaderOptions: {
less: {
javascriptEnabled: true,
},
css: {
// 这里的选项会传递给 css-loader
},
postcss: {
// 这里的选项会传递给 postcss-loader
}
}
}
}
```
- [本问题 vue-cli 自定义配置网址](https://cli.vuejs.org/zh/config/#css-loaderoptions)
- [问题解决方案地址](https://github.com/ant-design/ant-motion/issues/44)
---
**Babel配置**
- 我们可以通过 .babel 来转义ES6中识别不了的语法，也可以 通过一个插件来实现 UI组件的按需加载
- 安装：npm i babel-plugin-import --dev
```js
module.exports = {
presets: ["@vue/app"],
plugins: [
[
"import",
{ libraryName: "ant-design-vue", libraryDirectory: "es", style: true }
]
]
};
```
- [babel按需加载 配置](https://vue.ant.design/docs/vue/use-with-vue-cli-cn/)
```js
// 按需加载 代码效果 示例（不用引入CSS了，因为这个插件帮忙引入了）
import { Button, Switch } from "ant-design-vue";
Vue.use(Button);
Vue.use(Switch);
```
---
**拓展：使用 Prettier格式化代码，例如 给我们自动双引号变单引号，等操作**
- [学习笔记](https://www.jianshu.com/p/5f7dbffc257e)
- [官网](https://prettier.io/docs/en/options.html?spm=a2c4e.11153940.blogcont422690.11.5d0b5721zZ3CkZ)
---
### 3.如何设计一个高拓展性的路由？
**示例路由**
```js
import Vue from "vue";
import Router from "vue-router";
Vue.use(Router);
export default new Router({
mode: "history",
base: process.env.BASE_URL,
routes: [
{
path: "/user", // 用户相关的路由
children: [
{
path: '/user/login', // 登录
name: 'login',
component: () => {
import(/* webpackChunkName: "user" */ "./views/User/Login.vue")
}
},
{
path: '/user/register', // 注册
name: 'register',
component: () => {
import(/* webpackChunkName: "user" */ "./views/User/Register.vue")
}
}
]
}
]
});
```
---
**🔥加载提示库（防止路由切换白屏时间太长的问题，增加友好提示）**
- 安装：npm i nprogress
```js
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
// Vue路由守卫
router.beforeEach( (to, form, next) => {
NProgress.start()
next()
})
router.afterEach( () => {
NProgress.done()
})
```
================================================
FILE: docs/blog/7.React/1.React基础.md
================================================
---
title: 1.React基础
date: 2020-01-30 00:00:00
permalink:
tag:
- blog
- 7.React
---
> 等待书写中...
## 🍡第一部分：React初探
### 1.React简介
- react是由Facebook在2013年5月推出的一个前端框架，带来一种函数式编程风格
- react比vue更灵活一些，Vue比react多一些api，使用起来更简单
---
### 2.React开发环境搭建
**使用脚手架工具来生成**
- 前置条件：有Node环境
- 安装React脚手架：npm i create-react-app -g
- 生成工程：create-react-app my-app
---
### 3.工程目录文件简介
- public
- manifest.json 给PWA使用
- src 工程文件夹
- index.js 程序入口文件
- App.js 组件
- App.test.js: 测试文件
---
### 4.React中的组件
```js
// 这就是一个组件，为什么要引入 React呢，因为下面的 div 是JSX的标签，需要引入react进行编译
import React from 'react';
function App() {
return (
Hello 朱昆鹏
);
}
export default App;
```
---
### 5.最基础的JSX语法
```js
// 自定义标签 JSX 要求以大写字母开头
```
---
## 🥗第二部分：React基础精讲
### 1.使用React编写ToolList功能
```js
import React, { Component, Fragment } from 'react'
class TooLlist extends Component {
constructor(props) {
super(props)
// 组件的状态
this.state = {
inputValue: '',
list: ['学习英文', '学习React']
}
}
render() {
return (
提交
{
// 我去，这种写法就是比 v-for 要灵活一些
this.state.list.map( (item, index) => {
return (
{item}
)
})
}
)
}
// 输入框绑定事件（感觉Vue的双向数据绑定很香）
handleInputChang(e) {
this.setState({
inputValue: e.target.value
})
}
// 按钮提交方法
handleButtonClick() {
this.setState({
list: [...this.state.list, this.state.inputValue],
inputValue: ''
})
}
// ToolList Item 删除事件
tooLlistDelete(index) {
// immutable | state 不允许我们直接做任何的改变
const list = [...this.state.list]
list.splice(index, 1)
this.setState({
list: list
})
}
}
export default TooLlist
```
---
### 2.JSX语法细节补充
> jsx（语法糖，浏览器不识别，会被转换） 最后会通过 babel 转换为 createElement
- 用 className 代替 class 书写类名
- 用 {//} {/***/} 书写注释（虽然我用之前的写法也没问题吧）
- label 标签中用的 for 代替 htmlFor
---
### 3.拆分组件与组件之间的传值
---
## 🍝第三部分：React高级内容
---
## 📚参考列表（致敬）
- [慕课网课程-React16.4开发简书项目从零基础入门到实战](https://coding.imooc.com/class/229.html)
================================================
FILE: docs/blog/7.React/2.React全家桶.md
================================================
---
title: 2.React全家桶
date: 2020-01-30 00:00:00
permalink:
tag:
- blog
- 7.React
---
> 等待书写中...
================================================
FILE: docs/blog/8.移动端/0.移动端开发绪论.md
================================================
---
title: 0.移动端开发绪论
date: 2020-01-30 00:00:00
permalink:
tag:
- blog
- 8.移动端
---
> 移动端开发系统有：Android 和 IOS，未来可以还有其他的操作系统，为了真正了解移动端，我决定写一下这个绪论，去探索一下，移动端开发的前因后果，技术演进（搞技术也好，还是工作也好，我就喜欢搞个前因后果，偏执。）
---
## ⏱第一部分：移动端发展历史
### 1.手机发展历史
- 第一个时代：诺基亚，摩托罗拉之类的时代...（采用的系统是塞班）
- 2007年：IPhome问世，触屏+ 应用引爆智能手机时代（2008年 App Store问世）
- 2008年：首部Android手机问世，是由HTC制造的 HTC G1
- 之后就是我们知道的 小米 华为 等等
---
### 2.手机操作系统发展历史
- Symbian(塞班)(倒闭)
- BlackBerry OS(黑莓)(关闭)
- Windows Mobile(微软)
- iOS(苹果)
- 谷歌Android(安卓)
---
### 3.手机网络发展历史
- **1G时代**（模拟手机大哥大）
- 第一代移动通信技术使用了多重蜂窝基站，允许用户在通话期间自由移动并在相邻基站之间无缝传输通话
- **2G时代**（数字网络，从1991年开始）
- 第二代移动通信技术区别于前代，使用了数字传输取代模拟，并提高了电话寻找网络的效率。这一时期手机用户数量急速增长，预付费电话流行
- 基站的大量设立缩短了基站的间距，并使单个基站需要承担的覆盖面积缩小，有助于提供更高质量的信号覆盖。因此接收机不用像以前那样设计成大功率的，体积小巧的手机成为主流。
- 这一时期短信功能首先在GSM平台应用，后来扩展到所有手机制式。铃声等付费内容成为新的利润增长点。
- GSM（全球移动通信系统）成为全世界最流行的移动通信标准制式。由于内部兼容，国际漫游变得更容易。全球2G网络中80%为GSM制式，覆盖212个国家/地区的30亿人口。"
- **3G时代**（高速IP数据网络，从2001年开始）
- 第三代移动通信技术的最大特点是在数据传输中使用分组交换（Packet Switching）取代了电路交换（Circult Switching）。几年前，用于在计算机上访问移动互联网的USB加密狗问世。电路交换使手机与手机之间进行语音等数据传输；分组交换则将语音等转换为数字格式，通过互联网进行包括语音、视频和其他多媒体内容在内的数据包传输
- **4G时代**（全IP数据网络，从2009年开始）
- 到4G时代，电路交换将完全消失。所有语音通话将通过数字转换，以VoIP形式进行。因此在4G网络进行通话，将可以依靠有线或无线网络而不一定需要移动信号覆盖
---
## 📡第二部分：移动端技术发展历史
### 1.第一个阶段：跨平台技术产生之前
那时候只有原生的 Android 和 IOS 开发，会的人少，大都是摸着石头过河，为了解决开发效率（一个业务需要写两套代码的问题），各大公司退出了自己的跨平台解决方案，于是就进入到了移动端技术发展的下个阶段
---
### 2.第二个阶段：Web App & PWA
**Web App是指基于Web的应用，运行于网络和标准浏览器上，相当于一个网页然后加一个App的壳。2014年HTML5的标准规范制定完成，在网络舆论上Web App大有取代Native App的气势，但Web App有以下缺点，使得它始终是“主角的心，配角的命”**，缺点如下：
- 性能低，操作体验不好
- 无法调用原生API，很多功能无法实现
- 依赖于网络，网速慢时体验很差，并且没有离线功能，优化不好的话会消耗流量
- 只能做为一个临时的入口，用户留存率低
**PWA（Progressive Web App）意为渐进式增强Web应用，它不是一门技术，而是一个概念，使用多种技术来增强 Web App的功能**
- 用Service Worker + HTTPS +Cache Api + indexedDB 等一系列Web技术实现离线加载和缓存
- 实现了推送和通知
- 可以直接添加到手机的桌面上
- 使用Service Worker可以进行后台同步
**总结起来，PWA的主要的能力就是离线、推送、桌面访问，可以说PWA赋予Web App原生的体验，但是PWA一直不温不火的原因主要有以下几点：**
- 游览器对PWA技术支持还不够全面， 不是每一款游览器都能100%的支持PWA
- 国内一些手机厂商对Android系统各种魔改，对PWA的兼容性不好，甚至不支持PWA
- 平台的竞争，iOS对PWA的支持力度远远低于Android，所以PWA在iOS上的体验打了折扣。PWA面对类似的微信小程序和快应用的竞争中，并没有优势。
---
### 3.第三个阶段：Hybrid App（HTML5+原生来进行混合开发）
**原生App的架构图如下所示：**
通过原生SDK提供的API，App可以与系统底层通信，以创建 UI 组件或访问系统服务。这些组件被渲染到手机屏幕，屏幕产生的相应的事件会被传回给组件。
因为每个平台的系统组件是不同的，你需要为每个平台开发单独的 App，而Hybrid App不必这样，Hybrid App的原生UI组件用来展示交互复杂和渲染要求高的界面，其他的可以交给HTML5来展示。
Hybrid App虽然开发效率高，可以跨平台，但是Hybrid体验比不上原生，Hybrid相关的技术有很多，比如PhoneGap、Cordova、Ionic、VasSonic等等
---
**Cordova**
Cordova的体系结构图如下：
Cordova同样使用WebView来展示界面，插件是Cordova中不可或缺的一部分，Apache Cordova维护了名为Core Plugins的插件，这些核心插件为App提供访问设备功能，如电池、相机、联系人等。除了核心插件之外，还有一些第三方插件可以使用，你也可以开发一个自己的插件。
---
**Ionic**
Ionic Framework是一个开源UI工具包，最早的目标是使用HTML、CSS和JavaScript等Web技术开发移动应用程序。由于Web技术的这一基础，Ionic可以在网络运行的任何地方运行，比如 iOS、Android、浏览器、Electron、PWA等等,目前，Ionic Framework已与Angular正式集成，但对Vue和React的支持正在开发中。
---
### 4.第四个阶段：原生渲染
> 原生渲染在本篇文章中指的是由JavaScript开发并且由原生控件渲染，代表有React Native、Weex、快应用
**React Native**
React Native是Facebook早先开源的 Web UI框架React在原生移动应用平台的衍生产物，底层对Android和iOS平台的原生代码进行封装，通过使用JavaScript就可以编写出原生代码。
Virtual DOM是DOM在内存中的一种轻量级表达方式，可以通过不同的渲染引擎生成不同平台下的UI。
React Native与原生框架通过Bridge进行通信，如果使用Chrome浏览器进行调试，那么所有的JavaScript代码将运行在Chrome V8引擎中，通过WebSocket和原生代码进行通信。
---
### 5.第五个阶段：Flutter
Flutter是谷歌的移动UI框架，可以快速在Android和iOS上构建高质量的原生用户界面， 它的前身是谷歌试验项目Sky。
Futter提出了一切皆为控件（Widget）的概念，除了基本的文本、图片、卡片、输入框等Widget，布局方式和动画等也都是Widget。通过使用不同类型的Widget，就可以实现复杂度的界面。
Flutter框架采用了分层设计，此设计的目标是帮助开发者使用更少的代码完成更多工作。例如，Material层是由Widgets层的普通Widget组成的，而Widgets层本身是通过来自Rendering层的低级对象构建的。
---
## 📱第三部分：手机硬件组成
> 为什么要整理这个呢？因为我感觉如果不知道我的数据存到哪里，我拿数据发数据是经过了那个硬件，我连接WiFi，蓝牙，啥的用的是什么，我就有点不是很稳的感觉
---
### 1.硬件结构
**基础结构**
智能手机的主电路板上安装的都是贴片元器件，排列十分紧密，并且电路板上的主要芯片都采用BGA形式焊接在电路板上。
**电路结构**
> 智能手机的电路是智能手机的核心，负责手机的供电、控制以及手机各种功能的实现。智能手机的电路主要包括：射频电路、语音电路、处理器及存储器电路、电源及充电电路、操作及屏显电路、接口电路，以及其他功能电路（如蓝牙、天线、收音、传感器、振动器、摄像头电路等）
---
### 2.智能手机中的重要芯片
**双处理器结构**
双处理器结构智能手机主要包括：主处理器和从处理器
- **主处理器（ApplicaTIonProcessor，应用处理器）**，运行开放式操作系统以及操作系统之上的各种应用，负责整个系统的控制
- **从处理器（BasebandProcessor，基带处理器）**，负责基本无线通信，主要包括DBB（DigitalBaseband，数字基带芯片）和ABB（AnalogBaseband，模拟基带），完成语音信号和数字语音信号调制解调、信道编码解码和无线Modem控制
备注：智能手机只是在传统手机的基本硬件结构中BP的部分增加一定的外围电路，如音频芯片、LCD控制、摄像机控制器、扬声器、天线等，就构成了一个完整的智能手机的硬件结构。
---
**单处理器结构**
单处理器智能手机只包括一个处理器，所谓的单处理器就是说智能手机的基本通信功能（通话、信息、GPRS等）和多媒体、应用软件的处理只用一个处理器来解决。这枚单处理器集成了数字基带、模拟基带、射频、电源管理、SRAM等功能
---
**中央处理器芯片**
中央处理器（CenterProcessingUnit，CPU）芯片是智能手机的核心部件，手机中的微处理器类似计算机中的中央处理器，它是整台智能手机的控制中枢系统，也是逻辑部分的控制核心。微处理器通过运行存储器内的软件及调用存储器内的数据库，达到对手机整体监控的目的。凡是要处理的数据都要经过CPU来完成，手机各个部分的管理等都离不开微处理器这个司令部的统一、协调指挥。随着集成电路生产技术及工艺水平的不断提高，手机中微处理器的功能越来越强大，如在微处理器中集成先进的数字信号处理器（DSP）等。处理器的性能决定了整部手机的性能。目前智能手机处理器厂商主要有：德州仪器、Intel、高通、三星、Marvell、英伟达、华为等
---
**存储芯片（储存信息）**
智能手机的存储器有多种：Flash存储器、RAM随机存储器、ROM只读存储器等，其中，手机存储器主要用来存储手机的主程序、字库、用户程序、用户数据等
- RAM随机存储器主要用于存储智能手机运行时的程序和数据，需要执行的程序或者需要处理的数据都必须先装入RAM内。
- ROM只读存储器是指只能从该设备中读取数据而不能往里面写数据的存储器。ROM中的数据是由手机制造商事先编好固化在里面的一些程序，使用者不能随意更改。ROM主要用于检查手机系统的配置情况，并提供最基本的输入输出（I/O）程序。
- Flash存储器是一种长寿命的非易失性（在断电情况下仍能保持所存储的数据信息）存储器，数据删除不是以单个的字节为单位，而是以固定的区块为单位。由于Flash存储器断电时仍能保存数据，它通常被用来保存设置信息，如用户对手机的设置信息等
---
**射频芯片（负责调制和解调信号）**
在手机终端中，射频芯片负责射频收发、频率合成、功率放大；而基带芯片负责信号处理和协议处理。简单地说，射频芯片起到一个发射机和接收机的作用。有的射频芯片还为处理器芯片提供26MHz的系统时钟信号。
---
**放大器芯片（放大信号的射频功率）**
智能手机中的射频功率放大器芯片的作用主要是对射频信号进行放大，使得有足够的功率发射给基站。射频功率放大器是智能手机中耗电量较大的元件之一，它内部主要集成了滤波器、放大器、匹配电路、功率检测、偏压控制等电路
---
**电源管理芯片（管理手机供电）**
电源管理芯片（PowerManagemenTIntegratedCircuits）是在智能手机系统中承担对电能的变换、分配、检测及其他电能管理职责的芯片。同时，还可以对电池充电进行管理和控制
---
**音频处理器芯片（管理声音）**
智能手机的音频处理器主要处理手机的声音信号，它主要负责接收和发射音频信号，是实现手机听见对方声音的关键元件。音频处理器对基带信号进行解码、D/A转换等处理后输出音频信号
---
## 📚参考列表（致敬）
- [史上最全最详细手机发展史（绝对经典，收藏）](https://www.sohu.com/a/213599424_202311)
- [移动开发的跨平台技术发展史 | 技术头条（CSDN）](https://blog.csdn.net/csdnnews/article/details/89629327)
- [智能手机的硬件组成部分及结构图](http://www.elecfans.com/xinkeji/610458.html)
================================================
FILE: docs/blog/8.移动端/1.移动端H5页面适配.md
================================================
---
title: 0.移动端开发绪论
date: 2020-01-30 00:00:00
permalink:
tag:
- blog
- 8.移动端
---
> 适配采用 rem 的方案
## 🍇第一部分：rem代码 和 基础示例
### rem.js
```js
!function(win, doc) {
var htmlDom = doc.getElementsByTagName("html")[0];
var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
var recalc = function() {
var htmlWidth = doc.documentElement.clientWidth || doc.body.clientWidth;
htmlDom.style.fontSize = htmlWidth / 10 + 'px';
}
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
}(window, document);
```
---
### html示例
```html
Document
```
---
## 🍓第二部分：rem用的不舒服的地方，和解决方法
> 感觉用的最不舒服的，就是需要计算rem的值，这点非常的不舒服，但是经过我不断的采坑，发现有两个好好用的东西，分享给大家
### vscode 插件
- 插件名称叫：cssrem，是一个在书写代码的时候，将px转为rem的工具，我用了一段时间，感觉还好（虽然后期有更好的方案了）
---
### webpack postcss 插件 high-pxtorem【🔥 推荐】
这个可以在webpack编译的时候，将 px 转为 rem，我可以像写普通代码一样，不用太关心适配问题了。
我现在在用这个，但是需要你有一定的 webpack 基础才行，但是用起来就没事了，要是没有一定的基础，可能都配置不起来
[high-pxtorem npm地址](https://www.npmjs.com/package/high-pxtorem)
================================================
FILE: docs/blog/8.移动端/2.移动端H5手机内调试.md
================================================
---
title: 2.移动端H5手机内调试
date: 2020-01-30 00:00:00
permalink:
tag:
- blog
- 8.移动端
---
> 移动端H5手机内调试 神器：vconsole
## 🥞第一部分：vconsole使用
### 基本使用
```html
```
- [vcondole npm 地址](https://www.npmjs.com/package/vconsole)
**功能：**
- 查看 console 日志
- 查看网络请求
- 查看页面 element 结构
- 查看 Cookies、localStorage 和 SessionStorage
- 手动执行 JS 命令行
- 自定义插件
---
### 效果展示（点击 右下角 绿色按钮 👀）
---
================================================
FILE: docs/blog/8.移动端/3.Flutter.md
================================================
---
title: 3.Flutter
date: 2020-01-30 00:00:00
permalink:
tag:
- blog
- 8.移动端
---
> 等待书写中...
================================================
FILE: docs/blog/8.移动端/4.React-Native.md
================================================
---
title: 4.React-Native
date: 2020-01-30 00:00:00
permalink:
tag:
- blog
- 8.移动端
---
> 等待书写中...
================================================
FILE: docs/blog/8.移动端/5.移动端原生开发/5.移动端原生开发.md
================================================
---
title: 5.移动端原生开发
date: 2020-01-30 00:00:00
permalink:
tag:
- blog
- 8.移动端
---
## 第一章：Android系统简介和环境搭建
环境搭建是真的难...，我这里用的是 android Studio Mac 版本
---
## 第二章：Android基础UI使用
> 布局管理器之间的继承关系：布局管理器都是以ViewGroup（视图组，这个是通过View继承来的）为基类派生出来的，使用布局管理器可以适配不同手机屏幕的分辨率，尺寸大小
---
### 🔥 第一节：Android布局（线性布局）
> 线性布局（LinearLayout）：按照垂直或者水平方向布局的组件
通过 android:orientation 属性设置线性布局方向
通用属性（每个控件都要设置的）
- android:layout_width="wrap_content" 当前组件的宽度
- 值：wrap_content：包裹内容
- 值：match_parent：匹配父控件
- android:layout_height="wrap_content" 当前组件的高度
- 值：wrap_content：包裹内容
- 值：match_parent：匹配父控件
- android:orientation 设置布局方向
- horizontal：按照水平方向摆放
- vertical：垂直摆放
- android:gravity 用来控制组件的对齐方式
- android:layout_gravity 设置的是本身的对齐方式
- layout_weight 控制各个组件在布局中的相对大小
- android:padding：内边距
- android:paddingTop="50dp" ：内边距（顶部）
- ...
- android：padding="" ：内边距（四个方向，和css类似）
- android:layout_margin：外边距
- android:layout_marginTop="50dp"：外边距（顶部）
- ...
- android:layout_margin（四个方向）
---
非通用布局
- android:gravity：控制容器内子控件的方向
- 值：left,right,top,bottom
- top|right（两个属性一起加，右上）
- center(垂直水平居中)，center_horizontal（水平居中），center_vertical（垂直居中）
- android:layout_gravity：设置本身的方向（常用在子组件中，取值方向和android:gravity一样）
- 权重布局：等分，类似于css栅格布局（值越大，占用的空间越大）
- android:layout_weight="1"
- android:layout_height="1"
---
常用单位
- 设置长宽的时候，dp（dip）
- 使用字体的时候，使用sp
- in：表示英寸（屏幕物理尺寸）
- mm：表示毫米（屏幕物理尺寸）
- pt：表示一个点（屏幕物理尺寸）
---
```xml
```
---
### 🔥 第二节：Android布局（相对布局）
> 相对布局（RelativeLayout）：相对其他
---
### 🔥 第三节：Android布局（帧布局）
> 帧布局（FrameLayout）：组件从屏幕左上方布局组件
---
### 第四节：Android布局（绝对布局）
> 绝对布局（AbsoluteLayout）：按照绝对坐标来布局组件
---
### 第五节：Android布局（表格布局）
> 表格布局（TableLayout）：按照行列方式布局组件
---
### 第六节：TextView（）
---
### 第七节：EditText（可编辑的文本框）
```xml
```
---
### 第八节：Button（按钮）
---
### 第九节：ImageView（图片组件）
---
### 第十节：spinner组件（下拉列表）
---
### 第十一节：RadioButton（单选按钮）
---
### 第十二节：checkBox（多选按钮）
```xml
```
---
### 第十三节：ListView和适配器使用（列表）
---
```java
public class MainActivity extends AppCompatActivity {
private TextView textViewResult;
// 主要存放结果的集合
private List
lists = new ArrayList();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
textViewResult = (TextView)findViewById(R.id.textViewResult);
}
// 通过点击事件进行监听
public void choose(View view) {
// 得到View对象 ---> Checkbox
CheckBox checkBox = (CheckBox) view;
// 获取checkBox状态
boolean isChecked = checkBox.isChecked();
// 将这个结果添加到集合中
if (isChecked) {
lists.add(checkBox.getText().toString()); // 选中
} else {
lists.remove(checkBox.getText().toString()); // 没有选中
}
// 展示结果
textViewResult.setText("选中的内容是：" + lists.toString());
}
}
```
---
### 第十四节：GridView（网格视图）
---
## 第三章：Activity的生命周期和传值
---
### 第一节：Activity介绍
- 方式一 自动创建 ：在src/main/java/com.example.xxx/ 下面右键 activity 创建
- 方式二 手动创建：
```java
// 跳转页面（OtherActivity是我们新创建的 activity）
public void openNewActivity(View view) {
// 两个页面之间的跳转（参数一：上下文环境，参数二：目标）
Intent intent = new Intent(this, OtherActivity.class);
startActivity(intent);
}
```
---
## 第四章：异步任务AsyncTask的应用
---
## 第五章：Android数据存储
> 如果你不想手机关机之后数据就没有了，那么你将需要数据存储（）
---
### 第一节：SharedPreferences存储数据
---
### 第二节：内部存储
---
### 第三节：外部存储
---
### 第四节：数据库存储
> SQLite数据库存储（轻量级嵌入式关系数据库，Android已经继承了这个库）
```
---
MainActivity
```java
package com.example.myapplication;
import androidx.appcompat.app.AppCompatActivity;
import android.content.ContentValues;
import android.database.Cursor;
import android.database.sqlite.SQLiteDatabase;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.Toast;
import java.security.Key;
public class MainActivity extends AppCompatActivity {
private MyOpenHelper helper;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
helper = new MyOpenHelper(this);
}
// 创建数据库
public void createDb(View view) {
SQLiteDatabase db = helper.getReadableDatabase();
Log.i("aaa", "点击按键创建数据库");
}
// 向表中添加数据
public void insertData(View view) {
Log.i("aaa", "点击按键创建数据库");
SQLiteDatabase db = helper.getWritableDatabase();
// 第一种方法：sql语句
String sql = "insert into employee values(123, '朱昆鹏', 23, '男')";
db.execSQL(sql);
// 第二种方法：
// ContentValues values = new ContentValues();
// values.put("'_id'", 21);
// values.put("name", "朱昆鹏");
// values.put("age", 23);
// values.put("gender", "男");
// db.insert("employee", null, values);
Toast.makeText(this, "添加数据完成", Toast.LENGTH_LONG).show();
}
// 更新数据
public void updateData(View view) {
SQLiteDatabase db = helper.getWritableDatabase();
// 第一种方法：sql语句
// String sql = "update employee set age=30 where _id=1";
// db.execSQL(sql);
// 第二种方法：
ContentValues values = new ContentValues();
values.put("age", 30);
int row = db.update("employee", values, "name=?", new String[]{"朱昆鹏"});
Toast.makeText(this, "更新数据完成--->" + row, Toast.LENGTH_LONG).show();
}
// 删除数据
public void deleteData(View view) {
SQLiteDatabase db = helper.getWritableDatabase();
// 第一种方法：sql语句
// String sql = "delete from employee where name='朱昆鹏'";
// db.execSQL(sql);
// 第二种方法
int row = db.delete("employee", "name=?", new String[]{"朱昆鹏"});
Toast.makeText(this, "删除数据完成--->" + row, Toast.LENGTH_LONG).show();
}
// 查询方法
public void queryData(View view) {
SQLiteDatabase db = helper.getReadableDatabase();
// 参数：表明，列名，...
Cursor c = db.query("employee", null, null, null, null, null, null);
// 遍历Cursor
while (c.moveToNext()) {
int index = c.getColumnIndex("name");
String name = c.getString(index);
int age = c.getInt(c.getColumnIndex("age")); // 获取年龄
String gender = c.getString(c.getColumnIndex("gender")); // 获取性别
Log.i("aaa", "===>" + name + "--" + age + "--" + gender);
}
}
}
```
---
MyOpenHelper
```java
package com.example.myapplication;
import android.content.Context;
import android.database.sqlite.SQLiteDatabase;
import android.database.sqlite.SQLiteOpenHelper;
import android.util.Log;
import androidx.annotation.Nullable;
public class MyOpenHelper extends SQLiteOpenHelper {
private final static String TEST = "company";
private final static int VERSION = 1;
/**
* 添加构造方法
*
* @param context 上下文环境
* @param name 数据库名称
* @param factory 游标工厂
* @param version 数据库版本
*
*/
public MyOpenHelper(@Nullable Context context, @Nullable String name, @Nullable SQLiteDatabase.CursorFactory factory, int version) {
super(context, name, factory, version);
}
public MyOpenHelper(Context context) {
super(context, TEST, null, VERSION);
}
@Override
public void onCreate(SQLiteDatabase db) {
// 创建表（id，名字，年龄，性别）
String sql = "create table employee(_id primary key, name varchar(20), age init, gender char(2))";
db.execSQL(sql);
Log.i("aaa", "=============> 创建表成功");
}
@Override
public void onUpgrade(SQLiteDatabase db, int oldVersion, int newVersion) {
if (newVersion > oldVersion) {
Log.i("aaa","数据库版本发生更新");
}
}
}
```
---
## 第六章：Android 对话框Dialog，菜单Menu，通知Notification
---
## 第七章：Fragment碎片在开发中使用
---
## 第八章：ViewPager介绍和使用
---
## 第九章：Android广播接收器
### 第一节：什么是广播
> 广播是一种在不同应用程序之间传输信息的机制
---
### 第二节：接收广播
---
### 第三节：发送广播
---
## 第十章：Android中Service（服务）
================================================
FILE: docs/blog/8.移动端/6.Weex.md
================================================
---
title: 6.Weex
date: 2020-01-30 00:00:00
permalink:
tag:
- blog
- 8.移动端
---
## 第一部分：
### 1.weex环境搭建
1.安装Node
2.npm install -g weex-toolkit
3.weex init 项目名称
---
### 2.
---
## 第二部分：weex内建组件
### 1.a组件
> weex中a组件定义了指向weex页面打包后的一个JS地址
> a组件中无法添加文本，需要在其中加上test组件才能添加文本
> a组件支持除了自己外的所有weex组件作为子组件
> a组件支持所有通用样式
> 请不要为a组件添加click事件
---
### 2.web组件
> web组件用于在页面中嵌入一张页面，src用以指定资源地址
> 不支持任何子组件
> pagestart web组件开始加载时执行
> pagefinsh web组件完成加载时执行
> error web组件加载错误时执行
---
### 3.webview组件
> 一系列web组件的操作接口，可以通过调用this.$refs.el 来获取元素的引用
> goBack(webElement) 加载历史记录里的前一个资源地址
> goForward(webElement) 加载历史记录里的下一个资源地址
> reload(webElement) 刷新当前页面
---
### 4.list组件
> list组件是垂直列表功能的核心组件
> cell组件 列表中的子项，类似于HTML中的ul和li的关系
> refresh组件 给列表添加下拉刷新的功能
> loadmore事件 loadmoreoffset{number} 触发事件所需距离
---
## 第三部分：
---
## 第四部分：自己写的一些组件
### 1.iOS滑动删除组件（方案）
> 这里原来打算抽离成组件的，但是发现不好拓展，因为每个人要求滑动的情况可能不同，所以这里抽离成方案更为合适
```html
```
```js
const animation = weex.requireModule('animation');
export default {
data() {
return {
currentIndex: -1, //记录当前左滑出来的条目下标
}
},
methods: {
handleSwipe (e, index) {
e.direction == "left"
? this.goLeft(index)
: this.goRight(index);
},
goLeft(index) {
let itemEl = this.$refs.itemDev[index];
//第二左滑条目与前一次左滑条目相同时，不处理
if (index == this.currentIndex){
return;
}
//当前有划出的条目的时候，左滑其他条目，当前的条目归位，
if (this.currentIndex != -1){
this.goRight(this.currentIndex);
}
//左滑当前条目
if (this.currentIndex != index){
animation.transition(itemEl,{
styles: {
transform: 'translate(-160px, 0px)',
transformOrigin: 'center center'
},
duration: 200, //ms
timingFunction: 'linear',
delay: 0 //ms
},function () {});
this.currentIndex = index;
}
},
//time是动画时间，给个默认值 200毫秒，不传就表明这个值为200毫秒
goRight(index,time = 200) {
let itemEl = this.$refs.itemDev[index];
animation.transition(itemEl,{
styles: {
transform: 'translate(0px, 0px)',
transformOrigin: 'center center'
},
duration: time, //动画时间
timingFunction: 'linear',//线性运动
delay: 0 //ms
},function () {});
this.currentIndex = -1;
},
//点击删除
removeItem(index, item) {
this.goRight(index, 0);
}
}
}
```
```css
/* 删除样式 */
.delete-sideslip {
margin-left: 30px;
background-color: #ff0000;
width: 160px;
justify-content: center;
align-items: center
}
.delete-sideslip_text{
font-size: 30px;
color:#ffffff
}
```
================================================
FILE: docs/blog/8.移动端/7.微信小程序.md
================================================
---
title: 7.微信小程序
date: 2020-01-30 00:00:00
permalink:
tag:
- blog
- 8.移动端
---
> 微信小程序这个东西怎么说呢，编译器贼难用，也就比记事本好用点
> 技术含量很低，你说学这个有什么用？一个是公司可能有这方面的业务
> 还有就是可以接一点私活，一般小程序工作的情况下 一个星期也可以搞定，赚点外快
> 但是切记不要以这个为主，以为这个技术必将被淘汰（或者被新的事物替代）...
## 🐇第一部分：微信小程序核心理念，以及基础开发介绍
**这块不好写了，因为小程序我会用一点了，所以再来写这里有些麻烦，所以干脆先不写了吧**
---
## 🐳第二部分：WXML
**WXML用法上和HTML一样，就是标签（小程序里面是叫组件）名称不一样**
### 1.WXML基础
- WXML 全称 WeiXin Markup Language，是小程序设计的一套标签语言（虽然用法和HTML相似，但是不是HTML）
- 首先要明确一点，在小程序中书写 标签（或者叫组件），为什么能展示出来，是因为微信的渲染引擎和脚本引擎，经过一系列复杂的过程，最后呈现出来
```html
{{name}}
{{ name === '朱昆鹏' ? '三目运算测试成功' : '三目运算测试失败'}}
{{ name + '，你好'}}
名称是 朱昆鹏
名称是 路人甲
名称是 其他人
{{index}} {{item}}
```
```js
// index.js 页面的JS（不是组件的哦）
Page({
// {{}} 里面解析的就是data里面的，但是这里没有像Vue一样返回一个新的对象，估计有自己的处理方式
data: {
name: '朱昆鹏',
className: 'test'
}
})
```
---
### 4.wx:if 和 hidden属性的差异
- wx:if 的渲染是惰性的，只有值是 true 的时候，微信引擎才会对里面的内容进行渲染
- 渲染过程：切换 false 和 true 的时候，都会重新渲染
- 适合比较稳定，不频繁切换的场景
- hidden属性，不管是 false还是 true，第一次的时候都会被引擎加载，存在我们的页面中
- 渲染过程：由始至终只对组件渲染一次，即使切换隐藏和显示，组件其实不会销毁和创建
- hidden初始化消耗资源多，适合频繁切换的场景
---
### 5.微信小程序 事件系统
- **注意：小程序的事件系统，可以设置是冒泡，还是捕获**
- 冒泡：bind，例如 bind:tap（或者 bindtap）
- 捕获：capture，例如 capture:tap（或者capturetap）
```html
按钮
```
```js
// index.js 页面的JS
Page({
data: {
},
onLoad: function () {
},
clickFun: function (e) {
// 事件对象，常用的属性
// e.target 用户触发的组件
// e.target.dataset 组件上绑定的自定义数据 | 例如 e.target.dataset { name: 朱昆鹏 }
// e.currentTarget 经过冒泡 响应的组件
// e.currentTarget.dataset 和上面的一样
}
})
```
- **常用事件分类**
- tap 手指触摸后马上离开（就是点击）
- touchstart 手指触摸动作开始（就是点击开始）
- touchend 手指触摸动作结束（就是点击结束）
- touchmove 手指触摸后移动（就是拖拽）
- [更多请看...官方文档](https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html)
---
---
### 6.WXS
**为什么要有WXS**
- 小程序刚开始内测的时候是没有WXS，后来人们在使用过程中，发现了一个问题，就是优势互，数据和展示效果之间，可能要经过一些比较复杂的逻辑处理
- 例如：数据是 1566739136513 一个时间戳，展示层要的效果是 2019-8-25 21点19分，这种的，小程序原有的 {{}} 写很多逻辑也不好，所以就有了WXS的出现
- 备注：这个解决的问题，就相当于 Vue 中的计算属性
---
**WXS的使用（主要有三种,此处的使用，还需要举例）**
```js
// 1.写到WXML页面中
// 2.写成独立的WXML文件
// 3.写成WXS文件
// src属性引用
let 名称 = reuquire('WXS文件相对路径')
module.export.data = 名称.data
```
---
### 4.WXML实现原理解析
---
## 🐠第三部分：WXSS
### 1.WXSS基础
- **小程序的视图层是由 WXML 和 WXSS 进行编写，由微信框架组件进行展示**
- WXSS 不是 CSS哦，WXSS是微信定义的一套，修饰微信框架组件样式的规则
---
**小程序尺寸单位**
- rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
- 微信以iPhone6为依据，指定了rpx规则，其他和iPhone6手机大小不一致的，通够rpx进行转化，就能呈现出一样的效果了
**拓展知识**
- 物理像素：Pixel
- 逻辑像素：PT/DP
- 像素密度：PPI
- 逻辑像素比：DPR
---
**微信小程序内联样式**
- 微信小程序中不能通过link来引入外部样式，只有 style内部样式 和 class类名，优先级和CSS一样
- important > style > #id > class
---
### 2.WXSS样式导入 和 选择器
**样式导入：使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束**
```css
@import "./css/common.wxss";
```
**微信小程序支持从CSS1 - CSS3的部分选择器**
---
### 3.全局样式和局部样式
- 小程序有全局样式和局部样式概念
```css
/* app.wxss 里面的代码作用全局，就是名称一样的话，会覆盖页面级wxss */
/* test.wxss 页面中的wxss，只作用于对应的页面 */
```
**❣️：WXSS无法加载本地文件（也就是如果要设置背景图的话，别用WXSS来设置本地的，要用网络上的，或者用内联样式）**
---
### 4.微信小程序布局（Flex）
**就是对于布局来说，WXSS完美支持Flex方案，建议好好学下，也不难，最核心的是下面这张图，要明白它的轴线，和交叉轴线的概念，其他的就是用了**
滑动项一
滑动项二
滑动项三
1
2
3
```
---
### 2.基础内容
```html
跳转到新页面
```
---
### 5.媒体组件
```html
点击
```
```js
Component({
// ...
/**
* 组件的方法列表
*/
methods: {
clickTest: function (e) {
// 下面这个方法是自定义事件的核心
// 参数一是规定的 页面触发事件的名称，参数二是传递的参数，放到 e.detail里面，参数三是...
this.triggerEvent('test', { name: '朱昆鹏' }, {})
}
}
})
```
```html
下面是插槽的内容
```
```js
// test.js
Component({
// ❣️❣️❣️ 启动插槽，别忘了这一步
options: {
multipleSlots: true
},
// ...
})
```
```html
我的名字是朱昆鹏
```
---
### 5.自定义组件外部样式
**痛点，一个自定义组件，是由很多官方组件堆积成的，但是我们却没办法通过设置样式改变自定义组件，除非你自己在组件的wxss中改组件的样式，否则是不太能在页面中改的，为了应对这个问题，微信出了 外部样式的概念**
```html
字体颜色
```
```js
// test.js
Component({
// 定义外部样式
externalClasses: ['mycolor'],
// ...
})
```
```html
' + text + '';
try {
$ = cheerio.load(text);
$('script').remove();
$('style').remove();
$('noscript').remove();
const $docElement = $('textractwrapper');
if (options.includeAltText) {
text = getTextWithAlt($, $docElement);
} else {
text = $docElement.text();
}
text = text.replace(/\|\|\|\|\|/g, '\n')
.replace(/(\n\u00A0|\u00A0\n|\n | \n)+/g, '\n')
.replace(/(\r\u00A0|\u00A0\r|\r | \r)+/g, '\n')
.replace(/(\v\u00A0|\u00A0\v|\v | \v)+/g, '\n')
.replace(/(\t\u00A0|\u00A0\t|\t | \t)+/g, '\n')
.replace(/[\n\r\t\v]+/g, '\n')
;
} catch (err) {
cb(err, null);
return;
}
cb(null, text);
}
// 使用方法
extractFromText(html文件的Buffer对象数据, {}, (err, resText) => {})
```
================================================
FILE: docs/blog/9.Node/2.原生Node.md
================================================
---
title: 2.原生Node
date: 2020-01-30 00:00:00
permalink:
tag:
- blog
- 9.Node
---
> 等待书写中...
## EventLoop（事件触发线程）
### 进程线程介绍
浏览器是个多进程模型（我们最关系的是 浏览器的渲染进程【浏览器内核】）
- 页面渲染线程
- Js执行线程
- js和页面渲染不能同时进行
既然 js是单线程，那么为什么可以用异步呢？因为浏览器中有单独的线程去管理代码的执行逻辑，调度整个执行流程
- 进程是计算机分配任务的最小单位（进程里面有线程）
---
### 宏任务，微任务
- 宏任务（宿主环境提供）
- 微任务（语言本身提供的）
---
### 全局变量
> 这五个不是全局的，但是可以直接访问
- require
- exports
- module
- __dirname
- __filename
---
### process
---
### env/argv
---
### cwd()
---
### nextTick()
---
### Node事件环
> Node是基于v8引擎的，但是一些写法不是Node提供的，例如 fs.rendFile() , 这些是由 libuv库提供，这个库还提供 非阻塞i/0操作
Node中也有自己的事件环，从 node10.x之后都和浏览器的执行顺序一致
- 10.x 后，执行完成一个宏任务，就执行微任务（和浏览器一致）
- 10.x 前，是宏任务都执行完成，才会清空队列，执行微任务
```
宏任务
┌───────────────────────────┐
┌─>│ timers │ 🔥定时器
│ └─────────────┬─────────────┘
│ ┌─────────────┴─────────────┐
│ │ pending callbacks │ 上一轮没执行完成的，回调函数
│ └─────────────┬─────────────┘
│ ┌─────────────┴─────────────┐
│ │ idle, prepare │ 内部系统使用的队列
│ └─────────────┬─────────────┘ ┌───────────────┐
│ ┌─────────────┴─────────────┐ │ incoming: │
│ │ poll │<─────┤ connections, │ 🔥轮询（执行i/0回调）
│ └─────────────┬─────────────┘ │ data, etc. │
│ ┌─────────────┴─────────────┐ └───────────────┘
│ │ check │ 🔥setImmediate（当前一轮轮询结束后，执行）
│ └─────────────┬─────────────┘
│ ┌─────────────┴─────────────┐
└──┤ close callbacks │ 关闭的回调（例如 websocket关闭）
└───────────────────────────┘
┌───────────────────────────┐
│ nextTick │ 🔥上面队列都执行完成，会立即执行这里，然后再进行新一轮的循环（微任务）
└───────────────────────────┘
┌───────────────────────────┐
│ 微任务队列 │ 🔥清空微任务队列，之后再执行上面的Node事件环（都是宏任务）
└───────────────────────────┘
```
```js
setTimeout(() => {
console.log('timeout')
}, 0)
Promise.resolve().then(() => {
console.log('promise')
})
// 🔥 当前执行栈中执行完毕，立即调用，之后再调用微任务队列（nextTick也是微任务）
process.nextTick(() => {
console.log('nextTick')
})
// nextTick
// promise
// timeout
// =================================================================
setTimeout(() => {
console.log('timeout')
}, 0)
setImmediate(() => {
console.log('setImmediate')
})
// 这个执行顺序不确定，根据电脑性能有关
// 🔥 原因是 poll队列 ，会等一会，如果这时候定时器到了，就会回去执行定时器
// =================================================================
// 🔥 这个情况就是唯一的了，因为 poll 执行完成了，所以肯定会走 check 队列
// setImmediate
// timeout
fs.readFile('xxx.txt', () => {
setTimeout(() => {
console.log('timeout')
}, 0)
setImmediate(() => {
console.log('setImmediate')
})
})
```
拓展补充
- poll 有最大执行个数，超过这个数量就会被延迟到下一轮循环执行
- node中的微任务：Promise.then / nextTick，没有 mutationObserver
---
## 模块概念
### commonjs规范
> Node中使用的规范，不支持 esm 规范（但是可以通过babel编译执行）
核心思想：
- 每一个文件都是一个模块
- 需要通过 module.exports 导出
- 导入需要的模块
Node中划分了几类模块的使用
- 内置模块（例如fs）：
- 自定义模块：require()
- 第三方模块：
---
### esm规范
---
### umd模块
---
### amd模块
---
## 核心模块
- fs
- path
- vm
### 实现一个CommonJs
> 前置知识
```js
const fs = require('fs')
const path = require('path')
const vm = require('vm') // 虚拟机模块
// ================================================
//
// ================================================
// 给我一个相对路径，返回一个绝对路径（__dirname 当前文件所在目录）
path.resolve(__dirname, 'index.js', '/')
path.join(__dirname, 'index.js', '/')
// 区别：path.resolve 将 / 识别成根路径，path.join 就是简单的拼接，一般使用 path.join 进行拼接
// ================================================
const a = 100;
const log = `console.log(a)`
// 直接执行字符串，并且在沙箱环境中 a is defind
// 前端没有这个方法，所以一般都用 new Function + with
vm.runInContext(log)
```
```js
const fs = require('fs');
const path = require('path');
const vm = require('vm');
function Module(id) {
this.id = id;
this.exports = {};
}
Module.wrapper = [
`(function(exports,require,module,__filename,__dirname){`,
`})`
];
Module._extensions = {
'.js'(module) {
let content = fs.readFileSync(module.id, 'utf8');
content = Module.wrapper[0] + content + Module.wrapper[1];
let fn = vm.runInThisContext(content);
let exports = module.exports;
let dirname = path.dirname(module.id);
fn.call(exports, exports, req, module, module.id, dirname);
},
'.json'(module) {
let content = fs.readFileSync(module.id, 'utf8');
module.exports = JSON.parse(content);
}
}
Module._resolveFilename = function (filename) {
let absPath = path.resolve(__dirname, filename);
let isExists = fs.existsSync(absPath);
if (isExists) {
return absPath;
} else {
let keys = Object.keys(Module._extensions);
for (let i = 0; i < keys.length; i++) {
let newPath = absPath + keys[i];
let flag = fs.existsSync(newPath);
if (flag) {
return newPath;
}
}
throw new Error('module not exists');
}
}
Module.prototype.load = function () {
let extName = path.extname(this.id);
Module._extensions[extName](this);
}
Module._cache = {};
function req(filename) {
filename = Module._resolveFilename(filename);
let cacheModule = Module._cache[filename];
if (cacheModule) {
return cacheModule.exports;
}
let module = new Module(filename);
Module._cache[filename] = module
module.load();
return module.exports;
}
```
---
## 文件读写流
================================================
FILE: docs/blog/9.Node/3.Express框架.md
================================================
---
title: 3.Express框架
date: 2020-01-30 00:00:00
permalink:
tag:
- blog
- 9.Node
---
> 等待书写中...
---
## 第一部分：Koa使用
```js
const Koa = require('./koa');
const app = new Koa();
// 比较核心的有三个方法（listen, use, on('error')）
//
app.use((ctx) => {
ctx.body = 'B站的小伙伴们，大家好'
})
app.listen(3000)
// use 注册函数
// ctx 上下文（这个上下文的写法很好）
```
> 效果就是打开 http://localhost:3000/，浏览器中会有 B站的小伙伴们，大家好 这句话
---
## 第二部分：源码简单实现
```js
// lib/application.js
const http = require('http')
class Application {
use(fn) {
this.fn = fn; // 将use方法中的函数，保存到实例上
}
handleRequest(req, res) {
this.fn(req, res)
}
listen(...args) {
let server = http.createServer(this.handleRequest.bind(this))
server.listen(...args)
}
}
module.exports = Application
```
================================================
FILE: docs/blog/9.Node/4.Koa2框架.md
================================================
---
title: 4.Koa2框架
date: 2020-01-30 00:00:00
permalink:
tag:
- blog
- 9.Node
---
> 博主绪论：用了一圈Node框架下来，还是Koa2香
> 等待书写中...
---
## 源码解析
### 1.为什么会有koa框架？
- 令人困惑的API（Node HTTP模块的 API不符合正常预期）
```js
const server = http.createServer((request, response) => {
// 为什么要这么写呢？
response.end('hello world')
// 这么写不香么
response = 'hello'
response.body = 'hello'
// 这种的API还有很多（原因是Node HTTP模块是一个理论性的API，是一个浅层封装，需要照顾各种情况）
})
```
- 顺序描述需要
- 切面描述需要（处理前做什么，处理后做什么）
---
### 2.简单实现和使用
```js
// Zoa
const http = requier('http')
class Zoa {
use(callback) {
this.callback = callback
}
listen(...args) {
const server = http.createServer((req, res) => {
this.callback(req, res)
})
server.listen(...args)
}
}
module.exports = Zoa
```
```js
// 使用
const Zoa = require('./Zoa')
const app = new Zoa
app.use(ctx => {
ctx.body = 'hello world'
})
app.listen(3000, () => {
console.log('监听端口 3000')
})
```
================================================
FILE: docs/blog/9.Node/5.Egg框架.md
================================================
---
title: 5.Egg框架
date: 2020-01-30 00:00:00
permalink:
tag:
- blog
- 9.Node
---
> 博主绪论：架构很好，做大型项目很适合（但是做大型项目为什么不考虑Java，岂不是更香），可以拿来研究下结构
> 等待书写中...
================================================
FILE: docs/blog/9.Node/6.Node技术应用.md
================================================
---
title: 6.Node技术应用
date: 2020-01-30 00:00:00
permalink:
tag:
- blog
- 9.Node
---
================================================
FILE: docs/blog/说明.md
================================================
---
title: 【🔝置顶】网站文章更新计划
date: 2021-01-28 19:10:32
permalink:
cover: https://xerrors.oss-cn-shanghai.aliyuncs.com/imgs/20200527130157.png
tag:
- blog
- 0.说明
---
网站升级中，逐渐开发中（预计 2021.2.1 日迁移完成）
================================================
FILE: docs/pages/blog.md
================================================
---
title: "博客"
permalink: "blog"
hideLastUpdated: True
categories: noRight
---
标签
{{ tag == 'blog' ? '全部' : tag }}
{{ post.title }}
{{ item }}
阅读全文
================================================
FILE: docs/pages/book/book.md
================================================
---
title: "读书"
permalink: "book"
categories: noRight
---
{{ item.title }}
🕓 {{ item.date }}
{{ item.decription }}
📄 {{ page.title }}
================================================
FILE: docs/pages/book/中国城市大洗牌/中国城市大洗牌.md
================================================
---
title: 中国城市大洗牌
date: 2020-01-30 00:00:00
permalink: 'book-zgcsdxp'
---
# 中国城市大洗牌
## 1.超级城市，谁更有前途
> 选择一个未来成长的城市，可能比选择一个行业还要重要
我们先来看几个正在改变格局的地方
- 首先是深圳，这里有最完善的电子制造业产业聚集地，拥有强大的竞争力，科技创新带来了人口流动，让深圳成为了中国改革开放的前沿阵地，未来随着人口的不断流入，超越北上也并非不可能。
- 第二个就是雄安，它承担着疏解非首都功能的重任，也就是说北京的经济重心将会转移到雄安（科技，金融等产业），北京作为首都只专注于文化和政治职能。
- 第三个就是南方城市的大量崛起，中国经济的20强，大多数都在南方。
- 第四，都市圈兴起，城市的概念逐渐被打破，例如
- 深圳带动，东莞 惠州
- 上海带动 苏州 无锡 南通 嘉兴 宁波 甚至舟山
- 完全形成一个巨大都市圈，大家发展的都挺好。
- 第五，强省会崛起，一个省的资源开始向省会倾斜，例如 武汉，成都，合肥和西安。
再说北京，北京目前在主动收缩，疏解非首都功能，未来人口将严格控制在一个量级。
再看广州和深圳，在三大都市圈中（京津冀，长三角，粤港澳），属粤港澳大湾区的经济增长潜力最大。
================================================
FILE: docs/pages/links.md
================================================
---
title: 友链
permalink: links
hideLastUpdated: True
categories: noRight
---
朱昆鹏 Kunpeng Zhu（1998年）
工作
Work
H5开发工程师
2019 - 至今
负责日常业务开发，人员需求分配，团队协调，前端体系优化，产出效能工具等工作
2020年度玩吧大明星（名额是总人数的5%）
web前端开发工程师（实习）
2018.10 - 2019.7
主要负责物联网可视化平台搭建工作，前端技术选型，前端体系搭建工作
教育经历
Education
计算机科学与技术 | 工学学士学位
2019 - 2022
平均成绩：94/100，论文已过，英语已过，2022年3月拿到双证（学位证和学历证）
河北工业职业技术学院（统招专科）
计算机系 | 移动应用开发
2016 - 2019
分数只过了二本线，报不了本科计算机专业，最终选择报了专科学校学校里面计算机第一的（之前认为实力更重要，当然后来才发现学历是敲门砖 😢，但是我不会放弃努力的）
学校在2020年10月升为本科（河北工业职业技术大学 ），可见学校综合确实不错，符合当时的决定：放弃二本，选择学习技术，当然我后期也会为这个选择买单：1.报名非统本科，2.本科结束后，报名国外全日硕士（国家留服认证）补全学历短板
在校期间的表现：担任班长，软件社团社长，校级学生会干部，获得河北省大数据比赛三等奖，省级优秀毕业生，河北省优秀志愿者，互联网+创新创业大赛河北省二等奖，三级（高级）职业资格证书
================================================
FILE: docs/pages/plan/2021/2021-list.md
================================================
---
title: "2021年度计划"
permalink: "2021-plan"
hideLastUpdated: True
categories: noRight
---
2021年度计划
================================================
FILE: docs/pages/plan/plan-list.md
================================================
---
title: "年度计划"
permalink: "plan-list"
hideLastUpdated: True
categories: noRight
---
年度列表
================================================
FILE: docs/pages/update/README.md
================================================
---
title: "网站更新"
permalink: "update"
categories: noRight
---
日常修复
bug: 修复友链移动端适配问题
doc: 新增两个友链（开心）
日常修复
bug: 修复icon window 展示的问题（直接取消了icon）
bug: 解决暗黑模式插件点击第一次失效问题
doc: 增加网站更新栏目，调整友链位置
style: 优化友链展示效果
delete: 暂时取消网站介绍，个人计划两个栏目（因为没啥内容，所以需要先想一下）
================================================
FILE: docs/pages/website.md
================================================
---
title: "网站介绍"
permalink: "website"
hideLastUpdated: True
---
## 导航栏说明
- 前端体系：放置前端体系内容
- 开源项目：放置开源项目说明，开源项目总结，开源项目文档
- 年度计划：年度计划说明，年度计划执行，个人季报
- 其他：
- 友链
- 导航
- 网站介绍
- 个人介绍
### 前端体系
通过标签分类的方式，同一种技术分类到一起，然后不断优化文章质量
---
### 开源项目
展示形式：文章列表
---
### 年度计划
最小粒度为季度，每季度输出季报，每年输出年报，要量化数据增长形式
================================================
FILE: docs/quickcheck/1.前端/1.HTML和HTML5.md
================================================
---
title: 1.HTML和HTML5
date: 2020-01-30 00:00:00
permalink: quickcheck/1-1
---
# 1.HTML和HTML5
## 🍲第一部分：常用的HTML标签，和常见的概念和用法
---
### 1.基础概念
**基础概念**
- 行内元素：与其他行内元素并排，不能设置宽高，默认的宽度就是文字的宽度
- 块级元素：独占一行，不能与其他任何元素并列。能接受宽高，如果不设置宽度，那么宽度将默认变为父级的100%
- 行内块元素：能设置宽高，与其他元素并排
- 相互转换：display：inline（block 块级 | inline-block 行内块）
**常见标签类型**
- 行内元素：a，span，textarea，select，input，b，br...
- 块级元素：div，h1~h6，ol，ul，p，hr，form，table ...
- 行内块元素：img...
---
### 2.HTML4.1 常用标签
::: tip
[更详细请看...1.HTML基础](https://notes.itzkp.com/2.note/1.HTML/1.HTML基础.html)
:::
```html
文字或者图像
跳转到目标锚点
目标锚点
我是表格标题
表头1
表头2
表头3
第一行1
第一行2
第一行3
第二行1
第二行2
第二行3
备注：
粗体展示
粗体展示
斜体展示
斜体展示
删除线展示
删除线展示
下划线展示
下划线展示
```
---
### 3.HTML5语义化标签的用法
---
## 🥓第二部分：Canvas
### 1.canvas基础操作
```js
let canvas = document.getElementById('can')
let ctx = canvas.getContext('2d') // 这个可以理解为画笔
// 线（直线，三角形...）
ctx.moveTo(x, y)
ctx.lineTo(x, y)
ctx.arcTo(B点x， By, C点x, C点y, 弧的数值) // 直线 + 圆弧（可以做圆角矩形）
// 矩形
ctx.rect(x, y, 宽度, 高度) // 画矩形
ctx.strokeRect(x, y, 宽度, 高度) // 直接画出来了，都不用写构建路径
ctx.fillRect(x, y, 宽度, 高度) // 直接画出来了，都不用写填充路径
// 圆形（半圆，扇形，弧线，圆形）
ctx.arc(圆心x, 圆心y, 半径, 弧度, 方向)
// 贝塞尔曲线
ctx.quadraticCurveTo(x1, y1, x2, y2); // 二次贝塞尔曲线（除了起点，还需要另外两个点）
ctx.bezierCurveTo(x1, y1, x2, y2, x3, y3); // 三次贝塞尔曲线（除了起点，还需要三个点）
// 设置样式
ctx.fillStyle = 'red' // 设置填充颜色
ctx.strokeStyle = 'blue' // 设置填充颜色
ctx.lineWidth = 3 // 设置线条宽度
ctx.font = '24px 黑体'
ctx.fillText('实体文字', 文字显示的x, 文字显示的y); // 设置文字
ctx.strokeText('空心文字', 文字显示的x, 文字显示的y); // 设置文字
// 坐标平移 && 旋转 && 缩放
ctx.translate(100, 100) // 修改坐标原点（坐标平移）
ctx.rotate(Math.PI) // 旋转（单位是弧度，并且是根据坐标原点进行的旋转）
ctx.scale(x点倍数, y点倍数) // 缩放
// 保存和使用之前坐标系
ctx.save() // 保存之前坐标系（可以保存坐标系的平移数据，缩放数据，旋转数据）
ctx.restore() // 恢复之前的坐标系
// 清除画布
ctx.clearRect(x, y, 宽度, 高度)
// 重新开启一个路径
ctx.beginPath()
ctx.closePath() // 闭合路径，针对一个路径才能闭合
ctx.stroke() // 构建路径
ctx.fill() // 构建填充路径
```
---
### 2.其他操作
```js
// 填充图片（纹理的填充是以坐标系原点进行填充的）
let img = new Image()
img.src = 'https://itzkp-1253302184.cos.ap-beijing.myqcloud.com/github%E5%9B%BE%E7%89%87/notes/3.png'
img.onload = function () {
ctx.translate(100, 100)
ctx.fillStyle = ctx.createPattern(img, 'no-repeat')
ctx.fillRect(0, 0, 100, 100)
}
// 线性渐变填充
let bg = ctx.createLinearGradient(100, 100, 200, 200);
bg.addColorStop(0, 'white'); // 渐变起点
bg.addColorStop(1, 'black'); // 渐变终点（当然中间也能写多个阶段的值）
ctx.fillStyle = bg
ctx.fillRect(100, 100, 100, 100)
// 辐射渐变
let bg = ctx.createRadialGradient(150, 150, 0, 180, 180, 180)
bg.addColorStop(0, 'white'); // 渐变起点
bg.addColorStop(1, 'black'); // 渐变终点（当然中间也能写多个阶段的值）
ctx.fillStyle = bg
ctx.fillRect(100, 100, 100, 100)
// 阴影
ctx.shadowColor = 'red'
ctx.shadowBlur = 10;
ctx.fillRect(100, 100, 100, 100)
// 圆角矩形
ctx.moveTo(100, 110) // y轴多了10，是一个小技巧
ctx.arcTo(100, 200, 200, 200, 10)
ctx.arcTo(200, 200, 200, 100, 10)
ctx.arcTo(200, 100, 100, 100, 10)
ctx.arcTo(100, 100, 100, 200, 10)
ctx.stroke()
```
> [更详细内容...前端体系/canvas（画布）](https://notes.itzkp.com/2.note/1.HTML/2.HTML5.html#%F0%9F%8D%9B%E7%AC%AC%E5%9B%9B%E9%83%A8%E5%88%86%EF%BC%9Acanvas%EF%BC%88%E7%94%BB%E5%B8%83%EF%BC%89)
---
## 🥒第三部分：websocket
**基础使用**
```js
let socket = new WebSocket('ws://...') // 使用的是ws协议
// socket 完全打开并准备通信时候就会调用这个处理函数
socket.onpen = function () {
}
// socket 接收服务器消息
socket.onmessage = function (e) {
}
// 使用 postMessage() 向web服务发送一个消息
socket.postMessage('Hello Server')
```
---
## 🌶第四部分：本地存储
**localStorage：每个浏览器都为本地存储提供了5MB~10MB的空间，除非主动删除，否则是不会消失的**
```js
// 存
localStorage.setItem('key', 'value')
// 取
localStorage.getItem('key')
// 属性
localStorage.length // 告诉我们localStorage有多少数据项
localStorage.key(i) // 传入index，可以拿到对象的数据（可以和length一起，做循环遍历）
// 方法
localStorage.removeItem(key) // 根据key值，清除对应的数据项
localStorage.clear() // 会删除当前页面关联的所有数据项
```
**sessionStorage：支持的API和上面完全相同，不同的地方在于，这个浏览器关闭之后，本地存储的数据项就会被删除**
---
## 🍞第五部分：地理定位
```js
// navigator.geolocation.getCurrentPosition(成功回调，失败回调，配置参数)
navigator.geolocation.getCurrentPosition( res => {
console.log('成功回调：', res)
// res.coords.latitude 纬度
// res.coords.longitude 经度
}, err => {
console.log('失败回调：', err)
})
```
---
## 🍯第六部分：HTML5视频标签（video）&& 音频标签（audio）
### 1.视频标签（video）
不再依赖第三方插件（Flash）
```html
Vertically centered without changing the position property.
```
```css
.ghosting {
height: 300px;
background: #0ff;
}
.ghosting:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
p {
display: inline-block;
vertical-align: middle;
}
```
```
```css
.constant-width-to-height-ratio {
background: #333;
width: 50%;
}
.constant-width-to-height-ratio::before {
content: '';
padding-top: 100%;
float: left;
}
.constant-width-to-height-ratio::after {
content: '';
display: block;
clear: both;
}
```
---
## 🐑第二部分：常用样式
### 1.重置样式
**reset.css**
```css
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
```
---
**normalize.css**
[内容太多不复制了，查看这个粘贴吧](https://necolas.github.io/normalize.css/latest/normalize.css)
### 2.创建加载动画
**加载动画一**
```html
```
```css
@keyframes bouncing-loader {
to {
opacity: 0.1;
transform: translate3d(0, -1rem, 0);
}
}
.bouncing-loader {
display: flex;
justify-content: center;
}
.bouncing-loader > div {
width: 1rem;
height: 1rem;
margin: 3rem 0.2rem;
background: #8385aa;
border-radius: 50%;
animation: bouncing-loader 0.6s infinite alternate;
}
.bouncing-loader > div:nth-child(2) {
animation-delay: 0.2s;
}
.bouncing-loader > div:nth-child(3) {
animation-delay: 0.4s;
}
```
**效果演示**
```
```css
@keyframes donut-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.donut {
display: inline-block;
border: 4px solid rgba(0, 0, 0, 0.1);
border-left-color: #7983ff;
border-radius: 50%;
width: 30px;
height: 30px;
animation: donut-spin 1.2s linear infinite;
}
```
**效果展示**
Submit
```
```css
.button {
background-color: #c47135;
border: none;
color: #ffffff;
outline: none;
padding: 12px 40px 10px;
position: relative;
}
.button:before,
.button:after {
border: 0 solid transparent;
transition: all 0.25s;
content: '';
height: 24px;
position: absolute;
width: 24px;
}
.button:before {
border-top: 2px solid #c47135;
left: 0px;
top: -5px;
}
.button:after {
border-bottom: 2px solid #c47135;
bottom: -5px;
right: 0px;
}
.button:hover {
background-color: #c47135;
}
.button:hover:before,
.button:hover:after {
height: 100%;
width: 100%;
}
```
**效果演示**
```
```css
.circle {
border-radius: 50%;
width: 2rem;
height: 2rem;
background: #333;
}
```
**效果演示**
```
```css
.triangle {
width: 0;
height: 0;
border-top: 20px solid #333;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}
```
List item
List item
List item
List item
List item
List item
```
```css
ul {
counter-reset: counter;
}
li::before {
counter-increment: counter;
content: counters(counter, '.') ' ';
}
```
**效果展示**
Select some of this text.
```
```css
::selection {
background: aquamarine;
color: black;
}
.custom-text-selection::selection {
background: deeppink;
color: white;
}
```
**效果展示**
You can select me.
You can't select me!
```
```css
.unselectable {
user-select: none;
}
```
CSS is awesome!
```
```css
:root {
/* 在此处放置变量以全局使用变量. */
}
.custom-variables {
--some-color: #da7800;
--some-keyword: italic;
--some-size: 1.25em;
--some-complex-value: 1px 1px 2px whitesmoke, 0 0 1em slategray, 0 0 0.2em slategray;
color: var(--some-color);
font-size: var(--some-size);
font-style: var(--some-keyword);
text-shadow: var(--some-complex-value);
}
```
**效果展示**
```
```css
.dynamic-shadow {
position: relative;
width: 10rem;
height: 10rem;
background: linear-gradient(75deg, #6d78ff, #00ffb8);
z-index: 1;
}
.dynamic-shadow::after {
content: '';
width: 100%;
height: 100%;
position: absolute;
background: inherit;
top: 0.5rem;
filter: blur(0.4rem);
opacity: 0.7;
z-index: -1;
}
```
**效果展示**
Gradient text
```
```css
.gradient-text {
background: -webkit-linear-gradient(pink, red);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}
```
**效果展示**
Box it!
```
```css
.hover-shadow-box-animation {
display: inline-block;
vertical-align: middle;
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
margin: 10px;
transition-duration: 0.3s;
transition-property: box-shadow, transform;
}
.hover-shadow-box-animation:hover,
.hover-shadow-box-animation:focus,
.hover-shadow-box-animation:active {
box-shadow: 1px 10px 10px -10px rgba(0, 0, 24, 0.5);
transform: scale(1.2);
}
```
**效果展示**
Hover this text to see the effect!
```
```css
.hover-underline-animation {
display: inline-block;
position: relative;
color: #0087ca;
}
.hover-underline-animation::after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
bottom: 0;
left: 0;
background-color: #0087ca;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
.hover-underline-animation:hover::after {
transform: scaleX(1);
transform-origin: bottom left;
}
```
**效果展示**
Hover me Pretty text underline without clipping descending letters.
```
```css
.pretty-text-underline {
display: inline;
text-shadow: 1px 1px #f5f6f9, -1px 1px #f5f6f9, -1px -1px #f5f6f9, 1px -1px #f5f6f9;
background-image: linear-gradient(90deg, currentColor 100%, transparent 100%);
background-position: bottom;
background-repeat: no-repeat;
background-size: 100% 1px;
}
.pretty-text-underline::-moz-selection {
background-color: rgba(0, 150, 255, 0.3);
text-shadow: none;
}
.pretty-text-underline::selection {
background-color: rgba(0, 150, 255, 0.3);
text-shadow: none;
}
```
**效果展示**
```
```css
.shape-separator {
position: relative;
height: 48px;
background: #333;
}
.shape-separator::after {
content: '';
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='m12 0l12 12h-24z' fill='%23fff'/%3E%3C/svg%3E");
position: absolute;
width: 100%;
height: 12px;
bottom: 0;
}
```
**效果展示**
Item 1 Item 2 Item 3 Item 4
Item 5 Item 6
```
```css
span {
padding: 0 1rem;
transition: opacity 0.2s;
}
.sibling-fade:hover span:not(:hover) {
opacity: 0.5;
}
```
**效果展示**
This text uses the system font.
```
```css
.system-font-stack {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu,
Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
```
**效果展示**
If I exceed one line's width, I will be truncated.
```
```css
.truncate-text {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 200px;
}
```
**效果展示**
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore et.
```
```css
.truncate-text-multiline {
overflow: hidden;
display: block;
height: 109.2px;
margin: 0 auto;
font-size: 26px;
line-height: 1.4;
width: 400px;
position: relative;
}
.truncate-text-multiline:after {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 150px;
height: 36.4px;
background: linear-gradient(to right, rgba(0, 0, 0, 0), #f5f6f9 50%);
}
```
**效果展示**
Item 01
Item 02
Item 03
Item 04
Item 05
```
```css
li:nth-child(odd) {
background-color: #eee;
}
```
**效果展示**
Document
```
拓展：
- classList.add(newClassName)；添加新的类名，如已经存在，取消添加
- classList.contains(oldClassName)：确定元素中是否包含指定的类名，返回值为true，false
- classList.remove(oldClassName)：移除已经存在的类名;
- classList.toggle(className)：如果classList中存在给定的值，删除它，否则，添加它；
🦀**感谢掘金用户tjNane分享此方法**
---
方法二：
```js
const hasClass = (el, className) => new RegExp(`(^|\\s)${className}(\\s|$)`).test(el.className);
```
---
### 5.返回某元素的第n层祖先元素节点
```js
function retParent(ele, n) {
while(elem && n) {
ele = ele.parentElement
n--
}
return ele
}
```
---
### 6.滚动到底部监听函数
```js
function bottomMonitorEvent(dom) {
const prizeRecordRoll = dom;
prizeRecordRoll.onscroll = () => {
const scrollTop = prizeRecordRoll.scrollTop;
const windowHeight = prizeRecordRoll.clientHeight;
const scrollHeight = prizeRecordRoll.scrollHeight;
if (Math.floor(scrollTop + windowHeight - scrollHeight) >= -1) {
// 到底事件触发，书写业务逻辑
}
};
},
```
---
## 🍣第四部分：BOM
### 1.返回当前网页地址
```js
function currentURL() {
return window.location.href
}
currentURL() // "https://juejin.im/timeline"
```
---
### 2.获取滚动条位置
```js
function getScrollPosition(el = window) {
return {
x: (el.pageXOffset !== undefined) ? el.pageXOffset : el.scrollLeft,
y: (el.pageYOffset !== undefined) ? el.pageYOffset : el.scrollTop
}
}
getScrollPosition() // {x: 0, y: 692}
```
---
### 3.获取url中的参数
```js
function getURLParameters(url) {
const params = url.match(/([^?=&]+)(=([^&]*))/g)
return params?params.reduce(
(a, v) => (a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1), a), {}
):[]
}
getURLParameters('http://www.baidu.com/index?name=tyler') // {name: "tyler"}
```
---
### 4.检测设备类型
```js
const detectDeviceType = () =>/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|OperaMini/i.test(navigator.userAgent) ? 'Mobile' : 'Desktop';
detectDeviceType() // "Desktop"
```
---
## 🍬第五部分：时间
### 1.Date 常用API
```js
new Date() // 创建一个时间对象 Fri Jul 12 2019 19:59:59 GMT+0800 (中国标准时间)
// 返回自1970年1月1日 00:00:00 UTC到当前时间的毫秒数。
Date.now(); // 1562932828164
// 解析一个表示某个日期的字符串，并返回从1970-1-1 00:00:00 UTC 到该日期对象（该日期对象的UTC时间）的毫秒数
Date.parse('2019.7.12') // 1562860800000
// 年月日时分秒 获取
let dateMe = new Date()
dateMe.getFullYear() // 2019 | 根据本地时间返回指定日期的年份
dateMe.getMonth() // 6 | 根据本地时间，返回一个指定的日期对象的月份，为基于0的值（0表示一年中的第一月）。
dateMe.getDate() // 12 | 根据本地时间，返回一个指定的日期对象为一个月中的哪一日（从1--31）
dateMe.getHours() // 20 |根据本地时间，返回一个指定的日期对象的小时。
dateMe.getMinutes() // 11 | 根据本地时间，返回一个指定的日期对象的分钟数。
dateMe.getSeconds() // 29 | 方法根据本地时间，返回一个指定的日期对象的秒数
dateMe.getMilliseconds() // 363 | 根据本地时间，返回一个指定的日期对象的毫秒数。
dateMe.toJSON() // 🔥 "2019-07-12T12:05:15.363Z" | 返回 Date 对象的字符串形式
dateMe.getDay() // 5 | 根据本地时间，返回一个具体日期中一周的第几天，0 表示星期天（0 - 6）
dateMe.getTime() // 1562933115363 | 方法返回一个时间的格林威治时间数值。
dateMe.toString() // "Fri Jul 12 2019 20:05:15 GMT+0800 (中国标准时间)" | 返回一个字符串，表示该Date对象
dateMe.getTimezoneOffset() // -480（说明比正常时区慢480分钟，所以要加480分钟才对） | 返回协调世界时（UTC）相对于当前时区的时间差值，单位为分钟。
dateMe.toDateString() // "Fri Jul 12 2019" | 以美式英语和人类易读的形式返回一个日期对象日期部分的字符串。
// 时间戳转当前北京时间（非常的好用）
const startMe = new Date(Date.now());
const toLocale = startMe.toLocaleDateString().replace(/\//g, '-') // 2019-11-20
const toTime = startMe.toTimeString().split(' ')[0] // 00:16:26
const theTime = `${toLocale} ${toTime}` // 2019-11-20 00:16:26
```
[MDN 更多详细](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date)
---
### 2.一个时间戳格式的数字，是多少 天小时分钟秒毫秒
```javascript
const formatDuration = ms => {
if (ms < 0) ms = -ms;
const time = {
day: Math.floor(ms / 86400000),
hour: Math.floor(ms / 3600000) % 24,
minute: Math.floor(ms / 60000) % 60,
second: Math.floor(ms / 1000) % 60,
millisecond: Math.floor(ms) % 1000
};
return Object.entries(time)
.filter(val => val[1] !== 0)
.map(([key, val]) => `${val} ${key}${val !== 1 ? 's' : ''}`)
.join(', ');
};
formatDuration(3161012); // 52 minutes, 41 seconds, 12 milliseconds
```
---
### 3.格林尼治时间 转 北京时间（可传格林尼治时间 或者 时间戳）
```javascript
function myTimeToLocal(inputTime){
if(!inputTime && typeof inputTime !== 'number'){
return '';
}
let localTime = '';
inputTime = new Date(inputTime).getTime();
const offset = (new Date()).getTimezoneOffset();
localTime = (new Date(inputTime - offset * 60000)).toISOString();
localTime = localTime.substr(0, localTime.lastIndexOf('.'));
localTime = localTime.replace('T', ' ');
return localTime;
}
console.log(myTimeToLocal(1530540726443)); // 2018-07-02 22:12:06
console.log(myTimeToLocal('2017-11-16T05:23:20.000Z')); // 2017-11-16 13:23:20
```
---
### 4.获取两个日期相差天数
```js
function getDaysDiffBetweenDates (dateInitial, dateFinal) {
return (dateFinal - dateInitial) / (1000 * 3600 * 24);
}
getDaysDiffBetweenDates(new Date('2017-12-13'), new Date('2017-12-22')); // 9
```
---
### 5.一个数组中，有时间，需要将这个数组按照时间进行排序
```javascript
let data = [
{
id: 1,
publishTime: "2019-05-14 18:10:29"
},
{
id: 2,
publishTime: "2019-05-14 18:17:29"
},
{
id: 3,
publishTime: "2019-05-14 15:09:25"
}]
data.sort((a, b) => b.publishTime - a.publishTime);
// 0: {id: 2, publishTime: "2019-05-14 18:17:29"}
// 1: {id: 1, publishTime: "2019-05-14 18:10:29"}
// 2: {id: 3, publishTime: "2019-05-14 15:09:25"}
```
---
### 6.iOS 手机时间格式出现NaN的问题
```js
let time = '2019-05-14 18:17:29'
var timeArr = time.split(/[- :]/); // ["2019", "05", "14", "18", "17", "29"]
var resTime = new Date(timeArr[0], timeArr[1] - 1, timeArr[2], timeArr[3], timeArr[4], timeArr[5]);
```
---
### 7.判断时间是否到了（兼容性IOS NaN问题）
```js
/*
* @param { String|Number } 开始时间
* @param { String|Number } 结束时间
* @return { Boolean } 时间是否到了
* @start-time 2019-12-24 18:00
* @last-time 2019-12-24 18:00
*/
function isJudgeTimeTool(startTime, endTime) {
let nowTime = null;
let endTimeData = null;
// 开始时间
if (typeof startTime === 'number') {
nowTime = new Date(startTime);
} else {
const arr = startTime.split(/[- :]/);
nowTime = new Date(arr[0], arr[1] - 1, arr[2], arr[3], arr[4], arr[5]);
}
// 结束时间
if (typeof endTime === 'number') {
endTimeData = new Date(endTime);
} else {
const arr = endTime.split(/[- :]/);
endTimeData = new Date(arr[0], arr[1] - 1, arr[2], arr[3], arr[4], arr[5]);
}
// 相差时间
const leftTime = parseInt((endTimeData.getTime() -nowTime.getTime()) / 1000);
return leftTime > 0;
}
```
---
## 🍭第六部分：处理JS原生具有的一些问题
### 1.加减法精度缺失问题
```javascript
// 加法函数（因为JS小数计算 丢失精度）
function add(arg1, arg2) {
let r1, r2, m;
try { r1 = arg1.toString().split(".")[1].length } catch (e) { r1 = 0 }
try { r2 = arg2.toString().split(".")[1].length } catch (e) { r2 = 0 }
m = Math.pow(10, Math.max(r1, r2))
return (arg1 * m + arg2 * m) / m
}
```
```javascript
// 减法函数（因为JS小数计算 丢失精度）
function sub(arg1, arg2) {
let r1, r2, m, n;
try { r1 = arg1.toString().split(".")[1].length } catch (e) { r1 = 0 }
try { r2 = arg2.toString().split(".")[1].length } catch (e) { r2 = 0 }
m = Math.pow(10, Math.max(r1, r2));
n = (r1 >= r2) ? r1 : r2;
return Number(((arg1 * m - arg2 * m) / m).toFixed(n));
}
```
---
### 2.递归优化（尾递归）
```javascript
// 尾递归函数 摘自阮一峰ES6 | 自己懒得写了
function tco(f) {
let value;
let active = false;
let accumulated = [];
return function accumulator() {
accumulated.push(arguments);
if (!active) {
active = true;
while (accumulated.length) {
value = f.apply(this, accumulated.shift());
}
active = false;
return value;
}
};
}
// 使用
新的函数 = tco(递归函数)
```
---
### 3.防抖 && 节流
**防抖：任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行（例如搜索框，只有当用户搜索输入完成之后，停个零点几秒才会服务器发送请求，如果停顿的时间小于设定的，那就还不执行，这个就是防抖）**
**函数防抖就是在函数需要频繁触发情况时，只有足够空闲的时间，才执行一次。经常用于 搜索和拖拽**
```js
function debounce(fn) {
let timeout = null; // 创建一个标记用来存放定时器的返回值
return function () {
clearTimeout(timeout); // 每当用户输入的时候把前一个 setTimeout clear 掉
timeout = setTimeout(() => { // 然后又创建一个新的 setTimeout, 这样就能保证输入字符后的 interval 间隔内如果还有字符输入的话，就不会执行 fn 函数
fn.apply(this, arguments);
}, 500);
};
}
debounce(fn) // 使用
```
---
**节流：指定时间间隔内只会执行一次任务（例如一个一秒内连续触发的事件，如果用了节流，让其300ms触发一次，那么1s就只能触发3次）**
```js
function throttle(fn) {
let canRun = true; // 通过闭包保存一个标记
return function () {
if (!canRun) return; // 在函数开头判断标记是否为true，不为true则return
canRun = false; // 立即设置为false
setTimeout(() => { // 将外部传入的函数的执行放在setTimeout中
fn.apply(this, arguments);
// 最后在setTimeout执行完毕后再把标记设置为true(关键)表示可以执行下一次循环了。当定时器没有执行的时候标记永远是false，在开头被return掉
canRun = true;
}, 500);
};
}
throttle(fn) // 使用
```
[节流和防抖其他好的文章](https://juejin.im/entry/58c0379e44d9040068dc952f)
---
**防抖节流其他实现**
```js
/**
* Difference between debounce and throttle
* In summary,
* throttle says, “Hey, we heard you the first time, but if you want to keep going, no problem.
* We’ll just ignore you for a while.”
* Debounce says, “Looks like you’re still busy. No problem,
* we’ll wait for you to finish!”
*/
/**
* 快速书写一个防抖函数
* @description 只要一直调用, callback 将不会被触发
* 在一次调用结束后, 只有等待 timeout ms 时间, 才能继续调用 callback
* immediate 决定触发时机
* @example
* 1. 点击按钮发送请求（保存数据之类的）
* 2. 搜索时自动联想
* 3. 自动保存
* 4. Debouncing a resize/scroll event handler
*/
function debounce(callback, timeout, immediate) {
let timer;
return function () {
const context = this; // 持有执行上下文
const args = arguments; // 记录传参
const later = function () {
timer = null; // 贤者时间过了，重振旗鼓，重置为初始状态
if (!immediate) callback.apply(context, args); // 设置为尾部调用才延时触发
}
const callNow = immediate && !timer; // 如果确认允许首部调用，且首次调用，那么本次立即触发
clearTimeout(timer); // 杀掉上次的计时器，重新计时
timer = setTimeout(later, timeout); // 重启一个计时器，过了贤者时间之后才触发
callNow && callback.apply(context, args); // 设置为首部调用立即触发
}
}
/**
* 快速书写一个节流函数
* @description 一直调用 callback, 每隔 timeout ms 时间 callback 触发一次
* 在 timeout ms 时间内的调用将不触发
* @example
* 1. Throttling a button click so we can’t spam click 控制疯狂按钮的响应频率
* 2. Throttling an API call 控制 API 的调用频率
* 3. Throttling a mousemove/touchmove event handler 控制频繁触发事件的相应频率
*/
// solution1 记录时间比较
function throttle(callback, timeout) {
let triggerTime; // 记录每次真正触发时间
return function () {
const context = this; // 持有执行上下文
const args = arguments; // 记录传参
if (triggerTime === undefined // 首次调用
|| Date.now() - triggerTime > timeout) { // 贤者时间已经过去
triggerTime = Date.now(); // 记录真正触发时间
callback.apply(context, args); // 可以触发回调
}
}
}
// solution2 间隔时间反转标志位
function throttle(callback, timeout) {
let disable; // 触发回调是否禁用
return function () {
const context = this; // 持有执行上下文
const args = arguments; // 记录传参
if (!disable) { // 首次调用或者贤者时间过了，禁用解除
callback.apply(context, args); // 可以触发回调
disable = true; // 马上禁用
setTimeout(_ => disable = false, timeout); // 贤者时间过了，禁用解除
}
}
}
```
---
## 🍹第七部分：其他
### 1.Math函数的一些应用
```js
parseInt(5.12) // 5 | 只保留整数部分（丢弃小数部分）
Math.floor(5.12) // 5 | 向下取整（效果和parseInt一样）
Math.ceil(5.12) // 6 | 向上取整（有小数，整数就+1）
Math.round(5.499) // 5 | 四舍五入
Math.round(5.501) // 6 | 四舍五入
Math.abs(-5) // 5 | 绝对值
Math.max(5, 6) // 6 | 返回两者中较大的数
Math.min(5, 6) // 5 | 返回两者中较小的数
Math.random() // 随机数 (0-1)
```
---
### 2.常用正则速查
**消除字符串首尾两端的空格（替换）**
```js
let reg = /^\s+|\s+$/g;
let str = ' #id div.class ';
str.replace(reg, '') // "#id div.class"
```
**把手机号码替换成 *（替换）**
```js
var reg = /1[24578]\d{9}/;
var str = '姓名：朱昆鹏 手机：15932638907'; // 手记号瞎写的
str.replace(reg, '***') //"姓名：朱昆鹏 手机：***"
```
**替换敏感字（替换）**
```js
let str = '中国共产党中国人民解放军中华人民共和国';
let r = str.replace(/中国|军/g, input => {
let t = '';
for (let i = 0; i.+<\/\1>/;
var str = '朱昆鹏2707509@.qq.com
朱昆鹏';
str.match(reg); // ["2707509@.qq.com
"]
```
**验证手记号（验证）**
```js
let reg = /^1((3[\d])|(4[5,6,9])|(5[0-3,5-9])|(6[5-7])|(7[0-8])|(8[1-3,5-8])|(9[1,8,9]))\d{8}$/;
reg.test('15932539095'); //true
reg.test('234554568997'); //false
```
**验证邮箱地址（验证）**
```js
let reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
reg.test('2775033@hotmail.com'); //true
reg.test('abc@'); //false
```
**验证身份证（验证）**
```js
let reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
reg.test('31210119651230518X'); //true 自己瞎写的
reg.test('2101196523s230518X'); //false 自己瞎写的
```
**验证中国邮箱编码（验证）**
```js
let reg = /^(0[1-7]|1[0-356]|2[0-7]|3[0-6]|4[0-7]|5[1-7]|6[1-7]|7[0-5]|8[013-6])\d{4}$/
reg.test('065900'); //true
reg.test('999999'); //false
```
**验证ipv4地址正则（验证）**
```js
let reg = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/
reg.test('192.168.1.192'); //true
reg.test('127.0.0.1s'); //false
```
**验证银行卡号（16或19位）**
```js
let reg = /^([1-9]{1})(\d{15}|\d{18})$/
reg.test('6222026006705354218') // true
```
**验证中文姓名（验证）**
```js
let reg = /^([\u4e00-\u9fa5\·]{2,10})$/
reg.test('朱昆鹏'); //true
reg.test('Zhu Kunpeng'); //false
```
---
### 3.变换变量
```js
// [letA，letB] = [letB，letA];
let a = 1;
let b = 2;
[a, b] = [b, a] // a = 2 b = 1
```
---
### 4.格式化对象为JSON代码
```js
const formatted = JSON.stringify({name: 'Jhon', age: 18, address: 'sz'}, null, 4);
/*
{
"name": "Jhon",
"age": 18,
"address": "sz"
}
*/
// 该字符串化命令有三个参数。第一个是Javascript对象。第二个是可选函数，可用于在JSON进行字符串化时对其执行操作。最后一个参数指示要添加多少空格作为缩进以格式化JSON。省略最后一个参数，JSON将返回一个长行。如果myObj中存在循环引用，则会格式失败。
```
---
### 5.随机生成六位数字验证码
```js
const code = Math.floor(Math.random() * 1000000).toString().padStart(6, "0") // 942377
```
---
### 6.RGB 颜色转 16进制颜色
```js
const RGBToHex = (r, g, b) => ((r << 16) + (g << 8) + b).toString(16).padStart(6, '0');
RGBToHex(255, 165, 1); // 'ffa501'
```
---
### 7.生成随机整数
```js
function randomNum(min, max) {
switch (arguments.length) {
case 1:
return parseInt(Math.random() * min + 1, 10)
case 2:
return parseInt(Math.random() * (max - min + 1) + min, 10)
default:
return 0
}
}
randomNum(1,10) // 随机 [1,10]的整数
```
---
### 8.去除空格（1-所有空格 2-前后空格 3-前空格 4-后空格 默认为1）
```js
/**
* trim 去除空格
* param1 string str 待处理字符串
* param2 number type 去除空格类型 1-所有空格 2-前后空格 3-前空格 4-后空格 默认为1
* return string str 处理后的字符串
*/
function trim(str, type = 1) {
if (type && type !== 1 && type !== 2 && type !== 3 && type !== 4) return;
switch (type) {
case 1:
return str.replace(/\s/g, "");
case 2:
return str.replace(/(^\s)|(\s*$)/g, "");
case 3:
return str.replace(/(^\s)/g, "");
case 4:
return str.replace(/(\s$)/g, "");
default:
return str;
}
}
```
---
### 9.大小写转换
```js
/**
* 大小写转换
* param1 string str 待转换的字符串
* param2 number type 1-全大写 2-全小写 3-首字母大写
* return string str 处理后的字符串
*/
function turnCase(str, type) {
switch (type) {
case 1:
return str.toUpperCase()
case 2:
return str.toLowerCase();
case 3:
return str[0].toUpperCase() + str.substr(1).toLowerCase()
default:
return str;
}
}
```
---
### 10.随机16进制颜色 hexColor
```js
/**
* 随机16进制颜色 hexColor
* return string str 带#号的随机16进制颜色
*/
function hexColor() {
let str = '#';
let arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F'];
for (let i = 0; i < 6; i++) {
let index = Number.parseInt(Math.random() * 16);
str += arr[index]
}
return str;
}
```
---
### 11.统计一段文字中指定文字出现次数 keywordsCount（骚操作）
```js
/**
* 关键词统计：统计一段文字中指定文字出现次数 keywordsCount
* param1 string text 进行统计的文本
* param2 string keywords 进行统计的关键词
* return number count 关键词出现次数
* tip:param1 document.body.innerText--全文统计
*/
function keywordsCount(text, keywords) {
return text.split(keywords).length - 1
}
```
---
### 12.好的笔记文章
- [JS原生事件](https://developer.mozilla.org/zh-CN/docs/Web/Events)
- [JS选择器 new](https://blog.csdn.net/major_zhang/article/details/78118823)
---
### 13. 轮询等待函数
```js
/**
* 轮询等待函数
*
* @param {Function} 轮询结束的条件
* @param {Function} 成功之后的回调函数
* @param {Number} 轮询时间（默认100ms）
* @param {Number} 轮询最长的时间（默认1000ms）
*/
function pollingWaiting (callBack, resCallBack, time = 100, lastTime = 1000) {
let startTime = Date.now()
let t = null;
let fn = function () {
t = setTimeout(() => {
if (!callBack()) {
// 此处可以采用尾递归优化，来防止占用过多内存
console.log('startTime', Date.now() - startTime > lastTime)
(Date.now() - startTime > lastTime) ? window.clearInterval(t) : fn()
} else {
resCallBack()
}
}, time);
}
fn()
}
// 示例
let a = 1;
setTimeout( () => {
a = 2
}, 500)
pollingWaiting( () => {
return a === 2
}, () => {
console.log('触发了', a)
}, 100, 800)
// 4 startTime false
// 触发了 2
```
---
### 14.大数值转换为万，亿
```js
/**
* 大数值转换为万，亿函数
*
* @param {Number} 大数
* @param {Number} 保留几位小数
*/
function numConversion (num, point = 2) {
let numStr = num.toString().split('.')[0] // 去掉小数点后的数值字符串
let numLen = numStr.length
if (numLen < 6) {
return numStr
} else if (numLen >= 6 && numLen <= 8) {
let decimal = numStr.substring(numLen - 4, numLen - 4 + point)
let res = parseInt(num / 10000) + '.' + decimal + '万'
return res
} else if (numLen > 8) {
let decimal = numStr.substring(numLen - 8, numLen - 8 + point)
let res = parseInt(num / 100000000) + '.' + decimal + '亿'
return res
}
}
numConversion(12345) // 12345
numConversion(1234567) // 123.45万
numConversion(123456789) // 1.23亿
```
---
### 15.常见的XSS转义场景
```js
// 转义HTML特殊字符
function HtmlEncode(str) {
var hex = new Array('0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f');
var preescape = str;
var escaped = "";
for(var i = 0; i < preescape.length; i++){
var p = preescape.charAt(i);
escaped = escaped + escapeCharx(p);
}
return escaped;
function escapeCharx(original){
var found=true;
var thechar=original.charCodeAt(0);
switch(thechar) {
case 10: return "Document
```
---
## 🐪第二部分：微信小程序
---
## 🦏第三部分：Flutter
---
## 🐘第四部分：React-Native
---
## 🐑第五部分：移动端原生开发
---
## 📚参考列表（致敬）
================================================
FILE: docs/quickcheck/1.前端/7.其他.md
================================================
---
title: 7.其他
date: 2020-01-30 00:00:00
permalink: quickcheck/1-7
---
# 7.其他
::: tip
备注：这个栏目，存放一些过小的问题（不适合单独成一章的），如果后期拓展的很多，就可以考虑单独抽离出去一部分知识
:::
---
## 🌟第一部分：Git && GitHub
### 1.Git常用命令
```sh
# 创建新仓库
git init
# 检出仓库
git clone username@host:/path/to/repository
# 来一次添加所有改变的文件
git add -A .
# 表示添加所有内容
git add -A
# 表示添加新文件和编辑过的文件不包括删除的文件
git add .
# 表示添加编辑或者删除的文件，不包括新添加的文件
git add -u
# 你的改动已经提交到了 HEAD，但是还没到你的远端仓库
git commit -m '代码提交信息'
# 推送改动
git push origin master
# 查看状态
git status
# 查看每个分支的最新提交记录
git branch -av
# 查看每个分支属于哪个远程仓库
git branch -vv
# 下载Git项目
git clone 地址
# 查看用户名
git config user.name
# 查看用户邮箱
git config user.email
# 修改用户名
git config --global user.name "Your_username"
# 修改用户邮箱
git config --global user.email "Your_email"
```
- [更多](https://www.bootcss.com/p/git-guide/)
---
### 2.shields.io使用（给项目添加徽章）
- MIT使用举例：https://shields.io/category/license/ （要选GitHub哦）
- 使用说明：https://www.sohu.com/a/134390224_655394
---
## 💫第二部分：包管理工具（npm）
### 1.npm基本使用
```sh
# 初始化项目（也可以写 npm init -y）
npm init
# 安装（简写 npm i）
npm install
# 帮助（简写 npm -h）
npm --help
# 全局标志（简写 -g）
--global
# 保存为开发依赖（简写 -D）
--save-dev
# 保存为生产依赖（简写 -d）
--save
# 卸载npm安装的包
npm uninstall 包的名称 -g
```
**设置 npm init属性，这样在初始化的时候，就不用每次都写了**
npm config set init.author.name "Zhu Kunpeng"
npm config set init.author.email "270750933@qq.com"
npm config set init.author.url "itzkp.com"
npm config set init.license "MIT"
**让脚本跨平台兼容：cross-env**
- 安装：npm i -D cross-env
```js
// 然后在任何环境变量之前包括关键字cross-env，如下
{
"scripts": {
"dev": "cross-env node app.js"
}
}
```
**[参考掘金文章，作者小智，感谢](https://juejin.im/post/5d1d40ea6fb9a07eb94fa7df#comment)**
---
### 2.发布包到NPM上
```sh
# 登录（会让你输入账号密码，邮箱）
npm adduser
# 上传（注意package.json里面的name不要和npm仓库重复）
npm publish
```
---
## ✨第三部分：前端工程化工具（Webpack）
- 首先肯定要 npm init
- 安装webpack：npm i webpack webpack-cli -D
- 新建 webpack.config.js 文件
- 常用loader
- npm i file-loader -D （用于移动字体文件等）
- npm i url-loader -D（用于打包图片等）
- npm i css-loader style-loader -D（打包基础CSS样式文件）
- npm i node-sass sass-loader -D（打包scss样式文件）
- npm i postcss-loader autoprefixer -D（自动添加厂商前缀，需要建立一个新的文件 postcss.config.js ）
- 常用plugin
- npm i html-webpack-plugin -D （会在打包完成之后，自动生成一个HTML文件，并把打包之后的JS自动引入到这个HTML文件中）
- 其他
- SourceMap
- WebpackDevServer
- Hot Module Replacement
```js
// webpack.config.js 配置示例
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
export default {
// 环境（默认是production，开启压缩等默认配置 || development是开发环境，不压缩...）
mode: 'production',
// 有了这个在就能在出错的时候，准确定位到是哪里的问题，这个devtool 还有很多配置，具体查阅文档
devtool: 'cheap-module-eval-source-map',
// 启动一个serve：npx webpack-dev-server
devServer: {
contentBase: './dist', // 启动的目录
open: true, // 自动打开浏览器
hot: true, // 启动热更新
hotOnly: true // 不刷新页面
},
// 入口：简写 entry: '入口文件地址'
entry: {
main: '入口文件地址',
// main2: '入口文件2地址' 多文件入口
},
// 模块规则
module: {
rules: [
// file-loader
{
test: /\.(字体文件后缀)$/,
use: {
loader: 'file-loader',
options: {
name: '[name].[ext]', //
outputPath: 'font/' // 打包输出文件夹
}
}
},
// url-loader
{
test: /\.(jpg|png|gif)$/,
use: {
loader: 'url-loader',
options: {
name: '[name].[ext]', //
outputPath: 'images/', // 打包输出文件夹
limit: 2048 // 如果小于 2kb，就会打包进JS，如果大于就打包到文件夹中
}
}
},
// 打包静态样式
{
test: '/\.css$/',
use: ['style-loader', 'css-loader', 'sass-loader', 'postcss-loader']
}
]
}
// 插件
plugins: [
new HtmlWebpackPlugin({
// 配置，index.html 模板，以此为模板进行注入
template: './test/index.html'
})
]
// 输入
output: {
filename: '输入文件名', // 输出文件夹名称, 可以使用占位符, 例如'[name]_[hash].[ext]'
publicPath: 'https://cdn.com.cn', // 配置引入前缀,如果静态资源在CDN上这个很有用
path: path.resolve(__dirname, '输入文件夹') // 输入目录
},
}
```
---
**postcss.config.js 配置示例**
```js
// 默认是这样写的
module.exports = {
parser: 'sugarss',
plugins: {
'postcss-import': {},
'postcss-cssnext': {},
'cssnano': {}
}
}
// 我们也可以这么写
// 这么写的作用是，当我们使用 postcss-loader 的时候，会使用 autoprefixer 这个插件
module.exports = {
plugins: [
require('autoprefixer')
]
}
```
---
**.babelrc 配置示例**
```js
```
---
## ☀️第四部分：测试（Jest）
### 1.Jest 常用匹配器速查
```js
// ========== 和真假相关的匹配器 ===========
expect(1).toBe(1) // 通过：有点类似于 ===
expect({ name: '朱昆鹏' }).toEqual({ name: '朱昆鹏' }) // 通过：匹配内容相等
expect(null).toBeNull() // 通过：匹配是否是 null
expect(undefined).toBeUndefined() // 通过：匹配是否是 undefined
expect(true).toBetruthy() // 通过：匹配 是否为真，填 1 也行
expect(0).toBeFalsy() // 通过：匹配是否为假，填 false 也行
expect(0).not.toBeFalsy() // 不通过：可以通过 not 进行取反
// ...
// ========== 和数字相关的匹配器 ===========
expect(10).toBeGreaterThan(9) // 通过，匹配的是 10 是否 比 9 大
expect(10).toBeLessThan(11) // 通过，匹配的是 10 是否 比 11 小
expect(10).toBeGreaterThanOrEqual(10) // 通过，匹配的是 10 是否 大于等于 10
expect(11).toBeLessThanOrEqual(11) // 通过，匹配的是 11 是否小于等于 11
expect(0.1 + 0.2).toBeCloseTo(0.3) // 通过，判断小数是否相同，直接比较的话会有精度缺失的问题，比较不了
// ...
// ========= 和字符串相关的匹配器 ===========
expect('朱昆鹏').toMatch('昆鹏') // 通过，匹配的是 '朱昆鹏' 中是否有 '昆鹏' 字符 | 还可以写正则表达式
// ...
// ========= 和数组相关的匹配器 ===========
expect([1,2,3]).toContain(2) // 通过，匹配的是 数组中 是否包含 2 这一项，也可以判断 Set, Map 这种类型的
// ...
// ========= 和异常相关的匹配器 ===========
expect(throw new Error('出现错误')).toThrow() // 通过，匹配的是 是否出现异常
// ...
```
---
## ❄️第五部分：CSS预处理器
---
## 💥第六部分：跨平台开发（Electron）
---
## 🔥第七部分：日常开发中总结出来的组件（移动端）
### 1.弹框组件（DialogGray.vue）
**使用方法**
```html
//opacity 蒙层透明度 不传默认为.5
//isClick 蒙层是否可点击 默认可点击,传false即不可点击
//阻止点击冒泡在蒙层内部加@click.stop
//阻止滑动冒泡在蒙层内部加@touchmove.stop
//弹窗过大，内部div加class="part-scroll" 去掉滚动条：.part-scroll::-webkit-scrollbar {display: none;}
```
---
```html
```
---
### 2.奖励轮播组件（RewardWheel.vue）
**使用方法**
```html
```
- wheel-row-height：滚动的距离
- wheel-rem-size：rem相对单位（适配用）
- wheel-time：滚动一个的时间
- wheel-number：滚动的数量
---
```html
```
- end-time-data： 结束时间 | String（xxxx-xx-xx xx:xx:xx）或者 Number（时间戳）
- @time-end: 倒计时结束的时候触发
---
### 3.倒计时组件（CountDown.vue）
**使用方法**
```html
```
---
```html
{{ time }}
```
---
## 📚参考列表（致敬）
- [Git部分参考，写的很好](https://www.nodejs.red/#/tools/git)
================================================
FILE: docs/quickcheck/2.后端/1.Node速查.md
================================================
---
title: 1.Node速查
date: 2020-01-30 00:00:00
permalink: quickcheck/2-1
---
# 1.Node速查
## 🍡第一部分：Node基础操作
### 1.文件系统
```js
// ============++ 同步 ++============
// 1.同步读取文件
fs.readFileSync('input.txt').toString()
// 2.同步写入文件
fs.writeFileSync(file, data)
// 3.同步追加内容
fs.appendFileSync(file, data)
// 4.同步读取目录
fs.readdirSync(path)
// 5.同步创建目录
fs.mkdirSync(path, [option]) // options 参数一 是否以递归的方式创建目录，默认false |参数二： mode 设置目录权限，默认0777
// 6.同步删除目录
fs.rmdirSync(path)
// 7.获取文件信息
fs.statSync('路径')
// 8.删除文件
fs.unlinkSync(path)
// ============++ 异步 ++============
// 1.异步读取文件
fs.readFile('input.txt', (err, data) => {
if (err) console.error(err);
console.log("异步读取: " + data.toString());
})
// 其余的都是一个道理，去除掉Sync，加个回调函数
```
::: tip
[更多请看...](https://www.runoob.com/nodejs/nodejs-fs.html)
:::
---
### 2.启动http服务
```javascript
//导入HTTP模块
let http = require('http')
//定义一个要监听的端口
const PORT = 8989;
// 一个处理请求和发送响应的函数
const handleRequest = (request, response) => {
response.end('Hello World!!!')
}
// 创建服务器
let server = http.createServer(handleRequest);
// 启动服务
server.listen(PORT, () => {
console.log("Server listening on: http://localhost:%s", PORT);
})
```
---
### 3.快速启动一个代理静态资源的HTTP服务
::: tip
中文目录会有代理不上的地方（一般也不用纯Node代理，直接用第三方框架代理）
:::
```javascript
let http = require('http')
let fs = require('fs')
let url = require('url')
let path = require('path')
let server = http.createServer(function(request, response){
//获取输入的url解析后的对象
let pathObj = url.parse(request.url, true);
//static文件夹的绝对路径
let staticPath = path.resolve(__dirname, 'dist')
//获取资源文件绝对路径
let filePath = path.join(staticPath, pathObj.pathname)
// 如果是根目录的情况下的访问，需要拼接上 /index.html
if (filePath.charAt(filePath.length-1)=="/"){
filePath+="index.html";
}
//异步读取file
fs.readFile(filePath, 'binary', function(err, fileContent){
if (err) {
console.log('404')
response.writeHead(404, 'not found')
response.end('404 Not Found ')
} else {
console.log('ok')
response.write(fileContent, 'binary')
response.end()
}
})
})
server.listen(9999)
console.log('visit http://localhost:9999')
```
---
### 4.Express代理静态资源（我一般用这个）
- 安装：npm install express --save
```javascript
var express = require('express')
var app = express()
app.use(express.static('docs')) // 代理的文件夹（自动找文件夹下的index.html为 /级目录内容）
app.listen(3000, () => console.log('Example app listening on port 3000!'))
```
---
## 🍭第二部分：Node常用的组合操作
### 1.复制某文件夹下所有的文件到另一个文件夹
```js
const fs = require('fs')
// 复制文件夹
function exists (src, dst) {
//测试某个路径下文件是否存在
fs.exists(dst, function(exists){
if (exists) {//不存在
copy(src,dst);
} else {//存在
fs.mkdir(dst,function(){//创建目录
copy(src,dst)
})
}
})
}
// 复制文件夹的辅助函数
function copy (src, dst) {
//读取目录
let paths = fs.readdirSync(src);
paths.forEach(function(path){
var _src=src+'/'+path;
var _dst=dst+'/'+path;
var readable;
var writable;
fs.stat(_src,function(err,st){
if(err){
throw err;
}
if(st.isFile()){
readable=fs.createReadStream(_src);//创建读取流
writable=fs.createWriteStream(_dst);//创建写入流
readable.pipe(writable);
}else if(st.isDirectory()){
exists(_src,_dst,copy);
}
});
});
}
// 使用演示 将 a 文件夹下 所有的文件，复制到 b文件夹下
exists('./a', './b')
```
---
## 📚参考列表（致敬）
- [Node教程|菜鸟教程](https://www.runoob.com/nodejs/nodejs-tutorial.html)
================================================
FILE: docs/quickcheck/2.后端/2.Node第三方库速查.md
================================================
---
title: 2.Node第三方库速查
date: 2020-01-30 00:00:00
permalink: quickcheck/2-2
---
# 2.Node第三方库速查
> 内容尚未梳理
## 第一部分：Express
---
## 第二部分：Koa2
---
## 第三部分：Egg
---
## 第四部分：Hapi
---
## 📚参考列表（致敬）
================================================
FILE: docs/quickcheck/2.后端/3.MySQL速查.md
================================================
---
title: 3.MySQL速查
date: 2020-01-30 00:00:00
permalink: quickcheck/2-3
---
# 3.MySQL速查
> 内容尚未梳理
---
## 之前的内容，重构后删除
---
### 基础增删改查 🔥
##### 表数据的查看（select）
- 这个我稍微熟悉一点，先不写了
---
##### 表数据的增加（insert）
**insert into 表名(字段名 ...) values(数据...)**
```javascript
// 举例 : (掌握下面三个基本学完)
// ① 在表 blog_user 中插入一条完整数据
insert into blog_user(id,username,password,ctime) values(1,'zhukunpeng','123456','2018-11-23');
// ② 在表 blog_user 中插入一天只有部分字段的数据
insert into blog_user(id,username,password) values(1,'zhukunpeng','123456');
// ③ 插入 blog_demo表的 查询结果
insert into blog_user (id,username,password) select id,username,password from blog_demo
```
---
##### 表数据的删除（delete）
**delete from 表名 where 字段名=''**
```javascript
// 注意 ：delete 删除数据，如果不加 where 会删除表中所有的数据，所以要加上限制条件 where
// 案例 ：删除 blog_user 表中 username 为 zhukunpeng 的字段
delete from blog_user where username='zhukunpeng'
```
---
##### 表数据的修改（update）
**update 表名 set 需要更改的字段='' where 限制条件**
```javascript
// 注意 ：update 修改数据，如果不加 where 会跟新表中所有的行
// 案例 ：修改 blog_user 表中 username='zhukunpeng' 的字段 密码改为 654321
update blog_user set password='654321' where username='zhukunpeng'
```
---
### 其他
创建数据库通常情况下 字符集和排列规则
- 字符集：utf8
- 排列规则：utf8_general_ci
[更多解释......书写中]()
---
## 📚参考列表（致敬）
================================================
FILE: docs/quickcheck/2.后端/4.MongoDB速查.md
================================================
---
title: 4.MongoDB速查
date: 2020-01-30 00:00:00
permalink: quickcheck/2-4
---
# 4.MongoDB速查
> 内容尚未梳理
## 之前的内容，重构完成之后删除
**(mongoose官方文档)[http://mongoosejs.net/]，安装之类的照着上面来**
### 1.快速上手
```js
// ① 连接数据库
var mongoose = require('mongoose');
mongoose.connect('mongodb://ip或者网址:端口号/数据库名称?配置...'); // 连接数据库，配置可以不写
// 错误 和 成功
db.on('error', console.error.bind(console, 'connection error:'));
db.once('open', function() { console.log('连接成功') });
// ② 创建 Schema (Mongoose 里，一切都始于Schema)
var personSchema = mongoose.Schema({
name: String,
age: { type: Number }
});
// ③ 把 schema 编译成一个 Model
var Person = mongoose.model('Person', personSchema); // 注：'Person' 这个是 MongoDB 连接的数据库的 集合名称
// ④ 使用 Model
// 注：model 是我们构造 document 的 Class，我们知道，一个集合里面有很多文档
Person.find() // 查找所有的文档
Person.find({ name: /朱/ }) // 查找特定的文档
var zhu = new Person({ name: '朱昆鹏', age: 21 }) // 添加文档，.save()是mongoose规定的添加文档的方法
zhu.save()
```
---
### 2.连接（省略...）
---
### 3.模式类型（SchemaTypes）
合法的模式类型有：String，Number，Array，Boolean，ObjectId，Date，Buffer，Mixed，Decimal128
```js
// 详细示例
```
### 4.模型（Models）
```js
// ① 增
var zhu = new Person({ name: '朱昆鹏', age: 21 }) // Documents 是 model 的实例。 创建它们并保存到数据库非常简单
zhu.save()
// ② 删
Person.remove({ name: '朱昆鹏' }) // model 的 remove 方法可以删除所有匹配查询条件的文档。
// ③ 改
Person.findOneAndUpdate(...) // model 的 update 方法可以修改数据库中的文档，不过不会把文档返回给应用层，可以使用 findOneAndUpdate 方法
// ④ 查
Person.find() // 查找所有的文档
Person.find({ name: /朱/ }) // 查找特定的文档
```
---
### 5.其他
## 📚参考列表（致敬）
================================================
FILE: docs/quickcheck/2.后端/5.Redis速查.md
================================================
---
title: 5.Redis速查
date: 2020-01-30 00:00:00
permalink: quickcheck/2-5
---
# 5.Redis速查
> 内容尚未梳理
---
## 📚参考列表（致敬）
================================================
FILE: docs/quickcheck/2.后端/6.其他.md
================================================
---
title: 6.其他
date: 2020-01-30 00:00:00
permalink: quickcheck/2-6
---
# 6.其他
> 声明：这个栏目，存放一些过小的问题（不适合单独成一章的），如果后期拓展的很多，就可以考虑单独抽离出去一部分知识
================================================
FILE: docs/quickcheck/3.运维/1.各种软件安装速查.md
================================================
---
title: 1.各种软件安装速查
date: 2020-01-30 00:00:00
permalink: quickcheck/3-1
---
# 1.各种软件安装速查
---
## 🍀第一部分：Centos7.*下安装软件
### 1. 安装Node
- 设置安装源：curl --silent --location https://rpm.nodesource.com/setup_11.x | bash -
- 安装node：yum install -y nodejs
- [更多详细介绍](https://github.com/nodesource/distributions)
---
### 2. 安装MongoDB
::: warning
注意：下面安装的是MongoDB4.0
:::
- 创建个人仓库：vi /etc/yum.repos.d/mongodb-org-4.0.repo
- 插入文本段
[mongodb-org-4.0]
name=MongoDB Repository
baseurl=https://repo.mongodb.org/yum/redhat/$releasever/mongodb-org/4.0/x86_64/
gpgcheck=0
enabled=1
gpgkey=https://www.mongodb.org/static/pgp/server-4.0.asc
注意：第一次复制粘贴文本段会造成缺失，可以全部删除重新粘贴，或者直接光标移至最前面进行输入补全
- 运行命令：yum install -y mongodb-org
- 启动mongDB：service mongod start
---
### 3. 安装Nginx
- 安装：yum install nginx
- 启动nginx：service nginx start
- 开机自启：systemctl enable nginx.service
- 重启服务：nginx -s reload
---
### 4. 安装pm2
- 安装：npm install -g pm2
- 运行程序：pm2 start 程序路径
- 生成自启脚本，保持当前进程活跃：pm2 startup
- 保存当前进程状态：pm2 save
---
### 5. 安装GitLab
版本：11.9.9
- 下载rpm：wget https://mirrors.tuna.tsinghua.edu.cn/gitlab-ce/yum/el7/gitlab-ce-11.9.9-ce.0.el7.x86_64.rpm
- 安装：rpm -i gitlab-ce-11.9.9-ce.0.el7.x86_64.rpm
- 修改gitlab配置文件指定服务器ip和自定义端口 vim /etc/gitlab/gitlab.rb
- gitlab-ctl reconfigure
- gitlab-ctl restart
- 登录：初始账户: root 密码: 5iveL!fe
> 问题：想安装中文版的，不知道怎么安装
---
### 6. 安装Docker
```sh
yum install -y yum-utils \
device-mapper-persistent-data \
lvm2
yum-config-manager \
--add-repo \
https://download.docker.com/linux/centos/docker-ce.repo
# 正式下载
yum install docker-ce docker-ce-cli containerd.io -y
# 启动
systemctl start docker
```
---
### 7.安装Jenkins
```sh
yum install java -y
yum install git -y
wget -O /etc/yum.repos.d/jenkins.repo http://pkg.jenkins-ci.org/redhat/jenkins.repo
rpm --import https://jenkins-ci.org/redhat/jenkins-ci.org.key
# 完成之后直接使用 yum 命令安装 Jenkins
yum install jenkins -y
# Jenkins 修改权限 找到$JENKINS_USER 改为 “root”:
vim /etc/sysconfig/jenkins
# 然后更改执行以下命令 Jenkins home，webroot 和日志的所有权：
chown -R root:root /var/lib/jenkins
chown -R root:root /var/cache/jenkins
chown -R root:root /var/log/jenkins
# 启动 jenkins 有一个OK表示启动成功
service jenkins restart
# 在本地浏览器输入你的 ip 地址加 默认端口 8080 就可以看到 jenkins 解锁页面
# 密码：vim /var/lib/jenkins/secrets/initialAdminPassword
# 选择安装推荐的插件即可 等待安装
```
[更多文档参考](https://juejin.im/post/5b371678f265da599f68dfa2)
---
### 8.安装MySQL
```sh
wget http://repo.mysql.com/mysql-community-release-el7-5.noarch.rpm //下载mysql的repo源
# 安装mysql-community-release-el7-5.noarch.rpm包
rpm -ivh mysql-community-release-el7-5.noarch.rpm
# 安装mysql服务
yum install mysql-server
# 登录mysql并修改mysql的密码
mysql -u root
```
---
**🔥注意：登录时有可能报这样的错：ERROR 2002 (HY000): Can‘t connect to local MySQL server through socket ‘/var/lib/mysql/mysql.sock‘ (2)**
```sh
# 原因是/var/lib/mysql的访问权限问题。下面的命令把/var/lib/mysql的拥有者改为当前用户：
# 这里的mysql是用户名（需要设置用户组合用户）（一般照着复制不改也没事）
sudo chown -R mysql:mysql /var/lib/mysql
# 重启mysql
service mysqld restart
```
---
**设置（修改）密码**
```sh
# 登录
mysql -u root
use mysql;
# 修改密码
update user set password=password('ZHUkun94899.1') where user='root';
service mysqld restart // 重启MySQL
# 测试
mysql -u root # 会报错 意思就是你没有使用密码，你要使用密码登录
mysql -uroot -p密码 # 这样就能进去了，root是用户名
```
---
## 🌾第二部分：docker安装各种软件
### 1.安装MongoDB
- 拉取：docker pull mongo
- 建立MongoDB存储的目录：mkdir ~/mgdb
- 运行：docker run -p 27017:27017 -v /Users/zhukunpeng/mgdb:/data/db -d mongo
- -p 27017:27017 :将容器的 27017 端口映射到主机的 27017 端口（端口可以自己定义）（前面一个27017是主机端口，后面一个是容器端口）
- -v /Users/zhukunpeng/mgdb:/data/db 将主机中下的 mgdb 挂载到容器的/data/db，作为 mongo 数 据存储目录（我这是Mac的目录，你们环境不同目录是不一样的，要改成自己的）
- 查看容器启动情况：docker ps
- 重命名容器对象：docker rename 原来名字 修改的名字（这步是为了以后方便，因为你docker ps 查看会发现启动容器的名字是随机的，不好打）
- 进入mongo容器：docker exec -it 启动容器名字 bash
---
## 📚参考列表（致敬）
================================================
FILE: docs/quickcheck/3.运维/2.Nginx速查.md
================================================
---
title: 2.Nginx速查
date: 2020-01-30 00:00:00
permalink: quickcheck/3-2
---
# 2.Nginx速查
## 配置
配置：在conf.d/下建立新的conf文件，即可
```js
server {
set $dir_path /home/ubuntu/fatdoge_web/build;
listen 80;
server_name qiu;
charset utf-8;
index index.html;
access_log /opt/log/nginx/qiu-http.log access;
location /{
index index.html index.htm;
root $dir_path;
}
}
```
## 判断Nginx是否启动
[链接](https://blog.51cto.com/lxw1844912514/2940927)
## 查看外网（公网）IP
[链接](https://blog.csdn.net/weixin_33857230/article/details/86135986)
## 查看端口开没开
[链接](https://www.jianshu.com/p/78c7f4ab19bd)
```js
// 一直没反应就是没开，一般用来确定某个端口是否开启了
telnet IP地址
```
## Nginx在线配置
[NGINX 配置](https://www.digitalocean.com/community/tools/nginx?global.app.lang=zhCN)
================================================
FILE: docs/quickcheck/3.运维/3.Docker速查.md
================================================
---
title: 3.Docker速查
date: 2020-01-30 00:00:00
permalink: quickcheck/3-3
---
# 3.Docker速查
> 内容尚未梳理
================================================
FILE: docs/quickcheck/3.运维/4.Linux速查.md
================================================
---
title: 4.Linux速查
date: 2020-01-30 00:00:00
permalink: quickcheck/3-4
---
# 4.Linux速查
> 内容尚未梳理
## 文件和目录（查看删除复制）
- cd /home 进入 '/ home' 目录'
- cd .. 返回上一级目录
- cd ../.. 返回上两级目录
- cd 进入个人的主目录
- pwd 显示工作路径
- ls 查看目录中的文件
- ls -F 查看目录中的文件
- ls -l 显示文件和目录的详细资料
- ls -a 显示隐藏文件（ls -la 经常这样用）🔥
- rm -rf dir1 删除一个叫做 'dir1' 的目录并同时删除其内容 🔥
- rm -rf dir1 dir2 同时删除两个目录及它们的内容
- 复制文件：cp 文件地址 目标文件地址 🔥
- 复制文件夹：cp -r 文件夹地址 目标文件夹地址 🔥
- ln -s file1 lnk1 创建一个指向文件或目录的软链接
- ln file1 lnk1 创建一个指向文件或目录的物理链接
---
## 打包和压缩文件
- tar -cvf archive.tar file1 创建一个非压缩的 tarball
- tar -cvf archive.tar file1 file2 dir1 创建一个包含了 'file1', 'file2' 以及 'dir1'的档案文件
- tar -tf archive.tar 显示一个包中的内容
- tar -xvf archive.tar 释放一个包
- tar -xvf archive.tar -C /tmp 将压缩包释放到 /tmp目录下
- tar -cvfj archive.tar.bz2 dir1 创建一个bzip2格式的压缩包
- tar -jxvf archive.tar.bz2 解压一个bzip2格式的压缩包
- tar -cvfz archive.tar.gz dir1 创建一个gzip格式的压缩包
- tar -zxvf archive.tar.gz 解压一个gzip格式的压缩包
- ......
---
## 文件搜索
- find / -name file1 从 '/' 开始进入根文件系统搜索文件和目录
- find / -user user1 搜索属于用户 'user1' 的文件和目录
- find /home/user1 -name \*.bin 在目录 '/ home/user1' 中搜索带有'.bin' 结尾的文件
- find /usr/bin -type f -atime +100 搜索在过去100天内未被使用过的执行文件
- find /usr/bin -type f -mtime -10 搜索在10天内被创建或者修改过的文件
- find / -name \*.rpm -exec chmod 755 '{}' \; 搜索以 '.rpm' 结尾的文件并定义其权限
- find / -xdev -name \*.rpm 搜索以 '.rpm' 结尾的文件，忽略光驱、捷盘等可移动设备
- locate \*.ps 寻找以 '.ps' 结尾的文件 - 先运行 'updatedb' 命令
- whereis halt 显示一个二进制文件、源码或man的位置
- which halt 显示一个二进制文件或可执行文件的完整路径
---
## 用户和群组
groupadd group_name 创建一个新用户组
groupdel group_name 删除一个用户组
groupmod -n new_group_name old_group_name 重命名一个用户组
useradd -c "Name Surname " -g admin -d /home/user1 -s /bin/bash user1 创建一个属于 "admin" 用户组的用户
useradd user1 创建一个新用户
userdel -r user1 删除一个用户 ( '-r' 排除主目录)
usermod -c "User FTP" -g system -d /ftp/user1 -s /bin/nologin user1 修改用户属性
passwd 修改口令
passwd user1 修改一个用户的口令 (只允许root执行)
chage -E 2005-12-31 user1 设置用户口令的失效期限
pwck 检查 '/etc/passwd' 的文件格式和语法修正以及存在的用户
grpck 检查 '/etc/passwd' 的文件格式和语法修正以及存在的群组
newgrp group_name 登陆进一个新的群组以改变新创建文件的预设群组
---
## 文件的权限 - 使用 "+" 设置权限，使用 "-" 用于取消
ls -lh 显示权限
ls /tmp | pr -T5 -W$COLUMNS 将终端划分成5栏显示
chmod ugo+rwx directory1 设置目录的所有人(u)、群组(g)以及其他人(o)以读（r ）、写(w)和执行(x)的权限
chmod go-rwx directory1 删除群组(g)与其他人(o)对目录的读写执行权限
chown user1 file1 改变一个文件的所有人属性
chown -R user1 directory1 改变一个目录的所有人属性并同时改变改目录下所有文件的属性
chgrp group1 file1 改变文件的群组
chown user1:group1 file1 改变一个文件的所有人和群组属性
find / -perm -u+s 罗列一个系统中所有使用了SUID控制的文件
chmod u+s /bin/file1 设置一个二进制文件的 SUID 位 - 运行该文件的用户也被赋予和所有者同样的权限
chmod u-s /bin/file1 禁用一个二进制文件的 SUID位
chmod g+s /home/public 设置一个目录的SGID 位 - 类似SUID ，不过这是针对目录的
chmod g-s /home/public 禁用一个目录的 SGID 位
chmod o+t /home/public 设置一个文件的 STIKY 位 - 只允许合法所有人删除文件
chmod o-t /home/public 禁用一个目录的 STIKY 位
---
## 其他
### 系统信息
- arch 显示机器的处理器架构(1)
- uname -m 显示机器的处理器架构(2)
- uname -r 显示正在使用的内核版本
- dmidecode -q 显示硬件系统部件 - (SMBIOS / DMI)
- hdparm -i /dev/hda 罗列一个磁盘的架构特性
- hdparm -tT /dev/sda 在磁盘上执行测试性读取操作
- cat /proc/cpuinfo 显示CPU info的信息
- cat /proc/interrupts 显示中断
- cat /proc/meminfo 校验内存使用
- cat /proc/swaps 显示哪些swap被使用
- cat /proc/version 显示内核的版本
- cat /proc/net/dev 显示网络适配器及统计
- cat /proc/mounts 显示已加载的文件系统
- lspci -tv 罗列 PCI 设备
- lsusb -tv 显示 USB 设备
- date 显示系统日期
- cal 2007 显示2007年的日历表
- date 041217002007.00 设置日期和时间 - 月日时分年.秒
- clock -w 将时间修改保存到 BIOS
### 关机 (系统的关机、重启以及登出 )
shutdown -h now 关闭系统(1)
init 0 关闭系统(2)
telinit 0 关闭系统(3)
shutdown -h hours:minutes & 按预定时间关闭系统
shutdown -c 取消按预定时间关闭系统
shutdown -r now 重启(1)
reboot 重启(2)
logout 注销
### YUM 软件包升级器 - （Fedora, RedHat及类似系统）
- yum install package_name 下载并安装一个rpm包
- yum localinstall package_name.rpm 将安装一个rpm包，使用你自己的软件仓库为你解决所有依赖关系
- yum update package_name.rpm 更新当前系统中所有安装的rpm包
- yum update package_name 更新一个rpm包
- yum remove package_name 删除一个rpm包
- yum list 列出当前系统中安装的所有包
- yum search package_name 在rpm仓库中搜寻软件包
- yum clean packages 清理rpm缓存删除下载的包
- yum clean headers 删除所有头文件
- yum clean all 删除所有缓存的包和头文件
### 查看文件内容
- cat file1 从第一个字节开始正向查看文件的内容
- tac file1 从最后一行开始反向查看一个文件的内容
- more file1 查看一个长文件的内容
- less file1 类似于 'more' 命令，但是它允许在文件中和正向操作一样的反向操作
- head -2 file1 查看一个文件的前两行
- tail -2 file1 查看一个文件的最后两行
- tail -f /var/log/messages 实时查看被添加到一个文件中的内容
### 文本处理
- cat file1 file2 ... | command <> file1_in.txt_or_file1_out.txt general syntax for text manipulation using PIPE,STDIN and STDOUT
- cat file1 | command( sed, grep, awk, grep, etc...) > result.txt 合并一个文件的详细说明文本，并将简介写入一个新文件中
- cat file1 | command( sed, grep, awk, grep, etc...) >> result.txt 合并一个文件的详细说明文本，并将简介写入一个已有的文件中
- grep Aug /var/log/messages 在文件 '/var/log/messages'中查找关键词"Aug"
- grep ^Aug /var/log/messages 在文件 '/var/log/messages'中查找以"Aug"开始的词汇
- grep [0-9] /var/log/messages 选择 '/var/log/messages' 文件中所有包含数字的行
- grep Aug -R /var/log/* 在目录 '/var/log' 及随后的目录中搜索字符串"Aug"
- sed 's/stringa1/stringa2/g' example.txt 将example.txt文件中的 "string1" 替换成 "string2"
- sed '/^$/d' example.txt 从example.txt文件中删除所有空白行
- sed '/ *#/d; /^$/d' example.txt 从example.txt文件中删除所有注释和空白行
- echo 'esempio' | tr '[:lower:]' '[:upper:]' 合并上下单元格内容
- sed -e '1d' result.txt 从文件example.txt 中排除第一行
- sed -n '/stringa1/p' 查看只包含词汇 "string1"的行
- sed -e 's/ *$//' example.txt 删除每一行最后的空白字符
- sed -e 's/stringa1//g' example.txt 从文档中只删除词汇 "string1" 并保留剩余全部
- sed -n '1,5p;5q' example.txt 查看从第一行到第5行内容
- sed -n '5p;5q' example.txt 查看第5行
- sed -e 's/00*/0/g' example.txt 用单个零替换多个零
- cat -n file1 标示文件的行数
- cat example.txt | awk 'NR%2==1' 删除example.txt文件中的所有偶数行
- echo a b c | awk '{print $1}' 查看一行第一栏
- echo a b c | awk '{print $1,$3}' 查看一行的第一和第三栏
- paste file1 file2 合并两个文件或两栏的内容
- paste -d '+' file1 file2 合并两个文件或两栏的内容，中间用"+"区分
- sort file1 file2 排序两个文件的内容
- sort file1 file2 | uniq 取出两个文件的并集(重复的行只保留一份)
- sort file1 file2 | uniq -u 删除交集，留下其他的行
- sort file1 file2 | uniq -d 取出两个文件的交集(只留下同时存在于两个文件中的文件)
- comm -1 file1 file2 比较两个文件的内容只删除 'file1' 所包含的内容
- comm -2 file1 file2 比较两个文件的内容只删除 'file2' 所包含的内容
- comm -3 file1 file2 比较两个文件的内容只删除两个文件共有的部分
### 通过pem连接到服务器
[Mac ssh使用pem文件登录远程服务器](https://blog.csdn.net/fdipzone/article/details/79763632)
```js
// 示意（pem文件要在同一路径下，要不就加上路径）
ssh -i test.pem ubuntu@1.1.1.1
```
================================================
FILE: docs/quickcheck/3.运维/5.其他.md
================================================
---
title: 5.其他
date: 2020-01-30 00:00:00
permalink: quickcheck/3-5
---
# 5.其他
> 声明：这个栏目，存放一些过小的问题（不适合单独成一章的），如果后期拓展的很多，就可以考虑单独抽离出去一部分知识
---
## 1.HTTPS证书配置（申请配置ssl证书）
- 申请了ssl证书，就能让网站变为 https开头的，更安全，额，似乎比我想的简单
---
## 💌 致谢
致谢所有 star 和 关注我的 朋友们，多谢你们的鼓励和支持。
================================================
FILE: docs/.vuepress/components/About.vue
================================================
---
### 2.Jest的简单配置
**基础安装，运行**
- 安装：npm i jest -D
- 使用的时候，必须要用 模块化（就是要导出，导入，可以使用 commn.js 规范 或者 es module 格式）
- Jest主要做 集成测试，和单元测试
- 我们使用模块化的语法，我们浏览器正常就无法访问了，这时候就需要和 webpack 就行配合了，这就是一整个的工程流
- 运行测试 npx test
---
**简单配置**
- npx jest --init 初始化项目
- 配置完成之后 会多一个 jest.config.js
```js
// For a detailed explanation regarding each configuration property, visit:
// https://jestjs.io/docs/en/configuration.html
module.exports = {
// All imported modules in your tests should be mocked automatically
// automock: false,
// Stop running tests after `n` failures
// bail: 0,
// Respect "browser" field in package.json when resolving modules
// browser: false,
// The directory where Jest should store its cached dependency information
// cacheDirectory: "/private/var/folders/4h/ykg022694sn1pw91fxq30xwc0000gn/T/jest_dx",
// Automatically clear mock calls and instances between every test
// clearMocks: false,
// Indicates whether the coverage information should be collected while executing the test
// collectCoverage: false,
// An array of glob patterns indicating a set of files for which coverage information should be collected
// collectCoverageFrom: null,
// The directory where Jest should output its coverage files
// coverageDirectory: null,
// An array of regexp pattern strings used to skip coverage collection
// coveragePathIgnorePatterns: [
// "/node_modules/"
// ],
// A list of reporter names that Jest uses when writing coverage reports
// coverageReporters: [
// "json",
// "text",
// "lcov",
// "clover"
// ],
// An object that configures minimum threshold enforcement for coverage results
// coverageThreshold: null,
// A path to a custom dependency extractor
// dependencyExtractor: null,
// Make calling deprecated APIs throw helpful error messages
// errorOnDeprecated: false,
// Force coverage collection from ignored files using an array of glob patterns
// forceCoverageMatch: [],
// A path to a module which exports an async function that is triggered once before all test suites
// globalSetup: null,
// A path to a module which exports an async function that is triggered once after all test suites
// globalTeardown: null,
// A set of global variables that need to be available in all test environments
// globals: {},
// An array of directory names to be searched recursively up from the requiring module's location
// moduleDirectories: [
// "node_modules"
// ],
// An array of file extensions your modules use
// moduleFileExtensions: [
// "js",
// "json",
// "jsx",
// "ts",
// "tsx",
// "node"
// ],
// A map from regular expressions to module names that allow to stub out resources with a single module
// moduleNameMapper: {},
// An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
// modulePathIgnorePatterns: [],
// Activates notifications for test results
// notify: false,
// An enum that specifies notification mode. Requires { notify: true }
// notifyMode: "failure-change",
// A preset that is used as a base for Jest's configuration
// preset: null,
// Run tests from one or more projects
// projects: null,
// Use this configuration option to add custom reporters to Jest
// reporters: undefined,
// Automatically reset mock state between every test
// resetMocks: false,
// Reset the module registry before running each individual test
// resetModules: false,
// A path to a custom resolver
// resolver: null,
// Automatically restore mock state between every test
// restoreMocks: false,
// The root directory that Jest should scan for tests and modules within
// rootDir: null,
// A list of paths to directories that Jest should use to search for files in
// roots: [
// "
---
### 2.单元测试工具对比
**按照npm下载排名来排列 ---> npm trends**
- jest
- mocha + chai
- jasmine
- ava
---
### 3.e2e测试工具对比
**按照npm下载排名来排列**
- cypress
- webdriverio
- nightwatch
- nightmare
- testcafe
---
## 三.单元测试Jest
### 1.Jest简介
- 支持 babel, webpack, Typescript
---
### 2.Jest安装和babel支持
- npm install --save-dev jest
- npm i --dev babel-jest @babel/core @babel/preset-env
```js
// babel.config.js
module.exports = {
presets: [
[
'@babel/preset-env',
{
targets: {
node: 'current',
},
},
],
],
};
```
---
### 3.第一个Jest测试用例
**文件（根据测试用例修改之后的代码）**
```js
export const add = (a = 0, b = 0) => {
if (typeof a !== 'number') {
a = 0
}
if (typeof b !== 'number') {
b = 0
}
return a + b
}
```
**测试代码**
```js
// 引入待测试的功能模块
import { add } from './math'
// test suite
describe('测试 math.js 功能模块', () => {
it ('等于加法函数是否正常', () => {
expect(add(1,2)).toEqual(3)
expect(add(1,-2)).toEqual(-1)
expect(add(1, )).toEqual(1)
expect(add(1,'')).toEqual(1)
expect(add('你好',)).toEqual(0)
})
})
```
---
### 4.杀手锏功能 Mock & Spy（没懂，来日再说吧）
- Mock测试就是在测试过程中，对于某些不容易构造或者不容易获取的对象，用一个虚拟的对象来创建，以便测试的一种方法
---
### 5.jest cli 功能
- jest --coverage 生成测试覆盖率
- jest --verbose 详细打印
- jest --watchAll 启动监听,执行所有测试用例（我们可以选择）
- ...
---
### 6.Vue-Cli快速创建单元
---
## TravisCI
### 1.使用简介
> TravisCI 只支持GitHub，不支持其他代码托管服务
**使用步骤**
- [进入到官方网站](http://travis-ci.org/)，并使用GitHub授权
- 获取GitHub的Tokens
- 配置项目 .taravis.yml
- Node项目
- Script脚本
- 部署到 github pages
- 钩子
- 其他
---
## CircleCI
================================================
FILE: docs/blog/12.前端代码质量/5.项目质量监测.md
================================================
---
title: 5.项目质量监测
date: 2020-01-30 00:00:00
permalink:
tag:
- blog
- 12.前端代码质量
---
> 注意：此篇文章未来可能要和其他文章进行合并，或者重构... 目前结构混乱，无法阅读
### 简介
**🔥通常来说，项目的质量决定了 软件项目的命运，软件项目的可维护性，软件项目的运维成本，软件项目的拓展性**
**为什么要进行代码检查**
- 避免低级BUG
- 统一代码习惯
- 保证线上代码质量
**如何让一个团队的人产出的代码都在一个基本水平底线之上呢?**
最初是靠制订规范。要确保规范得以执行只能靠人，所以文字规范成了code review的公共参照标准。单纯靠人的事最终都容易流于形式，
🔥所以需要工具加以保证。虽说工具并不能完全实现规范中的规则，但至少能够在一定程度 上缓解代码不统一一的局面
**从哪几个方面可以让项目质量有所提高呢？**
- 代码Lint：告别低级错误，简单的配置让程序来自动检查
- e2e test：e2e测试，黑盒测试，如何用e2e进行端到端的测试
- 开源测试平台：codecov介绍（配合CI工具，让测试过程自动化）
---
### 2.日常写代码中遇到的问题
**代码风格**
**代码规范**
这里使用 Typescript 能提高代码质量
**设计思路**
有的人写的程序就是高度耦合的，几十个函数，很难调用，没办法维护，这就和思路有关系了，要设计一些设计模式，设计一些模块化的东西，来规避这点
---
### 3.代码质量检测 Lint
**Lint：是一款分析源码以及标记编程过程中（代码，样式，构建）书写的错误的工具**
常见的3个JS检测工具对比
- JSLint（2012年出现）：
- 优点：参数配置完成，可以直接使用
- 缺点：有限的配置选项，不能增加个性化的规则等等
- JSHint
- 优点：可配置，可以写配置文件
- 缺点：难于知道那个规则产生的错误，不能自定义规则等等
- 🔥ESLint（比较新的工具，JSCS已经合并到ESLint）
- 优点：高度可配置
- 缺点：需要一些配置，速度慢
---
### 4.Lint工具介绍（4个核心概念）
**核心是配置文件，规则是写到里面的：.eslintrc.js**
**常见规则**
- off && 0：关闭规则
- warn && 1：开启规则，使用警告级别错误（不会导致程序退出）
- error && 2：开启规则，使用错误级别错误（程序会退出）
```js
// 例如
{
"rules": {
"semi": ["error", "never"]
}
}
```
**Extends：使用别人的包（使用别人的规则）**
```js
{
"extends": "google"
}
```
**🔥Plugins：插件系统**
我们有时候可能有一些特殊的应用场景，例如Vue的语法，例如less，sass等这些的语法，可能 使用别人的包里面也没有这些配置，我们就需要自己配置了（针对特定的语法结构进行Lint）
---
### 5.ESLint初始化
- 安排：npm install eslint --save-dev
- 使用
```js
//
"scripts": {
"lint": "eslint app.js",
"lint:create": "eslint --init",
},
```
**使用 eslint --init创建一个ESLint配置文件**
- 第一个问题：检查代码规范 | 🔥检查代码规范并查找一些问题 | 强制使用某些规范
- 第二个问题（你使用哪种模块方式）：🔥ESM | COM | 不使用
- 第三个问题（选择常见的框架）
- 第四个问题（你的代码会在哪里运行）：🔥浏览器 | 🔥Node
- 第五个问题（你想把这些配置放到什么文件中）
```js
module.exports = {
"env": { // 运行环境
"browser": true,
"es6": true,
"node": true
},
"extends": "eslint:recommended", // 拓展规则
"globals": { // 执行代码时脚本需要访问额外全局变量
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parserOptions": { // 用于指定想要支持的JS语言
"ecmaVersion": 2018,
"sourceType": "module"
},
"rules": { // 开启某些规则，设置规则登记
}
};
```
**❣️注意，有时候也要写另一个文件.eslintignore，用于告诉ESLint忽略某些文件或者目录**
---
>
================================================
FILE: docs/blog/12.前端代码质量/6.如何写一个不错的代码.md
================================================
---
title: 6.如何写一个不错的代码
date: 2020-01-30 00:00:00
permalink:
tag:
- blog
- 12.前端代码质量
---
> 注意：此文章位置未来可能会变化，因为未来 8.4前端代码质量 可能会进行合并重组
> 在我的认知了，好的代码不在于用了多么高级的算法，多么深奥的设计模式
> 而是在于 方便清晰的去写代码，并在此过程中逐渐优化“套路”，也是为了更好的拓展和维护（因为自己代码如何瞎写的话，回过头维护是看不懂的）
> 目前总结的是
---
## 第一部分：代码书写技巧
### 1.命名
> 我这块命名不说啥，我想说一下 函数的后缀命名法，规则就是，将函数分为不同性质，加上后缀，以后非常的好找和区分
> 正常流程函数：正常流程的函数，没法解释，除了下面几种之外的函数吧 | Fn
> 事件触发函数：因为事件触发调用的函数 | Event
> 接口类函数：请求数据接口的（可能有时候会调用工具类函数来洗一遍） | Api
> 工具类函数：处理一些非核心逻辑的处理函数 | Tool
```js
// 初始化代码
function initFn() {
initStateFn()
}
// 初始化状态
function initStateFn() {
let name = '朱昆鹏';
}
// 点击事件
function clickButtonEvent() {
console.log('点击按钮获取女朋友')
}
// 请求女朋友 接口
function getGirlFriendApi() {
console.log('请求上帝赐个女朋友')
}
// 数据处理函数
function dataHandleTool() {
console.log('上帝没有给你女朋友，你在处理函数里面自己加一个吧...')
}
```
---
### 2.注释
关键变量要注释是干什么的，函数要解释这个函数是干什么用的，别吝啬注释
---
### 3.函数
================================================
FILE: docs/blog/13. 前端安全/1.前端安全绪论.md
================================================
---
title: 1.前端安全绪论
date: 2020-01-30 00:00:00
permalink:
tag:
- blog
- 13. 前端安全
---
> 等待书写中...
================================================
FILE: docs/blog/13. 前端安全/2.前端基本防护.md
================================================
---
title: 2.前端基本防护
date: 2020-01-30 00:00:00
permalink:
tag:
- blog
- 13. 前端安全
---
> web安全很重要，因为浏览器能做的事情越来越多了，而传统的攻击手段因为经过了很长的时间，所以黑客们也就越来越难攻克，但是黑客如果可以通过网站，攻克你的浏览器，也就能获取到你的root权限，然后控制你的整个电脑，所以web安全很重要，我这里讲到是比较浅的网站级别防护
## 🍏第一种：SQL注入
### 1.SQL注入基础防护
在服务端进行防范的，很多服务器的框架都已经防范的很好了
例如前端可以向后端提交表单数据，这个非常的常见，但是如果用户恶意的在表单中填写sql代码，例如
```js
';select * from 某某表'
后台一般都是拼接字符串，进行数据库的执行，遇到上面的这个，代码一拼接，遇到 ';' ，就会执行后面的，这就很危险了，也就是说用户可以恶意的删除你的数据库
现在一般的框架都有转义的功能，将敏感的语句进行转义，防止对服务器进行伤害，这个问题一般都不算是大的问题了，服务器都会进行防护的
```
---
## 🍐第二种：XSS
**如果了解前端和后端是如何做的，你就能很清晰的看到XSS的产生原因了**
### 1.XSS简介
XSS（跨站脚本攻击 Cross-Site Script）是一种通过往网页里注入恶意脚本代码，然后用户访问到网页，肯定也就把恶意脚本代码下载下来了，这时候黑客通过恶意脚本，获取和控制用户的信息
根据上面的意思，我们可以感觉到 XSS 是一种注入性攻击手段，而根据注入的不同，我们可以细分为 三种，分别是
- 反射型（非持久性型）XSS
- 存储型（持久型）XSS
- DOM-Based型 XSS
---
### 2.反射性（非持久型）XSS
诱导用户点击恶意链接来造成一次性攻击（原理是在链接上执行JS代码）
```js
// 示例
https://xxx.xxx/
```
**❣️ 产生原因： 服务器直接获取请求参数，并直接使用，这个是导致产生这个的主要原因，和SQL注入很类似**
**🔥 防范：对敏感词汇进行转义**
---
### 3.存储型（持久型）XSS
将恶意代码存储到漏洞服务器中，用户浏览相关页面时候就会被攻击（恶意代码执行）
经常发生在评论这种场景下
```js
// 例如注入 console.log(document.cookie)
```
**❣️ 产生原因：还是服务器端没有处理用户提交的信息，就直接使用，导致产生了问题**
**🔥 防范：对用户提交的内容，敏感部分进行转义**
---
### 4.DOM-Based型 XSS
基于浏览器 DOM解析的 攻击方式（不需要后端参与）
常见的触发场景：需要 innerHtml ,outHtml, document.write 改变的时候，可能会受到 DOM-Based型 XSS 攻击
一般可以查看JS代码，看看有没有使用 innerHTML 等等方法，来看是否可以进行攻击
```js
// 一种攻击代码: 借助 img标签，不写 src 报错的机制，执行 onerror 事件中的代码，从而发动XSS攻击
---
### 2.路由器（实现分组交换的关键构件）
::: tip
分组交换则采用了 **存储转发技术**，通常我们把要发送的整块数据成为一个报文，而分组交换技术 就是把一个报文划分为几个分组后再进行发送。
:::
把较长的报文划分为一个个更小的等长数据段，并且在每一个数据段的前面，加上一些由必要的控制信息组成的首部（Header）之后，就构成了一个分组（分组又称之为包，不知道大家听没听过抓包）
分组是互联网中传送的数据单元，分组的首部是非常重要的，正是由于分组的首部包含了诸如目的地址和源地址等重要控制信息，每一个分组才能在互联网中独立的进行传输路径，并正确的交付到分组传输的终点。
---
::: tip
路由器是一种专用计算器（不叫主机），是实现分组交换的关键构件，其任务是 转发收到的分组。
:::
主机是为用户进行信息处理的，路由器是用来转发分组的
路由器收到一个分组，会暂时存储一下，检查其首部，查找转发表，按照首部中的目的地址，找到合适的接口转发出去，把分组交给下一个路由器
这样一步一步的（可能会经过十几个路由器）以存储转发的方式，把分组交付给最终的目的主机
各路由器之间必须经常交换彼此掌握的路由信息，以便创建和动态维护路由器中的转发表，使得转发表能够在整个网络拓扑发生改变的时候，及时更新
---
### 3.计算机网络体系结构
::: tip
主要有三种划分方式，分别是 OSI的七层协议（国际标准），TCP/IP四层协议，五层协议（广泛使用）
而我也主要是以五层协议为根本，接下里的内容也是以五层协议模型为核心书写的
:::
---
::: tip
应用层 的任务是 通过应用进程间的交互来完成特定网络应用（没太懂）
:::
应用层协议定义的是 应用进程间通信和交互的规则（这里进程就是指正在运行的程序）
对于不同的应用程序需要有不同的应用层协议，例如域名系统DNS，万维网应用 HTTP协议，电子邮件 SMTP协议等等
我们把应用层交互的数据单元称为报文
---
::: tip
传输层 的任务是 负责向两台主机中进程之间的通信 提供通用的数据传输服务
:::
传输层主要使用两种协议
- **传输控制协议 TCP**，提供面向连接的，可靠的数据传输服务，数据传输单位是报文段
- **用户数据报协议 UDP**，提供无连接的，尽最大努力的数据传输服务（不保证数据传输的可靠性），数据传输单位是用户数据报
---
::: tip
网络层 的任务是 为分组交换网上的不同主机提供通信服务
:::
在发送数据的时候，网络层把传输层产生的报文段（或用户数据报）封装成分组或包的形式传送
---
> 数据链路层，物理层，省略...
---
## 🍖第二部分：应用层
> 书写中...
## 🥞第三部分：运输层
> 书写中...
## 🧀第四部分：网络层
> 书写中...
## 📚参考列表（致敬）
- 《计算机网络》（第七版）谢希仁 编著
================================================
FILE: docs/blog/16.网络/2.前端网络应用.md
================================================
---
title: 2.前端网络应用
date: 2020-01-30 00:00:00
permalink:
tag:
- blog
- 16.网络
---
> 此处结构混乱，内容不全，完善中...
## 🥔第一部分：HTTP协议
> 之前总是听一些名词，http，tcp/ip，*层网络模型，报头，报文，三次握手，五次挥手，HTTPS...等等名词，这些到底是什么，有什么关系，我要搞懂
### 1.网络模型
- 应用层（HTTP,FTP）：为应用软件提供了很多服务，
- 传输层（TCP/IP，UDP）：向用户提供可靠的端到端服务（如何分包数据，如何拼装等等）
- 网络层：数据在节点之间传输创建逻辑链路（听不懂啥意思，举个例子，我要是访问百度，这一层就规定了，我应该怎么去找，这个逻辑关系就是网络层帮我们去创建的）
- 数据链路层：在通信实体之间建立数据链路连接
- 物理层：定义物理设备如何传输设备（电脑硬件，网卡端口，网线...）
### 2.HTTP发展历史
- HTTP/0.9：只有一个命令GET，没有header等描述数据的信息，服务器发送完毕，就关闭TCP连接
- HTTP/1.0：增加了很多命令（POST...等等），增加了 status code（状态码） 和 header（请求头，或者返回头，返回体的数据），还增加了多字符集支持，多部分内容发送，权限，缓存等
- HTTP/1.1：支持持久连接（TCP不立刻关闭 keep-live），pipeline（在一个链接里面发送多个请求），增加host和其他一些命令
- HTTP/2.0：所有数据以二进制进行传输，并行效率更高，增加头信息压缩以及主动推送
---
### 3.HTTP的三次握手
> HTTP只有请求和响应，不存在连接这个概念 TPC的连接进行的（请求和响应都是数据包，他们之间传输需要一个通道 TCP）
**HTTP创建之前TCP链接会有三次握手（为什么要有三次握手呢？为了防止无用的链接）**
- 客户端会发送一个数据包（SYN=1,Seq=X）给服务器端
- 服务器端收到这个数据包，就会开启一个TCP的端口，并返回给客户端一个数据包（SYN=1,ACK=X+1,Seq=Y），表示服务器端允许你创建链接了
- 客户端收到服务器端的数据包，然后返回数据包 (ACK=Y+1,Seq=Z)，表示我也收到了，可以发给我数据了（这时候才发送数据）
**HTTP关闭之前 TCP链接会有一个四次挥手的过程**
由于Tcp连接是进行全双工工作的，因此每个方向都必须单独进行关闭，这个原则是当一方完成他的数据发送的时候就发送一个FIN来终止这个方向的连接，收到这个FIN意味着这个方向上没有数据的流动，一个TCP连接在收到这个FIN之后还能发送消息，首先执行关闭的一方进行主动的关闭，而另一方进行被动的关闭
- TCP发送一个FIN，用来关闭客户到服务端的连接
- 服务端收到这个FIN，他发回一个ACK，确认收到序号为收到序号+1，和SYN一样，一个FIN将占用一个序号
- 服务端发送一个FIN到客户端，服务端关闭客户端的连接
- 客户端发送ACK报文确认，并将确认的序号+1，这样关闭完成
---
### 🔥4.HTT协议详解
**请求报文（请求行，请求头，请求体）**
- 起始行（General）：GET 资源 HTTP/1.1
- Request URL：请求地址
- Request Method：请求类型（GET,POST...）
- Status Code：请求状态（状态码）
- Referrer Policy：
- ...
- 请求头（请求报文）
- Accept：我这个浏览器能够接收什么资源
- Accept-Encoding: 浏览器接受数据的格式是什么？可以设置支不支持gzip格式（压缩格式）等
- Accept-Language：接收的语言
- Coche-Control：缓存相关
- 🔥Connetion：keep-alive（http的一种 连接模式，最常用的是长连接 keep-alive）
- 短连接：每一次http的请求和响应，都会反复建立和断开TCP连接，占用服务器IO操作
- 长连接：建立一个TCP链接，然后进行多次HTTP通信
- Cookie：
- Host：访问的网站
- User-Agent：包含浏览器的一些信息，电脑系统等，就是浏览器向服务器介绍自己的一个（做爬虫的时候能用到，因为反爬虫的一个就是判断你是不是浏览器）
- ...
---
**响应报文（响应行，响应头，响应体）**
- 响应行
- 响应头（响应报文）
- Coche-Control：缓存相关
- Connetion：keep-alive（返回形式是长连接）
- Content-Encoding: gzip（返回的格式）
- Content-Type: text/html（返回的类型）
- Date: 缓存相关（时间戳）
- Expires：缓存相关
- Sever：服务器（例如 NGINX）
- ...
---
**响应状态码**
- 1xx：指示信息 - 表示请求已接收，继续处理（用到异步处理上，后端常用，前端很少见）
- 2xx：成功 - 表示请求被成功接收，理解，接受
- 3xx：重定向 - 要完成请求必须进行更近一步的操作（服务器让你读本地缓存的时候可以用到，服务器端也能能用）
- 4xx：客户端错误 - 请求有语法错误或请求无法实现
- 5xx：服务器端发生错误 - 服务器未能实现合法的请求（后端程序出错，网络出错，服务器服务错误）
---
**请求方法**
- GET
- POST
- PUT
- DELETE
- HEAD
- TRACE
- CONNECT
- OPTIONS: 请求查询服务器性能或者查询与资源相关的选项和需求
---
### 5.CORS跨域请求和限制与解决
一句话点醒了我，让我知道什么是跨域，
当你发送一个 跨域请求的时候，其实服务器已经返回给了你想要的内容，但是，但是，这时候，浏览器会审视返回的数据是否满足同源策略（同端口，同协议，同IP）规则，不满足而且返回的数据有没有设置 "Access-Control-Allow-Origin": "*"，允许跨域，这时候就会浏览器忽略掉，注意是被浏览器忽略掉。也就是跨步跨域，是浏览器的规则
这也就解释了为什么，img 标签没有跨域，因为这是浏览器的规则，浏览器规定了 img 跨域不准守跨域
---
> 什么是跨域（我个人的观点）
上网访问资源走的是HTTP协议，HTTP协议只有请求和响应，而数据传输是TCP协议，在网页上报的那些跨域，其实并不是后端没发给你，而是浏览器的同源策略规则导致的，其实只要是你请求的数据，服务器端都会给你，浏览器有跨域，是浏览器的规则而已
这也就解释了服务器端为什么没有跨域...因为跨域是浏览器的限制规则
还有为什么 img script link等标签能跨域...因为还是浏览器的规则，反正数据都拿到了，能不能显示，报不报跨域，还是浏览器说的算
---
**JSONP实现跨域（浏览器允许，link，img，srcipt标签 允许跨域）**
---
### 6.CORS跨域限制以及预请求验证
---
### 7.HTTP长连接
所谓的长连接就是，HTTP请求和响应，是建立在TCP连接之上的（TCP是桥梁），在一个HTTP完成之后，如果不想断开 TCP 连接，还想接着用 HTTP ，那么就需要使用长连接，返回头中具有 Connection: keep-alive
为了提高性能，我们需要并发HTTP连接
---
### 8.数据协商
> 规定客户端发送什么格式的数据，服务器端返回什么格式的数据
**客户端请求的时候**
- Accept：我想要是数据格式
- Accept-Encoding：我想要的编码方式（使用哪种数据压缩）
- Accept-Language：展示的语言
- User-Agent：表示浏览器的一些信息（根据这个我们就能返回移动端的网页，或者PC端的网页）
**服务器端返回的时候**
- Content-Type：
- Content-Encoding：
- Content-Language：
---
### 9.URI-URL和URN
**URI：统一资源标识符（找资源的一种规则）**
用来唯一标识互联网上的信息资源，包括URL和URN
**URL：统一资源定位器**
格式：http[s]://user:pass@host.com:80/path?query=string#hash
**URN：永久统一资源定位符**
在资源移动之后还能被找到，目前还没有非常成熟的使用方案
---
### 10.从输入网址到展示页面，这里面经历了什么？
- 用户输入网址 按下回车
- 浏览器第一件事：先看网络通不通（再深一层就是路由器，网关）（浏览器如何判断网络通不通）
- 网络通的话，浏览器操作 计算机底层发送网络请求的API，向DNS发送解析（因为浏览器不认识域名）
- DNS服务器给浏览器返回了 IP地址，浏览器继续 通过这个IP地址继续发送（因为浏览器和目标地址之间，不可能一条线通着的，中间还有很多透明设备（对于用户是不可见的），网关，路由器等等），经过一些列的转发之后，到达目的地（唯一的服务器）
- 服务器接收到请求之后，经过一些处理，把响应结果返回（字符串）
- 返回过程也经过一些路由，最终返回到 用户浏览器中
**猫 和 路由器**，猫：是和 各个通信商之间的一条链路，路由器：路铺好了，路由器就是告诉怎么走的，就是告诉 DNS服务器
---
### 11.Redirect
你要请求的资源换地方了，如果资源搬到别的地方了，如果之前的链接还在用的话，直接访问会报 404，为了防止这个，可以设置Redirect（状态码报302 临时跳转）
---
### 12.CSP（内容安全策略）
> 内容安全策略（CSP）用于检测和减轻用于 Web 站点的特定类型的攻击，例如 XSS 和数据注入等。该安全策略的实现基于一个称作 Content-Security-Policy 的 HTTP 首部。
- 限制资源获取
- 报告资源获取越权
- default-src 限制全局
- 制定资源类型
- 例如设置返回头："Content-Security-Policy": "default-src http: https:" 就可以使网站不能加载内嵌式脚本，只能加载外部脚本链接，防止了XSS攻击
- "Content-Security-Policy": "default-src \'self'\" 限制只能加载自己网址下的 外部脚本连接，当然还有其他的设置
- 如果发现了非法请求的话，怎么提醒我们呢："Content-Security-Policy": "default-src \'self'\; report-url /接口" 如果触发了这个策略，就会调用 /接口，这时候监听这个接口就行
- 更多去MDN上看吧
---
## 🥝第二部分：缓存
> 缓存机制：浏览器 ---》 无缓存 ---》请求服务器 ---》请求响应，协商缓存
### 缓存头Cache-Control的含义和使用
- 其他
- no-store
- no-transform
---
---
### 缓存验证Last-Modified && Etag
**Last-Modified 上次修改时间**
配合 If-Modified-Since 或者 If-Unmodified-Since 使用（对比上次修改时间以验证资源是否需要更新）
**Etag**
数据签名（对hash计算）
配合 If-Match 或者 If-Non-Match 使用
对比资源的签名判断是否使用缓存
---
## 🍈第三部分：cookie & session & token
cookie 是 服务器返回内容的时候，通过Set-Cookie 这个属性，设置到浏览器中一个字符串的内容，设置了cookie，下次请求就会自动带上，是键值对的属性，可以设置多个
cookie的属性
- max-age和expires设置过期时间
- Secure只在https的时候发送
- HttpOnly 无法通过 document.cookie 访问 cookie
---
**cookies和session**
- cookies 是保存在客户端的小段文本 一般都是服务器端生成返回给客户端浏览器
- session 保存在服务器端，通过唯一的值sessionID来区分每一个用户，sessionID随每个连接请求发送到服务器，服务器更具sessionID来识别客户端，再通过session 的key值 获取 session 值
- 因为http是无状态的（这里的状态不是状态码那些东西，而是指的是服务器端不知道某个请求是哪个浏览器发的这类信息）
---
**token**
- 要下发到你的客户端，也要和
- 验证流程上和session不一样，是一个安全性更高的机制
---
## 🍓第四部分：HTTP2
优势：
- 信道复用：只建立一个TCP就行（可以并发很多HTTP）
- 使用二进制格式进行传输（不是传纯文本了，更加高效，紧凑）
- 对报头压缩，降低开销
- 多路复用，一个网络连接实现并行请求
- 服务器主动推送，减少请求的延迟（跟ajax，websocket）
---
## 🍎第五部分：Nginx
### 1.NGINX基础配置
> 纯粹的HTTP服务
- [Centos7.* 下安装NGINX](https://zhukunpenglinyutong.github.io/1.quickcheck/3.%E8%BF%90%E7%BB%B4/1.%E5%90%84%E7%A7%8D%E8%BD%AF%E4%BB%B6%E5%AE%89%E8%A3%85%E9%80%9F%E6%9F%A5.html#%F0%9F%94%A5centos7-%E4%B8%8B%E5%AE%89%E8%A3%85%E8%BD%AF%E4%BB%B6)
### 2.NGINX代理配置和代理缓存
---
## 🍇第六部分：Notes网站优化
> 先上来三板斧：gzip + CDN + HTTP2
我的网站访问速度，一度的飙升到1分半，这对于一个速查网站来说是致命的
经过我的分析，我发现是我的文件数量太多（130个左右），导致触及到了并发的最大数（谷歌浏览器只能并发6个TCP连接），于是我调整NGINX配置，使其变成 HTTP2 协议
呦，速度变成了1分钟，不错，咦不对，一分钟还是很慢，我接着分析返回的面板发现，并发数解决了，但是返回的网速依旧很慢，于是我查看服务器，发现我的服务器是 1MB/s ，哦，原来是网速限制了网站的速度呀，于是我准备替换成 CDN 静态加速
配置完成CDN + HTTP2，可以了，3s之内访问正常，先这样凑活用吧
---
## 📚参考列表（致敬）
- 《图解HTTP协议》
- [慕课网课程...HTTP协议原理+实践Web开发工程师必学](https://coding.imooc.com/learn/list/225.html)
- [腾讯课堂...前端全栈工程师精英班，个人强烈推荐...](https://ke.qq.com/course/220822)
- [腾讯课堂...前端next学位课程](https://ke.qq.com/course/233919)
- [HTTP报文分析](https://blog.csdn.net/qq_26565861/article/details/80969960)
================================================
FILE: docs/blog/17.项目/1.Node项目仿知乎API.md
================================================
---
title: 1.前端代码质量绪论
date: 2020-01-30 00:00:00
permalink:
tag:
- blog
- 17.项目
---
# 1.Node项目仿知乎API.md
> 注意此处：此处内容需要重新梳理
---
## 🔥序章
**本项目采用 Koa2 + mongoose 作为基础，采用JWT做鉴权（Token），是我熟悉Koa2 + MongoDB开发的入门项目**
- 收获一：抽离出一个 Koa + mongoose 的MVC简单项目 [项目地址](https://github.com/zhukunpenglinyutong/Koa-api-template)
- 收获二：加深了 RESTful API 的规范认知，见下面的笔记
---
## 🌴第一章：认识RESTful API
---
### 1.REST是什么以及它的6个限制
- **什么是REST**：REST是一种架构风格，用来创建网络服务
- **为何叫REST**：英语全称是 Representational State Transfer
- Representational：数据表示形式，可以用很多种，一般用JSON
- State：当前状态或者数据
- Transfer：数据传输
**通过字面意思来看是不好理解的，或者说不全面的，但是我们可以通过REST的六个限制来更深刻的认识REST**
- 客户-服务器（Clent-Server）（这个解释非常的好🔥）
- 关注点分离（服务端关注数据存储，提升了简单性；前端专注用户界面，提高了可移植性）
- 简单性解释：过去服务端端还需要渲染页面，现在只需要写好数据存储就好了
- 可移植性解释：调用接口，渲染平台的能力，很多平台都支持这种操作
- 无状态（Stateless）
- 所有用户会话信息都保存在客户端
- 每次去请求必须包括所有信息，不能依赖上下文信息（例如小说翻页，你想请求下一页，服务器不知道下一页是啥，需要你确定的请求第几页才行）
- 🔥无状态的好处：服务端不用保存会话信息，提升了简单性，可靠性，可见性
- 缓存（Cache）
- 所有服务端响应都要标记可缓存或者不可缓存
- 缓存的好处：减少前后端交互，提升了性能
- 统一接口（Uniform Interface）🔥
- 接口设计尽可能统一通用，提升了简单性，可见性
- 接口与实现解耦，使前后端可以独立开发迭代（接口定好之后，前端可以自己mock数据，不用等后端开发完成）
- 分层系统（Layered System）
- 每层只知道相邻的一层，后面隐藏的就不知道了
- 客户端不知道是在和代理还是真正的服务器通信
- 其他层：安全层，负载均衡层，缓存层等（阿里巴巴有个机构专门做这种层的，不用关系业务逻辑）
- 按需代码（Code-On-Demand可选）（不是很重要）
- 客户端可以下载运行服务端传过来代码（例如JS）
- 减少一些功能，简化客户端
---
### 2.统一接口限制（接口需要统一成什么样子？）
- 资源的标识
- 资源是任何可以命名的的事物，比如用户，评论等
- 每个资源通过URL被统一的标识（例如：https://api.github.com/users）
- 通过表述来操作资源（这个我懂，我就是这样用的）
- 客户端不能直接操作（比如SQL）服务端资源
- 客户端应该通过表述（比如JSON）来操作资源
- 自描述信息
- 每个消息（请求或者响应）必须踢狗足够的信息让接受者理解
- 例如：你可以需要传媒体类型（application/json,application/xml）
- 例如：你需要规定请求类型：GET,POST,DELETE
- 例如：响应是否被缓存：Cache-Control
- 超媒体作为应用状态引擎（没懂）
- ...
后记：GitHub api 有 v3，也就是 REST API,还有 v4 GraphQL api 学完v3可以看下v4
---
### 3.RESTful API简介
- 字面解释是：符合REST架构风格的API
- RESTful API 具体长什么样子呢？
- 基本的URL，例如:https//api.github.com/users
- 标准HTTP方法，例如 GET,POST,PUT,PATCH,DELETE
- 传输的数据媒体类型，如JSON，XML
- 现实举例
- GET /users | 获取user列表
- GET /users/12 | 查看某个具体的user
- POST /users | 创建一个user
- PUT /users/12 | 更新user为12的用户
- DELETE /users/12 | 删除user为12的用户
---
### 4.RESTful API设计最佳实践（规范化，对我很重要）🔥
- 请求设计规范 ✅
- URL要使用名词，尽量用复数，如 /users
- URL使用嵌套表示关联关系，如 /users/12/repos/5
- 使用正确的HTTP方法，如 GET/POST/PUT/DELETE
- 不符合增删改查的情况下：POST/...
- 响应设计规范 ✅
- 查询（每一个返回值都是可以被查询的，也就是我们加上返回条件，就能筛选我们想要的结果）
- 分页
- 字段过滤（完整的字段假如有十个，这个可以规定我想要的字段）
- 状态码
- 错误处理（如果错了，要规范化的返回错误信息）
- 安全（这个也是有收获的）✅
- 使用HTTPS（使用HTTP容易被篡改，加上一些广告什么的，很烦）
- 鉴权（需要登录才能请求某些接口）
- 限流（防止某些坏人刻意占用接口）
- 开发者优化
- 文档
- 超媒体
---
## 🌳第二章：用Koa 说 Hello World
### 1.Koa简介
- 一句话简介：基于Node.js的下一代web框架
- 基于Node.js：说明koa是一个Node.js模块
- 下一代：蚕食第一代Express市场
- web框架：不是命令行工具，不是算法
- 官网详细介绍
- 由Experss幕后人原班人马打造
- Web应用和API开发领域
- 更小，更富有表现力，更健壮
- 利用async函数，丢弃回调函数
- 增强错误处理：try catch
- 没有捆绑任何中间件
- 快速而愉快的编写程序（画的一个大饼）
---
### 2.安装搭建第一个Koa程序
- 初始化目录：npm i koa --save
- 使用：建立 app.js，让koa返回一个 hello world
```js
const Koa = require('koa');
const app = new Koa();
//use() 方法里面可以传递函数，这个函数就是我们说的中间件
app.use( ctx => {
ctx.body = "Hello World";
});
app.listen(3000)
```
---
### 3.Koa中间件与洋葱模型
- async/await 示例（当一个请求依赖上个请求完成的情况下，需要用嵌套，这个非常的不优雅）
```js
// 这个可是解决了我不能在任何地方用 async 的方法
(async () => {
const res1 = await fetch('...') // 嵌套一
const res2 = await fetch('...') // 嵌套二
})
```
- **学习编写Koa中间件**
```js
const Koa = require('koa');
const app = new Koa();
//use() 方法里面可以传递函数，这个函数就是我们说的中间件,这是一个中间件，执行多个中间件，必须要写 next 参数 🔥🔥🔥
app.use( async (ctx, next) => {
await next();
ctx.body = "Hello World";
});
app.use( ctx => {
console.log('我也是中间件，我要先执行')
});
app.listen(3000)
```
**洋葱模型**
---
## 🎄第三章：Koa 和 RESTful API 的最佳实践
### 1.路由简介
- 路由决定了不同的URL是如何被 不同执行的
- 在Koa中，路由的本质是一个中间件
- 思考，如果没有路由会怎么样？请求和响应都没法 差异化，请求和返回的结果都一样，就跟上面我们返回的 Hello World一样，这.....是不行的
- 路由存在的意义：处理不同的URL，处理不同的http请求，解析URL上的参数
---
### 2.自己编写Koa路由中间件
- 目标实现功能：处理不同的URL，处理不同的http方法，解析URL上的参数
```js
const Koa = require('koa');
const app = new Koa();
//use() 方法里面可以传递函数，这个函数就是我们说的中间件,这是一个中间件，执行多个中间件，必须要写 next 参数
app.use( ctx => {
// ① 处理不同的URL：ctx.url 表示上下文的URL，ctx表示上下文
// ② 处理不同的http方法：ctx.method
// ③ 解析URL上的参数
ctx.body = `路径：${ctx.url}，请求类型：${ctx.method}, 参数：${getURLParameters(ctx.url)}`
});
// 获取url中的参数
function getURLParameters(url) {
const params = url.match(/([^?=&]+)(=([^&]*))/g)
return params?params.reduce(
(a, v) => (a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1), a), {}
):[]
}
app.listen(3000)
```
---
### 3.使用Koa-router实现路由
- 安装：npm i koa-router --save
**基本使用**
```js
const Koa = require('koa');
const app = new Koa();
const Router = require('koa-router');
const router = new Router;
// 注册路由
router.get('/', ctx => {
ctx.body = '这是首页'
})
// 解析URL参数
router.get('/user/:id', ctx => {
ctx.body = `这是用户${ctx.params.id}`
})
// 注册router中间件（要用router中的routes()方法）
app.use(router.routes())
app.listen(3000)
```
**路由前缀和多中间件使用（这里使用不规范，整理以后比较规范的结构）**
---
### 4.HTTP options 方法的用（额，对我目前没太大用，就是增加些知识广度）
- 🔥options 是HTTP请求类型中的一种（GET,POST......）
- 这是一道常考面试题，还可以帮助理解 koa-router 的 allowedMethods 的作用
- **🔥options 作用**
- 检测服务器所支持的请求方法
- CORS中的预见请求
- **allowedMethods 作用**
- 响应 options 方法，告诉所支持的请求方法
- 相应的返回 405（不允许）和 501（没实现）
---
### 🔥5.增删改查应该返回什么响应？
**这里听说是最佳实践，但是我观点是，我再看看，选择适合自己的**
```js
const Koa = require('koa');
const app = new Koa();
const Router = require('koa-router');
const router = new Router;
// 增
router.post('/', ctx => {
ctx.body = [{}] // 返回新建的数据
})
// 删
router.delete('/user', ctx => {
ctx.status = 204 // 返回状态码 204，表示没有内容，但是成功了
})
// 改
router.put('/user', ctx => {
ctx.body = [{}] // 返回修改后的数据
})
// 查
router.get('/user', ctx => {
ctx.body = [{},{},{}] // 返回数据列表
})
// 注册router中间件（要用router中的routes()方法）
app.use(router.routes())
app.listen(3000)
```
---
## 🌵第四章：koa框架的控制器以及设计更合理的目录结构
### 1.控制器简介
- 什么是控制器？拿到路由分配的任务，并执行
- 在Koa中，控制器是一个中间节
- 为什么要用控制器
- 获取http请求参数
- 处理业务逻辑（获取数据，处理数据，存储数据...）
- 根据情况发送http响应
- 获取http请求参数
- （查询字符串）Query String，例如 ?q=keyword
- （路由参数）Router Params，如 /users/:id （这个一般是必选的，而且可能有多个路由参数，我们公司也差不多是这样的）
- 🔥（请求体）Body，如 { name: '朱昆鹏' }（一般用json）（From也是很常用的请求体）
- （请求头）Header，如 Accept,Cookie
---
**🔥编写控制器最佳实践**
- 每个资源的控制器放到不同的文件夹下
- 尽量使用类+类方法的形式编写控制器（我是一个接口就是一个函数，他这个的思想是，写成一个类，然后我的这些接口都是类方法，这样这些接口可以使用类的公共内容）
- 严谨的错误处理
---
### 2.获取http请求参数
- 请求参数有：获取 query,获取 router params，获取 body, 获取 header
- 通过断点调试，我发现 ctx 这个上下文上挂载的是我需要好好看看的各种东西，http参数都在这里面写着呢，名字也是通俗易懂
- 🔥body这是个请求体，但是 koa是没有解析请求体的功能的（ctx上没有解析body的内容，ctx.body 是设置返回的，和这个没关系），需要加一个中间件
- 安装解析请求体中间件：npm i koa-bodyparser --save
```js
const bodyparser = require('koa-bodyparser')
// ......
app.use(bodyparser())
// 🔥使用：ctx.request.boay
```
---
### 3.发送HTTP响应
- 如何发送status，body，header
```js
// ......
router.get('/user', ctx => {
ctx.status = 200 // 设置 status
ctx.body = '...' // 设置 body
ctx.set('Allow', 'GET,POST') // 设置响应头
})
```
---
### 🔥4.更合理的目录结构
- 路由，控制器都放在一个目录里
```js
// 🇨🇳 routes 文件夹 /users.js文件
const Router = require('koa-router');
const router = new Router; // new Router({prefix:'user'}) 这样可以设置路由前缀，也是实用的
// 查
router.get('/user', ctx => {
ctx.body = [{},{},{}] // 一般返回数据列表
})
module.exports = router // 导出
// 🇨🇳 写一个 routes/index.j 用来批量注册路由
const fs = require('fs')
module.exports = app => {
fs.readdirSync(__dirname).forEach(file => {
if (file === 'index.js') {return;}
const route = require(`./${file}`)
app.use(route.routes()).use(route.allowedMethods())
})
}
// 🇨🇳 app.js 中使用批量注册
const routing = require('./app/routes')
routing(app)
// 🇨🇳 建立 controllers 文件夹，在里面建立 users.js 🔥🔥🔥（这个定义类和使用类的方式，我喜欢，GET到了，确实比我写的Express正规）
class Users {
// 获取用户列表
getUsers (ctx) {
ctx.body = '获取了用户列表'
}
}
module.exports = new Users()
// 🇨🇳在路由中使用
const { getUsers } = require('../controller/users') // 这是ES6语法，更简单
// 获取所有列表
router.get('/users', getUsers)
module.exports = router // 导出
```
---
## 🌱第五章：多种方案实现错误处理机制
### 1.错误处理简介
- 什么是错误处理？错误处理是编程语言或计算机硬件中的一种机制，用于处理软件或信息系统中出现的异常状况
- 异常状况有哪些？
- 运行时错误：都返回500（代表服务器内部错误）
- 逻辑错误：找不多（404），先决条件失败（412），无法处理的
- 为什么要用错误处理？
- 防止程序挂掉
- 告诉用户错误信息
---
### 2.koa自带的错误处理
- 如果请求的接口不存在的话，就会返回 404
- 如果服务器内部语法错误，或者其他错误，就会返回 500
```js
// 手动抛出
ctx.throw(404, '返回报错文本信息')
```
**❣️但是这里返回的都是文字，我们想返回JSON，这样才格式统一**
---
### 3.自己编写错误处理中间件
- 写到所有中间件的最前面
```js
// 原理就是捕捉下一个中间件的报错，然后返回状态码和内容（JSON格式）
app.use(async (ctx, next) => {
try {
await next()
} catch (err) {
ctx.status = err.status || err.statusCode
ctx.body = {
message: err.message
}
}
})
```
---
### 4.使用 koa-json-error进行错误处理
- 安装：npm i koa-json-error --save
```js
// app.js
const error = require('koa-json-error')
app.use(error())
// 堆栈信息都返回了，这里可以配置
// {
// "message": "Not Found",
// "name": "NotFoundError",
// "stack": "NotFoundError: Not Found\n at Object.throw (/Users/zhukunpeng/Desktop/RESU ful API/node_modules/koa/lib/context.js:97:11)\n at /Users/zhukunpeng/Desktop/RESU ful API/node_modules/koa-json-error/lib/middleware.js:52:58\n at processTicksAndRejections (internal/process/task_queues.js:89:5)",
// "status": 404
// }
```
**🔥设置环境变量，让我们在开发时候错误处理返回堆栈信息，生产环境不返回（未完成）**
- 安装：npm i cross-env --save-dev
---
### 5.使用koa-parameter进行参数校验
- 安装：npm i koa-parameter --save
```js
// app.js
// 这个通常是校验请求体
const parameter = require('koa-parameter')
app.use(parameter(app)) // 参数校验，加入app的话，就能在全局使用了
// controller/users.js
// 新建用户
async createUser(ctx) {
ctx.verifyParams({
name: {type: 'string'}
})
const { name } = ctx.request.body
const user = await new User(ctx.request.body).save()
ctx.body = user
}
```
**如果错了的话**
**还有更多的限制条件，例如必选，例如什么类型，这个都可以查阅**
---
## 🌿第六章：koa + MongoDB 实现增删改查
### 1.NoSQL简介
- 不属于关系型数据库的哪一类 被称为 NoSQL
- NoSQL数据库的分类
- 列存储（HBase）
- 🔥文档存储（MongoDB）（所谓文档存储就是按照JSON存储）
- key-value 存储（Redis）(通常用于缓存和消息通信)
- ......
- 为什么要用 NoSQL
- 简单（没有原子性，一致性，隔离性等复杂规范）（关系型数据库要多个机器协同工作，必须要符合这些规范，这样就增加了很多通信）
- 便于横向拓展（因为简单，没有规范，所以便于拓展）
- 适合超大规模的数据存储（还是因为拓展）
- 很灵活的存储复杂结构的数据
---
### 🔥2.mongoose 连接 MongoDB
- 安装：npm install mongoose --save
```js
// 引入
const mongoose = require('mongoose')
// 使用
mongoose.connect('mongodb://47.95.0.108:27017/test', {useNewUrlParser: true}, () => {
console.log('连接成功')
})
mongoose.connection.on('error', console.error);
```
---
### 3.设计用户模块的Schema
- 这里的Schema是JSON的，写完之后，我们生成一个 Model
```js
// 我们在 /app/model/users.js 建立一个model文件夹，在里面建立users.js
const mongoose = require('mongoose')
const { Schema, model } = mongoose;
const userSchema = new Schema({
name: { type: String, required: true }, // 第一个表示是字符串这没啥，第二个意思是必写项,当然还有很多设置，例如 default: ** 这是设置默认值的，当用户没传的时候，这个就生效，更多请看百度
})
module.exports = model('User', userSchema); // 前面User会在MongoDB里面建立一个集合
```
---
### 🔥4.MongoDB实现用户的增删改查
```js
// 引入
const User = require('../model/users')
class UsersCtl {
// 查询所有用户（find里面也能传正则哦）
async findUser(ctx) {
ctx.body = await User.find()
}
// 根据ID查询特定用户（findById）
async findById(ctx) {
const user = await User.findById(ctx.params.id)
if (!user) { ctx.throw(404, '用户不存在')}
ctx.body = user
}
// 新建用户（new + save()）
async createUser(ctx) {
const user = await new User(ctx.request.body).save() // 这里有两个细节，一个是需要 new，另一个是需要 .save()
ctx.body = user
}
// 修改（findByIdAndUpdate）
async updateUser(ctx) {
const user = await User.findByIdAndUpdate(ctx.params.id, ctx.request.body)
if (!user) { ctx.throw(404, '用户不存在')}
ctx.body = user // 注意：这里修改的是返回之前的信息
}
// 删除（findByIdAndRemove）
async deleteUser(ctx) {
const user = await User.findByIdAndRemove(ctx.params.id)
if (!user) { ctx.throw(404, '用户不存在')}
ctx.status = 204 // RESUful API 规范
}
}
module.exports = new UsersCtl()
```
---
## 🎋第七章：JWT在Koa框架中实现用户的认证与授权
### 1.session简介
- session是一种非常重要，常见的，用户认证与授权
**session工作原理**
- 先登录，然后后端返回一个session id，然后前端再请求非登录的一些信息的时候都需要带上这个，否者报错
- session的优势
- 相比 JWT，最大的优势就在于可以主动清除session
- session保存在服务器端，相对较为安全
- 结合 cookie 使用，较为灵活，兼容性较好
- session的劣势
- cookie + session 在跨域场景下表现并不好
- 如果是分布式部署，需要做多机共享session机制 🔥
- 基于cookie的机制很容易被CSRF
- 查询 session 信息可能会有数据库查询操作
- session相关概念介绍
- 主要放到服务器端，相对于安全
- cookie 主要放到客户端，并不是很安全
- sessionStronge：仅在当前会话下有效，关闭页面或者浏览器后被清除
- localstorage：除非被清除，否者永久保存
---
### 2.JWT简介
- 什么是JWT？（JSON Web Token 是一个开放标准（RFC 7519））
- 定义了一种紧凑且独立的方式，可以将各方之间的信息作为JSON对象进行安全传输
- 该信息可以验证和信任，因为是经过数字签名的
- JWT的构成：头部（Header）, 有效载荷（Payload）,签名（Signature）
**有效载荷介绍（这个挺重要的）**
**JWT原理**
---
### 3. JWT vs session
- 可拓展性
- session 一般都是存到 redis 这种数据库中，你可以需要做一个中心式的session存储系统才行，否则没办法共享
- 基于 token 基于 令牌的这种方式是无状态的，我们可以轻松的拓展（听着怎么感觉这个很溜 🔥）
- 安全性（...讲了四个，有空看下吧）
- RESTful API（要求是无状态的，这就用JWT）
- 性能（各有利弊）
- JWT可能性能不好，因为 session 更小
- session 毕竟放到客户端的是一段 id，传到服务器端，服务器端还要根据这个id拿真正的 session 数据，也是有性能消耗的
- 时效性
- JWT 必须等到过期才更新，不能主动销毁
- session 可以主动销毁
---
### 4.在 Node.js 中使用 JWT
- 安装：npm i jsonwebtoken
- 签名：
- 逆向验证：
```js
const jwt = require('jsonwebtoken');
// 签名（参数一，就是传过来的参数，参数二 是秘钥）
token = jwt.sign({name: 'zhu'}, 'test')
// 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1lIjoiemh1IiwiaWF0IjoxNTYxNzI0NTUzfQ.-JVehTSs3neUbRzF__9lTsXEul_rvA5WYNbpx702Eo4'
// 验证（参数一，前端传过来的token，参数二 秘钥）
jwt.verify(token, 'test')
```
---
### 5.实现用户注册
- 设计用户 Schema
- 编写保证唯一性的逻辑
```js
// 设计用户 Schema
const userSchema = new Schema({
// 这个是自动生成的，但是每次都返回不好，所以我们这里给他设置下，让它不返回
__v: {type: Number, select: false},
name: { type: String, required: true }, // 第一个表示是字符串这没啥，第二个意思是必写项
// select 的意思是不返回，这是密码，如果能被请求到，那是不是很恐怖🙀
password: {type: String, required: true, select: false}
})
// 新建用户（有个查询用户名是否重复）
async createUser(ctx) {
const { name } = ctx.request.body
const repeatedUser = await User.findOne({ name }); // 查询是否有这个用户了
if (repeatedUser) ctx.throw(409, '用户已经存在');
const user = await new User(ctx.request.body).save()
ctx.body = user
}
```
---
### 6.实现登录并获取 Token
- 登录接口的设计（因为它不属于用户增删改查中的一种）
- 使用 jsonwebtoken 生成 token
```js
// 登录
async login(ctx) {
// 校验用户名和密码
const user = await User.findOne(ctx.request.body)
if (!user) { ctx.throw(401, '用户名或者密码不正确')}
// 登录正确，生成token
const { _id, name } = user;
const token = josnwebtoken.sign({ _id, name }, key, {expiresIn: '1d'}) // 参数一 账号密码，参数二 秘钥，参数三 配置，这里配置的是过期时间 1d 1天
ctx.body = { token }
}
```
---
### 7.自己编写中间件实现用户的认证和授权
---
### 8.用koa-jwt中间件实现用户的认证和授权
- 安装：npm i koa-jwt --save
```js
// 在路由 /routes/users.js
const jwt = require('koa-jwt');
const auth = jwt({ secret: 'zhukunpeng'}) // 传入秘钥
router.post('/user/:id', auth, checkOwner, findUserId) // 根据ID 查询特定用户 数据
// /controller/users.js
// 权限校验
async checkOwner(ctx, next) {
if (ctx.params.id !== ctx.state.user._id) {ctx.throw(403, '没有权限查看')}
await next();
}
```
---
## 🐲第八章：上传图片模块
### 1.上传图片需求分析
- 用户头像
- 封面图片
- 问题和回答中的图片
- 话题图片
---
- 基础功能：上传图片，生成图片链接
- 附加功能：限制上传图片的大小和类型，生成高中低三种分辨率的图片链接，生成CDN
- 上传图片的技术方案
- 阿里云OSS等云服务，推荐生成环境下使用
- 直接上传到服务器，不推荐在生产环境下使用，因为不稳定
---
### 2.使用 koa-body 中间件获取上传的文件
- 之前我们用的是 koa-bodyparser ，但是这个不支持文件，只支持 JSON 和... ，所以我们用 koa-body 这个中间件
- 安装：npm i koa-body --save
```js
// app.js && 建立 public/uploads 用来盛放上传文件
const bodyBody = require('koa-body')
app.use(bodyBody({
multipart: true, // 启用文件传输
formidable: {
uploadDir: path.join(__dirname, 'app/public/uploads'), // 文件上传路径
keepExtensions: true, // 保留拓展名
}
})) // 解析 请求body中的 JSON
// 建立 controller/home.js
class HomeCtl {
// 上传文件
upload(ctx) {
const file = ctx.request.files;
ctx.body = {
message: '上传成功'
}
}
}
module.exports = new HomeCtl()
// 建立 router/home.js
const Router = require('koa-router');
const router = new Router; // new Router({prefix:'user'}) 这样可以设置路由前缀，也是实用的
const { upload } = require('../controller/home');
router.post('/upload', upload)
module.exports = router
```
---
### 3.使用 koa-static 中间件生成图片链接
- 安装：npm i koa-static --save
```js
// app.js
const koaStatic = require('koa-static')
app.use(koaStatic(path.join(__dirname, 'app/public/'))) // 生成上传图片链接，这里还启动了静态服务，直接代理我们设置的文件路径
// controller/home.js
const path = require('path')
class HomeCtl {
// 上传文件
upload(ctx) {
const file = ctx.request.files.file;
const basename = path.basename(file.path)
ctx.body = { url: `${ctx.origin}/uploads/${basename}`}
}
}
module.exports = new HomeCtl()
```
---
### 4.编写前端页面上传文件
```html
```
**返回结果**
```js
{
"url": "http://localhost:3000/uploads/upload_34ca030139713427223a1c8b604b603a.jpg"
}
```
---
## 🍀第九章：个人资料模块
---
### 1.个人资料的 schema 设计
```js
// module/users.js
const mongoose = require('mongoose');
const { Schema, model } = mongoose;
const userSchema = new Schema({
__v: {type: Number, select: false},
name: { type: String, required: true }, // 第一个表示是字符串这没啥，第二个意思是必写项
password: {type: String, required: true, select: false},
avatar_url: { type: String }, // 头像的URL
gender: { type: String, enum: ['male', 'famale'], default: 'male' }, // 性别，这里后面 enum 是mongoose的可枚举类型，枚举的值是那两个, 后面的是默认值 male
handline: { type: String }, // 一句话介绍
loacations: { type: [{type: String}]}, // 居住地，类型是字符串数组
employments: { // 职业经历
type: {
company: { type: String }, // 公司
job: { type: String } // 职位
}
}
})
module.exports = model('User', userSchema); // 前面User会在MongoDB里面建立一个集合
```
---
### 2.个人资料的参数校验
```js
// 还是有一些和 mongoose 不一样的地方，这里要注意
ctx.verifyParams({
name: { type: 'string' },
avatar_url: { type: 'string', required: false }, // required: false表示非必选
gender: { type: 'string', required: false },
handline: { type: 'string', required: false },
loacations: { type: 'array', itemType: 'string', required: false }, // itemType这是表示数组里面的项是字符串类型，这和mongoose不一样
employments: { type:'array', itemType: 'object', required: false }
})
```
---
### 🔥3.RESTful API 最佳实践 - 字段过滤
- 有哪些字段显示，哪些字段不显示，有种GrhpQL的感觉
```js
// 通过 select: false 我们可以隐藏一些返回字段
const userSchema = new Schema({
__v: {type: Number, select: false},
name: { type: String, required: true }, // 第一个表示是字符串这没啥，第二个意思是必写项
password: {type: String, required: true, select: false},
avatar_url: { type: String }, // 头像的URL
gender: { type: String, enum: ['male', 'famale'], default: 'male' }, // 性别，这里后面 enum 是mongoose的可枚举类型，枚举的值是那两个, 后面的是默认值 male
handline: { type: String, select: false}, // 一句话介绍
loacations: { type: [{type: String}], select: false}, // 居住地，类型是字符串数组
employments: { // 职业经历
type: {
company: { type: String }, // 公司
job: { type: String } // 职位
},
select: false
}
})
// /controller/users.js（主要就是借助mongoose 的 select方法，拼接成 +...+...这种形式）
// 问题就是 现在一个可以，但是两个就不行了
// 查询用户
async findUser(ctx) {
const { fields } = ctx.query; // 这是以分号隔开的
let selectFidlds = null;
// 将分号隔开的转为 +...+ 这种形式
if (fields) selectFidlds = fields.split(';').filter(f => f).map(f => '+' + f).join('');
ctx.body = await User.find().select(`${selectFidlds}`)
}
```
---
## 🌳第十章：关注与粉丝模块
### 1.关注与粉丝的 schema 设计
**功能点**
- 关注，取消关注
- 获取关注人，粉丝列表（用户-用户 多对多关系）
---
```js
const userSchema = new Schema({
// ......
following: { // 关注
type: [ { type: Schema.Types.ObjectId, ref: 'User' } ], // 非常好的一个技巧，但是我不太懂
select: false
}
})
```
---
### 2.RESTful API 风格的关注与粉丝接口
```js
// controller/users.js
// 获取用户的关注者
async listFollowing(ctx) {
const user = await User.findById(ctx.params.id).select('+following').populate('+following')
// 获取的关注者是用户的ID，我们正常来说需要遍历这个ID，才能拿到每个关注者的头像和其他信息
// 但是 model/users.js 里面的结构那么写，让我们可以使用 populate() 这个快捷方法了
if (!user) {ctx.throw(404, '用户不存在')}
ctx.body = user.following
}
// 用户-关注用户
async follow(ctx) {
const me = await User.findById(ctx.state.user._id).select('+following')
if (!me.following.map(id => id.toString()).includes(ctx.params.id)) {
me.following.push(ctx.params.id) // 把数组放到的ID放到里面
me.save()
}
ctx.status = 204
}
// 用户-取消关注
async unfollow(ctx) {
const me = await User.findById(ctx.state.user._id).select('+following')
const index = me.following.map(id => id.toString()).indexOf(ctx.params.id)
if (index > -1) {
me.following.splice(index, 1)
me.save()
}
ctx.status = 204
}
// 用户-获取粉丝
async listFollowers(ctx) {
const users = await User.find({following: ctx.params.id})
ctx.body = users
}
// routes/users.js
router.get('/user/:id/following', listFollowing) // 获取某个用户 关注了谁
router.get('/user/:id/followers', listFollowers) // 获取某个用户 关注了谁
router.put('/user/following/:id', auth, follow) // 用户-关注用户
router.delete('/user/following/:id', auth, unfollow) // 用户-取消关注
```
---
### 3.编写校验用户存在与否的中间件
**在关注，和取消关注之前，校验一下用户存在与否**
```js
// controller/users.js
// 检测用户是否存在（中间件）
async checkUserExist(ctx, next) {
const user = await User.findById(ctx.params.id)
if (!user) { ctx.throw(404, '用户不存在')}
await next()
}
// routes/users.js（添加）
router.put('/user/following/:id', auth, checkUserExist, follow) // 用户-关注用户
router.delete('/user/following/:id', auth, checkUserExist, unfollow) // 用户-取消关注
```
---
## 🌴第十一章：话题模块
### 1.话题增改查接口
**功能模块功能点**
- 话题的增改查（没有删，因为话题关联太多）
- 分页，模糊查询
- 用户属性中的话题引用
- 关注/取消关注话题，用户关注的话题列表
**设计Schema**
```js
// 建立新文件 modle/topics.js
const mongoose = require('mongoose');
const { Schema, model } = mongoose;
const topicSchema = new Schema({
__v: {type: Number, select: false},
name: { type: String, required: true }, // 话题名称
avatar_url: { type: String }, // 话题图片
introduction: { type: String, select: false}, // 话题简介
})
module.exports = model('Topic', topicSchema);
```
**写Controller**
```js
// 建立新文件 controller/topics.js
const Topic = require('../model/topics')
class TopicsCtl {
// 获取话题列表
async find(ctx) {
ctx.body = await Topic.find();
}
// 查询特定话题
async findById(ctx) {
// const { fields } = ctx.query
// const selectFields = fields.split(';').filter(f => f).map(f => ' +' + f).join('')
// const topic = await Topic.findById(ctx.params.id).select(selectFields)
const topic = await Topic.findById(ctx.params.id)
ctx.body = topic
}
// 创建话题
async create(ctx) {
ctx.verifyParams({
name: { type: 'string', required: true },
avatar_url: { type: 'string', required: false },
introduction: { type: 'string', required: false }
})
const topic = await new Topic(ctx.request.body).save()
ctx.body = topic
}
// 修改话题
async update(ctx) {
ctx.verifyParams({
name: { type: 'string', required: false },
avatar_url: { type: 'string', required: false },
introduction: { type: 'string', required: false }
})
const topic = await Topic.findByIdAndUpdate(ctx.params.id, ctx.request.body)
ctx.body = topic
}
}
module.exports = new TopicsCtl()
```
**写Routes**
```js
// 建立文件 routes/topics.js
const Router = require('koa-router');
const router = new Router; // new Router({prefix:'user'}) 这样可以设置路由前缀，也是实用的
const { find, findById, create, update } = require('../controller/topics');
const jwt = require('koa-jwt');
const auth = jwt({ secret: 'zhukunpeng'}) // 传入秘钥
router.get('/topics', find) // 查询所有话题
router.post('/topics', auth, create) // 创建话题
router.get('/topics/:id', findById) // 获取特定话题
router.patch('/topics/:id', auth, update) // 修改特定话题
module.exports = router
```
---
### 🔥2.分页实现
**根据查询字符串来限制列表的返回值**
```js
// 获取话题列表 的分页逻辑（主要是算法）
async find(ctx) {
const { per_page = 10 } = ctx.query
const page = Math.max(ctx.query.page * 1, 1) - 1 // 当前是第几页
const perPage = Math.max(per_page * 1, 1) // 每页显示几条
// mongoose limit() 可以获取几个，skip() 可以从第几个开始，虽然没有 limit(x, y) 这种好，但是也行
ctx.body = await Topic.find().limit(perPage).skip(page * perPage);
}
// 示例：http://localhost:3000/topics?page=1&per_page=2
```
---
### 🔥3.模糊搜索（关键词搜索）
**借助mongoose语法糖，一行代码就能实现：在find() 里面写正则**
```js
// ......
ctx.body = await Topic
.find({ name: new RegExp(ctx.query.q) })
.limit(perPage).skip(page * perPage);
// mongoose使用多个字段的模糊
// .find({ $or: [{name: ...}, {...}] })
```
---
### ❣️4.用户属性中的话题引用
**没太懂，但是这里 type: Schema.Types.ObjectId, ref: 'Topic' 方法是一种引用，类似于MySQL的外链，多表查询用的那种**
---
### 5.关注话题接口（略...）
---
## 🌱第十二章：问题模块
### 1.问题的增删改查，用户的问题列表（用户-问题 一对多关系）
一个用户可以提多个问题，但是一个问题只属于一个用户
**建立 Schema**
```js
const mongoose = require('mongoose');
const { Schema, model } = mongoose;
const questionSchema = new Schema({
__v: {type: Number, select: false},
title: { type: String, required: true }, // 问题标题
description: { type: String }, // 描述
questioner: { type: Schema.Types.ObjectId, ref: 'User', required: true, select: false}, // 提问者，这个设计是实现 一对多的核心
})
module.exports = model('Question', questionSchema);
```
**实现 Controller**
```js
```
**❣️这里我突然有一个想法，就是 可以抽象出一个基本类，上面挂载分页方法，模糊查询方法等，甚至增删改查接口也能抽离成公共的，下面的类谁想用了，就直接用继承，然后使用了**
---
### 2.话题-问题 多对多关系
- 思路：两个列表，就是这两个列表都能成为对方的列表
---
## 🌿第十三章：答案模块
### 1.答案模块二级嵌套的增删改查接口
---
## 🌾第十四章：评论模块
---
## 🌿第十五章：项目上线，部署
### 1.用NGINX实现端口转发
**一般服务器很多端口都没开，一般80端口开了，NGINX 就可以代理80端口，然后访问到内网的具体端口上**
- 语法检查：nginx -t（主要修改nginx.conf）
- 重启：service nginx restart
**Postman生成文档**
- 还是很漂亮的
---
## 📚参考列表（最后更新2019.6.23 23:23）
- [慕课网课程-Node.js开发仿知乎服务端 深入理解RESTful API](https://coding.imooc.com/learn/list/354.html)
================================================
FILE: docs/blog/18.其他/1.爬虫.md
================================================
---
title: 1.爬虫
date: 2020-05-06 00:00:00
permalink:
tag:
- blog
- 18.其他
---
## 🐛 1.爬取内容
爬虫的几种方式
- 1.通过API获取信息
- 2.通过获取网页源码（通过 require 获取网页返回体 body，然后用正则提取 (.+?) ），但是现在网站越来越复杂，有的还需要登录，甚至还有防护
- 3.目前主流的是：puppeteer控制chromium来进行抓取数据（这个工具可以通过api来操作浏览器行为，通过这个工具，可以用来写爬虫，自动签到，网页截图，生成paf，自动化测试等）
```js
// 示例一：博客截图
let puppeteer = require('puppeteer'); // 记住这里一定要加 ;
(async function() {
const browser = await puppeteer.launch({
headless: false // 是否打开一个无页面浏览器
});
const page = await browser.newPage(); // 打开一个空白页面
await page.goto('https://notes.itzkp.com'); // 在地址栏中输入博客地址
await page.screenshot({path: 'zkp.png'}); // 把当前页面截图，保存到zkp.png中
await browser.close(); // 关闭浏览器
})();
```
```js
// 示例二：掘金文章内容获取
let puppeteer = require('puppeteer');
let url = 'https://juejin.cn/user/2788017219055175/posts';
(async function() {
const browser = await puppeteer.launch({
headless: false // 是否打开一个无页面浏览器
});
const page = await browser.newPage(); // 打开一个空白页面
// 在地址栏中输入博客地址
await page.goto(url, {
waitUntil: 'networkidle2'
});
// 获取指定节点属性
const titles = await page.$$eval('a.title', element => {
return element.map(item => item.innerHTML)
})
await browser.close(); // 关闭浏览器
})();
```
---
## 🐒 2.数据持久化
> 抓的数据不进行持久化就没有意思
- 根据爬取的规则和策略，把爬取到的数据存到数据库中
- 如果要兼容不同的来源，需要对数据进行格式化
- 为不同的数据建立索引方便检索
---
## 🐣 3.数据订阅
> 用户可以按照自己的兴趣和需要进行定制内容
---
## 🦑 4.分发
有新数据的时候
- 可以使用邮件推送到订阅者
- 可以使用极光推送等推送服务
- 可以使用即时通信服务向客户端推送
---
## 5.小项目一：掘金爬虫
核心步骤
1. 发起HTTP请求获取网页内容
1. 使用类似jQuery的语法来操作页面提取需要的数据
1. 把数据保存在数据库中以供查询
1. 建立一个服务器来显示这些数据
1. 可以定时爬取数据
1. 可让程序稳定运行
1. 对编码进行转换
================================================
FILE: docs/blog/2.HTML/1.HTML基础.md
================================================
---
title: 1.HTML基础
date: 2020-01-30 00:00:00
permalink:
tag:
- blog
- 2.HTML
---
> HTML真的是入门前端的第一个课程，说实话，这里的东西2天就能熟练的掌握，但是不要骄傲呦，因为这只是前端的1%
> 也是基础中的基础，也是根基，要打扎实。
---
## 🍚第一部分：HTML基本结构
### 1.HTML初识
- HTML（超文本标记语言 Hyper Text Markup Language）, 是一种用来描述网页的语言
- HTML 不是编程语言，而是一种标记语言（相似的还有MD语言，JSX语言，WXML语言，等等都是一种规则而已）
- 标记语言是一套标记标签
---
### 2.HTML骨架标签
```html
---
### 2.画线
> 画线 要有一个起点和终点
```js
let canvas = document.getElementById('canvas')
let ctx = canvas.getContext('2d')
ctx.moveTo(100, 100) // 起点
ctx.lineTo(100, 200) // 终点
ctx.stroke()
// 线端样式（线的两端）
ctx.lineCap = 'butt' // square 给线的两端 添加两个小方块 | round 给线的两端 添加圆角
ctx.lineJoin = 'mitter' // round bevel miter(miterLimit)
```
---
### 3.画矩形
> 用线也能画矩形，但是麻烦，用 ctx.rect() 更快
```js
ctx.rect(x, y, 宽度, 高度) // 画矩形
ctx.strokeRect(x, y, 宽度, 高度) // 直接画出来了，都不用写构建路径
ctx.fillRect(x, y, 宽度, 高度) // 直接画出来了，都不用写填充路径
// 例如：一个一直往下落的矩形
let canvas = document.getElementById('canvas')
let ctx = canvas.getContext('2d')
let height = 0
let timer = setInterval(() => {
ctx.clearRect(0, 0, 500, 500)
ctx.strokeRect(100, height, 50, 50)
if (height === 450) clearInterval(timer);
height += 10;
}, 50);
```
---
### 4.画圆
> 需要知道 圆心（x, y），半径（r），弧度（需要用Math.PI表示：起始弧度，结束弧度），方向（顺时针0，逆时针-1）
```js
let canvas = document.getElementById('canvas')
let ctx = canvas.getContext('2d')
// 基础圆形（扇形，半圆，圆形）
ctx.arc(100, 100, 50, 0, Math.PI, 0)
ctx.fill()
// 圆角矩形
ctx.moveTo(100, 110) // y轴多了10，是一个小技巧
ctx.arcTo(100, 200, 200, 200, 10)
ctx.arcTo(200, 200, 200, 100, 10)
ctx.arcTo(200, 100, 100, 100, 10)
ctx.arcTo(100, 100, 100, 200, 10)
ctx.stroke()
```
---
### 5.贝塞尔曲线
[贝塞尔曲线，百度百科](https://baike.baidu.com/item/%E8%B4%9D%E5%A1%9E%E5%B0%94%E6%9B%B2%E7%BA%BF/1091769)
```js
// 二次贝塞尔曲线
ctx.moveTo(100, 100) // 起点
ctx.quadraticCurveTo(200, 200, 300, 100); // 除了起点，还需要另外两个点
// 三次贝塞尔曲线
ctx.moveTo(100, 100) // 起点
ctx.bezierCurveTo(200, 200, 300, 100, 400, 200); // 除了起点，还需要三个点
ctx.stroke()
// 案例：模拟一个波浪
```
---
### 6.坐标平移 && 旋转 && 缩放
```js
ctx.translate(100, 100) // 修改坐标原点（坐标平移）
ctx.rotate(Math.PI / 6) // 是根据坐标原点进行的旋转
ctx.moveTo(0, 0) // 原来是 100, 100
ctx.lineTo(100, 0)
ctx.stroke()
// 缩放（所有点，都放大scale里面的倍数）
ctx.scale(2, 2)
ctx.strokeRect(100, 100, 100, 100)
```
---
### 7.save && restore
> canvas的平移和旋转是对于全局来说的，如果想旋转之后的，还按照之前的用，需要先保存之前的，再回复
```js
ctx.save() // 保存之前坐标系（可以保存坐标系的平移数据，缩放数据，旋转数据）
ctx.translate(100, 100) // 修改坐标原点（坐标平移）
ctx.rotate(Math.PI / 6) // 是根据坐标原点进行的旋转
ctx.moveTo(0, 0) // 原来是 100, 100
ctx.lineTo(100, 0)
ctx.stroke()
ctx.restore() // 恢复之前的坐标系
```
---
### 8.背景填充
```js
// 填充颜色
ctx.fillStyle = 'red'
ctx.fillRect(100, 100, 100, 100)
// 填充图片（纹理的填充是以坐标系原点进行填充的）
let img = new Image()
img.src = 'https://itzkp-1253302184.cos.ap-beijing.myqcloud.com/github%E5%9B%BE%E7%89%87/notes/3.png'
img.onload = function () {
ctx.translate(100, 100)
ctx.fillStyle = ctx.createPattern(img, 'no-repeat')
ctx.fillRect(0, 0, 100, 100)
}
// 线性渐变填充
let bg = ctx.createLinearGradient(100, 100, 200, 200);
bg.addColorStop(0, 'white'); // 渐变起点
bg.addColorStop(1, 'black'); // 渐变终点（当然中间也能写多个阶段的值）
ctx.fillStyle = bg
ctx.fillRect(100, 100, 100, 100)
// 辐射渐变
let bg = ctx.createRadialGradient(150, 150, 0, 180, 180, 180)
bg.addColorStop(0, 'white'); // 渐变起点
bg.addColorStop(1, 'black'); // 渐变终点（当然中间也能写多个阶段的值）
ctx.fillStyle = bg
ctx.fillRect(100, 100, 100, 100)
```
---
### 9.阴影
```js
ctx.shadowColor = 'red'
ctx.shadowBlur = 10;
ctx.fillRect(100, 100, 100, 100)
```
---
### 10.文字
```js
ctx.fillText('实体文字', 100, 100);
ctx.font = '24px 黑体'
ctx.strokeStyle = 'red'
ctx.strokeText('空心文字', 100, 200);
```
---
### 11.requestAnimationFrame动画
**动画原理简介**
> 动画的基本原理是依靠人类具有视觉暂留的特性人的眼睛看到一幅画或一个物体后，在 1/24 秒内不会消失（即每秒钟至少更换24张画面）。利用这一原理，在一幅画（一帧）还没消失前播放下一幅画（下一帧），就会给人造成流畅的视觉变化效果。
我们在实现动画的时候，经常用定时器，但是定时器有时候并不精确
**requestAnimationFrame**
> 由于 setTimeout 和 setInterval 的不精准问题，促使了 requestAnimationFrame 的诞生。 requestAnimationFrame 是专门为实现高性能的帧动画而设计的一个API，目前已在多个浏览器得到了支持，你可以把它用在 DOM 上的效果切换或者 Canvas 画布动画中。 requestAnimationFrame 并不是定时器，但和 setTimeout 很相似，在没有 requestAnimationFrame 的浏览器一般都是用setTimeout模拟。 requestAnimationFrame 跟屏幕刷新同步（大多数是 60Hz ）。如果浏览器支持 requestAnimationFrame , 则不建议使用 setTimeout 来做动画。
**requestAnimationFrame 的兼容使用**
```js
// 下面是我们常规使用 requestAnimationFrame 的兼容写法，当浏览器不兼容的 requestAnimationFrame 时则通过使用 setTimeout 来模拟实现,且设定渲染间隔为 1000ms/60。
// 判断是否有 requestAnimationFrame 方法，如果有则模拟实现
window.requestAnimFrame =
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 30);
};
```
**使用 requestAnimationFrame 实现动画**
```html
**简单实现键盘控制物体移动**
```html
```js
// 判断四边是否都没有空隙
if (!(rect2.x + rect2.width < rect1.x) &&
!(rect1.x + rect1.width < rect2.x) &&
!(rect2.y + rect2.height < rect1.y) &&
!(rect1.y + rect1.height < rect2.y)) {
// 物体碰撞了
}
```
**圆形物体碰撞检测**
```js
var dx = circle2.x - circle1.x;
var dy = circle2.y - circle1.y;
var distance = Math.sqrt((dx * dx) + (dy * dy));
if (distance < circle1.radius + circle2.radius) {
// 两个圆形碰撞了
}
```
---
## 🍚第五部分：存储
---
## 🍢第六部分：交流
---
## 🍧第七部分：工作线程
---
## 🍩第八部分：位置感知
---
## 📚参考列表（致敬）
- 《Head First HTML5 Programming》
- [腾讯课堂](https://ke.qq.com)
================================================
FILE: docs/blog/3.CSS/1.CSS基础.md
================================================
---
title: 1.CSS基础
date: 2020-01-30 00:00:00
permalink:
tag:
- blog
- 3.CSS
---
> 注意此处：内容不全，结构完整...
> 前端几乎所有的展示都是用 CSS来写的，你甚至可以 只精通CSS，就能有一个好工作
> 但是注意，CSS的水很深，这里只是最基础的整理，里面的内容 几乎5天就能学会，总之就是无论何时，对CSS这个技术要保持敬畏
## 🌎第一部分：CSS入门
### 0.CSS的发展历史
[CSS的发展历史](https://www.jianshu.com/p/4257a6f40c28)
### 1.CSS样式表的使用
**行内式（内联样式）**
```html
```
**内部样式表**
```html
```
**外部样式**
```html
```
**❣️ 备注：因为CSS发展了很多年，人们越来越想省事，所以出了预处理器，前处理器，后处理器都有 | 还有CSS命名也是个玄学**
---
### 2.CSS基础选择器
> CSS选择器就是 把我们想要的标签选择出来的
- 标签选择器 标签名
- id选择器 #id名称
- 类选择器 .类名
- 通配符选择器 *
**拓展：突然想到一个道题（一个BUG），就是多少个类选择器权重 可以覆盖掉 id选择器的权重**
---
### 3.CSS复合选择器
- 后代选择器：父级 子级（#father .chilren）
- 子元素选择器：父级>子级（只选离父级最近的一级，孙级之后都不选中）
- 交集选择器：div#app 既是div标签，id又是app的标签（既是 又是 的关系）
- 并集选择器：a, p, div, span, #app（一下选择多个，一起设置的选择器）
- 伪类选择器：用于对某些选择器添加特殊的效果
- 链接伪类
- a:link：未访问的链接
- a:visited：已访问的链接
- a:hover：鼠标移动到链接上
- a:active：选定的链接
- 结构伪类
---
### 4.font字体
```css
/* 字体大小 | px单位，像素 | em单位，相当于当前对象内文本的字体尺寸 | ... */
font-size: 16px;
/* 字体 | 多个字体会一个个找，前面的没有，就应用下一个，都没有就走系统默认的 */
font-family: '宋体', Arial, '微软雅黑';
/* 字体粗细 | normal 默认不加粗 | bold 加粗 | 400以下等同于normal | 700以上等同于 bold */
font-weight: 500;
/* 字体风格 | normal 默认值 | italic 倾斜 */
font-style: italic
/* 字体综合写法（不能更改顺序）：font: font-style font-weight font-size/line-height font-family */
font: normal 500 20px '微软雅黑'
/* 有一些可以省略，但是 字体 和 字体大小 不能省略 */
```
---
## 🌝第二部分：CSS外观样式
### 1.color（文本颜色）
> 主要用于定义文本的颜色
```html
```
---
### 2.line-height（行间距）
```html
```
---
### 3.text-align（文本水平对齐方式）
```html
```
---
### 4.text-indent（首行缩进）
```html
```
---
### 5.text-decoration（文本装饰，通常给a链接修改装饰效果）
```html
```
---
## 🌛第三部分：CSS背景及应用
### 1.背景颜色
---
### 2.背景图片
---
### 3.背景平铺
---
### 4.背景位置
---
## 🌙第四部分：标签显示模式 & CSS盒模型
> 标签的显示模式（display）主要有，行内，块级，行内块
- 块级：独占一行，高度，宽度，内外边距都可以控制（常见的有h1~h6, div, ul, ol, li, p）
- 行内：一行显示多个，高宽直接设置无效，默认宽度是它自身内容的宽度，行内元素只能容纳文本或者行内元素（常见的有 a, span, em, s, ...）
- 行内块：一行可以显示多个，可以设置宽高（常见的有 img, input, td）
- 相互转换：display: block, inline, inline-block
---
## ⭐️第五部分：CSS三大特性
---
## 🌟第六部分：浮动 & 清除浮动
---
## 💫第七部分：定位
---
## ✨第八部分：其他
## 📚参考列表（致敬）
- [博学谷](https://www.boxuegu.com/)
================================================
FILE: docs/blog/3.CSS/2.CSS3.md
================================================
---
title: 2.CSS3
date: 2020-01-30 00:00:00
permalink:
tag:
- blog
- 3.CSS
---
> CSS3不和HTML5一样是一个生态，而是 拓展了CSS的基础，使其更加的好用，但是还不具有现代化的特性
> 但是不要担心，一些预处理器和后处理器 弥补了 CSS不现代化的一些问题
## 🥟第一部分：新增选择器
> 前言：新增的选择器真是好用，不用多谢一些类名了，起名字我可真是难受
**备注：类选择器，属性选择器，伪类选择器，权重都是10**
### 1.属性选择器
```html
```
```css
/* 属性选择器 */
button[disabled] { }
/* 两个按钮都能选中 */
button[class^="btn"] { }
/* att$='' 具有att属性，并且以...结尾的 */
/* att*='' 具有att属性，并且含有...的 */
```
### 2.结构伪类选择器
> 所谓结构，就是指，是第几个
```html
---
### 2.BEM
---
### 3.ACSS（原子CSS）
---
### 4.其他分层思想
---
## 🎋第二部分：CSS Houdini
---
### 1.CSS Houdini介绍（现在还是没有应用上，了解的还是少）
**CSS Houdini 提供了API, 能让程序员控制浏览器的重绘重排过程**
---
## 🌱第三部分：CSS与数学
---
### 1.CSS矩阵
**概念（了解概念就行了，我现在也是不懂）**
**学习矩阵有什么用么？**
- 粗浅的举一个例子：transform 实现的原理，在浏览器中就是矩阵的应用
---
### 2.一些工具网站
**2D矩阵 转 3D矩阵，可以开启硬件加速，调用GPU，提高性能，让GPU直接合成层，节省了重绘和重排（还是不太懂）**
## 📚参考列表（致敬）
- [腾讯课堂](https://ke.qq.com)
================================================
FILE: docs/blog/4.JavaScript/1.JavaScript根基.md
================================================
---
title: 1.JavaScript根基
date: 2020-01-30 00:00:00
permalink:
tag:
- blog
- 4.JavaScript
---
> 注意此处：内容不全，结构完整，等待完善...
> JavaScript的基础 决定了你的高度，建议熟读 红宝石 和 绿犀牛🦏
## 🐲第零章：JavaScript简介
### 1.什么是JavaScript
- JavaScript是世界上最流行的脚本语言（不需要编译，边运行边解析）
- JavaScript可以增强浏览器交互
- JavaScript可以运行在服务端（Node.js）
- 移动端JavaScript（HTML5让JavaScript赋予了神一般的能力，穿透了所有的端 iOS，android,window, mac, linux）
---
### 2.JavaScript的历史
---
### 3.JavaScript的组成
- ECMAScript: JavaScript用法
- DOM：JavaScript操作网页上的元素的API
- BOM：JavaScript操作浏览器的部分功能的API
---
### 4.引入JavaScript
```html
---
## 🍀第八章：对象（Object）
**对象是引用类型**
### 1.对象的基本使用
```js
// 对象定义（对象字面量 推荐）
let me = {
name: '朱昆鹏',
age: 20,
// 方法
say: function () {
console.log(me.age) // 20
console.log(this.age) // 20，this 其实就是 AO 里面的一个属性，具体可以看3.JavaScript深入
},
// 方法的另一种写法（ES6）
look () {}
}
// 对象属性的增删改查
me.test = '测试属性' // 增
delete me.test // 删 | 后期可以知道 一个对象的对象，能不能被删除其实都可以控制的（Object.defineProperties)
me.age = 21 // 改
me.age // 21 查
// 其他定义对象的方式
// 1.构造函数创建对象（需要new）
let obj1 = new Object() // 系统自带的构造函数 Object()
let obj2 = new Zhu() // 自己写的一个构造函数
// 2.
let obj = Object.create(null)
```
---
### 2.构造函数示例
**这里面就涉及到this，具体请看3.JavaScript深入 this解释**
```js
function Car (carName) {
// 属性
this.name = carName || 'BMW'
// 方法
this.run = function () {
console.log(this.name + '跑了起来')
}
}
let byd = new Car('byd')
let dz = new Car('dz')
byd.run() // byd跑了起来
dz.run() // dz跑了起来
```
---
### 3.new 操作符做了什么（构造函数内部原理）
- 第一步：在函数体最前面隐式的加上 this = {}
- 第二步：执行 this.xxx = xxx
- 第三步：隐式的返回this
**我们根据这三步，来写一个显示的函数，不用new，看看是否能达到上面的效果**
```js
function Car (carName) {
let that = {} // this 是关键字，不行，所以，我们用 that 代替，效果是一样的
// 属性
that.name = carName || 'BMW'
// 方法
that.run = function () {
console.log(that.name + '跑了起来')
}
return that
}
let byd = Car('byd')
let dz = Car('dz')
byd.run() // byd跑了起来
dz.run() // dz跑了起来
```
---
**❣️❣️❣️ 因为new 最后隐式的返回了对象，这个对象中如果有 函数的话，就会形成闭包，也就是这个函数具有 构造函数的作用域**
```js
function Zhu () {
this.age = 20,
this.addAge = function () {
this.age += 1
}
}
let zhu1 = new Zhu() // 产生 Zhu 的 AO 和 addAge的 AO
let zhu2 = new Zhu() // 产生 Zhu 的 AO 和 addAge 的 AO ，注意 这里面的
zhu1.addAge() // 这里的 addAge 里面有三个作用域：0 addAge的AO，1 Zhu的AO，和GO
zhu1.age // 21
zhu2.addAge() // 这里的 addAge 里面有三个作用域：0 addAge的AO，1 Zhu的AO，和GO，但是其中的 Zhu的AO 和 上面的不一样，虽然内容一样，但是相互独立的
zhu2.age // 21
// ❓ 在运用我发现，Zhu 和 zhu1.addAge 都只有两个作用域 Script 和 Global 这是为什么
```
**❣️如果使用了new关键字的话，因为有隐式返回，所以就算在函数中写返回，还是会被忽略**
---
### 4.原型，原型链
**首先要明确：函数也是对象，是对象都有 __proto__ 和 constructor，函数有特定的属性 prototype**
- 原型（prototype）：是function对象的一个属性，它定义了构造函数制造出来的对象的公共祖先
- 通过该构造函数产生的对象，可以继承该原型的属性和方法，原型也是一个对象，利用原型的特点和概念，可以提取公共属性
- 对象查看原型 __ proto __
- 拓展：对象如何查看 对象的构造函数 --> constructor
- 原型链：
```js
function Zhu () { }
Zhu.prototype.say = function () {
console.log('我会说话')
}
let zhu1 = new Zhu()
let zhu2 = new Zhu()
```
**啥都不说，补一张图，什么都明白了（有空话一张）**
---
### 5.继承实现
- 继承需要满足两个，一个是继承属性，一个是继承方法
- 继承属性：父.call(this, ...)
- 继承方法：将父的prototype给 子类，并且让 子类的 constructor 保持正常（一般是写一个方法做这个事情）
```js
// 最佳实践
function Father (name) {
this.name = name
}
Father.prototype.say = funciton () { }
// 如何让 Son 继承 Father
function Son (name) {
Father.call(this, name) // 继承属性
}
inheritPropertype(Father, Son)
// 继承方法的函数（可能还有其他的版本，但是大致意思是 将父的prototype给 子类，并且让 子类的 constructor保持正常）
funciton inheritPropertype(father, son) {
let protoType = Object.create(father.prototype)
prototype.constructor = son
son.prototype = protoType
}
```
**❣️ ES6 有了 Class之后，继承方便了很多，所以上面那种方式，一般感觉只有面试可以用到**
---
### 6.包装类
我们知道在JavaScript中有原始值和引用值，原始值是没有属性和方法的，但是包装类产生的原始值是有的
- new String()
- new Boolean()
- new Number()
```js
let num1 = 100;
num1 // 100 是没有属性和方法的
let num2 = new Number(100)
num2 // Number {100} 是有属性和方法的
num2 + 1 // 101 可以参与运算，运算之后就变为了原始值
// 解释一个匪夷所思的问题
num1.length = 1
console.log(num1.length) // undefined，为什么不报错？，因为先隐式的调用了 包装类
// ******* 试题一 *******
let str = 'zhu'
str = str + 1
let test = typeof str // 'string'
if (test.length == 6) { // test.length // undefined
test.sign = '返回'
}
console.log(test.sign) // undefined
```
---
### 7.命名空间,对象枚举
**对象枚举（又叫对象属性遍历）**
- 我们的数组很好遍历，for 循环就可以搞定，但是 你的对象怎么遍历呢 ？
- for in 循环 ：实现对象的遍历
**但是这个有个问题，就是通过 for in 遍历对象，也可以把对象的原型链上的属性遍历出来，怎么办呢？ -----> hasOwnProperty() 参数传入字符串类型的属性名，返回布尔值，表示是否是自己的属性**
**拓展 ：in 操作符 ：判断你是否可以访问到某个属性（和 hasOwnProperty() 的功能不同哦）（基本用不到，了解就可以）**
- 重点拓展 ：instanceof
- a instanceof A // 判断 a对象 是否是 A构造函数构造出来的 （当然这个用法没有想象的那么简单）（ a instanceof Object 也会返回 true）
- 其实根本的理解应该是 ：判断a对象的原型链上 有没有 A的原型
- 这个instanceof解决了一个很重要的问题，就是之前，typeof [ ] typeof { } 返回的都是 object 没办法区分
- 第一种方法 ：constraint
- 第二种方法 ：instanceof
- 第三种方法 ：Object.prototype.toString.call(里面写需要判断的)
---
### undefined类型及null区别
---
## 🎋第九章：日期（Data）
### 1.日期对象基础
---
### 2.Date 常用API
```js
new Date() // 创建一个时间对象 Fri Jul 12 2019 19:59:59 GMT+0800 (中国标准时间)
// 返回自1970年1月1日 00:00:00 UTC到当前时间的毫秒数。
Date.now(); // 1562932828164
// 解析一个表示某个日期的字符串，并返回从1970-1-1 00:00:00 UTC 到该日期对象（该日期对象的UTC时间）的毫秒数
Date.parse('2019.7.12') // 1562860800000
// 年月日时分秒 获取
let dateMe = new Date()
dateMe.getFullYear() // 2019 | 根据本地时间返回指定日期的年份
dateMe.getMonth() // 6 | 根据本地时间，返回一个指定的日期对象的月份，为基于0的值（0表示一年中的第一月）。
dateMe.getDate() // 12 | 根据本地时间，返回一个指定的日期对象为一个月中的哪一日（从1--31）
dateMe.getHours() // 20 |根据本地时间，返回一个指定的日期对象的小时。
dateMe.getMinutes() // 11 | 根据本地时间，返回一个指定的日期对象的分钟数。
dateMe.getSeconds() // 29 | 方法根据本地时间，返回一个指定的日期对象的秒数
dateMe.getMilliseconds() // 363 | 根据本地时间，返回一个指定的日期对象的毫秒数。
dateMe.toJSON() // 🔥 "2019-07-12T12:05:15.363Z" | 返回 Date 对象的字符串形式
dateMe.getDay() // 5 | 根据本地时间，返回一个具体日期中一周的第几天，0 表示星期天（0 - 6）
dateMe.getTime() // 1562933115363 | 方法返回一个时间的格林威治时间数值。
dateMe.toString() // "Fri Jul 12 2019 20:05:15 GMT+0800 (中国标准时间)" | 返回一个字符串，表示该Date对象
dateMe.getTimezoneOffset() // -480（说明比正常时区慢480分钟，所以要加480分钟才对） | 返回协调世界时（UTC）相对于当前时区的时间差值，单位为分钟。
dateMe.toDateString() // "Fri Jul 12 2019" | 以美式英语和人类易读的形式返回一个日期对象日期部分的字符串。
```
[MDN 更多详细](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date)
---
### 3.定时器
```js
// 定时循环器（一直循环执行），会返回一个数字，作为唯一标识，可以用于清除定时器
let timer = setInterval( () => {
}, 1000)
// 清空定时器
clearInterval(timer)
// 定时器（推迟一段时间执行）
let timer = setTimeout( () => {
}, 1000)
// 清除定时器
clearTimeout(timer)
// ❣️是全局window上的方法，内部的this指向window
```
---
## 🍄第十章：正则（Regex）
### 1.正则基础
```js
// 🔥 创建一个正则表达式
const regex1 = /ab+c/gi;
const regex2 = new RegExp("ab+c", "gi");
// 🔥 JS正则表达式的方法
//【判断】test：一个在字符串中测试是否匹配的RegExp方法，它返回true或false
let str = 'hello world';
/world/.test(str); // true
/ /.test(str); // true
/good/.test(str); // false
//【替换】replace：一个在字符串中执行查找匹配的String方法，并且使用替换字符串替换掉匹配到的子字符串
let str = 'hello world'
let repStr = str.replace('world', 'replace') // 注意不会改变原内容
console.log(repStr) // "hello replace"
//【分隔】split 使用正则表达式 或 一个固定字符串分隔 一个字符串，返回 分隔后的子字符串数组
let str = 'hello RegExp';
str.split(' '); // ["hello", "RegExp"]
str.split('hello'); // ["", "RegExp"]
str.split('l'); // ["he", "", "o RegExp"]
str.split('good') // ["hello RegExp"]
// exec：一个在字符串中执行查找匹配的RegExp方法，它返回一个数组（未匹配到则返回null）
// search：一个在字符串中测试匹配的String方法，它返回匹配到的位置索引，或者在失败时返回-1（略）
// match：一个在字符串中执行查找匹配的String方法，它返回一个数组或者在未匹配到时返回null（略）
```
**正则匹配规则速查**
---
## 🌾第十一章：其他内置对象
---
## 🌻第十二章：DOM
### 1.DOM基本解释
**什么是DOM**
DOM（document object model） 文档对象模型，定义了表示和修改文档的方法，DOM对象既为宿主对象，由浏览器厂商定义，用来操作HTML和XML功能的一类对象的集合（web标准编程接口）
DOM结构树（先用网上的图，后期自己画一下）
---
### 2.常用DOM接口
```js
// 获取DOM节点
document.getElementById() // 通过ID获取
document.getElementsByTagName() // 标签名
document.getElementsByClassName() // 类名
document.querySelector() // 通过选择器获取一个元素
document.querySelectorAll() // 通过选择器获取一组元素
document.body // 获取body的方法
document.getElementsByName(name) // 通过name属性查找元素节点
document.documentElement // 获取html的方法
// 节点类型
元素节点（标签） // 属性nodeType返回值1
属性节点（标签里的属性）// 返回值2
文本节点 // 返回值3
注释节点（comment） // 返回值8
document // 返回值9
DocumentFragment // 返回值11
// 节点接口
dom元素.parentNode // 返回当前元素的父节点
dom元素.childNodes // 子节点们
dom元素.firstChild // 第一个子节点
dom元素.lastChild // 最后一个子节点
dom元素.nextSibling // 后一个兄弟节点 previousSibling -> 前一个兄弟节点
// 元素节点接口
dom元素.parentElement // 返回当前元素的父元素节点
dom元素.children // 返回当前元素的元素子节点
dom元素.firstElementChild // 第一个元素子节点（IE不兼容）
dom元素.lastElementChild // 最后一个元素子节点（IE不兼容）
dom元素.nextElementSibling // 返回后一个兄弟元素节点
dom元素.previousElementSibling // 返回前一个兄弟元素节点
// 节点的四个属性和一个方法
节点.nodeName // 元素的标签名，以大写形式表示（只读）
节点.nodeValue // Text节点或者Comment节点的文本内容，（读写）
节点.nodeType // 该节点的类型（只读）
节点.attributes // Element节点的属性集合
节点.hasChildNodes() // 判断节点 是否有子节点
// Element节点的 属性和方法
dom元素.innerHtml
dom元素.innerText
dom元素.attributes // 获取元素身上所有属性构成的集合
dom元素.setAttribute("属性名","属性值")// 给元素设置属性和属性值
dom元素.getAttribute("属性名")// 获取属性值的方法
dom元素.removerAttribute("属性") // 删除属性
// ============== 操作接口 ==================
// 增
document.createElement() // 创建元素节点
document.createTextNode() // 创建文本节点
document.creaetComment() //创建注释节点
document.createDocumentFragment() // 创建文档碎片节点
// 插
父元素节点.appendChild(子元素对象) // 在元素节点的子元素最后插入子元素
父元素节点.insertBefore(父元素中的子元素a, 需要插入的子元素b) // 最后的结果是，父元素节点中 b元素插入到了 a的前面
// 删
元素节点.remove() // 删除DOM元素（自己）
父元素节点.removeChild(子元素节点) // 删除子元素
// 替换
父元素节点.replaceChild(新的节点, 需要被替换的子节点)
// 复制
元素节点.cloneChild() // 返回值是 复制出来的节点
// 查看滚动条的滚动距离
window.pageXOffset // x轴滚动距离
window.pageYOffset // y轴滚动距离
document.body.scrollLeft // x轴滚动距离（兼容低版本IE）
document.body.scrollTop // y轴滚动距离（兼容低版本IE）
// 如何兼容，因为如果有 pageXOffset，那么另一个兼容性的结果就是0，所以相加就能解决兼容性问题了
// 让滚动条滚动
window.scroll(x, y) // 滚动到某个位置
window.scrollTo(x, y) // 滚动到某个位置
window.scrollBy(x, y) // 累加滚动，就是每执行一次，就滚动多少位置
// 查看视口的尺寸
window.innerWidth // 视口的宽度
window.innerHeight // 视口的高度
document.documentElement.clientWidth // 兼容低版本IE
document.documentElement.clientHeight // 兼容低版本IE
document.body.clientWidth // 兼容怪异模式
document.body.clientHeight //兼容怪异模式
document.compatMode // 查看渲染模式 | 'CSS1Compat' 标准模式 | 'BackCompat' 怪异模式
// 查看元素的几何尺寸
dom元素.offsetWidth // 元素的宽度
dom元素.offsetHeight // 元素的高度
dom元素.offsetLeft // 元素相当于父级的位置（如果父级有定位的话，如果没有就是相对于文档的距离）
dom元素.offsetTop // 元素相对于父级的位置（如果父级有定位的话，如果没有就是相对于文档的距离）
dom元素.offsetParent // 返回最近有定位的父级DOM节点
// 脚本化css
dom元素.style // 查看所有样式表接口（内容可读可写）
dom元素.style. = ... // 碰到float这样的保留字，前面加css，例如 cssFloat
dom元素.style.width = ...
dom元素.style.backgroundColor = ...
dom元素.className = ...
window.getComputedStyle(ele, null) // 返回某个元素，最后展示效果的 样式表对象（CSSStyleDeclaration）| 只读 | IE8以下不兼容
```
---
### 3.DOM继承树
**有那么几点需要注意❣️**
- getElementById 方法定义在 Document.prototype 上（Element节点不能使用）（感觉这点面试的时候可以问，可以问出来面试者的DOM节点基础）
- getElementsByName 方法定义在HTMLDocument.prototype上（非document节点不能使用）
- getElementsByTagName 方法定义在 Document.prototype 和 Element.prototype
- HTMLDocument.prototype定义了一些常用属性，body, head分别指代HTML文档中的 body 和 head 标签
- Document.prototype 上定义了documentElement属性，指代元素的根元素，在HTML文档中，他总是指代 html 元素
- getElementsByClassName,querySelectAll,querySelector在 Document.prototype, Element.prototype类中均有定义
---
### 4.试题
**遍历某元素节点树（在原型链上编程）**
```js
```
**封装函数，返回某元素的第n层祖先元素节点**
```html
[原文链接](https://zhuanlan.zhihu.com/p/28140450)
---
**模板字符串**
```js
// 实现这个效果
// 你好世界!
// 早上好
// ES5
let str = '世界'
let str = '你好' + str + '!\n' + '早上好'
// ES6
let strEs6 = `
你好${str}!
早上好
`
```
---
### 2.数组拓展
**拓展运算符**
```js
// 求数组这里面最大的值
let arr = [1,2,34,5,6,9]
// 原生API Math.max(1,2,34,5,6,9) 接收的是一组数，所以还需要转一下
Math.max.apply(null, arr) //ES5 34
Math.max(...arr) // ES6 34
```
**❣️注意：数组的拓展运算符是浅拷贝**
---
**解构赋值：本质是模式匹配**
```js
let arr = [1,2,3]
let { x, y, z } = arr
x // 1
y // 2
z // 3
```
---
**ES6新增的静态方法：Array.from() && Array.of()**
```js
// Array.from() 将类数组或者具有迭代器接口的 转为 真正数组
Array.from(arguments)
// Array.of() 传入参数，创建一个数组（对标 new Array() 创建一个时候有问题的，用of更规范）
Array.of(13) // [13]
Array.of(13, 14) // [13, 14]
new Array(13) // 会创建一个长度 13的数组
new Array(13, 14) // [13, 14]
```
---
**ES6新增原型上的方法：**
- Array.prototype.find() 找数组中是否有满足条件的内容，返回 true/false
- Array.prototype.findIndex() 找数组中是否有满足条件的内容，返回 坐标/-1
- Array.prototype.includes() 找数组中是否有满足条件的内容（❣️和find不一样的是，这个内部判断依据是 ==，而 find判断依据是 ===）
- 也就是这个可以判断是否存在 NaN
- Array.prototype.fill() 传入一个数，这个数组每一项 都会变成这个数
- Array.prototype.flat() 降纬数组，参数如果是Infinity可以把任意纬度，降到一维
- Array.prototype.
```js
// 做个题吧 [1,2,3] 变成 [1,0,2,0,0,3,0,0,0] （1后面加上1个0，2后面加上2个0，3后面加上3个0）
let arr = [1,2,3]
arr.map( item => [item, ...new Array(item).fill(0)]).flat() // [1, 0, 2, 0, 0, 3, 0, 0, 0]
```
---
### 3.解构赋值详解
我看着这个功能，看不到底层，只能看这个的规则
```js
// 结构对象
let obj = {
name: '朱昆鹏',
age: 21
}
{ name, age } = obj // name = '朱昆鹏', age = 20
{ name: onName, age: onAge } = obj // onName = '朱昆鹏', onAge = 20
{ name: onName, age: onAge, sex = 'man' } = obj // onName = '朱昆鹏', onAge = 20, sex = 'man'
// 解构数组
let arr = [1, 2, 3]
{x , y, z} = arr // undefined
{0: x , 1: y, 2: z} = arr // x = 1, y = 2, z = 3
[x, y, z] = arr // x = 1, y = 2, z = 3
{ length } = arr // length = 3
```
---
**❣️本质上是模式匹配，主要是为了让你更方便的拿到数据，简化代码**
```js
// 示例
let obj = {
data: {
name: '朱昆鹏',
age: 21
}
}
// 不用解构赋值的时候
let name = obj.data.name
let age = obj.data.age
// 使用解构赋值
let { name, age } = obj.data
```
---
### 4.箭头函数
**特点**
- 不用写function关键字
- 可以不写return（如果不是一样的话，不写的话，就会在最后一样返回 return undefined）
- 参数不能重复
- 只能作为函数，不能 new ，没有原型
- ❣️内部的 this 由定义时外围最接近一层的非箭头函数的 this 组成（箭头函数外层没有包着function，那么恒为this）
- ❣️箭头函数没有 arguments，但是有拓展参数，是ES6用来取代 arguments的
```js
const sum = (num1, num2) => num1 + num2;
const sum = (num1, num2) => ({num1 + num2}); // ❣️返回的如果是一行，并且是对象的时候，语法可能会报错，这时候，就要加一个 () 在外面了
const fn1 = () => {
console.log(arguments, this) // arguments 没定义 | this 是 window
}
let obj = {
fn2 () {
const fn1 = () => {
console.log(arguments, this) // fn2 的 arguments | this 是 obj（因为箭头函数外层有 function 函数 🔥）
}
}
}
```
---
**拓展参数**
```js
// 注意事项，...args 必须放到尾部才行，后面不能跟任何参数（前面可以加，这样拓展参数就是剩下的参数）
const sum = (...args) => {
// args是一个真正的数组，而arguments是类数组
args.forEach( item => {
console.log(item)
})
}
sum(1,2,3,4,5)
```
---
**babel编译之后的箭头函数（箭头函数就就是一个语法糖）**
---
### 5.对象的拓展
**Object新增的静态方法**
```js
let obj1 = { a: 1, b: 2 }
let obj2 = { c: 3, d: 4 }
// Object.assign() 浅拷贝
Object.assign(obj1, obj2) // 和拓展运算符写法基本一样，不一样的在于，这个会改变参数一的值
obj1 // { a: 1, b: 2, c: 3, d: 4 } | Object.assign({}, obj1, obj2) 这样写
Object.keys(obj1) // [a, b]
Object.values(obj1) // [1, 2]
Object.entries(obj1) // [ ['a', 1], ['b', 2] ]
Object.is(NaN, NaN) // true | Number.isNaN()也能判断
Object.is(0, -1) // false |
```
---
### 🔥6.Object.defineProperty
- 简介：ES5规范开始，后续版本迭代，致力于做一件事情，就是把JS底层的功能提供给开发者使用。
- Object.defineProperty 就是其中的一个（之前是浏览器内部使用的，开发者没办法使用），此方法会直接在一个对象上定义一个新的具有详细描述的属性，或者修改一个对象的现有属性，并返回这个对象
- 使用
- 数据描述符
- value: 'xxx' 属性值 | 默认 ''
- writable: true 是否可写 | 默认 false
- configurable: true 是否可配置 | 默认 false
- enumerable: true 是否可枚举 | 默认 false
- 存取描述符
- set: function () {} 属性访问器 进行写操作时调用该方法
- get: function () {} 属性访问器 进行读操作时调用该方法
---
**之前浏览器 内部使用 Object.defineProperty 的示例**
```js
// 不可写的案例
Function.prototype = '不可写'
console.log(Function.prototype) // ƒ () { [native code] } | 没变
// 不可配置案例
window.a = 10
delete window.a // false
// 可枚举案例
let obj = {
name: '朱昆鹏',
__proto__: {
age: 20
}
}
for (let prop in obj) {
console.log(prop) // name age
}
// 不可枚举的案例
for (let prop in Object.prototype) {
console.log(prop) // 虽然 Object.prototype 上有很多对象 ，但是结果是 无
}
```
---
**Object.defineProperty 数据描述符**
```js
let obj = {
// name: '朱昆鹏' // 如果写上的话，默认配置都是 true
}
// 参数一：对象 | 参数二：属性名 | 参数三：对这个属性的 配置
Object.defineProperty(obj, 'name', {
value: '朱昆鹏',
writable: false, // 是否可写 | 默认 false
configurable: true, //是否可配置 | 默认 false
enumerable: true // 是否可枚举 | 默认 false
})
obj.name = 1
obj.name // 朱昆鹏
delete obj.name // true
obj.name // {}
```
---
**Object.defineProperty 存取描述符**
```js
let obj = {
// name: '朱昆鹏' // 如果写上的话，默认配置都是 true
}
let tempValue = '朱昆鹏 get'
// 参数一：对象 | 参数二：属性名 | 参数三：对这个属性的 配置
Object.defineProperty(obj, 'name', {
// value: '朱昆鹏',
// writable: false, // 是否可写 | 默认 false
configurable: true, //是否可配置 | 默认 false
enumerable: true // 是否可枚举 | 默认 false
// set , get 和 value writable 不能共存（会报错）
set(newValue) {
tempValue = newValue
},
get() {
return tempValue
}
})
// 另一种写法
let obj1 = {
tempValue: '朱昆鹏',
get name () {
return this.tempValue
},
set name (newValue) {
this.tempValue = newValue
}
}
obj1.name = '测试'
obj1 // {tempValue: '测试', name: '测试'}
```
**❣️我觉得这个写法定义了一个多余的变量，不是很好，肯定有更好的方法，我还是多学习一下吧**
---
### 🔥7.数据劫持
- Vue双向数据绑定核心功能是由 Observer, Compile, Watcher 三部分实现
- 其中 Observer（监听数据变化进行相应的回调 - 数据劫持） 部分功能就是用 Object.defineProperty 来实现的（Vue2.x之后用 Proxy&Reflect 重构了）
**我们来做一个案例：当我们的数据改变的时候，让视图（页面）也随之改变**
```html
---
**思考：Vue是怎么监听到 数组中改变的呢？**
```js
// 在Vue中 数组中改变想要监听，需要用特定的方法，例如 push pop unshift shift...等等
// 原理是 Vue 重写了这些方法
Object.defineProperty(Array.property, 'push', {
})
```
---
### 🔥8.Proxy & Reflect
- 这个东西有兼容性问题，你可能会想了，可以通过 babel 进行编译，编译成ES5不就可以了么，但是 babel 编译本质上是将 ES6语法糖编成 ES5代码，但是 Proxy 和 Reflect 不是语法糖，这是浏览器内部实现的东西，编译之后其实还是他们本身
**Proxy（代理）**
- 植入代理模式的思想，以简洁易懂的方式控制对外部对象的访问
- 利用内置的 set, get 方法控制属性的读写功能用处比较大，其余 has, delePropery...等方法不太在工作开发中使用，有兴趣可以了解下
```html
---
或者举个生活中的例子：租房
- 发布订阅模式，就相当于，租户的，和房东 不认识，租户租房要找中介，房东先把房子租出去，也要找房东，租户通知中介要租房了，中介找到合适的了，就通知房东签合同
- 观察订阅模式，相当于，租户和房东 认识，租户想租房直接找房东租就行了，租户这里存放这 房东租房的方法，少了一个中介的
---
### 发布订阅
> 其实对这里我还是不太理解，感觉还有更好的示例
```js
const eventObj = {
_arr: [], // 中介存放，订阅事件
on(fn) {
this._arr.push(fn)
},
emit() {
this._arr.forEach(fn => fn())
}
}
function fn1() {
console.log('租房1')
}
function fn2() {
console.log('租房1')
}
eventObj.on(fn1) // 订阅
eventObj.on(fn2) // 订阅
eventObj.emit() // 执行所有的订阅事件
```
---
### 观察者模式
```js
/**
* 观察者模式
*/
class Subject {
constructor(name) {
this.name = name
this.Observers = []
this.state = '玩'
}
// 被观察者中要存放所有的观察者
attach(o) {
this.Observers.push(o)
}
setState(newState) {
this.state = newState
this.Observers.forEach(o => o.update(this))
}
}
class Observer {
constructor(name) {
this.name = name
}
update(body) {
console.log(`${body.name}跟${this.name}说${body.state}`)
}
}
// 小宝宝
let body = new Subject('小宝宝')
let o1 = new Observer('爸爸')
let o2 = new Observer('妈妈')
body.attach(o1)
body.attach(o2)
body.setState('有人打我')
// 小宝宝跟爸爸说有人打我
// 小宝宝跟妈妈说有人打我
```
---
### 简单版本
```js
class MyPromise{
constructor(executor) {
this.status = 'pending' // pending Fulfilled Rejected
this.value = undefined; // 正确返回信息
this.reason = undefined; // 错误返回信息
this.resovleArr = [] // resovle
this.rejectArr = [] // reject
// 成功
const resolve = (val) => {
if (this.status === 'pending') {
this.status = 'Fulfilled';
this.value = val;
this.resovleArr.forEach(fn => fn(this.val));
}
}
// 失败
const reject = (reason) => {
if (this.status === 'pending') {
this.status = 'Rejected';
this.reason = reason;
this.resovleArr.forEach(fn => fn(this.reason));
}
}
try {
executor(resolve, reject)
} catch (error) {
reject(e)
}
}
then(onFulfilled, onRejected) {
if (this.status == 'Fulfilled') {
onFulfilled(this.value)
}
if (this.status == 'Rejected') {
onRejected(this.reason)
}
if (this.status == 'pending') {
this.resovleArr.push(() => {
onFulfilled(this.value)
})
this.rejectArr.push(() => {
onRejected(this.reason)
})
}
}
}
const promise = new MyPromise((resovle, reject) => {
setTimeout(() => {
resovle('成功')
}, 1000);
})
promise.then(res => {
console.log('res', res);
})
// 问题1：.then 是怎么链式调用的
```
---
### 传统实现
```js
// 实现的原理
// promise是一个状态机，能根据不同的状态 触发不同的回调
// Pending 等待 | Fulfilled 成功 | Rejected 失败
// 参数传一个函数，
function MyPromise (fn) {
// promise是一个状态机，能根据不同的状态 触发不同的回调
// pending 等待 | Fulfilled 成功 | Rejected 失败
let that = this
that.status = 'pending';
that.resolveValue = null;
that.rejectValue = null;
// 如何解决异步呢？我们执行的时候先不执行，等到res() 触发的时候才触发，我们先记录下
that.ResoveCallBackLisst = []
that.RejctCallBackList = []
// 成功
function resolve (val) {
if (that.status === 'pending') {
that.status = 'Fulfilled'
that.resolveValue = val
that.ResoveCallBackLisst.forEach(ele => ele())
}
}
// 失败
function reject (val) {
if (that.status === 'pending') {
that.status = 'Rejected'
that.rejectValue = val
that.RejctCallBackList.forEach(ele => ele())
}
}
try {
fn(resolve, reject)
} catch(e) {
reject(e)
}
}
MyPromise.prototype.then = function (onFulfilled, onRejected) {
var that = this
if (that.status === 'pending') {
that.ResoveCallBackLisst.push(() => {
onFulfilled(that.resolveValue)
})
that.RejctCallBackList.push(() => {
onRejected(that.rejectValue)
})
}
if (that.status === 'Fulfilled') {
onFulfilled(that.resolveValue);
}
if (that.status === 'Rejected') {
onRejected(that.rejectValue);
}
}
let promise = new MyPromise( ( res, rej) => {
// setTimeout( () => {
// res('你好世界')
// }, 3000)
res('你好世界')
})
promise.then( res => {
console.log(res)
})
```
================================================
FILE: docs/blog/4.JavaScript/5.Underscore库源码分析.md
================================================
---
title: 5.Underscore库源码分析
date: 2020-01-30 00:00:00
permalink:
tag:
- blog
- 4.JavaScript
---
> 等待书写中...
**[网址](https://www.html.cn/doc/underscore/)**
================================================
FILE: docs/blog/4.JavaScript/6.Lodashjs库源码分析.md
================================================
---
title: 6.Lodashjs库源码分析
date: 2020-01-30 00:00:00
permalink:
tag:
- blog
- 4.JavaScript
---
> 等待书写中...
**[网址](https://www.lodashjs.com/)**
================================================
FILE: docs/blog/4.JavaScript/7.函数式编程.md
================================================
---
title: 7.函数式编程
date: 2020-01-30 00:00:00
permalink:
tag:
- blog
- 4.JavaScript
---
> 等待书写中...
---
## 第一部分：函数式编程基础
> **函数式编程不是用函数来编程，也不是传统的面向过程编程。** 主要是将复杂的函数 符合成简单的函数（计算理论，递归论，或者拉姆达演算）。运算过程尽量写成一系列嵌套的函数调用
> 举例：React高阶组件
---
### 函数编程的基本概念
- 函数是第一等公民
- 只用表达式，不用语句
- 没有副作用
- 不修改状态
- 引用透明（函数运行只靠参数）
---
### 核心概念
- 纯函数
- 函数的柯里化
- 函数组合
- Point Free
- 声明式与命令式代码
- 惰性求值
---
### 纯函数
对于相同的输入，永远会得到相同的输出，而且没有任何可观察的副作用，也不依赖外部环境的状态
鉴于这个特性能做什么？
- 可以做缓存，因为第一次，我知道输入什么了，第二次就不用计算了，提高性能
- 纯函数不仅可以有效降低系统的复杂度，还有很多很棒的特性，例如可缓存性
---
### 函数的柯里化
- 传递给函数一部分参数来调用它，让它返回一个函数去处理剩下的参数
- 作用就是解决了函数不纯的问题，将函数依赖的变量以参数的形式组合成 新的函数
- 好处：事实上柯里化是一种预加载函数的方法，通过传递较少的参数，得到一个已经记住了这些参数的新函数。某种意义上讲，这是一种对参数的缓存，是一种非常高效的编写函数的方式
---
### 函数组合
- 将需要层层嵌套的函数 通过一个组合函数包一层，使其使用起来更舒适
---
### Point Free
- 把一些对象自带的方法转化成纯函数，不要命名转瞬即逝的中间变量
- 例如：const f = str => str.toString().split('')
```js
// 解决
let toString = str => str.toString();
let split = str => str.split();
let fn = compost(split(' '), toString)
fn(123) // [1, 2, 3]
// 这种风格能帮助我们减少不必要的命名，让代码保持简洁和通用
```
---
### 声明式与命令式代码
- 命令式代码：我们通过编写一条又一条指令去让计算机执行一些动作，这其中会涉及到很多繁杂的细节
- 声明式代码：通过写表达式的方式来声明我们想干什么，而不是通过一步一步的指示
- 优缺点：
- 函数式编程这种声明式的代码，对于无副作用的纯函数，我们完全可以不考虑函数内部是如何实现的，专注于编写业务代码，优化代码时，目光只需要集中在这些稳定坚固的函数内部即可
- 不纯的函数式代码会产生副作用，或者依赖外部系统环境，使用他们的时候总要考虑这些不干净的副作用。在复杂的系统中，这对于程序员的心智来说是极大的负担
---
### 惰性求值，惰性函数
- 在指令式语言中以下代码会按顺序执行，由于每个函数都有可能改动或者依赖于其内部的状态。因此必须顺序执行
```js
// 求累加的函数（未使用惰性函数）
function add(num) {
let addVale = 0;
for (let i = 0; i <= num; i++) {
addVale += i
}
return addVale
}
add(2000000000) // 1s
add(2000000000) // 1s
add(2000000000) // 1s
add(2000000000) // 1s
// 总共4s
```
```js
// 求累加的函数（使用 惰性函数）
function add(num) {
let addVale = 0;
for (let i = 0; i <= num; i++) {
addVale += i
}
// 函数函数
add = function () {
addVale
}
return addVale
}
add(2000000000) // 1s
add(2000000000) // 0s
add(2000000000) // 0s
add(2000000000) // 0s
// 总共1s
```
---
## 第二部分：更加专业的术语
- 高阶函数
- 尾递归优化
- 闭包
- 容器，Functor
- 错误处理，Either，AP
- IO
- Monad
---
### 高阶函数
- 本来我函数不能做很复杂的事情，你给我传过来一个复杂的函数，我一组合就能干很复杂的事情了
- 将函数当参数，把传入的函数做一个封装，然后返回这个封装函数，达到更高程度的抽象。
---
### 尾递归优化
---
### 闭包
- 在函数里面返回一个函数就会造成闭包，更深层次的我好像也知道，给忘了
---
## 第三部分：流行的函数式编程库
- RxJS
- cycleJs
- **lodash.js**, lazy（惰性求值）
- underscoreJS
- ramadjs
---
### 1.RxJS（必学）
- 诞生以来一直不温不火，单它的函数响应式编程（FRP）理念非常先进（函数式编程 FP）
- 在RxJS中，所有的外部输入（用户输入，网络请求等等）都被试做一种事件流（这种机制特别适合处理游戏，上上下下）
---
### 2.lodash
---
### 3.underscoreJS（以后学）
================================================
FILE: docs/blog/4.JavaScript/8.TypeScript.md
================================================
---
title: 8.TypeScript
date: 2020-01-30 00:00:00
permalink:
tag:
- blog
- 4.JavaScript
---
> 注意此处：内容不全，待完善...
> TypeScript 是 JavaScript 的超集 [中文网站...](https://www.tslang.cn/)
---
## 🐬第一部分：TypeScript介绍
### 1.安装
- 前置：需要Node环境
- 安装：npm i -g typescript
- 验证：tsc -v（tsc是ts的编译器）
```sh
# 生成package.json
npm init
# 生成配置信息（生成 tsconfig.json）
tsc --init
# 工程化（自动化的帮你buid ts 项目，方便学习）
npm install webpack webpack-cli webpack-dev-server ts-loader typescript html-webpack-plugin
```
---
## 🐌第二部分：TypeScript数据类型
### 1.基本数据类型
```js
// JavaScript中也有的
let age: Number = 10;
let myName: String = '朱昆鹏';
let married: Boolean = true;
let arr1: number[] = [1, 2, 3]
let arr2: Array
---
### 7.计算属性和侦听器
```html
**App.vue**
```html
---
### 2.后端模板阶段
> ajax出现，页面可以局部刷新
> 那个时代微软IE一家独大，Node虽然也能做后端模板渲染，但是当时Node还未出现，当时有的就是 Java，PHP，C#，Python...
---
### 3.前后端分离阶段
> 这时候客户端的能力越来越强，前端能做到事情越来越多（谷歌浏览器开发 v8引擎，使js的执行效率提升很多，并且浏览器市场微软节节败退）
> 前后端分离的好处：后端可以专注的处理数据以及业务逻辑，前端专注制作样式和逻辑交互
> 前后端分离的坏处：首屏加载慢（需要等JS解析好，页面才能出来），不好的SEO
---
### 4.Node中间层
> Node作为中间层 拼接数据和HTML，返回新的HTML（Vue SSR就是在此基础上演进的）
> 这里实现的原理主要是使用模板引擎，例如Node自带的 Ejs
---
### 5.Vue SSR
> 在Node中间层这个思想的基础上，为了能使用Vue全家桶，所以就演进了Vue SSR 的模式
> 将Node代替PHP，JSP，ASP 作为服务端渲染语言，就能使用Node的生态链，如webpack等工具，通过一系列的套路，就能实现Vue SSR
---
### 6.总结
> 前端发展速度越来越快，现在 VR,人工智能，都可以在前端运行，以后5G普及之后，我们的技术会演变成什么样，我们也不清楚
> 了解 Vue SSR 产生的历史背景，可以让我们应对未来 新的架构体系的时候，有一份 快速过渡到新体系的把握
> 题外话：我觉得下一个阶段的架构，Serverless（无服务架构）会火起来
- Faas 函数即服务
- Baas 后端即服务
[掘金文章：写给前端工程师的 Serverless 入门](https://juejin.im/post/5d9c47dce51d4578045a3569)
---
## 🍧第二部分：实现一个 Vue SSR
[GitHub代码地址](https://github.com/zhukunpenglinyutong/vue-ssr-study)
### 1.node-serve
> 将Vue实例，通过Bundle Renderer 输出 HTML字符串
> HTML字符串通过模板拼接成一个真实的HTML页面，返回给客户端
---
### 2.服务端渲染
> 这里主要是对 Vue-SSR 中 服务端渲染部分的实践
> 作用就是通过 webpack，使我们写的Vue代码，能够输出一个 Vue实例
> 然后交给 Bundle Renderer 函数 输出 HTML字符串，通过Node将拼接好的HTML页面发送给客户端
---
### 3.客户端渲染
> 上述通过服务端渲染，可以输出一个完整页面，但是不具有Vue的特性，于是还需要客户端渲染
> 原理是：服务端渲染的页面会携带上特定的字段，例如 #app，并且页面解析到最后 会请求用于客户端渲染的 bunndle.client.js
> 这个会文件 会将Vue实例 挂载到 #app 上，使客户端具有Vue的特性
[Vue SSR 指南-源码结构](https://ssr.vuejs.org/zh/guide/structure.html#%E9%81%BF%E5%85%8D%E7%8A%B6%E6%80%81%E5%8D%95%E4%BE%8B)
---
## 🍭第三部分：Nuxt基础使用
### 1.初始化项目和项目目录介绍
- 安装：npx create-nuxt-app <项目名>
- 备注：npx在NPM版本5.2.0默认安装了
- 然后就让你选择一些配置
---
- assets：资源目录（用于组织未编译的静态资源如 LESS、SASS 或 JavaScript）
- components：组件目录（用于组织应用的 Vue.js 组件。Nuxt.js 不会扩展增强该目录下 Vue.js 组件，即这些组件不会像页面组件那样有 asyncData 方法的特性）
- layouts：布局目录（用于组织应用的布局组件）
- middleware：中间件目录（用于存放应用的中间件）
- pages：页面目录（用于组织应用的路由及视图。Nuxt.js 框架读取该目录下所有的 .vue 文件并自动生成对应的路由配置。
若无额外配置，该目录不能被重命名）
- plugins：插件目录（用于组织那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件）
- static：静态文件目录（用于存放应用的静态文件，此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。 服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下）
- store：Store 目录（用于组织应用的 Vuex 状态树 文件。 Nuxt.js 框架集成了 Vuex 状态树 的相关功能配置，在 store 目录下创建一个 index.js 文件可激活这些配置）
---
### 2.基础路由
> 路由规则是根据pages下的文件自动生成的
**示例**
```sh
# 在 pages/test.vue
访问 localhost:3000/test 可以
# 建立 pages/test1/test1.vue
访问 localhost:3000/test1 不行
访问 localhost:3000/test1/test1 可以
# 建立 pages/test1/index.vue
访问 localhost:3000/test1 可以
```
---
### 3.路由跳转
```js
安装其他内容：npm i ant-design-vue moment
```js
import Antd from "ant-design-vue";
import "ant-design-vue/dist/antd.less";
Vue.use(Antd);
// 这里会报一个错，说的是引入 .less 的文件还需要一些配置啥的吧，这样就引出了下面要整的 自定义webpack配置
```
---
### 2.如何自定义Webpack和Babel配置
**自定义webpack配置（vue.config.js）**
```js
// 新建 vue.config.js
module.exports = {
css: {
loaderOptions: {
less: {
javascriptEnabled: true,
},
css: {
// 这里的选项会传递给 css-loader
},
postcss: {
// 这里的选项会传递给 postcss-loader
}
}
}
}
```
- [本问题 vue-cli 自定义配置网址](https://cli.vuejs.org/zh/config/#css-loaderoptions)
- [问题解决方案地址](https://github.com/ant-design/ant-motion/issues/44)
---
**Babel配置**
- 我们可以通过 .babel 来转义ES6中识别不了的语法，也可以 通过一个插件来实现 UI组件的按需加载
- 安装：npm i babel-plugin-import --dev
```js
module.exports = {
presets: ["@vue/app"],
plugins: [
[
"import",
{ libraryName: "ant-design-vue", libraryDirectory: "es", style: true }
]
]
};
```
- [babel按需加载 配置](https://vue.ant.design/docs/vue/use-with-vue-cli-cn/)
```js
// 按需加载 代码效果 示例（不用引入CSS了，因为这个插件帮忙引入了）
import { Button, Switch } from "ant-design-vue";
Vue.use(Button);
Vue.use(Switch);
```
---
**拓展：使用 Prettier格式化代码，例如 给我们自动双引号变单引号，等操作**
- [学习笔记](https://www.jianshu.com/p/5f7dbffc257e)
- [官网](https://prettier.io/docs/en/options.html?spm=a2c4e.11153940.blogcont422690.11.5d0b5721zZ3CkZ)
---
### 3.如何设计一个高拓展性的路由？
**示例路由**
```js
import Vue from "vue";
import Router from "vue-router";
Vue.use(Router);
export default new Router({
mode: "history",
base: process.env.BASE_URL,
routes: [
{
path: "/user", // 用户相关的路由
children: [
{
path: '/user/login', // 登录
name: 'login',
component: () => {
import(/* webpackChunkName: "user" */ "./views/User/Login.vue")
}
},
{
path: '/user/register', // 注册
name: 'register',
component: () => {
import(/* webpackChunkName: "user" */ "./views/User/Register.vue")
}
}
]
}
]
});
```
---
**🔥加载提示库（防止路由切换白屏时间太长的问题，增加友好提示）**
- 安装：npm i nprogress
```js
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
// Vue路由守卫
router.beforeEach( (to, form, next) => {
NProgress.start()
next()
})
router.afterEach( () => {
NProgress.done()
})
```
================================================
FILE: docs/blog/7.React/1.React基础.md
================================================
---
title: 1.React基础
date: 2020-01-30 00:00:00
permalink:
tag:
- blog
- 7.React
---
> 等待书写中...
## 🍡第一部分：React初探
### 1.React简介
- react是由Facebook在2013年5月推出的一个前端框架，带来一种函数式编程风格
- react比vue更灵活一些，Vue比react多一些api，使用起来更简单
---
### 2.React开发环境搭建
**使用脚手架工具来生成**
- 前置条件：有Node环境
- 安装React脚手架：npm i create-react-app -g
- 生成工程：create-react-app my-app
---
### 3.工程目录文件简介
- public
- manifest.json 给PWA使用
- src 工程文件夹
- index.js 程序入口文件
- App.js 组件
- App.test.js: 测试文件
---
### 4.React中的组件
```js
// 这就是一个组件，为什么要引入 React呢，因为下面的 div 是JSX的标签，需要引入react进行编译
import React from 'react';
function App() {
return (
**电路结构**
> 智能手机的电路是智能手机的核心，负责手机的供电、控制以及手机各种功能的实现。智能手机的电路主要包括：射频电路、语音电路、处理器及存储器电路、电源及充电电路、操作及屏显电路、接口电路，以及其他功能电路（如蓝牙、天线、收音、传感器、振动器、摄像头电路等）
---
### 2.智能手机中的重要芯片
**双处理器结构**
双处理器结构智能手机主要包括：主处理器和从处理器
- **主处理器（ApplicaTIonProcessor，应用处理器）**，运行开放式操作系统以及操作系统之上的各种应用，负责整个系统的控制
- **从处理器（BasebandProcessor，基带处理器）**，负责基本无线通信，主要包括DBB（DigitalBaseband，数字基带芯片）和ABB（AnalogBaseband，模拟基带），完成语音信号和数字语音信号调制解调、信道编码解码和无线Modem控制
备注：智能手机只是在传统手机的基本硬件结构中BP的部分增加一定的外围电路，如音频芯片、LCD控制、摄像机控制器、扬声器、天线等，就构成了一个完整的智能手机的硬件结构。
---
**单处理器结构**
单处理器智能手机只包括一个处理器，所谓的单处理器就是说智能手机的基本通信功能（通话、信息、GPRS等）和多媒体、应用软件的处理只用一个处理器来解决。这枚单处理器集成了数字基带、模拟基带、射频、电源管理、SRAM等功能
---
**中央处理器芯片**
中央处理器（CenterProcessingUnit，CPU）芯片是智能手机的核心部件，手机中的微处理器类似计算机中的中央处理器，它是整台智能手机的控制中枢系统，也是逻辑部分的控制核心。微处理器通过运行存储器内的软件及调用存储器内的数据库，达到对手机整体监控的目的。凡是要处理的数据都要经过CPU来完成，手机各个部分的管理等都离不开微处理器这个司令部的统一、协调指挥。随着集成电路生产技术及工艺水平的不断提高，手机中微处理器的功能越来越强大，如在微处理器中集成先进的数字信号处理器（DSP）等。处理器的性能决定了整部手机的性能。目前智能手机处理器厂商主要有：德州仪器、Intel、高通、三星、Marvell、英伟达、华为等
---
**存储芯片（储存信息）**
智能手机的存储器有多种：Flash存储器、RAM随机存储器、ROM只读存储器等，其中，手机存储器主要用来存储手机的主程序、字库、用户程序、用户数据等
- RAM随机存储器主要用于存储智能手机运行时的程序和数据，需要执行的程序或者需要处理的数据都必须先装入RAM内。
- ROM只读存储器是指只能从该设备中读取数据而不能往里面写数据的存储器。ROM中的数据是由手机制造商事先编好固化在里面的一些程序，使用者不能随意更改。ROM主要用于检查手机系统的配置情况，并提供最基本的输入输出（I/O）程序。
- Flash存储器是一种长寿命的非易失性（在断电情况下仍能保持所存储的数据信息）存储器，数据删除不是以单个的字节为单位，而是以固定的区块为单位。由于Flash存储器断电时仍能保存数据，它通常被用来保存设置信息，如用户对手机的设置信息等
---
**射频芯片（负责调制和解调信号）**
在手机终端中，射频芯片负责射频收发、频率合成、功率放大；而基带芯片负责信号处理和协议处理。简单地说，射频芯片起到一个发射机和接收机的作用。有的射频芯片还为处理器芯片提供26MHz的系统时钟信号。
---
**放大器芯片（放大信号的射频功率）**
智能手机中的射频功率放大器芯片的作用主要是对射频信号进行放大，使得有足够的功率发射给基站。射频功率放大器是智能手机中耗电量较大的元件之一，它内部主要集成了滤波器、放大器、匹配电路、功率检测、偏压控制等电路
---
**电源管理芯片（管理手机供电）**
电源管理芯片（PowerManagemenTIntegratedCircuits）是在智能手机系统中承担对电能的变换、分配、检测及其他电能管理职责的芯片。同时，还可以对电池充电进行管理和控制
---
**音频处理器芯片（管理声音）**
智能手机的音频处理器主要处理手机的声音信号，它主要负责接收和发射音频信号，是实现手机听见对方声音的关键元件。音频处理器对基带信号进行解码、D/A转换等处理后输出音频信号
---
## 📚参考列表（致敬）
- [史上最全最详细手机发展史（绝对经典，收藏）](https://www.sohu.com/a/213599424_202311)
- [移动开发的跨平台技术发展史 | 技术头条（CSDN）](https://blog.csdn.net/csdnnews/article/details/89629327)
- [智能手机的硬件组成部分及结构图](http://www.elecfans.com/xinkeji/610458.html)
================================================
FILE: docs/blog/8.移动端/1.移动端H5页面适配.md
================================================
---
title: 0.移动端开发绪论
date: 2020-01-30 00:00:00
permalink:
tag:
- blog
- 8.移动端
---
> 适配采用 rem 的方案
## 🍇第一部分：rem代码 和 基础示例
### rem.js
```js
!function(win, doc) {
var htmlDom = doc.getElementsByTagName("html")[0];
var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
var recalc = function() {
var htmlWidth = doc.documentElement.clientWidth || doc.body.clientWidth;
htmlDom.style.fontSize = htmlWidth / 10 + 'px';
}
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
}(window, document);
```
---
### html示例
```html
---
### webpack postcss 插件 high-pxtorem【🔥 推荐】
这个可以在webpack编译的时候，将 px 转为 rem，我可以像写普通代码一样，不用太关心适配问题了。
我现在在用这个，但是需要你有一定的 webpack 基础才行，但是用起来就没事了，要是没有一定的基础，可能都配置不起来
[high-pxtorem npm地址](https://www.npmjs.com/package/high-pxtorem)
================================================
FILE: docs/blog/8.移动端/2.移动端H5手机内调试.md
================================================
---
title: 2.移动端H5手机内调试
date: 2020-01-30 00:00:00
permalink:
tag:
- blog
- 8.移动端
---
> 移动端H5手机内调试 神器：vconsole
## 🥞第一部分：vconsole使用
### 基本使用
```html
```
- [vcondole npm 地址](https://www.npmjs.com/package/vconsole)
**功能：**
- 查看 console 日志
- 查看网络请求
- 查看页面 element 结构
- 查看 Cookies、localStorage 和 SessionStorage
- 手动执行 JS 命令行
- 自定义插件
---
### 效果展示（点击 右下角 绿色按钮 👀）
---
================================================
FILE: docs/blog/8.移动端/3.Flutter.md
================================================
---
title: 3.Flutter
date: 2020-01-30 00:00:00
permalink:
tag:
- blog
- 8.移动端
---
> 等待书写中...
================================================
FILE: docs/blog/8.移动端/4.React-Native.md
================================================
---
title: 4.React-Native
date: 2020-01-30 00:00:00
permalink:
tag:
- blog
- 8.移动端
---
> 等待书写中...
================================================
FILE: docs/blog/8.移动端/5.移动端原生开发/5.移动端原生开发.md
================================================
---
title: 5.移动端原生开发
date: 2020-01-30 00:00:00
permalink:
tag:
- blog
- 8.移动端
---
## 第一章：Android系统简介和环境搭建
环境搭建是真的难...，我这里用的是 android Studio Mac 版本
---
## 第二章：Android基础UI使用
> 布局管理器之间的继承关系：布局管理器都是以ViewGroup（视图组，这个是通过View继承来的）为基类派生出来的，使用布局管理器可以适配不同手机屏幕的分辨率，尺寸大小
---
### 🔥 第一节：Android布局（线性布局）
> 线性布局（LinearLayout）：按照垂直或者水平方向布局的组件
通过 android:orientation 属性设置线性布局方向
通用属性（每个控件都要设置的）
- android:layout_width="wrap_content" 当前组件的宽度
- 值：wrap_content：包裹内容
- 值：match_parent：匹配父控件
- android:layout_height="wrap_content" 当前组件的高度
- 值：wrap_content：包裹内容
- 值：match_parent：匹配父控件
- android:orientation 设置布局方向
- horizontal：按照水平方向摆放
- vertical：垂直摆放
- android:gravity 用来控制组件的对齐方式
- android:layout_gravity 设置的是本身的对齐方式
- layout_weight 控制各个组件在布局中的相对大小
- android:padding：内边距
- android:paddingTop="50dp" ：内边距（顶部）
- ...
- android：padding="" ：内边距（四个方向，和css类似）
- android:layout_margin：外边距
- android:layout_marginTop="50dp"：外边距（顶部）
- ...
- android:layout_margin（四个方向）
---
非通用布局
- android:gravity：控制容器内子控件的方向
- 值：left,right,top,bottom
- top|right（两个属性一起加，右上）
- center(垂直水平居中)，center_horizontal（水平居中），center_vertical（垂直居中）
- android:layout_gravity：设置本身的方向（常用在子组件中，取值方向和android:gravity一样）
- 权重布局：等分，类似于css栅格布局（值越大，占用的空间越大）
- android:layout_weight="1"
- android:layout_height="1"
---
常用单位
- 设置长宽的时候，dp（dip）
- 使用字体的时候，使用sp
- in：表示英寸（屏幕物理尺寸）
- mm：表示毫米（屏幕物理尺寸）
- pt：表示一个点（屏幕物理尺寸）
---
```xml
---
### 🔥 第二节：Android布局（相对布局）
> 相对布局（RelativeLayout）：相对其他
---
### 🔥 第三节：Android布局（帧布局）
> 帧布局（FrameLayout）：组件从屏幕左上方布局组件
---
### 第四节：Android布局（绝对布局）
> 绝对布局（AbsoluteLayout）：按照绝对坐标来布局组件
---
### 第五节：Android布局（表格布局）
> 表格布局（TableLayout）：按照行列方式布局组件
---
### 第六节：TextView（）
---
### 第七节：EditText（可编辑的文本框）
```xml
```xml
```xml