移动端适配解决方案 移动端适配有很多方案，其中 rem 是被大家一直利用的一种方案。 目前我司在用的另一种布局方案，viewport，caniuse 查询 viewport 的兼容性基本都没问题，整体支持率达到 98.35%。今天的主角是 postcss-px-to-viewport，移动端适配可以通过这个插件来解决。 要使用 viewport 适配方案，必须先要安装 postcss-px-to-viewport 这 2022-08-27 css
shell中如何为Node设置环境变量 利用 shell 在构建 run npm 命令的时候传递不同参数解决频繁改动代码的问题。举一个比较常见的场景，如果我们做移动端开发，有时候需要调试一些东西，例如我们会用 vconsole，我们可能会写这一段代码 12345if (process.env.NODE_ENV !== "production") { import("vconsole").then((res) => &# 2022-04-30 Node shell
前端批量导出接口数据方案 中后台导出数据的需求场景目前已经是非常常见的，所以在个人遇到这个问题的时候，尝试前端解决并且使用的一些方案。 目前总结了下，大致两个方案：要么导出 excel，要么导出 csv，具体在哪 node 层还是浏览器可以看需求以及性能来调整。 方案一：node 层将 json 数据转换为流，前端直接下载这个前提是有 node 作为中间层，可以把一些数据在这一层适配，所以一些数据的映射、代码的复用也都可以 2021-06-25 浏览器 文件导出
Promise 中的 resolve 和 return 的疑惑 最近遇到一个问题，具体的场景是，接口 A 返回一段可以让前端渲染的 html 字符串，这个字符串里包含里一个可播放的 video 的地址，但是地址是不可播放的，需要替换为另外一个可播放的域名。 解决方式：先请求接口 A 获取 html 字符串，从中截取 video 的 src 属性，再调接口 B 将接口转换为可播放的 url，最后拿到新的 url 之后再通过正则的 replace 方法将对应的 u 2021-06-13 Promise
理解 Promise.all 和 Promise.race 的实现 Promise.all首先我们从一个正常的例子来看拆解一下 Promise.all 拆解Promise.all 我们能知道 all 方法接受一个数组作为参数，具体来说应该是具有 Iterator 接口的数据。 根据 Promise.all 的特性还能知道，Promise.all() 方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。言外之意，如果不是 Promise 就会 2021-05-26 JavaScript Promise
读正则迷你书总结 📓 前端很多场景其实都会涉及到正则表达式的使用，奈何之前个人正则的知识都是零散的，读完正则表达式迷你书之后受益良多，一来总结一下知识点，二来回顾的时候可以更方便。 根据目录精简整理 匹配攻略字符组匹配只是其中的一个字符，范围表示利用 - 省略和简写。 排除字符组利用 ^，字符组第一个放置 ^ 表示求反。 常见的简写 字符组 含义 \d 数字 [0-9]，表示一位数字。 \D 表示 [^0 2021-05-15 正则表达式
实现电话簿或者昵称分类功能 ☎️ 最近有一个挺有意思的小需求，有一组词的分类需要按照拼音归类且排序，基本类似于电话薄按照英文字母排序的功能。 假如后端给出的数据是 123456789101112131415161718[ { "tag": "感动", "pinyin": "gan dong" }, { "tag": "爱国", "pinyin": "ai guo" &# 2021-05-14 JavaScript
部分 web 性能优化清单 🧾 作为一名研发，到了一定程度之后对性能的优化是不可避免的，现总结一下在日常研发中，思考以及有过实践的一些性能优化点。 减少请求数 减少 DNS 查询时间。 利用浏览器本地存储或者 redux、dva 将请求数据缓存在本次会话中，避免多次请求。 利用 url-loader 对小图片进行 base64 转码通过增加体积换请求 或者 利用 webpack5 - assets modules。 配合 web 2021-04-26 性能优化
http2.0 学习笔记 web 性能权威指南的读书笔记，加深一些理解和记忆。 http2 的目的 支持请求和响应的 多路复用 来减少网络延迟。 通过压缩 http 首部字段将协议开销降至最低。 支持请求 优先级。 服务端推送 能力。 增强性能的原因 二进制分帧层 协议定义了如何封装 http 的消息在客户端和服务端之间传输。http1.x 是以换行符作为纯为本的分隔符，而 http2.0 是将传输信息分割为更 2021-04-05 http2.0 web性能权威指南
实现 JavaScript 中的 new 和 instanceof 记录一下自己理解的 new 和 instanceof，实现一遍加深理解和记忆。 new 操作符先从一个例子中看 new 操作符做了什么 12345678910111213141516function Person(name) { this.name = name}// 为构造函数原型上增加一个方法Person.prototype.say = function () { 2021-03-06 JavaScript