62921-CSDN博客

原创 VueSocial(仿微博、微信的聊天社交平台）

VueSocialsomething like QQ、weibo、weixin（仿微博、微信的聊天社交平台）前后端分离的vue+express+socket.io练手项目内容预览技术栈已实现功能待改进安装项目部分图片分析总结预览在线demo VueSocial（移动端最好使用浏览器打开，pc端按了f12后有个小问题，刷新一下就好,resize...

2018-11-19 19:09:02 2524

为何引入 fiber上图是是React 官网在介绍 React 哲学时说的一段话，这其中包含了 React 的设计理念——快速响应。但我们都知道，JavaScript 是单线程运行的，在一轮事件环中，浏览器需要经过以下的几个阶段：从Task队列中选出最紧急的Task -> 清空microtask -> 执行 UI render 操作（有可能被跳过）当浏览器当前执行的 Task 十分庞大，执行时间超过 50 毫秒时，这个 Task 被称为Long Task。 event loop pr

2021-12-20 14:38:30 353

原创如何使元素宽高自适应并使宽高比保持不变

背景：在我们开发的过程中，我们很经常有碰到这样的需求，要让某个dom元素随着窗口宽度/高度的变化自适应改变其宽度 / 高度，并且始终保持一个固定的宽高比。我们先看看最终的方案：padding-bottom实现普通元素固定宽高比。首先，我们先明确两个结论：1.绝对定位元素的大小是由top、right、 bottom、 left四个属性决定的，这四个属性是相对于绝对定位元素的包含块来定位的。2.垂直方向上的内外边距使用百分比做单位时，是基于包含块的宽度来计算的。下面我们通过借助padding-bott

2021-02-22 20:04:15 1127 1

原创处理重复请求

在我们的日常开发当中，很多时候会出现短时间内接口重复请求的情况，如果没有妥当地处理，很可能会造成以下的影响：对于get请求：页面触发多次渲染，造成页面抖动的现象；各个请求受网络等因素的影响，响应返回的时间无法确定，导致响应返回顺序与请求顺序不一致，也就是竟态问题。如下图所示，期待的回调函数的执行顺序应是回调1 > 回调2 > 回调3，但实际顺序是回调2 > 回调3 > 回调1；增大服务器压力；对于post请求：服务端生成多次记录；产生竟态，导致数据絮乱；解决

2021-02-22 20:03:25 414

原创 web端唤醒本地应用并检测是否唤醒成功

web端如何唤醒本地应用——URL Protocolweb端可以通过自定义URL Protocol来调用本地的应用程序。我们只需要通过一个链接如：<a href="tencent://">打开QQ</a>或者直接在浏览器中输tencent://（tencent://为QQ的自定义URL Protocol）就能够使得浏览器去寻找注册表并打开对应的本地应用程序。关于上面提到的注册表和为什么通过自定义URL Protocol就可以调用本地的应用程序的介绍在网上已经有很多相关的博客了，我

2020-12-07 10:48:56 4476 5

原创 jsinspect vs jscpd

随着各个项目的迭代更新，项目中不可避免的会出现一些重复的代码，这可能是CTRL C + CTRL V造成的，也有可能是因为不同的项目成员重复造轮子造成的。在《Software Clone Detection and Refactoring》一文中，对重复代码的类型进行了定义：完全一致的代码或者只修改了空格和评论结构上和句法上一致的代码，例如只是修改了变量名插入和删除了部分代码功能和逻辑上一致的代码，语义上的拷贝不难看出，越是往后重复的代码就越难被检测出来，所以我们应该尽早对项目进行代码重复率的

2020-11-20 15:07:08 925

原创冻结window下的变量

背景：有时候我们会把很多重要的数据（如用户信息，权限相关信息）直接挂载在window下的，之前就碰到过因为将全局变量赋值给别的变量，导致该全局变量在代码中被多次覆写，同时在页面中也出现了一些不可预知的错误。因为这种错误有时候很难被发现，而且挂载在window在的变量会暴露在浏览器的控制台中，可能会给项目埋下一些安全隐患。因此就有了下面这篇文章。目的：让某些全局变量完全只读而不可以被覆写。1.TypeScript readonlyTypeScript 类型系统允许你在一个接口里使用 reado

2020-11-19 14:25:45 299

原创 css-helper-plugin，一款释放你的复制粘贴的vscode插件

下载可直接到插件市场搜索下载功能1. className 自动补全有时候，我们提前定义好一些全局或者是各个组件的样式文件，然后再到 jsx 中去填写 className。这时经常会出现一些令人十分痛苦的情况，例如忘记了定义好的 className，或者是拼写错误导致样式不生效 css-helper-plugin 能够帮助我们在填写 jsx 的 className 时，根据 impor 的 less 文件和配置的全局样式文件进行补全提示。2. 通过别名补全 className但有时候，全局样式

2020-10-26 17:59:26 537 1

原创数据上报 “页面停留时间”属性总结

背景：在做数据埋点时遇到了 “上报页面停留时间” 的需求。开发历程：1.刚看到这个需求时，心想，这不是很简单嘛，现在页面初始化后获取一下时间戳然后直接在componentWillUnmount把时间差进行上报不就行了嘛。于是一顿操作猛如虎，开发完毕。结果：在切换页面时，数据成功上报了。2.但问题果然并没有那么简单，我发现如果用户直接刷新页面或者直接关闭页面时，componentWillUn...

2020-02-05 19:45:41 610

原创 vuex+socket.io实现实时私聊功能

先上效果图预览在线demo VueSocial（移动端最好使用浏览器打开，pc端按了f12后有个小问题，刷新一下就好,resize触发的问题，待改进）github地址引入socket. io服务端: let serve = app.listen(3001); const io = socketio(serve); io.on('connection', socket...

2018-11-23 14:58:10 1720

原创 vue+node实现图片上传+预览

先上效果图上代码html部分主要是借助了weui的样式&amp;lt;template&amp;gt; &amp;lt;div&amp;gt; &amp;lt;myheader :title=&quot;'发布动态'&quot;&amp;gt; &amp;lt;i class=&quot;iconfont

2018-11-20 15:59:23 972 1

qq_40409571的博客