阿乐去买菜

【前端必备】极简的 API 代理工具!极简的 API 代理工具! 背景：不想写 mock，mock 语法老忘记！并不需要多真实的数据，只需要一个模板数据，简单更改，所以写了这个插件！前段时间看见有人分享了 Ajax Interceptor 的 chrome 插件，就想着自己也可以写一个试试，就做了这个插件 使用 该插件未发布至谷歌商店，可以直接下载 version 文件夹里的最新版本，解压安装即可 也可自行 fork 源码 build demo 请求拦截 拦截 fetch 请求 拦截 xmrhttprequest 请求 请求参数可配置 响应参数可配置 Json 可视化编辑 请求头暂时只支持追加 响应头不支持修改 后续计划 增加 mock 语法支持 优化参数，请求头，响应头配置 具体实现 重写 fetch 和 XMLHttpRequest 对象 源码gitee 地址 githup 地址 参考 Ajax Interceptor Mock

毕业北漂前端菜鸟的 2021 年终总结2021 关键字：启程、远方2021 年已经过去了，回想年初还在学校写论文，如今已是一位职场菜鸟了，从毕业到现在也工作了大半年了，所以找个机会写一下年终总结。也算有一个全新的开始吧。 | 学业2021 年正式结束了我的大学生活，在论文答辩的时候，我都还在感叹时间过得好快，现在做年终总结的时候已经又去的大半年了，对于我的学业，有遗憾也有满足吧，我很想感谢我大学的两位老师，一位带我找到职业的方向，另一位，教会了我很多做人做事的道理。希望他们身体健康，吉祥如意吧。 我的大学，经历了翟天临事件 🙂，论文要求更加严格了，也经历了疫情 🦠，回想起封校的生活，如今也历历在目。 大学一去不复返，小菜鸟已经去远方。 | 工作对于工作，算上我的实习经历，一共呆过三家公司吧。 在我大二下的时候就因为一次偶然机会遇到了我上面感谢的那位老师，让我去他的公司实习，他们公司是做教育辅助类软件的，那时候才是一窍不通，老师也很耐心的指导我，我接触到了 vue，在哪里我找到了我未来的职业方向，也从哪里踏上了我的前端生涯，遗憾的是可能没有给老师带来什么收益，还留一下了一 ...

谷歌插件思维导图整理

