天问博客-专注于大前端技术

HTTP 状态码是服务器响应请求时传递给客户端的重要信息。3xx 系列的状态码主要与重定向有关，用于指示请求的资源已被移动到不同的位置，需要采取不同的操作来访问。

在 Vue3 + Vite + TS 的项目中，接入 MicroApp 微前端时，编辑器出现 TS2339: Property 'unmount' does not exist on type 'Window & typeof globalThis'. 的错误提示。

JavaScript 中存在一些特殊的运算符，如 ||=、&&=、??=、?.、??，它们在特定的场景下能够帮助开发者简化代码逻辑或增强代码的健壮性。本文将介绍这些运算符的定义、语法、使用场景以及示例。

axios 是一个支持node端和浏览器端的易用、简洁且高效的http库。本文主要介绍 axios / fetch 如何实现 stream 流式请求，注意这里需要区分 node 环境和浏览器环境。

最近基于Tauri和React开发一个用于http/https接口测试的工具Get Tools，其中使用了提供的fetchAPI，在开发调试过程中遇到了一些权限和参数问题，在此记录下来。

众所周知，Linux 命令很强大，使用起来也很方便，但是想在 windows 系统上使用 Linux 命令有些困难，要么下载第三方终端工具，要么就是安装一系列命令环境。作为一个前端开发，其实可以全局安装一下 npm 命令行工具，然后再配置别名，并添加到环境变量中，就可以替代一些常用的 Linux 命令了。

使用 vue-cli 3.0 (@vue/cli) 脚手架构建的项目，一般在本地开发过程中，会有不少 console 调试信息。如果不处理这些日志信息，默认情况下，即使是构建生产环境的包，这些 console 打印也不会被移除，这显然是不够严谨的。所以就介绍一下怎么来配置根据环境删除 console 日志。

使用 @vue/cli 脚手架构建的 Vue 全家桶项目，默认配置下，打包后会把 vue、vue-router、axios、vuex、element-ui、echarts 等公共库打包在一起，导致基础 chunk、vendor 包体积特别大，有时一个文件能达到 3-5MB，这会大大影响首次加载速度。因此需要抽离第三方公共库，配合使用 CDN 加速。

有些框架中内置了常用的事件修饰符和按键修饰符，例如：Vue 中就提供了按键 .enter（.13），修饰键 .ctrl、.alt、.shift、.meta等修饰符，简化了很多快捷键功能的实现。在 Svelte 中也提供了 preventDefault、stopPropagation、once 等事件修饰符，但是没有内置快捷键修饰符。

在移动端开发过程中，如果要实现一个元素或按钮的拖动定位，会出现很多坑。例如：元素上下移动过程中，会触发 body 的 scroll 事件，导致整体的位置偏移，这时就需要 阻止移动端 touchmove 与 scroll 事件冲突 。

在使用 Crontab 定时任务和 Shell 脚本切割 Nginx 日志文件时，要用到时间戳、当月、上月、下月、上月初、上月末、下月初、下月末等等，其中有些日期不能直接获取，需要经过一定的计算才能得到。

Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成 ReadableStream 来用于数据操作。在 JS 中通常使用 Blob 进行文件下载保存，new 转换过程中需要指定下载文件 MIME 类型。

浏览器 Window 内置的 URLSearchParams 接口定义了一些实用的方法来处理 URL 的查询字符串，再也不用 & 字符串分割的方式去解析 url query 参数了。

怎么来衡量一个web端项目的大小，一是看页面多少，二是看源代码行数。页面多少比较好统计，通过 Router 的配置大概就能知道。但是源代码行数，如果要一个文件一个文件去计算，那就费了劲了。有问题有需求，就会有人造轮子。本文就介绍一下 代码统计工具cloc的安装与使用。

