![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
项目
文章平均质量分 72
62921
专注前端半个月
展开
-
如何使元素宽高自适应并使宽高比保持不变
背景:在我们开发的过程中,我们很经常有碰到这样的需求,要让某个dom元素随着窗口宽度/高度的变化自适应改变其宽度 / 高度,并且始终保持一个固定的宽高比。我们先看看最终的方案:padding-bottom实现普通元素固定宽高比。首先,我们先明确两个结论:1.绝对定位元素的大小是由top、right、 bottom、 left四个属性决定的,这四个属性是相对于绝对定位元素的包含块来定位的。2.垂直方向上的内外边距使用百分比做单位时,是基于包含块的宽度来计算的。下面我们通过借助padding-bott原创 2021-02-22 20:04:15 · 1162 阅读 · 1 评论 -
处理重复请求
在我们的日常开发当中,很多时候会出现短时间内接口重复请求的情况,如果没有妥当地处理,很可能会造成以下的影响:对于get请求:页面触发多次渲染,造成页面抖动的现象;各个请求受网络等因素的影响,响应返回的时间无法确定,导致响应返回顺序与请求顺序不一致,也就是竟态问题。如下图所示,期待的回调函数的执行顺序应是回调1 > 回调2 > 回调3,但实际顺序是回调2 > 回调3 > 回调1;增大服务器压力;对于post请求:服务端生成多次记录;产生竟态,导致数据絮乱;解决原创 2021-02-22 20:03:25 · 445 阅读 · 0 评论 -
web端唤醒本地应用并检测是否唤醒成功
web端如何唤醒本地应用——URL Protocolweb端可以通过自定义URL Protocol来调用本地的应用程序。我们只需要通过一个链接如:<a href="tencent://">打开QQ</a>或者直接在浏览器中输tencent://(tencent://为QQ的自定义URL Protocol)就能够使得浏览器去寻找注册表并打开对应的本地应用程序。关于上面提到的注册表和为什么通过自定义URL Protocol就可以调用本地的应用程序的介绍在网上已经有很多相关的博客了,我原创 2020-12-07 10:48:56 · 4800 阅读 · 5 评论 -
冻结window下的变量
背景:有时候我们会把很多重要的数据(如用户信息,权限相关信息)直接挂载在window下的,之前就碰到过因为将全局变量赋值给别的变量,导致该全局变量在代码中被多次覆写,同时在页面中也出现了一些不可预知的错误。因为这种错误有时候很难被发现,而且挂载在window在的变量会暴露在浏览器的控制台中,可能会给项目埋下一些安全隐患。因此就有了下面这篇文章。目的:让某些全局变量完全只读而不可以被覆写。1.TypeScript readonlyTypeScript 类型系统允许你在一个接口里使用 reado原创 2020-11-19 14:25:45 · 319 阅读 · 0 评论 -
jsinspect vs jscpd
随着各个项目的迭代更新,项目中不可避免的会出现一些重复的代码,这可能是CTRL C + CTRL V造成的,也有可能是因为不同的项目成员重复造轮子造成的。在《Software Clone Detection and Refactoring》一文中,对重复代码的类型进行了定义:完全一致的代码或者只修改了空格和评论结构上和句法上一致的代码,例如只是修改了变量名插入和删除了部分代码功能和逻辑上一致的代码,语义上的拷贝不难看出,越是往后重复的代码就越难被检测出来,所以我们应该尽早对项目进行代码重复率的原创 2020-11-20 15:07:08 · 953 阅读 · 0 评论 -
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 · 998 阅读 · 1 评论 -
VueSocial(仿微博、微信的聊天社交平台)
VueSocialsomething like QQ、weibo、weixin(仿微博、微信的聊天社交平台)前后端分离的vue+express+socket.io练手项目内容预览技术栈已实现功能待改进安装项目部分图片分析总结预览在线demo VueSocial(移动端最好使用浏览器打开,pc端按了f12后有个小问题,刷新一下就好,resize...原创 2018-11-19 19:09:02 · 2568 阅读 · 0 评论 -
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 · 1743 阅读 · 0 评论