前端实战笔录

大概一年前写了个小小的js插件 remember-scroll，并且分享了一篇文章：用Class写一个记住用户离开位置的js插件,是一个纯js库，功能是在用户再次进入页面时能自动定位到上一次浏览的位置，使用webpack+babel打包，里面的webpack和babel的配置至…

最近负责的新项目用到了qiankun，写篇文章分享下实战中遇到的一些问题和思考。 示例代码： https://github.com/fengxianqi/qiankun-example。 项目有个功能需求是需要内嵌公司内部的一个现有工具，该工具是独立部署的且是用React写的，…

相信很多前端同学对 vue 或 react 的开发很熟悉了，也知道如何去打包生成一个生产环境的包，但对于生产环境的部署可能有些同学了解比较少。小公司可能都是后端帮忙部署了，大公司会有专门的运维同学部署，对于生产环境的部署工作有些同学接触的不多，所以这次来分享和总结下前端项目部署…

我是根据这个教程来安装的：Centos安装Docker。步骤如下： 最新的containerd.io版本请在https://download.docker.com/linux/centos/7/x86_64/stable/Packages/找（国内直接安装containerd.…

前段时间写了篇文章《axios如何利用promise无痛刷新token》，陆陆续续收到一些反馈。发现不少同学会想要从在请求前拦截的思路入手，甚至收到了几个邮件来询问博主遇到的问题，所以索性再写一篇文章来说说另一个思路的实现和注意的地方。过程会稍微啰嗦，不想看实现过程的同学可以直…

最近遇到个需求：前端登录后，后端返回token和token有效时间，当token过期时要求用旧token去获取新的token，前端需要做到无痛刷新token，即请求刷新token时要做到用户无感知。 当用户发起一个请求时，判断token是否已过期，若已过期则先调refreshT…

前段时间刚好公司有项目使用了Nuxt.js来搭建，而刚好在公司内部做了个分享，稍微再整理一下发出来。本文比较适合初用Nuxt.js的同学，主要讲下搭建过程中做的一些配置。建议初次使用Nuxt.js的同学先过一遍官方文档，再回头看下我这篇文章。 原因其实不用多说，就是利用Nuxt…

最近一直在折腾mpvue写的微信小程序的性能优化，分享下实战的过程。 可以看到打包后的代码量从813KB减少到387KB,Audits体验评分从B到A，效果还是比较明显的。其实这个指标说明不了什么，而且轻易就可以做到，更重要的是优化小程序运行过程中的卡顿感，请耐心往下看。 常规…

在这篇文章，博主主要通过分享最近自己写的一个记住页面滚动位置小插件，讲一下如何用class语法配合webpack 4.x和babel 7.x封装一个可用的库。 喜欢的朋友希望能点个Star收藏一下，非常感谢。 相信很多同学都会遇到这样一个需求：用户浏览一个页面并离开后，再次打开…

这是我第一次开发小程序，开发的产品是音频类的，在大佬的建议下采用了mpvue,一周时间把功能都做出来，由于不太熟悉mpvue和微信小程序，足足用了一周时间来改bug才出来一个能用的版本，在这里整理分享下我开发时遇到的一些问题和给出一些建议。 在公司电脑装了双系统，日常用的是Ub…

WebView与APP交互，即网页通过JSBrige调用APP的功能，APP也可以通过JSBrige调用网页提供的方法。最近刚好接触到这一块，记录一下前端侧的实际操作过程,这篇文章适合还没接触过这一块的同学们，这里不讲原理，直接开始实战的过程。 Star数量比较高，使用的企业也…

同样是要使用protobuf.js这个库来解析。 之前提到，在vue中，为了避免直接使用.proto文件，需要将所有的.proto打包成.js来使用。 而在node端，也可以打包成js文件来处理。但node端是服务端环境了，完全可以允许.proto的存在，所以其实我们可以有优雅…

由于目前公司采用了ProtoBuf做前后端数据交互，进公司以来一直用的是公司大神写好的基础库，完全不了解底层是如何解析的，一旦报错只能求人，作为一只还算有钻研精神的猿，应该去了解一下底层的实现，在这里记录一下学习过程。 个人感受： 前后端数据传输用json还是protobuf其…

一直想撸一下https，最近刚好有点空，就实现了一下。之前看过一篇教你快速撸一个免费HTTPS证书的文章，通过Certbot来管理Let's Encrypt的证书，使用前需要安装一堆库，觉得不太友好。所谓条条大路通罗马，肯定还有其他方法可以做这个事情。 经过一番研究，发现了 a…

方法一： 直接更换node_modules里面对应的依赖源码。 这种方法只能临时性解决问题，当重新npm install一下，改动后的源码将丢失，不能解决问题。 方法二： 去掉依赖，将源码拷出来放到项目中保存。 对于所引用的npm依赖不是很复杂的时候，直接将别人的代码拷到项目中…

场景： 获取到一个file类型的图片，如果直接在html中预览？这里就是利用html5的新特性，将图片转换为Base64的形式显示出来。有两种方法： 当选择图片后，生成的img src类似"blob:null/4304d4f3-c13b-43e8-83f6-8c80426520…

好端端的为什么要迁移？因为已经毕业毕业毕业了。。。几天前腾讯云就发信息告诉我学生身份已过期，心里拔凉拔凉的。然后这几天云服务器也要到期了，已经拿不到64元的优惠券了，再也回不到那1元一个月的日子了。但是65元/月的最低配费用着实感觉有点贵，所以决定还是去找个实惠点服务器或vps…

由于公司采用的技术方案是.m3u8（hls），而这种格式目前PC浏览器只有Safari才支持，chrome、Firefox或移动端安卓其他的大部分浏览器都不支持播放这种格式。因此，用原生video标签的方案是不行了，得找一些插件或播放器。最终选择了DPlayer这个播放器，一个…