最近做了自己的开源项目 Msw-Tools，参考了 VConsole 工具中按钮的拖拽功能，计划给 MSW 按钮也增加类似的拖拽效果，并兼容PC端和手机端，但是遇到一个问题：一个按钮绑定了多个事件，怎样才能阻止 mousemove 或 touchmove 与 click 事件同时触发。

ElementUI 的 Notification 组件通常用于全局的通知提醒消息，其中展示内容默认是文本字符串，当然也可以设置 dangerouslyUseHTMLString: true 后传入 HTML 片段。如果要展示比较复杂的动态内容，一般会把传入的内容封装成组件，而直接传入组件是无法渲染的，本文就是解决 $notify 中怎么渲染自定义组件的问题。

在使用 Vue 、React 等MVVM框架开发项目时，基本上很少需要直接手动去操作 DOM 了，但是也不可避免，例如获取元素的宽高、元素在屏幕的XY位置、DIV拖拽等等。随着 Vue 版本的升级，在 Vue3 中获取真实DOM的方法也有了变化。

在日常项目开发中，多人分工配合不可避免。一个好的团队，流程规范必不可少。而使用 Git 更是家常便饭，项目代码的提交，合并都需要有清晰的流程。为了团队成员方便查看每个版本的提交信息，又避免在提交记录中出现 “黑历史”，所以，Git Commit 提交信息的规范 尤为重要。

Nginx 日志会随着时间和访问流量的增加而日益增大，access.log 日志文件也会随之越来越大，最后会导致日志的读写效率下降，进而影响 Nginx 服务的性能。因此，需要对 Nginx 日志文件进行切割，本文就介绍一下：使用 Crontab 定时任务执行 shell 脚本来切割 Nginx 日志。

从零开发了一个灵活无依赖，且集成简单的数据接口 Mock 工具——Msw-Tools，已开源到 NPM。Msw-Tools（Mock Service Worker Tools）是一个基于 Msw.js 和 Svelte 构建的数据 Mock 工具，用于前后端接口数据联调，方便开发者在不同数据、不同场景下进行Msw-Tools（Mock Service Worker tools）是一个基于 Msw.js 和 Svelte 构建的数据Mock 工具，用于前后端接口数据联调，和不同数据、不同场景的功能测试。

Vite爬坑日记： 在使用 Vite3 + Svelte3 构建 Web 应用时，控制台报错：process is not defined。

由于各种原因 npm install 的速度比较慢，通常会使用 cnpm 来代替 npm 下载，而 cnpm 同步会有延迟，所以需要主动同步npm的包到cnpm。

近年来，前端技术日新月异，Vite、Vue3、Svelte、SolidJS 等框架工具大放异彩，身为一个前端开发总，感觉一刻不学习就要out了。最近使用 Vite3 + Svelte3 来构建封装自定义的 Web Components ，开始了艰难的爬坑之旅，本文记录一下：Vite3 + Svelte3配置 Sass 预处理器，在 Svelte 单文件组件中使用 @import 导入 scss 样式文件。

最近使用 Parcel 搭建一个 Mock Service Worker （MSW）测试服务，遇到一个问题：在 MSW 中注册 Service Worker 的文件（mockServiceWorker.js）是以静态文件相路径加载，但是在 Parcel 启动的服务中加载不到此文件，导致 Service Worker 服务无法注册。...

Vue项目引入了d3.js，在打包部署到nginx静态服务后，页面不能正常展示，F12打开控制台，发现报了几个net::ERR_CONTENT_LENGTH_MISMATCH 206 (Partial Content)错误。第一次遇到Status Code为206的问题，所以本文记录一下。

是目前世界上最先进的分布式版本控制系统（没有之一）。在日常开发中使用到的git操作命令挺多的，在此记录一下，以备忘却之需。

在移动H5使用了 ECharts 开发可视化图表，遇到一个特殊需求：折线趋势图中需要默认展示最后一个坐标轴对应的数据，也就是主动触发 tooltip 的展示。

