随笔分类 - 前端
摘要：背景 首屏渲染 SPA的首屏渲染堪称灾难，正如上文所说，SPA会先请求html，然后再执行里面的js。 这个过程是串行的，如果在网络环境较差的情况下会相当难熬。 SEO之类的不提了，这一点不一定有人为条件影响严重。 路由切换 路由切换时也一样，先获取到组件相关的js文件，然后执行才能开始请求接口。
阅读全文
摘要：情况 当路径参数中出现斜杠时，会导致后端路由错误，无法匹配到正确的处理方法。 其他问题 路径参数会导致开发者工具的网络请求中，名称表意不清。 相比之下，查询参数更能看出意图。 而如果把参数放到data里面，也能看出意图（一般是直接写小驼峰接口名，比如getPage），而且在大多数情况都比较清晰。 其
阅读全文
摘要：问题 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix,
阅读全文
摘要：背景 标题就是我之前产生的疑惑。 排查 F12打开开发者工具，选择页面中的那个单击元素。 找到事件侦听器 -> click 一般最下面这个就是我们的元素。 之所以感到困惑，是因为这个按钮元素绑定的方法是个空函数，但是确实有对应的调用。 function Rr() {} 可以看到，上面有三个div，其
阅读全文
摘要：备份 这套方案应该是根据unocss官网的webpack配置，然后结合AI搞出来的。 因为我发现无论是rsbuild还是rspack都不是这样配置的。 import { defineConfig } from '@rsbuild/core'; import { pluginBabel } from
阅读全文
摘要：情况 chii是一个远程调试工具。 通常用于移动端调试，毕竟移动端浏览器没有调试功能。 https://github.com/liriliri/chii PS D:\A_code\html\solidjs\my-nav> chii start -p 3000 C:\Users\32956\.bun\
阅读全文
摘要：CloudFlare 老实说因为打开网站总是弹人机验证，搞得我对CF印象很差。 使用Access需要绑信用卡 Access 列表里面认识的都没几个。 Azure AD: 微软企业认证，但是这玩意需要Azure的账号，注册账号需要Visa或者万事达信用卡。 Github/Google: 没啥好说的。
阅读全文
摘要：情况 大致是下面这样的。 Error: Attempting to parse an unsupported color function "oklab" at Object.parse (html2canvas.js:1726:1) at parse (html2canvas.js:3750:1)
阅读全文
摘要：前言 存储base64时遇到了大小限制，于是我试着优化文本的大小，去寻找方法。 结果也是自做聪明，浪费了时间。 二进制与字符串 众所周知，二进制文件以0101形式存储。 那么假设二进制 0x55 他是16进制的55，按理说应当占8位1字节。 const byte = 0x55; const char
阅读全文
摘要：前言 想要拼接代码，但是每次都写脚本感觉不够规范。 找了一阵子，rsbuild和Vite似乎都有类似的模板可以使用，但是比较麻烦，我靠着AI没搞出来。 EJS ejs是一种模板引擎（对，就是类似于jsp那种）。 pnpm i -D ejs 下面是用于执行的js脚本。 html-build.js im
阅读全文
摘要：逻辑 条件类名 <div class={`w-full max-w-2xl transition-all duration-300 ${isSearching() ? 'self-start' : ''}`}> 响应式数据 createSignal 适用于简单数据，以及仅用于展示的复杂数据（数组、对
阅读全文
摘要：直接赋值 默认情况下，直接将store中某个属性赋值给一个新的变量，会丢失响应。 <div class="form-group"> <label for="email">邮箱:</label> <input type="email" id="email" v-model="store.userInf
阅读全文
摘要：情况 如标题所说 单个请求的请求头中包含Content-Type，form-data中每个参数又有各自的Content-Type，当Content-Type有很多时，最终的请求头Content-Type类似于下面这样。 multipart/form-data; boundary WebKitForm
阅读全文
摘要：前言 写css的时候，经常有某个控件只需要些许css样式，但是写行内样式又有优先级问题，从而需要为其单独定义一个class，然而某个控件只是用来布局，没有特定含义，连名称都不好命名。 因此，原子化css应运而生，早期的bootstrap，以及一些组件库中都有使用。 那时叫做工具类，或者是全局类。 缺
阅读全文
摘要：描述 alpine是一个轻量级的响应式框架，但是当我将其写到用户脚本中后，我发现了一些问题。 试作解决 下面这个文档中有提到为什么会出现问题。 https://alpinejs.dev/advanced/csp https://github.com/alpinejs/alpine/discussio
阅读全文
摘要：前言 当前场景如下： 在传统前端开发中，也就是直接引入js，无模块导入和导出，html为页面。 现在我要引入vue，简化开发。（vue的数据绑定和更新更省力） 我引入了vant组件库，构建移动端页面。 于是乎，出现了标题所说的问题。 由于对vant不是特别熟悉，我甚至多试了几下，开发者工具里面调试查
阅读全文
摘要：前言 早期时，学校开展过js课程，那时候搞这玩意挺痛苦的。 前端页面那些东西，也不教flex之类的，搞得人一点兴趣也没有。 onclick onclick是一个通用的属性，用于简便地绑定单击事件，不过还差存在一些比较坑的地方。 全局，onclick只能调用全局的函数。 因此，如果你在网上找一段代码，
阅读全文
摘要：前言 刚开始用博客园不久，我就注意到，博客园在微信中样式不正常。（应该是博客园的决策） 浏览器？ 微信的内置浏览器明显是与众不同的，或者说，存在某种环境注入。 无法使用下载功能，当你在任何网站中点击下载按钮时，他都会跳出请打开浏览器进行下载之类的字样。 UA有所不同，会带上Wechat的字段 Moz
阅读全文
摘要：情况 看到人家没有tsconfig.json，依然能够正常获得提示，而我使用相同的代码，无法获取提示。 安装了Volar（已经弃用的那个扩展） 安装了Vue-official 未禁用vscode的内置ts功能。 相同的代码，在我的机器上，是下面这样的。 ts功能是正常的，但是@别名无法正常获得。 写
阅读全文
摘要：描述 如图，下面这个软件。 软件设置中，包含以下选项，有个选项是不改变客户端的UA（navigator全局对象） 然而，就算不勾选这玩意，navigator依然没有被正常改变。 值得注意的是，手机上自带的浏览器切换UA都能成功改变客户端UA。 User-Agent 这个插件也是一样的问题。 User
阅读全文
浙公网安备 33010602011771号