Fabric.js 有手就行，面试官硬要问我会不会
背景 最近在投递简历的时候发现，很多HR在哪儿问，你会不会fabric.js啊；我说我暂时没看过，但是应该不难，看哈文档就能上手了。HR跟我说：“那你可能不太适合我们，祝你早日找到工作。” 咦，我这暴脾气... 写了一个简单的教程，大家可以根据到学习学习。 技术栈 我是用vite + vue3 搭建的项目。切记这是vue3，因为这儿在后续会出现一个问题。 绘制一个矩形 绘制一个简单的矩形。 注意注意注意... 如果你用的是vue3搭建的...
JavaScript Set有新功能啦，子、交、并、补轻松搞定
背景 本文是一篇翻译文章，看到原文 感觉内容非常不错，而且前端也会用到集合的计算，就决定翻译并整理一下。内容顺序跟原文有所出入，按印象中数学集合的定义进行整理的。 JavaScript Set 添加新功能了，子、交、并、补轻松搞定，一起来看看！ 引言 JavaScript Set 是在 ES2015 规范中被引入的集合结构，但是它的功能并不完整： 1. 创建 2. 增 3. 删 4. 查 除此之外想要实现集合的其他功能，如计算子集、交集...
JS事件循环Event Loop
面试率 90% 的JS事件循环Event Loop，看这篇就够了！! ! 事件循环（Event Loop）大家应该并不陌生，它是前端极其重要的基础知识。在平时的讨论或者面试中也是一个非常高频的话题。 理解 JavaScript 的事件循环往往伴随着宏任务和微任务、JavaScript 单线程执行过程及浏览器异步机制等相关问题，而浏览器和 NodeJS 中的事件循环实现也是有很大差别。熟悉事件循环，了解浏览器运行机制将对我们理解 Java...
Vue3 用了这么久还没体验过 JSX或TSX？来封装个业务弹窗玩玩
平时开发 项目时，用的最多的就是 模板组件 ，一些模板组件实现起来稍微麻烦的需求，也会用到 渲染函数 ，对于 JSX/TSX 的应用相比之下就少了很多，不知大家是否也是如此呢？不过没关系，今天我们来详细的梳理下如何在 项目中使用 。建议跟着文章敲起来，为自己的技术道路添砖加瓦😄。 阅读本文您将收获： 1. 了解 如何使用 。 2. 封装个业务弹窗，体验下 在实际开发中的应用。 3. 等等... 是一种类似 的 扩展，本身没有特定的语义...
一起学习 Webpack 模块热替换
何为 HMR? 模块热替换(HMR Hot Module Replacement)功能会在应用程序运行过程中替换、添加或删除模块，而无需重新加载整个页面 当我们对代码进行修改并保存后，webpack 将对代码重新打包，并将改动的模块发送到浏览器，浏览器通过新的模块替换老的模块，从而实现局部更新且不需要刷新页面 为何需要 HMR? 在 HMR 出现之后，程序的加载都是页面级别的，即使是单个文件的发生改变，都需要刷新整个页面才能够获得最新的...
在 Web 中判断页面是不是刷新
在 Web 开发中，我们经常需要区分用户是否通过刷新操作重新加载了页面。这一操作可能是由用户手动刷新（如按下 F5 键或点击浏览器刷新按钮）或通过浏览器自动重新加载。判断页面是否刷新有助于开发者优化用户体验，例如在使用 vue 的时候需要进行权限控制，就需要判断在刷新后根据登录者的权限去添加对应的路由。 本文将详细解析几种常见的判断页面是否刷新的技术方案，并探讨各自的适用场景、优缺点以及浏览器的兼容性。 1\. 使用 是一个持久的窗口属...
如何借助 View Transitions 让网页切换跟 App 一样丝滑
在 Web App 上实现跟 Mobile App 一样的页面级切换动效，往往需要编写大量 CSS 动画和 JS 控制逻辑，即使投入大量精力来实现，最终的页面衔接动画还是会出现各种不符合预期的 BUG。 高实现成本意味着无法普及应用，所以 Web APP 在页面切换时普遍不会有 Mobile App 的丝滑体验。 我们可以引入类似 framer motion 这样的外部动效库来降低实现成本，在 SPA 场景下基本可以满足大部分的动画效果...
完全掌握vue全家桶单元测试 : 2. 搭建 vitest 环境搭建 vitest 环境
完全掌握vue全家桶单元测试 : 2. 搭建 vitest 环境 假设我们没有写过 vue 的单元测试，我们初始化一个全新的项目，只要在初始化 vue 项目的时候，使用 vue 自带的脚手架命令，就可以自动安装好一整套的测试环境，vitest + @vue/test utils. 安装 项目初始化成功之后,打开 vitest.config.ts 就可以看到如下的单元测试配置， f 打开命令行执行 命令行就会输出如下的日志，代表 Hell...
推荐工具vite-plugin-fake-server，可线上部署使用mockmock线上部署
最近遇到了个麻烦，后端迟迟给不了接口，测试那边又要求数据不能写死，必须可以提供mock调试。这不最近找到了一个mock工具，能解决传统mock工具无法线上部署的问题。 工具名字叫做 ，兼容vite，从官网示例上来看是同时支持 和 来模拟数据的。使用起来也非常简单，分三步走就行。 1. 安装 2. 引入 这里贴出最简单的配置，一个是制定文件夹，一个是设置在生产环境下模拟数据。 3. 使用 这里我根据个人习惯，在 文件夹下创建一个 和数个模...