获得徽章 7
- #每天一个知识点# 说说你对 koa 洋葱模型的理解？
Koa 框架是一个 Node.js 的 Web 应用程序框架，它通过中间件（Middleware）机制实现了业务逻辑的分层和复用。Koa 中使用的中间件机制被称为洋葱模型（Onion Model），其核心思想是将 HTTP 请求和响应对象依次传递给各个中间件函数，形成一条类似于洋葱的管道，最终返回响应结果。
具体来说，Koa 洋葱模型的处理流程可以大致分为四个阶段：
1.请求阶段：从外到内依次执行请求相关的中间件，例如解析请求体、设置响应头等操作。
2.业务阶段：执行业务逻辑相关的中间件，例如处理授权、验证身份、路由分发等操作。
3.响应阶段：从内到外依次执行响应相关的中间件，例如格式化响应数据、设置响应头等操作。
4.错误处理阶段：如果在前面的中间件过程中出现了错误，则会跳过后续中间件并交给错误处理中间件来处理异常情况。
在这个过程中，每个中间件都可以根据需要对请求和响应对象进行修改、扩展、封装等操作，并将控制权传递给下一个中间件，形成了一条流水线式的处理模式。这种设计可以大大提高代码的复用和可读性，同时也方便了对程序行为进行监控、调试和优化。
总之，Koa 洋葱模型是一种基于中间件机制的 Web 应用程序开发方法，它通过将请求和响应对象依次传递给各个中间件函数，实现了业务逻辑的分层和复用，并且具有灵活、可扩展和高效的特点。展开赞过
评论3 - #每天一个知识点# 说下 websocket 的连接原理？
WebSocket 是一种基于 TCP 协议的双向通信协议，它可以在客户端和服务器之间建立持久性的连接，实现实时的数据传输和交互。其主要原理如下：
1.利用 HTTP 建立连接：WebSocket 的连接需要通过 HTTP 请求首先建立握手（Handshaking）过程，该过程类似于普通的 HTTP 请求，但包含了一些特殊的头部字段，例如 Upgrade 和 Connection 等。
2.建立 TCP 连接：建立 HTTP 连接之后，客户端和服务器之间会建立一个 TCP 连接，并交换协商的加密和压缩参数等。
3.双向通信：建立好 TCP 连接之后，就可以进行双向通信了。客户端和服务器都可以在任意时刻发送消息，并且不需要发送 HTTP 请求或响应，而是直接通过已经建立好的连接进行数据的传递和处理。
4.断开连接：当双方其中一方决定关闭连接时，会发送一个特殊的控制帧（Close Frame），告知对方关闭连接。
需要注意的是，在 WebSocket 的连接过程中，由于需要进行 Handshaking 过程，因此第一次连接较慢。同时，在建立连接之后，需要保持长时间的连接状态，因此需要考虑网络稳定性、负载均衡和错误重试等问题，以保证连接的可靠性和稳定性。
WebSocket 是一种基于 TCP 的双向通信协议，通过建立长时间的持久连接来实现客户端和服务器之间的实时数据传输和交互。它在实时性、效率和安全性等方面都有很大的优势，适用于在线游戏、即时聊天、实时监控等领域。展开等人赞过 38 - #每天一个知识点# IconFont 的原理是什么？
IconFont 的使用原理来自于 css 的 @font-face 属性。
这个属性用来定义一个新的字体，基本用法如下：
@font-face {
font-family: <YourFontName>;
src: <url> [<format>],[<source> [<format>]], *;
[font-weight: <weight>];
[font-style: <style>];
}
font-family：为载入的字体取名字。
src：[url]加载字体，可以是相对路径，可以是绝对路径，也可以是网络地址。[format]定义的字体的格式，用来帮助浏览器识别。主要取值为：【truetype(.ttf)、opentype（.otf）、truetype-aat、embedded-opentype(.eot)、svg(.svg)、woff(.woff)】。
font-weight：定义加粗样式。
font-style：定义字体样式。展开赞过 评论3 - #每天一个知识点# 箭头函数的 this 指向哪⾥？
箭头函数不同于传统JavaScript中的函数，箭头函数并没有属于⾃⼰的this，它所谓的this是捕获其所在上下⽂的 this 值，作为⾃⼰的 this 值，并且由于没有属于⾃⼰的this，所以是不会被new调⽤的，这个所谓的this也不会被改变。
可以⽤Babel理解⼀下箭头函数:
// ES6
const obj = {
getArrow() {
return () => {
console.log(this === obj);
};
}
}
转化后：
// ES5，由 Babel 转译
var obj = {
getArrow: function getArrow() {
var _this = this;
return function () {
console.log(_this === obj);
};
}
};展开等人赞过 评论4 - #每天一个知识点# 什么是JSX？
JSX即JavaScript XML。一种在React组件内部构建标签的类XML语法。JSX为react.js开发的一套语法糖，也是react.js的使用基础。React在不使用JSX的情况下一样可以工作，然而使用JSX可以提高组件的可读性，因此推荐使用JSX。
class MyComponent extends React.Component {
render() {
let props = this.props;
return (
<div className="my-component">
<a href={props.url}>{props.name}</a>
</div>
);
}
}
优点：
允许使用熟悉的语法来定义 HTML 元素树；
提供更加语义化且移动的标签；
程序结构更容易被直观化；
抽象了 React Element 的创建过程；
可以随时掌控 HTML 标签以及生成这些标签的代码；
是原生的 JavaScript。展开等人赞过 评论4 - #每天一个知识点# 怎么实现“点击回到顶部”的功能？
1、锚点
使用锚点链接是一种简单的返回顶部的功能实现。
该实现主要在页面顶部放置一个指定名称的锚点链接，然后在页面下方放置一个返回到该锚点的链接，用户点击该链接即可返回到该锚点所在的顶部位置。
2、scrollTop
scrollTop属性表示被隐藏在内容区域上方的像素数。
元素未滚动时，scrollTop的值为0，如果元素被垂直滚动了，scrollTop的值大于0，且表示元素上方不可见内容的像素宽度
由于scrollTop是可写的，可以利用scrollTop来实现回到顶部的功能
3、scrollTo
scrollTo(x,y)方法滚动当前window中显示的文档，让文档中由坐标x和y指定的点位于显示区域的左上角
设置scrollTo(0,0)可以实现回到顶部的效果
4、scrollBy()
scrollBy(x,y)方法滚动当前window中显示的文档，x和y指定滚动的相对量
只要把当前页面的滚动长度作为参数，逆向滚动，则可以实现回到顶部的效果
5、scrollIntoView()
Element.scrollIntoView方法滚动当前元素，进入浏览器的可见区域
该方法可以接受一个布尔值作为参数。如果为true，表示元素的顶部与当前区域的可见部分的顶部对齐（前提是当前区域可滚动）；如果为false，表示元素的底部与当前区域的可见部分的尾部对齐（前提是当前区域可滚动）。如果没有提供该参数，默认为true
使用该方法的原理与使用锚点的原理类似，在页面最上方设置目标元素，当页面滚动时，目标元素被滚动到页面区域以外，点击回到顶部按钮，使目标元素重新回到原来位置，则达到预期效果展开等人赞过 评论4 - #每天一个知识点# vue 中 $route 和 $router 有什么区别？
在 Vue.js 中，$route 和 $router 都是与路由相关的对象，但它们之间有以下区别：
$route：$route 是一个当前路由信息的对象，包括当前 URL 路径、查询参数、路径参数等信息。$route 对象是只读的，不可以直接修改其属性值，而需要通过路由跳转来更新。
$router：$router 是 Vue Router 的实例对象，包括了许多用于导航控制和路由操作的 API，例如 push、replace、go、forward 等方法。$router 可以用来动态地改变 URL，从而实现页面间的无刷新跳转。
因此，$route 和 $router 在功能上有所不同，$route 主要用于获取当前路由信息，$router 则是用于进行路由操作，例如跳转到指定的路由、前进、后退等。通常来说，$route 和 $router 是紧密关联的，并且常常一起使用。展开赞过 评论3