2021/12/7

上午：
看后端接口的时候看到了koa，于是觉得非常重要，便说一下它的作用：

1.关于koa:ctx,后端的路由，原来都是源于它~所以koa路由都是
router.get/post(’/list’,function(ctx,next){ ctx.body =‘api list’})差不多这样的格式，
当然，有的框架写的方式不同。
格式也不一定相同。
比如我的项目格式是：
router.post(‘xxx’,async(ctx)=>{ xxxx})
链接：https://www.jianshu.com/p/7293a76f2653

2.koa下的ctx：
诚然,ctx原生是context，也就是http里request,response的集合。简单来讲，并不严谨哈。
然后koa把context封装起来了，并且写成了ctx。准备来讲，koa没有诞生context,但是封装了它。
服务端想要获取数据只能靠koa的ctx了。
看node app.js 这儿的代码。https://www.jmjc.tech/less/117
不得不说。懂了node是单独运行环境后就可以自己在命令行去用一段代码测试了。
果然还是得多学学。
关于ctx,ctx原生就是context,它是koa封装的上下文，request里面有get/post method,url,host接口，
response有message等，ctx.body=ctx.res.body=ctx.response.body。
具体看链接：
https://www.cnblogs.com/lfri/p/11936231.html#:~:text=body%E6%98%AFhttp%E5%8D%8F%E8%AE%AE%E4%B8%AD%E7%9A%84%E5%93%8D%E5%BA%94%E4%BD%93%EF%BC%8Cheader%E6%98%AF%E6%8C%87%E5%93%8D%E5%BA%94%E5%A4%B4%20ctx.body%20%3D%20ctx.res.body%20%3D%20ctx.response.body%20Koa,%E6%8F%90%E4%BE%9B%E4%B8%80%E4%B8%AA%20Context%20%E5%AF%B9%E8%B1%A1%EF%BC%8C%E8%A1%A8%E7%A4%BA%E4%B8%80%E6%AC%A1%E5%AF%B9%E8%AF%9D%E7%9A%84%E4%B8%8A%E4%B8%8B%E6%96%87%EF%BC%88%E5%8C%85%E6%8B%AC%20HTTP%20%E8%AF%B7%E6%B1%82%E5%92%8C%20HTTP%20%E5%9B%9E%E5%A4%8D%EF%BC%89%E3%80%82

3.综上这两个来讲，在后端，有koa2之后，ctx.request.body可以拿端口的请求发来的数据，
ctx.body呢，就是response，可以用来发送数据到前端接收。（毕竟ctx存了数据滴）

然后我就在看前端接口啦，不得不说，我对axios也是不熟悉滴，刚刚在想，
为什么axios.get 前面要加return呢。
因为这个return，我开始慢慢看懂了后面的…

