Nest 的功能都是大多通过装饰器来使用的，这节我们就把所有的装饰器过一遍。
+我们创建个新的 nest 项目：
+nest new all-decorator -p npm
+Nest 提供了一套模块系统，通过 @Module声明模块：
+通过 @Controller、@Injectable 分别声明其中的 controller 和 provider：
+这个 provider 可以是任何的 class：
+注入的方式可以是构造器注入：
+或者属性注入：
+属性注入要指定注入的 token，可能是 class 也可能是 string。
+你可以通过 useFactory、useValue 等方式声明 provider：
+这时候也需要通过 @Inject 指定注入的 token：
+这些注入的依赖如果没有的话，创建对象时会报错。但如果它是可选的，你可以用 @Optional 声明一下，这样没有对应的 provider 也能正常创建这个对象。
+如果模块被很多地方都引用，为了方便，可以用 @Global 把它声明为全局的，这样它 exports 的 provider 就可以直接注入了：
+filter 是处理抛出的未捕获异常的，通过 @Catch 来指定处理的异常：
+然后通过 @UseFilters 应用到 handler 上：
+除了 filter 之外，interceptor、guard、pipe 也是这样用：
+当然，pipe 更多还是单独在某个参数的位置应用：
+这里的 @Query 是取 url 后的 ?bbb=true，而 @Param 是取路径中的参数，比如 /xxx/111 种的 111
+此外，如果是 @Post 请求，可以通过 @Body 取到 body 部分：
+我们一般用 dto 的 class 来接受请求体里的参数：
+nest 会实例化一个 dto 对象：
+用 postman 发个 post 请求：
+可以看到 nest 接受到了 body 里的参数：
+除了 @Get、@Post 外，还可以用 @Put、@Delete、@Patch、@Options、@Head 装饰器分别接受 put、delete、patch、options、head 请求：
+handler 和 class 可以通过 @SetMetadata 指定 metadata：
+然后在 guard 或者 interceptor 里取出来：
+你可以通过 @Headers 装饰器取某个请求头 或者全部请求头：
+通过 @Ip 拿到请求的 ip：
+通过 @Session 拿到 session 对象：
+但要使用 session 需要安装一个 express 中间件：
+npm install express-session
+在 main.ts 里引入并启用：
+指定加密的密钥和 cookie 的存活时间。
+然后刷新页面：
+会返回 set-cookie 的响应头，设置了 cookie，包含 sid 也就是 sesssionid。
+之后每次请求都会自动带上这个 cookie：
+这样就可以在 session 对象里存储信息了。
+@HostParam 用于取域名部分的参数：
+我们再创建个 controller：
+nest g controller aaa --no-spec --flat
+这样指定 controller 的生效路径：
+import { Controller, Get, HostParam } from '@nestjs/common';
+
+@Controller({ host: ':host.0.0.1', path: 'aaa' })
+export class AaaController {
+ @Get('bbb')
+ hello() {
+ return 'hello';
+ }
+}
+controller 除了可以指定某些 path 生效外，还可以指定 host：
+然后再访问下：
+这时候你会发现只有 host 满足 xx.0.0.1 的时候才会路由到这个 controller。
+host 里的参数就可以通过 @HostParam 取出来：
+import { Controller, Get, HostParam } from '@nestjs/common';
+
+@Controller({ host: ':host.0.0.1', path: 'aaa' })
+export class AaaController {
+ @Get('bbb')
+ hello(@HostParam('host') host) {
+ return host;
+ }
+}
+前面取的这些都是 request 里的属性，当然也可以直接注入 request 对象：
+通过 @Req 或者 @Request 装饰器，这俩是同一个东西：
+注入 request 对象后，可以手动取任何参数：
+当然，也可以 @Res 或者 @Response 注入 response 对象，只不过 response 对象有点特殊：
+当你注入 response 对象之后，服务器会一直没有响应：
+因为这时候 Nest 就不会再把 handler 返回值作为响应内容了。
+你可以自己返回响应：
+Nest 这么设计是为了避免你自己返回的响应和 Nest 返回的响应的冲突。
+如果你不会自己返回响应，可以通过 passthrough 参数告诉 Nest：
+除了注入 @Res 不会返回响应外，注入 @Next 也不会：
+当你有两个 handler 来处理同一个路由的时候，可以在第一个 handler 里注入 next，调用它来把请求转发到第二个 handler：
+Nest 不会处理注入 @Next 的 handler 的返回值。
+handler 默认返回的是 200 的状态码，你可以通过 @HttpCode 修改它：
+当然，你也可以修改 response header，通过 @Header 装饰器：
+此外，你还可以通过 @Redirect 装饰器来指定路由重定向的 url：
+或者在返回值的地方设置 url：
+@Get('xxx')
+@Redirect()
+async jump() {
+ return {
+ url: 'https://www.baidu.com',
+ statusCode: 302
+ }
+}
+你还可以给返回的响应内容指定渲染引擎，不过这需要先这样设置：
+import { NestFactory } from '@nestjs/core';
+import { AppModule } from './app.module';
+import { NestExpressApplication } from '@nestjs/platform-express';
+import { join } from 'path';
+
+async function bootstrap() {
+ const app = await NestFactory.create<NestExpressApplication>(AppModule);
+
+ app.useStaticAssets(join(__dirname, '..', 'public'));
+ app.setBaseViewsDir(join(__dirname, '..', 'views'));
+ app.setViewEngine('hbs');
+
+ await app.listen(3000);
+}
+bootstrap();
+
+分别指定静态资源的路径和模版的路径，并指定模版引擎为 handlerbars。
+当然，还需要安装模版引擎的包 hbs：
+npm install --save hbs
+然后准备图片和模版文件：
+在 handler 里指定模版和数据：
+就可以看到渲染出的 html 了：
+案例代码在小册仓库。
+总结
+这节我们梳理了下 Nest 全部的装饰器
+-
+
- @Module： 声明 Nest 模块 +
- @Controller：声明模块里的 controller +
- @Injectable：声明模块里可以注入的 provider +
- @Inject：通过 token 手动指定注入的 provider，token 可以是 class 或者 string +
- @Optional：声明注入的 provider 是可选的，可以为空 +
- @Global：声明全局模块 +
- @Catch：声明 exception filter 处理的 exception 类型 +
- @UseFilters：路由级别使用 exception filter +
- @UsePipes：路由级别使用 pipe +
- @UseInterceptors：路由级别使用 interceptor +
- @SetMetadata：在 class 或者 handler 上添加 metadata +
- @Get、@Post、@Put、@Delete、@Patch、@Options、@Head：声明 get、post、put、delete、patch、options、head 的请求方式 +
- @Param：取出 url 中的参数，比如 /aaa/:id 中的 id +
- @Query: 取出 query 部分的参数，比如 /aaa?name=xx 中的 name +
- @Body：取出请求 body，通过 dto class 来接收 +
- @Headers：取出某个或全部请求头 +
- @Session：取出 session 对象，需要启用 express-session 中间件 +
- @HostParm： 取出 host 里的参数 +
- @Req、@Request：注入 request 对象 +
- @Res、@Response：注入 response 对象，一旦注入了这个 Nest 就不会把返回值作为响应了，除非指定 passthrough 为true +
- @Next：注入调用下一个 handler 的 next 方法 +
- @HttpCode： 修改响应的状态码 +
- @Header：修改响应头 +
- @Redirect：指定重定向的 url +
- @Render：指定渲染用的模版引擎 +
把这些装饰器用熟，就掌握了 nest 大部分功能了。
2.非线形数据结构：树、图、堆、哈希表 + +- 按照物理结构（在计算机内存中的存储方式） + +1. 连续空间存储 +2. 离散空间存储 + +### 数组 + +> 将相同类型元素存储在连续内存空间的数据结构，为什么数组的索引从0开始？因为索引本质上表示的是内存地址的偏移量，首个地址的偏移量是0，所以索引自然为0 + +#### 优点 + +- 快速查找，直接访问对应索引元素 + +#### 缺点 + +- 插入和删除的效率比较低（插入的时候需要后挪，删除的时候需要前移，时间复杂度O(N）） + +### 链表 + +> 一种线形数据结构，由一个个节点连接。节点中包含包含：当前节点的值value和指向下一个节点的地址next + +#### 优点 + +- 插入和删除的效率高，只需要改变原来一个节点的指针 + +#### 缺点 + +- 访问节点的效率低，不能直接访问想要的节点，只能通过前置节点才能知道下一个节点 +- 内存占用多，因为一个节点的内容除了包含值还有下个节点的饮用地址 + +尾节点的next字段值为null + +#### 链表类型 + +1. 单向链表 +2. 环形链表 +3. 双向链表 + +### 栈 + +> 先进后出，叠在一起的盘子，要拿最低下的盘子，需要把上面的盘子一个个拿走 + +`javascript`可以使用数组模拟栈操作，也可以使用链表 + +### 队列 + +> 先进先出 + +`javascript`可以使用数组模拟栈操作，也可以使用链表 + +#### 队列类型 + +- 双向队列，两端都可以添加和删除元素 + +### 哈希表(HashMap) +> +> 哈希表通过键值之前的映射，实现高效的元素查找。时间复杂度0(1),在`js`中可以使用Map类型来实现 +> 避免hash冲突可以是用Symbol来指定唯一key + +### 二叉树 + +> 二叉树是一种非线性数据结构，表示祖先与后代之间的派生关系，体现一分为二的分治逻辑。类似于链表，二叉树也是节点关联。节点包含一个值，两个指针，左指针和右指针 + +```js +/* 初始化二叉树 */ +// 初始化结点 +let n1 = new TreeNode(1), + n2 = new TreeNode(2), + n3 = new TreeNode(3), + n4 = new TreeNode(4), + n5 = new TreeNode(5); +// 构建引用指向（即指针） +n1.left = n2; +n1.right = n3; +n2.left = n4; +n2.right = n5; +``` + +#### 完美二叉树 + +所有的节点都被填满，所有节点的度为2 + + + +#### 完全二叉树 + +只有最底层的节点没有被填满，且最底层节点尽量靠左填充 + + + +#### 完满二叉树 + +除了叶结点之外，其余所有的节点都有两个子节点 + + + +#### 平衡二叉树 + +任意节点的左子树和右子树的高度之差绝对值  + + + + + +#### 层序遍历（广度优先） + +从上到下，从左到右 + + + +#### 前序/中序/后序（深度优先） + +其体现着一种：先走到头，再回头继续的遍历方式 + +- 前序访问： // 访问优先级：根结点 -> 左子树 -> 右子树 +- 中序访问： // 访问优先级：左子树 -> 根结点 -> 右子树 +- 后序访问： // 访问优先级：左子树 -> 右子树 -> 根结点 + + + + + +#### 二叉搜索树 + +二叉搜索树需要满足： + +1. 对于根节点，左子树中所有的节点的值 < 根节点的值 < 右子树所有的节点值 +2. 任意节点的左子树和右子树也是满足条件1，即也是二叉搜索树 + +对于以上，可以想到先排序，然后二分 + + + +#### AVL树 +> +> AVL 树的独特之处在于「旋转 Rotation」的操作，其可 **在不影响二叉树中序遍历序列的前提下，使失衡结点重新恢复平衡**。换言之，旋转操作既可以使树保持为「二叉搜索树」，也可以使树重新恢复为「平衡二叉树」。 + + + +#### 堆 + +一颗限定条件下的「完全二叉树」。
根据成立条件： + +- Max Heap 大顶堆： 任意节点的值 ≥ 其子节点的值 +- Min Heap 小顶堆： 任意节点的值 ≤ 其子节点的值 + + + +### 查找算法 + + + +#### 线形查找 + +遍历数据结构+判断是否命中
时间复杂度： O(n)
空间复杂度： O(1) + + +##### 优点 + +- 线形查找通用性极佳：没有跳跃访问的元素，数组和链表都可以 + + +##### 缺点 + +- 线形查找的时间复杂度太高，n足够大时，查找销量低 + + +#### 二分查找 + +利用数据的有序性，通过每轮缩小一半的搜索区间来查找
使用二分法的两个前置条件： + +- 数据必须有序性 +- 仅适用于数组，因为在循环的过程中需要跳跃 + +> 如果为了满足数据有序性，去做数据的排序，是得不偿失。排序算法的时间复杂度一般为O(nlogn) + + + +##### 优点 + +- 时间复杂度低 +- 不需要额外的空间 + + +##### 缺点 + +- 仅适用于有序数据 +- 仅适用于数组 +- 在小数据量情况下，线形查找的性能更好 + + +#### hash查找 + +借助一个哈希数据结构，根据键值对的映射，实现O(1)的查找，以空间换时间
在`js`中使用Map类型 + + +##### 优点 + +- 查找、插入、删除操作的平均时间复杂度都为 O(1) + + +##### 缺点 + +- 需要使用额外空间 +- 建立hash需要时间，不适合高频增删改，低频查找 +- 数据量小，线形查找更快 + + +#### + + + +### 排序算法 + + + +#### 冒泡排序 + +```javascript +function bubbleSort(arrs) { + for (let i = nums.length; i > 0; i--) { + for (let j = 0; j < i; j++) { + if (nums[j] > nums[j+1]) { + const tmp = nums[j]; + nums[j] = nums[j+1] + nums[j+1] = tmp + } + } + } +} +``` + + + +#### 插入排序 + +```javascript +function insertSort(nums) { + for (let i = 1; i < nums.length; i++) { + let tmp = nums[i] + let j = i - 1 + while(j >= 0 && nums[i] < nums[j]) { + nums[i] = nums[j] + j-- + } + nums[j+1] = tmp + } +} +``` + + + +#### 快速排序 + +```javascript +// 先计算一次分割点，然后递归 +function partition(nums, left, right) { + // 取第一个元素为基准值 + // i 从左往右找到一个 大于基准值的 + // j 从右往左找到一个 小于基准值的 + let i = left + let j = right + const base = nums[i] + while(i < j) { + while(i < j && nums[j] > nums[left]) { + j-- + } + while(i < j && nums[i] <= nums[left]) { + i++ + } + swap(nums, i, j) + } + // i,j重叠 + swap(nums, i, left) + return i +} +function swap(nums, i, j) { + const tmp = nums[i] + nums[i] = nums[j] + nums[j] = tmp +} +// +function quickSort(nums, left, right) { + if (left >= right) { + return + } + const pivot = partition(nums, left, right) + quickSort(nums, left, pivot - 1) + quickSort(nums, pivot + 1, right) +} +``` diff --git "a/src/Other/JS\345\276\252\347\216\257\345\260\217\350\256\260.md" "b/src/Other/JS\345\276\252\347\216\257\345\260\217\350\256\260.md" new file mode 100644 index 0000000..f613a08 --- /dev/null +++ "b/src/Other/JS\345\276\252\347\216\257\345\260\217\350\256\260.md" @@ -0,0 +1,70 @@ +--- + title: 'JS循环小记' + shortTitle: '' + description: '' + icon: '' + author: + name: 'Song' + isOriginal: true + date: 2019-08-01 + category: '' + tag: 'javascript' + sticky: 1 + star: false + article: true + timeline: true + image: '' + editLink: false +--- + + ### 循环类型 +在ECMA262标准第三版中定义了四种类型的循环 +#### for +#### while +#### do...while... +#### for...in... + +for in 循环比其他几种要慢，这是因为每次迭代时都会搜索实例和原型对象 + +```javascript +for (const key in object) { + if (object.hasOwnProperty(key)) { + const element = object[key]; + + } +} +``` +上面代码是vscode快速补全插件带出来的forin循环，加了hasOwnProperty判断 + +```javascript +Object.prototype.objCustom = function() {}; +Array.prototype.arrCustom = function() {}; + +let iterable = [3, 5, 7]; +iterable.foo = 'hello'; + +for (let i in iterable) { + console.log(i); // logs 0, 1, 2, "foo", "arrCustom", "objCustom" +} + +for (let i in iterable) { + if (iterable.hasOwnProperty(i)) { + console.log(i); // logs 0, 1, 2, "foo" + } +} +``` +上面代码就直观了。 +所以除非明确需要迭代一个属性数量未知的对象，否则避免使用forin，用它来遍历数组也是得不偿失 + +至于 `for...of` +> [`for...in`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/for...in) 语句以原始插入顺序迭代对象的[可枚举属性](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Enumerability_and_ownership_of_properties)。 +> `for...of` 语句遍历[可迭代对象](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Iterators_and_Generators#Iterables)定义要迭代的数据。 +> + +```javascript +for (let i of iterable) { + console.log(i); // logs 3, 5, 7 +} +``` + +该循环迭代并记录`iterable`作为[可迭代对象](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Iterators_and_Generators#Iterables)定义的迭代值，这些是数组元素 `3`, `5`, `7`，而不是任何对象的**属性**。 diff --git a/src/Other/Promise.md b/src/Other/Promise.md new file mode 100644 index 0000000..5334fc4 --- /dev/null +++ b/src/Other/Promise.md @@ -0,0 +1,70 @@ +--- + title: 'Promise' + shortTitle: '' + description: '' + icon: '' + author: + name: 'Song' + isOriginal: true + date: 2019-09-22 + category: '' + tag: 'javascript' + sticky: 1 + star: false + article: true + timeline: true + image: '' + editLink: false +--- + + ## 新建一个Promise实例的时候，发生了什么 + +```javascript +const chenjian = new Promise(function(resolved, rejected) { + setTimeout( () => { + resolved() + },1000) + }) +chenjian.then(function(){}) +``` + +new一个实例的时候，Promise构造函数使用内部的doResolve方法运行了它的入参，所以为啥里面的代码会同步执行。代码如下 + +```javascript +function Promise(fn) { + if (typeof this !== 'object') { + throw new TypeError('Promises must be constructed via new'); + } + if (typeof fn !== 'function') { + throw new TypeError('Promise constructor\'s argument is not a function'); + } + this._deferredState = 0; + this._state = 0; + this._value = null; + this._deferreds = null; + if (fn === noop) return; + doResolve(fn, this); +} +function doResolve(fn, promise) { + var done = false; + // 这就是为啥生成实例时会同步运行，因为这里运行了fn + var res = tryCallTwo(fn, function (value) { + if (done) return; + done = true; + resolve(promise, value); + }, function (reason) { + if (done) return; + done = true; + reject(promise, reason); + }); + if (!done && res === IS_ERROR) { + done = true; + reject(promise, LAST_ERROR); + } +} +``` + +这里我们使用的是setTimeout来模拟一个异步，过1秒之后会运行resolved方法，resolved和rejected方法，在Promise函数内部都有定义，他们的作用是改变函数的状态。因为是异步，所以并不会立刻改变状态。 +根据事件循环机制，计时器的回调会在计时结束之后被推入消息队列。 +在等待1s的时候，程序还是会继续运行。运行了then方法，那么来看看运行then方法时发生了什么： +then方法会新建一个Promise实例,然后判断状态变成了成功还是失败，成功就执行then里面的成功回调，并且判断成功回调是否有返回值，没有返回值执行结束，有返回值那么就去重新从resolve方法来一遍，但是注意的是promise是新的实例。 diff --git "a/src/Other/Set\346\225\260\346\215\256\347\261\273\345\236\213\347\233\270\345\205\263.md" "b/src/Other/Set\346\225\260\346\215\256\347\261\273\345\236\213\347\233\270\345\205\263.md" new file mode 100644 index 0000000..2a38b37 --- /dev/null +++ "b/src/Other/Set\346\225\260\346\215\256\347\261\273\345\236\213\347\233\270\345\205\263.md" @@ -0,0 +1,54 @@ +--- + title: 'Set数据类型相关' + shortTitle: '' + description: '' + icon: '' + author: + name: 'Song' + isOriginal: true + date: 2019-06-14 + category: '' + tag: 'javascript' + sticky: 1 + star: false + article: true + timeline: true + image: '' + editLink: false +--- + + 类似于数组，但是值都是唯一的。 +`const a = new Set([1,2,3,3,4])` +##### Set 内部判断两个值是否不同，使用的算法叫做“Same-value-zero equality” +了解下各比较算法 + +1.比较熟悉的 == 和 ===，前者会在类型不相等时，依据规则进行类型转换。而后者则是不允许类型转化来比较。 +2. `Object.is()` 方法也是比较两者是否相等，它使用的是**SameValue算法。**与 == 和 ===的区别如下 + +```javascript +Object.is(NaN, NaN) // true +Object.is(0,-0) // false +Object.is(null, null) // true +NaN === NaN // false +null === null // true +0 === -0 // true +``` +3.我们Set内部使用的是**SameValueZero算法，**而它的不同之处 + +```javascript +const a = new Set([0, -0, NaN, null]) +a.has(NaN) +// true +a.has(NaN) +// true +a.add(NaN) +Set(3) {0, NaN, null} +a.has(NaN) +// true +// 可以看到NaN在使用SameValueZero算法的时候NaN是相等的，这和SameValue表现一样， +// 0和-0也认为他们是相等,这就和Object.is()的结论不一致，也就是和SameValue表现不一致 +``` + +总结：Set数据类型保证其值唯一不重复是依据SameValueZero算法实现 + + diff --git "a/src/Other/node\345\255\246\344\271\240\347\254\224\350\256\260.md" "b/src/Other/node\345\255\246\344\271\240\347\254\224\350\256\260.md" new file mode 100644 index 0000000..c3609d2 --- /dev/null +++ "b/src/Other/node\345\255\246\344\271\240\347\254\224\350\256\260.md" @@ -0,0 +1,69 @@ +--- + title: 'node学习笔记' + shortTitle: '' + description: '' + icon: '' + author: + name: 'Song' + isOriginal: true + date: 2019-05-21 + category: '' + tag: 'node' + sticky: 1 + star: false + article: true + timeline: true + image: '' + editLink: false +--- + + ### commonJS规范 +#### 模块 +一个文件为一个模块，对模块的定义分为： 模块引用，模块定义，模块标识三个部分 +##### 模块引用 +`const chenjian = require(./chenjian.js)` +##### 模块定义 +上下文提供了export对象来导出模块，在模块中还存在一个module对象，它代表模块自身，所以export是 +module的属性。 +` export.say = function (){alert('hellow, i am good man')}` +##### 模块标识 +模块标识其实就是传递给require的参数 + + + + +### node 对模块的实现 + node中模块的实现还是和commonsJS有些不同的 +引入一个文件，node会进行 +1.文件路径分析 +2.文件定位 +3.文件编译 +node中的那些内置模块在node进程运行的时候就已经编译到内存中了，所以内置模块的获取和访问是最快的 + +node对模块的访问会和浏览器一样对对象进行缓存，但是浏览器缓存的对象是文件，而node则是编译和执行之后的 +对象 + + +1.**node对CommonJs的实现**：事实上，在编译的过程中，Node对获取的JavaScript文件内容进行了头尾包装。在头部添加了(function (exports, require, module, __filename, __dirname) {\n，在尾部添加了\n});。 +一个正常的JavaScript文件会被包装成如下的样子 + +``` +(function (exports, require, module, __filename, __dirname) { + var math = require('math'); + exports.area = function (radius) { + return Math.PI * radius * radius; + }; +}); +``` + +这就是这些变量并没有定义在每个模块文件中却存在的原因。在执行之后，模块的exports属性被返回给了调用方。 + +2.Node调用process.dlopen()方法进行加载和执行。在Node的架构下，dlopen()方法在Windows和*nix平台下分别有不同的实现，通过libuv兼容层进行了封装。 + +3.**模块类型的层级关系：** + +内建模块（纯c/c++编写的模块） ===> 核心模块（部分c/c++编写，由javascript封装的模块，Node的buffer、crypto、evals、fs、os等模块都是部分通过C/C++编写的。） ===> 文件模块（指开发者自己创建的文件） + +### node + + diff --git "a/src/Other/\344\272\214\345\217\211\346\240\221\344\270\216\345\233\276.md" "b/src/Other/\344\272\214\345\217\211\346\240\221\344\270\216\345\233\276.md" new file mode 100644 index 0000000..5850c0d --- /dev/null +++ "b/src/Other/\344\272\214\345\217\211\346\240\221\344\270\216\345\233\276.md" @@ -0,0 +1,35 @@ +--- + title: '二叉树与图' + shortTitle: '' + description: '' + icon: '' + author: + name: 'Song' + isOriginal: true + date: 2020-06-21 + category: '' + tag: 'javascript' + sticky: 1 + star: false + article: true + timeline: true + image: '' + editLink: false +--- + + ### 深度遍历 +#### 前序遍历 +根结点-->左子树-->右子树 +#### 中序遍历 +左子树-->根结点-->右子树 +#### 后续遍历 +左子树-->右子树-->根结点 +### 二叉查找树 + +- 若任意节点的左子树不为空，则左子树上所有节点的值均小于它的根节点的值 +- 若任意节点的右子树不为空，则右子树上所有节点的值均大于它的根节点的值 +- 任意节点的左、右子树也分别为二叉查找树 +- 没有键值相等的节点 + +### 图 + diff --git "a/src/Other/\345\206\205\345\255\230\357\274\214\344\272\213\344\273\266\345\276\252\345\214\226\346\234\272\345\210\266.md" "b/src/Other/\345\206\205\345\255\230\357\274\214\344\272\213\344\273\266\345\276\252\345\214\226\346\234\272\345\210\266.md" new file mode 100644 index 0000000..68aec3c --- /dev/null +++ "b/src/Other/\345\206\205\345\255\230\357\274\214\344\272\213\344\273\266\345\276\252\345\214\226\346\234\272\345\210\266.md" @@ -0,0 +1,117 @@ +--- + title: '内存，事件循化机制' + shortTitle: '' + description: '' + icon: '' + author: + name: 'Song' + isOriginal: true + date: 2019-05-29 + category: '' + tag: 'javascript' + sticky: 1 + star: false + article: true + timeline: true + image: '' + editLink: false +--- + + ## 垃圾回收 +### 引用计数 +这个算法主要是定义"对象有没有被其他对象引用"为依据，来决定是否回收。 +但是如果两个对象之前互相引用，那么就会回收不了 + +### 标记清除 +这个算法是定义"对象能否被获得"为依据，能否被获得指的是从根元素，也可以理解为全局，去获得被引用的元素，垃圾回收器将定期从根开始，找所有从根开始引用的对象，然后找这些对象引用的对象……从根开始，垃圾回收器将找到所有可以获得的对象和收集所有不能获得的对象。 + +现在所有浏览器的垃圾回收机制都是基于标记清除的算法来实现优化。 + +### Event Loop +JavaScript 的并发模型基于“事件循环” + +首先要有队列queue，栈stack，堆heap的概念 + + + +> 一个 web worker 或者一个跨域的 `iframe` 都有自己的栈，堆和消息队列。两个不同的运行时只能通过 [`postMessage`](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage) 方法进行通信。如果另一运行时侦听 `message` 事件，则此方法会向其添加消息。 + + +事件循环就是会不断判断队列中是否有可执行的事件，来运行。 +有了这个概念之后，开始思考，运行一段js代码的时候，事件循环机制是如何工作的。 +众所周知，js是单线程作业，这里在浏览器环境中要明白浏览器是多进程的，js脚本执行是浏览器渲染进程中的一个线程。和它同为线程的还有GUI渲染线程，定时器触发线程等 + + + + + +分析下面这段代码 + +```javascript +function foo(b) { + var a = 10; + return a + b + 11; +} +function bar(x) { + var y = 3; + return foo(x * y); +} +console.log(bar(7)); // 返回 42 +``` + +函数声明两个函数，函数声明提升。bar函数返回了foo函数 +最后一行执行bar方法 + +函数调用形成一个栈帧 + +此时的消息队列中，是没有任何事件的，因为js引擎并没有异步操作或者注册了什么事件（即没有向消息队列中添加消息）。只有上面的同步任务 +所以此时的执行栈里面是bar函数，bar函数上面又压了个foo函数，当foo函数运行结束之后，这个函数（参数和局部变量：指向堆的一系列指针）就会被抛出栈，然后等bar运行完毕，同样也会被抛出栈，当栈为空时，意味着同步任务的一个函数执行完了，事件循环机制就去拉取消息队列中的第一个任务执行。 + +现在有下面这段代码 + +```javascript +console.log('script start'); + +setTimeout(function() { + console.log('setTimeout'); +}, 0); + +Promise.resolve().then(function() { + console.log('promise1'); +}).then(function() { + console.log('promise2'); +}); + +console.log('script end'); +``` + +先说执行结果 + + + +这涉及到宏任务（macrotask）和微任务（microtask） + +setTimeout 众所周知是定时器，上面代码的意思是立即插入一个匿名回调函数， +promise 众所周知是异步处理函数，后面接了两个异步回调 + +回到我们的队列，栈，堆中来 + +js执行，此时我们第一个遇到的是同步代码（ script start）,然后遇到setTimeout， +什么时候将setTimeout的回调推入消息队列呢？计时器线程会计时，等倒计时结束，**事件触发线程**就会负责推入，这里为0，表示以最快的速度推入，就是代码运行到这里就推入了。但是推入之后不一定立马执行，因为此时我们的执行栈不为空， +然后继续执行同步任务。遇到promise，也会向消息队列中添加任务。但是和setTimeout不同的是，promise添加的是微任务，所以会有两个队列来进行分工，macrotask在一个队列中，microtask在另一个队列中。 + +所有会有下面的 + + +那么这两个队列的执行顺序是怎样的？ +当执行栈（starck）为空时就会将microtask里面的任务都执行，那么相信结果就很明显了 +执行完 start 和end ，这时strack里面是空的，那么就执行第一个promise回调，执行完第一个promise回调，遇到了第二个promise回调，那就会将第二个执行回调放到microtask里面，执行完之后，栈为空，那就再去运行微任务队列，输出promise2，这时microtask里面是没有任务了，那将由macrotask接手接下来的操作，执行setTimeout +的回调，输出setTimeout + +那么哪些是macrotask，哪些是microtask呢 + +#### macrotask + +#### microtask + + diff --git "a/src/Other/\345\206\222\346\263\241\357\274\214\346\217\222\345\205\245\357\274\214\345\277\253\351\200\237\346\216\222\345\272\217.md" "b/src/Other/\345\206\222\346\263\241\357\274\214\346\217\222\345\205\245\357\274\214\345\277\253\351\200\237\346\216\222\345\272\217.md" new file mode 100644 index 0000000..8e851b5 --- /dev/null +++ "b/src/Other/\345\206\222\346\263\241\357\274\214\346\217\222\345\205\245\357\274\214\345\277\253\351\200\237\346\216\222\345\272\217.md" @@ -0,0 +1,137 @@ +--- + title: '选择，冒泡，插入，快速排序' + shortTitle: '' + description: '' + icon: '' + author: + name: 'Song' + isOriginal: true + date: 2019-07-26 + category: '' + tag: 'javascript' + sticky: 1 + star: false + article: true + timeline: true + image: '' + editLink: false +--- + +```javascript +/** + * 选择排序 + * [3, 1, 4, 1, 5, 9] + * [1, 3, 4, 1, 5, 9] + * 原理：一个min指针，一次循环找到最小值，和min互换位置，保证最左边是最小值 + */ +function selectSort(nums) { + for (let i = 0; i < nums.length - 1; i++) { + let min = i + for (let j = i + 1; j< nums.length; j++) { + if (nums[j] < nums[min]) { + min = j 1 + } + } + [nums[i], nums[min]] = [nums[min], nums[i]] + } + return nums +} +``` + +```javascript +/** + * 冒泡算法 + * 比较两两值，一次冒泡之后最右边的值肯定是为最大的 + * 第二次冒泡，就只要针对除去最后一个值的数值进行冒泡 + * [22, 34, 3, 32, 82, 55, 89, 50, 37, 5, 64, 35, 9, 70] + */ +function bubble_one_time(arr, j) { + for (let i = 0; i < arr.length-j; i++) { + const element = arr[i]; + if (arr[i] > arr[i+1]) { + let temp + temp = arr[i+1] + arr[i+1] = arr[i] + arr[i] = temp + } + } + return arr +} +function bubble_sort (arr) { + for (let i = 0; i < arr.length; i++) { + arr = bubble_one_time(arr, i) + } + return arr +} +``` + +```javascript +/** + * 插入排序 + * 从原数组一个一个遍历，将其放到新数组，但要 + * 维持新数组的序列 + */ +function insertSort (arr, l, r) { + for (let i = l + 1; i <= r; i++) { + if (arr[i] < arr[i-1]) { + let temp = arr[i] + let j = i + while (j > l && arr[j-1] > temp ) { + arr[j] = arr[j-1] + j-- + } + arr[j] = temp + } + } +} +``` + +```javascript +/** + * 快速排序 + * 是对冒泡排序的一种改进 + * 通过一趟排序将数据分为两部分，再对这两部分 + * 分别递归排序，以此类推 + * 双向的扫描比单项扫描快 + */ +function quick_sort(arr, l, r) { + if (l < r) { + let e = quick_one_time(arr, l, r) // e 是一次快排的分界线，以此对左右两边再进行快排 + quick_sort(arr, l, e-1) + quick_sort(arr, e+1, r) + } + return arr +} +function quick_one_time (arr,i,j) { + // i 和 j是两个指针，初始的时候分别指向首尾 + // 设定一个基准值 初始为 arr[0] + let pivot = arr[i] + // 现在指针移动， + while (i < j) { + while(arr[j] > pivot && i < j){ + j-- + } + arr[i] = arr[j] + while (arr[i]< pivot && i < j) { + i++ + } + arr[j] = arr[i] + } + // 指针重叠，说明遍历完一次了 + arr[i] = pivot + return i +} +``` + +```javascript +/** + * BFPRT算法，它和快速排序的区别仅仅是改变了pivot的取值 + * 快排中我们默认取首个为基准值 + * 在BFPRT算法中我们取五分中位数的中位数 + * 1. 将 n个元素划为 n/5 组，每组5个，至多只有一组由 n mod 5个元素组成。 + * 2. 寻找这 n/5 个组中每一个组的中位数，这个过程可以用插入排序。 + * 3. 对步骤2中的 n/5 个中位数，重复步骤1和步骤2，递归下去，直到剩下一个数字。 + * 4. 最终剩下的数字即为pivot，把大于它的数全放左边，小于等于它的数全放右边。 + * 5. 判断pivot的位置与k的大小，有选择的对左边或右边递归。 + */ +``` diff --git "a/src/Other/\345\207\275\346\225\260\351\207\215\350\275\275.md" "b/src/Other/\345\207\275\346\225\260\351\207\215\350\275\275.md" new file mode 100644 index 0000000..53c62c7 --- /dev/null +++ "b/src/Other/\345\207\275\346\225\260\351\207\215\350\275\275.md" @@ -0,0 +1,78 @@ +--- + title: '函数重载' + shortTitle: '' + description: '' + icon: '' + author: + name: 'Song' + isOriginal: true + date: 2019-05-09 + category: '' + tag: 'javascript js' + sticky: 1 + star: false + article: true + timeline: true + image: '' + editLink: false +--- + + javaScript并没有函数重载的概念，所谓重载就是一些函数具有相同的函数名，但是参数不同，也能进行正确的运算。 + +```javascript +function addNum(num1) { + return num1 + 100 +} +function addNum(num1,num2) { + return num1 + 200 + num2 +} +``` + +运行上述的函数，结果只会得到加200的值,对于同一函数名的函数，后者定义的会覆盖前者。 + +但是js可以实现重载吗？根据入参的不同执行不同的操作。 +完全可以 +第一种： +```javascript +function addNum() { + const a = arguments.length + switch (a) { + case 1: + break; + case 2: + break; + } +} +``` + +第二种： +使用了闭包的方法 + +```javascript +function addMethod (object, name, fn) { + let old = object[name] + // object 的 name属性就是存放这个判断函数的地方 + object[name] = function () { + // 这里匿名函数会有对应的词法作用域 + if (fn.length === arguments.length) { + //参数相等，表示匹配到了对应的处理函数，那么就执行他 + return fn.apply(this, arguments) + } else if (typeOf old == 'function') { + //参数不相等，执行原来的方法 + return old.apply(this, arguments) + } + } +} +let numbers = {value: 100, method: null } +// 我们执行 addMethod方法时，会在object的name属性上声明一个函数，这个函数的运行和fn有关 + +// 当没有参数的时候，返回对象的value值 +addMethod (numbers, method, function(){ + return this.value +}) +// 所以当我们运行numbers.method时，这时根据词法作用域，会去寻找fn的入参长度， +// 因为闭包的特性，我们能找到之前执行addMethod对应的fn，即function(){return this.value}这个匿名函数 +numbers.method() + +``` + diff --git "a/src/Other/\345\237\272\346\234\254\347\232\204shell\345\221\275\344\273\244.md" "b/src/Other/\345\237\272\346\234\254\347\232\204shell\345\221\275\344\273\244.md" new file mode 100644 index 0000000..71fc00d --- /dev/null +++ "b/src/Other/\345\237\272\346\234\254\347\232\204shell\345\221\275\344\273\244.md" @@ -0,0 +1,94 @@ +--- + title: '基本的shell命令' + shortTitle: '' + description: '' + icon: '' + author: + name: 'Song' + isOriginal: true + date: 2019-11-04 + category: '' + tag: 'sh' + sticky: 1 + star: false + article: true + timeline: true + image: '' + editLink: false +--- + + ### 文件操作 + +```shell +ls #查看目录下文件 +ls -a #查看隐藏文件 +ls -F #在文件夹后面加了／，在可执行文件后面加了* +ls -R #递归遍历子文件夹 +ls -l #显示长列表形式的文件信息 + + +touch filename # 创建一个空文件 +cp source destination # 将源文件复制成一个新文件并且以 destination命名 + +# 制表键自动补全文件名 + +``` + +#### 链接文件 +如果需要在系统中维护同一文件的两份或者多分副本，除了保存多分单独的物理文件副本之外。还可以采用保存一份物理副本和多个虚拟副本的方法，这些虚拟副本被称为链接。链接是目录中指向文件真是位置的占位符。在linux中有两种不同类型的链接 +##### 符号链接 +符号链接就是一个实实在在的文件，它指向存放在虚拟目录结构中的某个地方的一个文件，这两个通过符号链接在一起的文件，彼此的内容并不相同 + +```shell +ln -s data_file rl_data_file +#以data_file文件创建一个rl_data_file符号链接，注意rl_data_file只是个占位符 + +# demo +wangcc:chenjian oukawa$ ln -s chenj rl_chenj +wangcc:chenjian oukawa$ ls -l chenj +-rw-r--r--@ 1 oukawa staff 11 10 30 22:07 chenj +wangcc:chenjian oukawa$ ls -l *chenj +-rw-r--r--@ 1 oukawa staff 11 10 30 22:07 chenj +lrwxr-xr-x 1 oukawa staff 5 10 30 22:08 rl_chenj -> chenj +wangcc:chenjian oukawa$ ls -i *chenj +8082497 chenj 8082525 rl_chenj +wangcc:chenjian oukawa$ + + +``` + +##### 硬链接 +硬链接会创建独立的虚拟文件，其中包含原始文件的信息及位置。引用硬链接文件等同于引用了原始文件。 + +> 只能对处于同一存储媒体的文件创建硬链接，要想在不同的存储媒体之间创建链接，只能是软链接。 + +### 重命名文件 + +```shell +mv fall fzll # 重命名文件称为移动 ，表示移动fall文件为fzll +``` + +### 删除文件 + +```shell +rm -i fall #删除fall文件，并且会提示 +rm -f fall #强制删除，不提示 +``` +### +### 处理目录 + +```shell +mkdir newDir #创建新目录 +rmdir newDir #删除空目录 +rm -rf newDir #全部删除，不提示 +``` + +### 查看文件 + +```shell +file my_file #查看文件是什么类型 +cat -n test1 #查看文件并加上行号 +#cat的缺陷是一旦运行就无法控制后面的操作 +more +``` + diff --git "a/src/Other/\346\210\221\344\273\254\347\234\237\347\232\204\344\270\215\351\234\200\350\246\201export default.md" "b/src/Other/\346\210\221\344\273\254\347\234\237\347\232\204\344\270\215\351\234\200\350\246\201export default.md" new file mode 100644 index 0000000..3e617c8 --- /dev/null +++ "b/src/Other/\346\210\221\344\273\254\347\234\237\347\232\204\344\270\215\351\234\200\350\246\201export default.md" @@ -0,0 +1,74 @@ +--- + title: '我们真的不需要export default' + shortTitle: '' + description: '' + icon: '' + author: + name: 'Song' + isOriginal: true + date: 2020-09-09 + category: '' + tag: 'emotibot' + sticky: 1 + star: false + article: true + timeline: true + image: '' + editLink: false +--- + + ## 原文链接[https://zhuanlan.zhihu.com/p/40733281](https://zhuanlan.zhihu.com/p/40733281) +## 先说结论一： + +### 错误的写法 +```javascript +// lib.js +export default { + a: 1, + b: 2 +} +// main.js +import { a,b } from './lib'; +console.log('a:',a); +console.log('b:',b); +``` +-Q：为什么禁止对复合对象字面量的导出操作？(如上) +-A：babel5会将错误的写法输出成正确的值（babel5的bug），其实按照正确的esm语法，使输出为undefined的。 +-A：在esm和cjs互相转换的时候加大复杂性。如下图： + + + +## 正确使用ESM +### 导出 +```javascript +// lib.js +export function getName(){} +export const a = 1 +export default 'name' + +``` +### 导入 +```javascript +import * as all from './lib.js' +import lib from './lib.js' +import {a} from './lib.js' +``` + +## CJS的导入导出 +### 导出 +```javascript +module.export = {} +export.name = 'chenjian' +``` +### 导入 +```javascript +const name = require('./lib.js'); +``` + +## 原文链接[https://zhuanlan.zhihu.com/p/97335917](https://zhuanlan.zhihu.com/p/97335917) +## 再说结论二： +彻底禁用**export default** + + +## 我个人的观点： +esm一把梭，兼容问题是暂时的，就像微软不支持ie一样。该进步还是要进步。 diff --git "a/src/Other/\346\265\217\350\247\210\345\231\250\350\277\233\347\250\213\344\270\216\347\272\277\347\250\213.md" "b/src/Other/\346\265\217\350\247\210\345\231\250\350\277\233\347\250\213\344\270\216\347\272\277\347\250\213.md" new file mode 100644 index 0000000..db0e9d0 --- /dev/null +++ "b/src/Other/\346\265\217\350\247\210\345\231\250\350\277\233\347\250\213\344\270\216\347\272\277\347\250\213.md" @@ -0,0 +1,57 @@ +--- +title: '浏览器进程与线程' # 当前页面内容标题，默认为 Markdown 文件中的第一个 h1 标签内容 +shortTitle: '' # 当前页面的短标题 +description: '' # 当前页面内容描述 +icon: '' # 当前页面图标的 FontClass 或文件路径 (建议填写)。 +author: { + name: 'Song' +} +isOriginal: true # 当前文章是否为原创。 +date: 2024-04-03 # 写作时间。 +category: '' # 分类 +tag: '' # 标签 +sticky: 100 # 是否在列表中置顶。当填入数字时，数字越大，排名越靠前 +star: true # 是否收藏在博客主题的文章列表中。当填入数字时，数字越大，排名越靠前。 +article: true # 是否将该文章添加至文章列表中 +timeline: true # 是否将该文章添加至时间线中 +image: '' # 设置预览图 (分享图)，请填入绝对路径 +editLink: false # 设置横幅图片 (宽屏分享图)，请填入绝对路径。 +--- + +## 进程 + +浏览器是多进程架构，相比于单进程架构 + +- 有数据隔离的能力 +- 有多核优势 +- 各司其职，互不影响。单页面崩溃不会影响其他页面 + +### 包含的进程 + +1. Browser进程 + + 主进程 + +2. 插件进程 + + 插件管理 + +3. GPU进程 + +4. 渲染进程（浏览器内核） + + 每个tab一个进程 + +## 渲染进程 + +每个进程内部有多个线程，展开渲染进程: + +1. GUI渲染进程 +2. JS引擎线程 +3. 事件触发线程 +4. 定时触发线程 +5. 异步http请求线程 + +### GUI渲染线程与JS引擎线程互斥 + +道理就是js可以操作dom，dom没确定，是不会去渲染页面。 diff --git "a/src/Other/\351\207\215\346\216\222\351\207\215\347\273\230.md" "b/src/Other/\351\207\215\346\216\222\351\207\215\347\273\230.md" new file mode 100644 index 0000000..199c53f --- /dev/null +++ "b/src/Other/\351\207\215\346\216\222\351\207\215\347\273\230.md" @@ -0,0 +1,27 @@ +--- + title: '重排重绘' + shortTitle: '' + description: '' + icon: '' + author: + name: 'Song' + isOriginal: true + date: 2019-11-21 + category: '' + tag: 'javascript' + sticky: 1 + star: false + article: true + timeline: true + image: '' + editLink: false +--- + + 参考：[https://github.com/AlloyTeam/Mars/blob/master/performance/css-property-animation-performance.md](https://github.com/AlloyTeam/Mars/blob/master/performance/css-property-animation-performance.md) + + + +repaint不一定触发relayout，但relayout一定会发生repaint。 + +- CSS动画属性会触发整个页面的重排relayout、重绘repaint、重组recomposite +- Paint通常是其中最花费性能的，尽可能避免使用触发paint的CSS动画属性，这也是为什么我们推荐在CSS动画中使用`webkit-transform: translateX(3em)`的方案代替使用`left: 3em`，因为`left`会额外触发layout与paint，而`webkit-transform`只触发整个页面composite diff --git "a/src/Poem/\344\270\200\347\250\213.md" "b/src/Poem/\344\270\200\347\250\213.md" new file mode 100644 index 0000000..ebf69d6 --- /dev/null +++ "b/src/Poem/\344\270\200\347\250\213.md" @@ -0,0 +1,24 @@ +--- + title: '旅程' + shortTitle: '' + description: '' + icon: '' + author: + name: 'Song' + isOriginal: true + date: 2023-09-25 + category: '' + tag: '随笔' + sticky: 8 + star: false + article: true + timeline: true + image: '' + editLink: false +--- + + +```html +山水同路，川流入海 +星汉灿灿， +``` diff --git "a/src/Poem/\345\275\222\345\256\266\346\234\211\346\204\237.md" "b/src/Poem/\345\275\222\345\256\266\346\234\211\346\204\237.md" new file mode 100644 index 0000000..ab2e145 --- /dev/null +++ "b/src/Poem/\345\275\222\345\256\266\346\234\211\346\204\237.md" @@ -0,0 +1,25 @@ +--- + title: '春节归家有感' + shortTitle: '' + description: '' + icon: '' + author: + name: 'Song' + isOriginal: true + date: 2023-09-25 + category: '' + tag: '随笔' + sticky: 8 + star: false + article: true + timeline: true + image: '' + editLink: false +--- + +## 月 + +```html +南游万里客，群群向北归 +陌路无知己，又是异乡人 +``` diff --git "a/src/Poem/\346\227\240\351\242\230\357\274\210\344\270\200\357\274\211.md" "b/src/Poem/\346\227\240\351\242\230\357\274\210\344\270\200\357\274\211.md" new file mode 100644 index 0000000..000c442 --- /dev/null +++ "b/src/Poem/\346\227\240\351\242\230\357\274\210\344\270\200\357\274\211.md" @@ -0,0 +1,48 @@ +--- + title: '无题（一）' + shortTitle: '' + description: '' + icon: '' + author: + name: 'Song' + isOriginal: true + date: 2023-09-25 + category: '' + tag: '随笔' + sticky: 8 + star: false + article: true + timeline: true + image: '' + editLink: false +--- + +```html +秋中桂香 + +异乡明月 + +常道共团圆 + + +离家万里 + +亲忧百遍 + +何物不思乡 + + +兢业无感 + +身无侣伴 + +落落锦衣还 + + +知命知命 + +无运无运 + +福祸皆健康 + +``` diff --git "a/src/Poem/\346\227\240\351\242\230\357\274\210\344\272\214\357\274\211.md" "b/src/Poem/\346\227\240\351\242\230\357\274\210\344\272\214\357\274\211.md" new file mode 100644 index 0000000..913599f --- /dev/null +++ "b/src/Poem/\346\227\240\351\242\230\357\274\210\344\272\214\357\274\211.md" @@ -0,0 +1,23 @@ +--- + title: '无题（二）' + shortTitle: '' + description: '' + icon: '' + author: + name: 'Song' + isOriginal: true + date: 2024-02-23 + category: '' + tag: '随笔' + sticky: 8 + star: false + article: true + timeline: true + image: '' + editLink: false +--- + +```html +碎叶风飘零，新芽笑春风 +满城皆桃李，终有悲欢离 +``` diff --git "a/src/Poem/\346\234\210.md" "b/src/Poem/\346\234\210.md" new file mode 100644 index 0000000..41549bd --- /dev/null +++ "b/src/Poem/\346\234\210.md" @@ -0,0 +1,25 @@ +--- + title: '月' + shortTitle: '' + description: '' + icon: '' + author: + name: 'Song' + isOriginal: true + date: 2023-09-25 + category: '' + tag: '随笔' + sticky: 8 + star: false + article: true + timeline: true + image: '' + editLink: false +--- + +## 月 + +```html +明月盈月，琼楼又宫阙 +阴晴圆缺，相逢复离别 +``` diff --git a/src/README.md b/src/README.md new file mode 100644 index 0000000..6d63739 --- /dev/null +++ b/src/README.md @@ -0,0 +1,43 @@ +--- +home: true +layout: BlogHome +icon: home +title: Song +heroImage: /logo.svg +bgImage: /PastedGraphic.png +heroText: SongBlog +heroFullScreen: true +tagline: '小学篱笆旁的蒲公英......' +# projects: +# - icon: project +# name: 项目名称 +# desc: 项目详细描述 +# link: https://你的项目链接 + +# - icon: link +# name: 链接名称 +# desc: 链接详细描述 +# link: https://链接地址 + +# - icon: book +# name: 书籍名称 +# desc: 书籍详细描述 +# link: https://你的书籍链接 + +# - icon: article +# name: 文章名称 +# desc: 文章详细描述 +# link: https://你的文章链接 + +# - icon: friend +# name: 伙伴名称 +# desc: 伙伴详细介绍 +# link: https://你的伙伴链接 + +# - icon: /logo.svg +# name: 自定义项目 +# desc: 自定义详细介绍 +# link: https://你的自定义链接 + +footer: 无畏宿命，无畏的你 +--- diff --git a/src/Safety/CSRF.md b/src/Safety/CSRF.md new file mode 100644 index 0000000..7ac6303 --- /dev/null +++ b/src/Safety/CSRF.md @@ -0,0 +1,190 @@ +--- + title: 'CSRF(Cors Site Request Forgery 跨站请求伪造)' + shortTitle: '' + description: '' + icon: '' + author: + name: 'Song' + isOriginal: true + date: 2023-09-01 + category: '' + tag: 'csrf' + sticky: 9 + star: false + article: true + timeline: true + image: '' + editLink: false +--- + +## 什么是CSRF + +跨站请求伪造（英语：Cross-site request forgery），也被称为one-click attack或者session riding，通常缩写为CSRF或者XSRF，是一种挟制用户在当前已登录的Web应用程序上执行非本意的操作的攻击方法。 跟跨网站脚本（XSS）相比，XSS利用的是用户对指定网站的信任，CSRF利用的是网站对用户网页浏览器的信任。 + +[](https://portswigger.net/web-security/images/cross-site%20request%20forgery.svg) + +## 攻击的原理 + +简单地说，是攻击者通过一些技术手段欺骗用户的浏览器去访问一个自己曾经认证过的网站并执行一些操作（如发邮件，发消息，甚至财产操作如转账和购买商品）。由于浏览器曾经认证过，所以被访问的网站会认为是真正的用户操作而去执行。这利用了web中用户身份验证的一个漏洞：简单的身份验证只能保证请求是发自某个用户的浏览器，却不能保证请求本身是用户自愿发出的。也就是上面所说的，利用网站对用户网页浏览器的信任。 + +要实现CSRF攻击，需要满足3个关键条件： + +1. 攻击者有理由诱发应用程序内的某个操作。这可能是特权操作（例如修改其他用户的权限）或对用户特定数据的任何操作（例如更改用户自己的密码）。 + +2. 基于 Cookie 的会话处理。执行该操作涉及发出一个或多个 HTTP 请求，并且应用程序仅依赖会话 cookie 来识别发出请求的用户。没有其他机制可以跟踪会话或验证用户请求。 + +3. 没有不可预知的请求参数。执行操作的请求不包含攻击者无法确定或猜测其值的任何参数。例如，当导致用户更改密码时，如果攻击者需要知道现有密码的值，则该功能不易受到攻击。 + +### 举个栗子 + +- 受害者登录a.com，并保留了登录凭证（Cookie）。 +- 攻击者引诱受害者访问了b.com。 +- b.com 向 a.com 发送了一个请求：a.com/act=xx。浏览器会默认携带a.com的Cookie。 +- a.com接收到请求后，对请求进行验证，并确认是受害者的凭证，误以为是受害者自己发送的请求。 +- a.com以受害者的名义执行了act=xx。 +攻击完成，攻击者在受害者不知情的情况下，冒充受害者，让a.com执行了自己定义的操作。 + +有这么一个请求： + +```curl +POST /email/change HTTP/1.1 +Host: vulnerable-website.com +Content-Type: application/x-www-form-urlencoded +Content-Length: 30 +Cookie: session=yvthwsztyeQkAPzeQ5gHgTvlyxHfsAfE + +email=wiener@normal-user.com +``` + +那么就可以这么触发： + +```html + + + + + + +``` + +## 攻击的类型 + +### GET类型 + +假如一家银行用以执行转账操作的URL地址如下： `https://bank.example.com/withdraw?account=AccoutName&amount=1000&for=PayeeName` + +那么，一个恶意攻击者可以在另一个网站上放置如下代码： `
搜索关键词: gift
+``` +如果将搜索词变成一段脚本 + +``` +https://www.website.com/search?value= +``` + +[演示地址](https://portswigger.net/web-security/cross-site-scripting/reflected/lab-html-context-nothing-encoded) + +反射型 XSS 的攻击步骤： + +1. 攻击者构造出特殊的 URL，其中包含恶意代码。 +2. 用户打开带有恶意代码的 URL 时，网站服务端将恶意代码从 URL 中取出，拼接在 HTML 中返回给浏览器。 +3. 用户浏览器接收到响应后解析执行，混在其中的恶意代码也被执行。 +4. 恶意代码窃取用户数据并发送到攻击者的网站，或者冒充用户的行为，调用目标网站接口执行攻击者指定的操作。 + +> 反射型 XSS 跟存储型 XSS 的区别是：存储型 XSS 的恶意代码存在数据库里，反射型 XSS 的恶意代码存在 URL 里。 + +> 反射型 XSS 漏洞常见于通过 URL 传递参数的功能，如网站搜索、跳转等。 + +> POST 的内容也可以触发反射型 XSS，只不过其触发条件比较苛刻（需要构造表单提交页面，并引导用户点击），所以非常少见。 + +#### DOM型XSS(DOM-based XSS) + +漏洞存在于客户端代码而不是服务器端代码中。 + +``` + + + + + + +我的银行卡密码是123456
+
+
+
+
+
+
+```
+
+DOM 型 XSS 的攻击步骤：
+
+1. 攻击者构造出特殊的 URL，其中包含恶意代码。
+2. 用户打开带有恶意代码的 URL。
+3. 用户浏览器接收到响应后解析执行，前端 JavaScript 取出 URL 中的恶意代码并执行。
+4. 恶意代码窃取用户数据并发送到攻击者的网站，或者冒充用户的行为，调用目标网站接口执行攻击者指定的操作。
+
+DOM 型 XSS 跟前两种 XSS 的区别：DOM 型 XSS 攻击中，取出和执行恶意代码由浏览器端完成，属于前端 JavaScript 自身的安全漏洞，而其他两种 XSS 都属于服务端的安全漏洞。
+
+## 检测方法
+
+### 工具扫描
+
+#### w3af
+
+#### nikto
+
+### 手动检测
+
+```
+jaVasCript:/*-/*`/*\`/*'/*"/**/(/* */oNcliCk=alert() )//%0D%0A%0d%0a//\x3csVg/