粘贴板之二维码复制 说一点废话复制网页上的二维码，并分享到的聊天工具中,是特别常见的功能。在网上找了很多资料，大部分都是坑。 解决思路 使用 navigator.permissions api 查询浏览器是否支持粘贴板操作 使用 fetch 请求二维码 文件流 将文件流转化为 blob 使用 navigator.clipboard.write 将文件 blob 写入粘贴板 未解决的问题 粘贴板在不安全的环境中会有限制，可能导致复制失败。建议在 https 环境中使用 老旧项目慎重 CV，具有一定的兼容性问题 查询浏览器是否支持访问粘贴板权限12345678910111213141516getAuthClipboard(): void { navigator.permissions.query({ name: 'clipboard-write' }).then( async permissionStatus => { // permissionStatus.state 的值是 ' ...

【拿来吧你】装饰器许多面向对象的语言都有修饰器（Decorator）函数，用来修改，或者注释类的行为。js 也不例外。 装饰器能做什么 传入参数的类型判断 返回值的排序、过滤 对函数添加节流、防抖或其他的功能性代码 基于多个类的继承，各种各样的与函数逻辑本身无关的、重复性的代码 等等。。。 装饰器基本语法12345@decoratorclass MyClass {}// 等同于class MyClass {}A = decorator(MyClass) || MyClass; 从上面就可以看出，修饰器是一个对类进行处理的函数。修饰器函数的第一个参数，就是所要修饰的目标类。 123function decorator(target) { 这里可以对类添加一些属性，或者方法，其他一些对类的操作。} 装饰器的执行顺序同一处的多个装饰器是按照洋葱模型，由外到内进入，再由内到外执行（和 Koa 的洋葱模型一致） 1234567891011function dec(id) { console.log(' ...

插件一键去水印，岂不妙哉！背景前端做一些个人项目，没有 UI 实在太难搞了，PS 又需要学习成本，就想着用一些设计网站做一些图，做好之后发现要 Vip，想着个人项目不商用，截个图，做一下效果，做着做着就想是不是做一个插件自动去一下水印岂不是更好。 说干就干 粗略的学习了一下谷歌插件 【干货】Chrome 插件(扩展)开发全攻略 分析一下某站的水印位置（明水印，听大佬说有暗水印，暂不考虑） 手动分析（F12 直接看，哈哈） 发现水印处于 image-watermark 该类名的背景图片位置 还有一些可能是一个单独的元素。 接下来就是找到该元素删除即可（手动删除也可以，以前就是这样干的） 谷歌插件 编写一些简单的操作界面（popup.html） 采用 html2canvas 来下载图 将 dom 转成图片 1234567891011121314151617181920const downloadPng = () => {if(!shareContent) returnlet rect = shareContent.getBoundingClient ...

早就听说，React社区，已经全面拥抱Hook。Vue3的发布也支持了自定义Hook，作为只会Vue的前端小码农自然要去看看Vue3 Hook到底是啥黑魔法？ 个人博客网站欢迎交流：萤火之森：https://blog.xkongkeji.com 从不了解React Hook的角度来看一下啥是Hook？ Vue 官方给出的自定义 Hook 的例子是这样的： 12345678910111213141516171819202122import { ref, onMounted, onUnmounted } from "vue";export function useMousePosition() { const x = ref(0); const y = ref(0); function update(e) { x.value = e.pageX; y.value = e.pageY; } onMounted(() => { window.addEventListener(&q ...

近段时间做一个编辑器，就需要一个鼠标拖拽选区的功能，方便批量选中元素，进行相应操作，所有就有了这篇文章。 效果展示 建立选区组件1、要想选中元素，肯定要先建立选区 根据两个坐标点确定选区位置，并绘制出选区 根据两个坐标删除选区的宽与高 1234567891011121314const size = computed(() => { const width = props.endPoint.x === 0 ? 0 : Math.abs(props.startPoint.x - props.endPoint.x); const height = props.endPoint.y === 0 ? 0 : Math.abs(props.startPoint.y - props.endPoint.y); return { width, height, };}); 确定起始坐标点 不管从何处点击都需要找到两个坐标点所绘制的矩形的左上角的坐标点。 左上角的坐标点，很明显是所有 ...

你还不知道怎么取消重复请求？ 什么是重复请求？在 web 开发过程中，我们经常遇见需要取消重复请求的需求，网络不好时，用户可能重复点击某个按钮就触发了多次相同请求。可能会造成数据错乱的问题。 如何取消重复请求？ axios 中提供了 cancelToken 的属性来取消请求。 原理就是利用了 XMLHttpRequest 对象上的 abort 方法来取消请求 什么样的请求是重复请求？ 请求方式 请求地址 请求参数以上三者完全一致即认为该请求完全相同 部分代码注意：这里序列化参数这里用了 JSON.stringify，仅做演示，JSON.stringify 存在的缺陷就不在这里赘述了，注意使用。 1234567891011121314151617181920212223242526272829303132333435const instance = axios.create({ timeout: 1000 * 6 });const pending = [];const cancelToken = axios.CancelToken;const removePend ...

文件下载 之 response header 中获取文件名通过 post 获取文件流，并从中获取到文件信息。 fetch API 获取放在 Content-Disposition 的文件信息 需要后端跨域支持，不然会出现，响应头为空的情况,从而得不到文件信息。 附源码 1234567891011121314151617181920212223 /** * 获取文件流，并获取响应头中的文件信息，需要后端跨域支持 */async downloadFile(url, params) { const request = { body: JSON.stringify(params), method: 'POST', headers: { 'Content-Type': 'application/json;charset=UTF-8', } } const response = await fetch(url, request); con ...