1.然后就去看了一下官方文档：https://www.axios-http.cn/docs/post_example
看了一下axios.post后面是啥，瞬间了然了，axios.post().then。那么return axios.post()就是promise
对象也就是then(function(response)).这个promise对象有response，response就是我想要的东西，
response也是项目里面的那个res。
2.
所以每一个要涉及到跟后端请求数据的（也就是用到axios的）方法，都是return axios.post(或者经过post封装的）
，然后这个函数，就比如editCharacter,它在函数里面就是
const res = await user.editCharacter就行。
瞬间明白为啥await user.editCharacter的返回值会是res了。就是昨天学习await得来的结果呀。
await 就是 .then(function(xx)) 里的参数。
就昨天学的，await + 返回promise对象的函数，找到这个promise对象，它就是axios.post，而得到的值就是
该promise对象的参数。
ps:res就是response.
3.
虽然昨天得出的结论跟今天差不多，但是昨天是逆推，今天是顺着理论推出来的。
我觉得差不多就是把一整个前后端请求搞清楚了吧。

4.总结：
const res = await user.editCharacter。 （return axios.post== .then(function(res)(这个中文
文档就是这样讲的嘞 ，所以 最后答案就是res)，就是找到promise之后，await promise返回的就是，
promise里面的函数参数。
！！！！通过axios.post+await即可拿到response（res是取的变量名）。（这也正是axios的用处了叭）

axios.post().then(function) return axios.post = .then(function…) 这个很好理解。

下午：
开始做javascript笔试题了。总觉得还是得做做。比如数组很多方法虽然会但是不记得返回值，参数啥的，
那还是基础不够牢固。
1.比如concat,不会更改现有数组，返回一个新数组。
比如shift，参数接收什么都没有用，直接删除第一个元素。
2.逻辑运算符，会被当成false的有：null,undefined,NaN,0,"",’’,
||–返回第一个为true的值，&&返回第一个为false的值。（只要不是真值，就返回它本身）
关于&&：
4&&0—0
4&&2—2 //这个很好理解，指针到了2判断表达式为true于是就返回2了。

关于call,apply.bind 还是要看一下滴。
链接：https://www.runoob.com/w3cnote/js-call-apply-bind.html

防抖和节流的本质思想就是想把事件和函数之间区分开来，给他们换个桥梁，重新搭上去，完成自己想
实现的效果。
防抖就是：比如设置事件触发后1s后执行函数，若1s内又触发事件，则重新计时。
这样就能够保证事件触发后1s后才执行函数了。（这个事件说的是最新发生的事件）
可以这样说，设置在1s之内，最新发生的事件触发后1s后执行函数。

看这篇叭：
https://zhuanlan.zhihu.com/p/110733457

我的理解就是，之所以封装是因为在函数之前需要对事件进行处理，为了让我们函数只存在过一次，
用clearTimeout去除所有先前发生的setTimeout,而只保留最后一次setTimeout()(因为最后一次setTimeout
的t并没有被clear,所以只有它执行了）。
需要一定的想象力，想一下什么时候会停止呢。
这里为了全局变量还运用了自运行函数进行优化，可以的，这样每次触发事件都是执行return function()。
而var t = null 只执行了一次。完全符合要求滴。
应用到生活实例，就是要找出事件触发是什么，要实现的功能是怎么样的，就知道是不是防抖了。
比如说电梯进了一个人，等待15s后就上去，可是如果又有人来，那就又得等15s，等到再也没有人来的
时候，电梯才能在15s后上去。这就是防抖。
事件触发就是人会不断地来，而函数只在事件停止继续触发时才进行。
防抖就是这样地，函数在事件停止触发后才进行。

说到节流，可以想一下地铁刷卡过闸机，不管你怎么频繁地触发，就是刷卡，也得等上一个人出去了，
闸机关闭了才可以。
看代码：https://zhuanlan.zhihu.com/p/128026874
其实好像不难理解，就是去看setTimeout和t的关系，看这个代码，在300s后设置t=null,不然这300s内
t将一直存在，而触发事件也没有用，只要t存在就直接return,也就相当于“触发无效”。
感觉节流比防抖好理解多了= =。

Function.call()–比如说 function.call(this) 那么就由this来执行这个function。

new Set([])虽然能给数组去重，但是返回的是set对象，（就是{})这样的。
要变成数组的话，用扩展运算符或者Array.from都可以。

关于css的脱离文档流。有半脱离文档流和绝对脱离文档流。
这里说一下float浮动，它算半脱离文档流，比如盒子a设置了浮动，那么盒子b会
当它不存在，但是盒子的文本却会当它存在。
具体看链接：https://blog.csdn.net/theLostLamb/article/details/79581984
（像absolute这种绝对脱离文档流的就不一样啦，后继元素当它的文本也是不存在滴）

所谓的脱离文档流是指别的元素（后继元素）当它不存在了，而不是它当别的元素不存在。
就是说设置了脱离文档流的元素，会被其它的元素当不存在。