最近在 Vue 项目中给页面加水印，发现了一个比较奇怪的现象，有的页面水印颜色深，有的页面水印颜色浅，特别是在主题色（背景色）很重的页面，水印看起来格外显眼。经 code review 发现页面使用了 组件缓存，导致 mounted 和 beforeDestroy 钩子函数中的方法不能正常被调用。...

在使用 Vue3 + Vite + Vant 搭建移动端项目时报错 Uncaught SyntaxError: The requested module '/node_modules/.vite/vue.js?v=xxxx' 。

CSS 预处理器赋予了 CSS 逻辑编程的能力，其中 Sass、Less、Stylus 最受欢迎，语法都是大同小异，上手也很快。在项目中使用最多的可能要数 Sass 了，本文就讲讲 Sass 中循环遍历 @each、@for 和 @if 判断的搭配使用。...

HTTP/2.0在2015年就已经正式发布了，但是现在大部分网站还在使用HTTP/1.1协议。具体怎么查看网站采用的是HTTP/1.1，还是HTTP/2.0呢，本篇就介绍几种检测HTTP协议版本的方法。

setTimeout（定时器）是JavaScript中一个比较重要且常用的方法，该方法用于在指定的毫秒数后调用函数或计算表达式。平时开发可能基本都是使用 setTimeout(fn, ms) 的形式，当然还有比较神奇的用法，特别是在前端面试中，经常被问到。...

在实现前端工程化的过程中，经常需要在一个js脚本中去执行其他node/npm或者其他shell命令。本篇就介绍两种node调用shell的方法。

宏任务（从上到下、从左到右的整体）微任务的Event Queue（Promise.then，async / await整体，process.nextTick【node环境】）宏任务的Event Queue（setTimeout / setInterval / setImmediate【node环境】）同一轮微任务队列中，依次顺序执行、、和同一轮宏任务队列中，在setTimeout之后执行在浏览器环境同一轮任务队列中，在setTimeout之前执行script。...

最近使用 node.js 搭建 WebSocket 服务，在本地测试 connection 都是正常，于是部署到 Linux 服务上，需要用 Nginx 来反向代理 WebSocket 服务。浏览器控制台报错：WebSocket connection to 'wss://tiven.cn/ws/xxx' failed:，经过一番折腾，终于解决了这个报错。...

在开发中经常会遇到在本地测试的代码或者隐私信息，一不小心提交到了远程仓库，即便立即删除了再提交，但是上次的提交记录在远程依旧可以查看。 特别是像账号密码、key文件这种，很可能造成隐私泄露。...

现在很多web应用都是使用Vue、React等框架开发的，这种SPA单页面应用在打包后，有些文件比较大。因此，大部分公司在生产环境会使用CDN加速，来加快首页渲染速度。但是使用CDN后静态文件会有缓存，重新打包上线后，可能不会立即更新修改的地方。浏览器上可以使用Ctrl + Shift + R强制清理缓存，但是手机上清理缓存就很麻烦。再说这种清理缓存的方式对用户来说极度不友好，所以需要在Nginx中配置相应的缓存策略。...

最近调研企业wx集成H5应用，其中有一个发送图文消息，需要上传图片到临时素材库。之前做过文件上传到阿里云、七牛云都是服务端提供封装好的文件上传接口，在客户端使用ajax的方式上传。所以就来踩踩坑，使用node+axios实现服务端文件上传。...

最近使用 D3.js 开发可视化图表，因为移动端做了 rem 适配，所以需要动态计算获取图表容器的宽高，其中涉及到一些原生DOM API的使用，避免遗忘这里总结一下。

在前端开发中，使用循环遍历操作肯定不可避免。常用的循环语句如：for、do/while、while、for/in、for/of、forEach、map 等等，日常开发时经常会遇到遍历某些值要跳过循环、或者中断循环，这时就要用到 break、return、continue 等关键词来区别处理。...