上午: 看后端接口的时候看到了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的值。(只要不是真值,就返回它本身)
关于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这种绝对脱离文档流的就不一样啦,后继元素当它的文本也是不存在滴)
所谓的脱离文档流是指别的元素(后继元素)当它不存在了,而不是它当别的元素不存在。 就是说设置了脱离文档流的元素,会被其它的元素当不存在。
|