- 博客(14)
- 收藏
- 关注
RSS订阅原创 WebSocket心跳检测和重连机制
如果因为一些异常断开了连接，我们是不会感应到的，所以如果我们发送了心跳一定时间之后，后端既没有返回心跳响应消息，前端又没有收到任何其他消息的话，我们就能断定后端主动断开了。过程中，可能会出现网络断开的情况，比如信号不好，或者网络临时关闭，这时候websocket的连接已经断开，而不同浏览器有不同的机制，触发。通过在指定时间间隔发送心跳包来保证连接正常，如果连接出现问题，就需要手动触发。如果后端因为一些情况需要断开ws，在可控情况下，会下发一个断连的消息通知，之后才会断开，我们便会重连。心跳重连就应运而生。
2023-09-01 19:56:58
2293
原创 面试题——————手写一个Promise
Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。一旦成功就不允许失败，一旦失败就不允许成功。function Promise(excutor) { let self = this self.status = 'pending' self.value = null self.reason = null function resolve(value) { if (self.status ===
2022-03-21 17:50:56
1616
原创 手写一个Ajax
// 1. 简单流程 // 实例化let xhr = new XMLHttpRequest()// 初始化xhr.open(method, url, async)// 发送请求xhr.send(data)// 设置状态变化回调处理请求结果xhr.onreadystatechange = () => { if (xhr.readyStatus === 4 && xhr.status === 200) { console.log(xhr.responseTe.
2022-03-21 17:40:13
302
原创 this指向问题与他的技巧
this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定，this最终指向调用它的对象。1.函数调用模式当一个函数并非一个对象的属性时，那么它就是被当做函数来调用的。在此种模式下，this被绑定为全局对象，在浏览器环境下就是window对象2.方法调用模式当函数被保存为一个对象的属性时，它就可称为这个对象的方法。当一个方法被调用时，this被绑定到这个对象上。如果调用表达式包含一个提取属性的动作（. 或 []），那么它被称为方法调用这里的this指向的对象是o，
2022-01-10 21:18:48
346
原创 promise
1.什么是Promise？Promise 是异步编程的一种解决方案，其实是一个构造函数，自己身上有all、reject、resolve这几个方法，原型上有then、catch等方法。（ps:什么是原型：https://blog.youkuaiyun.com/qq_34645412/article/details/105997336）Promise对象有以下两个特点。（1）对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和reject
2022-01-10 20:59:54
150
原创 js防抖函数和js节流函数的区别 以及应用场景
问题1：如果实现了dom拖拽功能，但是在绑定拖拽事件的时候发现每当元素稍微移动一点便触发了大量的回调函数，导致浏览器直接卡死，这个时候怎么办？ 问题2：如果给一个按钮绑定了表单提交的post事件，但是用户有些时候在网络情况极差的情况下多次点击按钮造成表单重复提交，如何防止多次提交的发生？ 为了应对如上场景，便出现了函数防抖和函数节流两个概念，总的来说：这两个方法是在时间轴上控制函数的执行次数。1、函数防抖(debounce) 概念： 在事件被触发n秒后再执行回调，如果在...
2021-12-06 21:20:35
304
原创 虚拟dom和diff算法 前端面试必问
1）. 虚拟DOM什么是虚拟DOM？虚拟DOM（Virtual Dom），也就是我们常说的虚拟节点，是用JS对象来模拟真实DOM中的节点，该对象包含了真实DOM的结构及其属性，用于对比虚拟DOM和真实DOM的差异，从而进行局部渲染来达到优化性能的目的。真实的元素节点：123<div id="wrap"><p class="title">Hello world!</p></div>VNode：12345678...
2021-12-06 21:07:49
844
原创 vue 生命周期 11个钩子函数
BeforeCreate（创建前）该函数执行在组件创建、数据观测 (data observer) 和 event/watcher 事件配置之前，实例初始化之后被调用。在该阶段组件未创建，不能访问数据，组件中的 data，ref 均为 undefined。Created（创建后）在组件创建完成后立即调用在这一步 实例已经完成了数据观测 属性和方法的运算 watch、event事件回调但是还没有渲染成html模板 组件中的data已经存在 可以进行操作了 但是el仍然是undefiend 因为挂
2021-12-02 09:13:05
225
原创 小程序跳入外部链接 两种方式
跳外链要用到微信小程序提供的组件<web-view></web-view>1.首先新建一个<web-view src='https://shop.zhongbaounion.com'></web-view> 页面（我这里的文件名为link.wxml）里面写入跳转的链接2.在主页面里写跳转到外链地址的页面<navigator url='/pages/link/link'> <view class='list_item'..
2021-12-02 09:08:08
4372
原创 vue 生命周期11个钩子函数 必记住
在根目录下创建http目录及api.js文件fetch.js以及http.js文件；在根目录下创建env目录,创建index.js配置并导出多个开发环境在api.js中统一管理，请求的url地址
2021-12-02 09:03:49
1053
转载 vue 数据双向绑定原理
Vue 数据双向绑定原理Vue 是利用的 Object.defineProperty()方法进行的数据劫持，利用 set、get 来检测数据的读写。MVVM 框架主要包含两个方面，数据变化更新视图，视图变化更新数据。视图变化更新数据，如果是像 input 这种标签，可以使用 oninput 事件..数据变化更新视图可以使用 Object.definProperty()的 set 方法可以检测数据变化，当数据改变就会触发这个函数，然后更新视图。实现过程我们知道了如何实现双向绑定了，
2021-11-23 18:35:37
212
原创 axios 的封装
为了方便对 axios 操作，我们通常对 axios 进行二次封装首先在src目录下创建utils/request.js，然后在requset.js中配置 service.interceptors.request.use 里面设置请求头（token）service.interceptors.response.use 里面是对返回的数据进行操作//1. 先引入axios依赖包import axios from "axios"; //2. axios创建对象const Server .
2021-11-23 18:19:56
3202
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人