前端开发
文章平均质量分 84
码农巧克零
有需要丸整前端各种资料的助理:yinke823
展开
-
如何详细区分watch 和 computed
在 Vue.js 中,watch和computed是响应式编程中非常重要的工具。合理使用它们可以提升应用的性能和可维护性。原文链接:https://juejin.cn/post/7417847455852052492。原创 2024-09-24 10:20:34 · 432 阅读 · 0 评论 -
CSS变量和CSS函数
CSS变量和CSS函数可以帮助开发者方便地实现功能。css代码解读复制代码CSS变量名以--开头;变量可以继承父元素的值;var第2个参数为备用值,变量不生效时被使用;常用的css函数包括:calc()、linear-gradient()、translate(), rotate(), scale()、rgba()、hsla()、attr()、clamp()、min()、max()。css代码解读复制代码css代码解读复制代码css代码解读复制代码rgba(红,绿,蓝,透明原创 2024-09-24 10:19:22 · 541 阅读 · 0 评论 -
Driver.js:用户引导还停留在静态页面?该升级了!
在开发现代web应用时,为用户提供清晰的功能引导和交互指引已成为提升用户体验的关键因素。无论是新功能介绍,还是复杂界面的操作指导,一个直观且灵活的引导工具可以大大提高用户的理解和参与度。今天,我们要分享的是Driver.js这个功能丰富的 JavaScript 库,它可以帮助你轻松创建引人入胜的用户引导体验。Driver.js 是一个轻量级、无依赖的 JavaScript 库,旨在为网页应用提供强大的用户引导和功能突出显示功能。原创 2024-09-24 10:18:28 · 510 阅读 · 0 评论 -
全网最详Babylon.js入门教材(5)-设置光源
Q:Babylon.js是什么?🤔️是一个强大的、开源的、基于WebGL和WebGPU的3D引擎,用于在网页上创建和渲染3D图形。它提供了一套丰富的API和功能,包括物理引擎、粒子系统、骨骼动画、碰撞检测、光照和阴影等,可以帮助开发者快速创建复杂的3D场景和交互。Q:我为什么要写该系列的教材?🤔️因为公司业务的需要因而要在项目中使用到Babylon.js,虽然官方的文档看起来覆盖面都挺全,且。原创 2024-09-24 10:17:41 · 1063 阅读 · 0 评论 -
对iframe嵌套的页面进行同域代理时需要注意哪些问题
资源路径是绝对路径,适合根目录部署。./:资源路径是相对路径,适合子目录或本地文件打开的情况。原创 2024-09-24 10:14:55 · 877 阅读 · 0 评论 -
StreamSaver.js执行过程分析
接下来根据文件名和随机数,创建一个 pathname 路径,和 supportsTransferable 的值一起,打包到一个对象中,稍后会发送。使用 location.href 触发浏览器创建文件,拿到这个文件的 stream,然后使用 pipeTo 往 stream 中写入内容。,如果不支持,后面会降级成非流式保存文件(当整个文件内容返回完毕后,才保存文件)会创建一个文件,然后流式下载。只能拦截注册后接收到的请求,所以需要在前端再次发送请求),触发。效果就是,等待整个文件的内容都返回了,才保存成文件。原创 2024-09-23 11:22:54 · 789 阅读 · 0 评论 -
十年跨平台开发,Electron 凭什么占据一席之地?
其实一直想系统的写一写 Electron 相关的文章,之前在掘金上写过,但是现在来看那些文章都写得挺粗糙的,所以现在我决定系统整理相关的知识,输出自己更多 Electron 开发相关的经验。这一节我们主要是来认识一下 Electron,这个已经有 10 年历史的跨端开发框架。我将从诞生背景,优劣势,生态,案例以及和其他框架的对比这几个方面带大家来认识 Electron。原创 2024-09-23 11:16:19 · 1039 阅读 · 0 评论 -
为什么文件上传后,打开文件提示已损坏?
常网IT源码上线啦!本篇录入技术选型专栏,希望能祝君拿下Offer一臂之力,各位看官感兴趣可移步🚶。有人说面试造火箭,进去拧螺丝;其实个人觉得问的问题是项目中涉及的点 || 热门的技术栈都是很好的面试体验,不要是旁门左道冷门的知识,实际上并不会用到的。接下来想分享一些自己在项目中遇到的技术选型以及问题场景。今天看了泰坦尼克号你知道吗,我这辈子最幸运的事,就是赌赢了船票,然后遇见了你。压力--今天像往常一样,开开心心的打代码编程。突然产品说:现在上传后文件打开不了。原创 2024-09-23 11:11:15 · 1327 阅读 · 0 评论 -
Vue3: computed都懒更新了,version计数你还不知道?
实际上对Vue3.5在性能方面起到大作用的是双向链表,version计数器属于是锦上添花。但通过分析globalVersion、dep.version如何自增,以及如何快速判断是否需要更新的逻辑,其实对双向链表也了解的八九不离十。双向链表上,横向是订阅者Sub依赖的Dep的链表节点,而纵向上是响应式value对应Dep关联的订阅者的链表节点。原创 2024-09-23 10:56:14 · 983 阅读 · 0 评论 -
三年前端开发的面试历程 + 资料分享 + 内推
大家好,最近一位前端三年的粉丝说,自己要回老家做生意了,不打算做这一行了,留下了很多面试经历的笔记,资料,还有一些前端八股文和场景题,简历模板也攒下了很多,他说希望可以帮助更多的前端人,证明前端并没有死,两个⼗六位的端⼝号 ,分别为源端⼝ ( 可选字段) 和目标端⼝ 整个数据报⽂的长度整个数据报⽂的检验和 ( IPv4 可选 字段), 该字段用于发现头部信息和数据中的错误。基本类型有六种: null , undefined , boolea n, number , string ,UDP 也是不可靠的。原创 2024-09-23 10:54:38 · 623 阅读 · 0 评论 -
Flutter 重构:NFileUploadBox组件重构
1、使用:比如第一个 app:OneApp,通过继承 NFileUploadHandle 重写 UI 即可:dart代码解读复制代码class NFileUploadOneApp extends NFileUploadHandle { /// 子项 @override NFileUploadItem buildItem({ double??"--";String?//重写子项样式(builder已返回必须的逻辑参数) }, );原创 2024-09-21 10:24:54 · 509 阅读 · 0 评论 -
深入解读ahooks中的useRequest实现原理
useRequest是ahooks提供的用于管理异步请求的 Hook,解决了 React 中常见的异步操作问题。它不仅可以自动处理请求的状态变化,还提供了多种高级功能,如轮询、节流、错误重试、请求缓存等。useRequest是一个功能丰富且灵活的异步请求管理 Hook,通过源码解读,我们可以看到它的核心逻辑是围绕请求的状态管理展开,并通过多种配置项扩展功能,包括轮询、防抖、节流、缓存等。在实际项目中,useRequest可以大幅简化复杂的异步操作,并提供强大的性能优化支持。原创 2024-09-21 10:24:19 · 508 阅读 · 0 评论 -
使用 TypeScript 构建一个 Todo List 项目
我们首先需要定义一个Todo接口,用来表示任务的结构。TypeScript 的静态类型系统在这里能帮助我们确保所有任务对象的一致性。typescript代码解读复制代码通过这个简单的项目,我们学习了如何在 TypeScript 中定义类型、使用类和接口、以及进行 DOM 操作。TypeScript 的静态类型检查使得代码更加可预测,减少了潜在的错误。下一步学习建议框架结合:你可以尝试将 TypeScript 与前端框架(如 React、Vue)结合,进一步提升项目的复杂度。深入概念。原创 2024-09-21 10:23:43 · 773 阅读 · 0 评论 -
使用 React、TypeScript、TailwindCSS 和 Vite 创建 Chrome 插件
每个 Chrome 插件都需要一个 manifest 文件(这个文件包含关于扩展的元数据,包括其名称、版本、权限和将使用的后台脚本。原创 2024-09-21 10:22:57 · 1057 阅读 · 0 评论 -
页面中 “瀑布流布局” 的实现
瀑布流布局是一种常见的网页布局方式,通常用于展示大量图片或卡片。与传统的网格布局不同,瀑布流布局允许元素在垂直方向上自由排列,从而充分利用屏幕空间,提高用户浏览体验。像我们常用的小红书,浏览视频和文章的首页就是采用了类似瀑布流布局的设置。通过上述步骤,我们可以轻松地在网页中实现一个基本的瀑布流布局。这种布局方式不仅提高了页面的视觉吸引力,还能有效地提升用户的浏览体验。当然,实际应用中可能还需要考虑更多因素,比如响应式设计、图片懒加载等,以适应不同设备和提高性能。原创 2024-09-21 10:21:35 · 933 阅读 · 0 评论 -
Nestjs项目打包发布
安装 Node.js 和 npm。使用git clone拉取项目代码。安装依赖并设置环境变量。编译项目并启动。使用 PM2 管理应用的进程(可选)。配置nginx作为反向代理(可选)。通过这些步骤,你可以成功在服务器上部署并运行你的 NestJS 项目。原文链接:https://juejin.cn/post/7415914118997246006。原创 2024-09-20 10:30:30 · 1005 阅读 · 0 评论 -
一文理解js、vue、React事件机制
JavaScript的事件机制基于事件捕获和事件冒泡,通过事件对象和事件处理函数来处理用户交互。React使用合成事件和事件委托来优化性能和一致性。Vue通过v-on指令处理事件,支持事件修饰符来简化代码。事件冒泡允许事件从目标元素向上传播到根元素。事件委托是通过将事件处理程序绑定到父元素来处理子元素的事件,减少了事件处理程序的数量。原文链接:https://juejin.cn/post/7415914114651275305。原创 2024-09-20 10:29:50 · 716 阅读 · 0 评论 -
从0到1搭建react组件库-文档篇
rspress作为一个基于rsbuild的静态站点生成器,它的构建性能非常好,并且支持MDX(可以在MDX中引用react组件渲染),并且包含所有的文档站基础功能(国际化、多版本支持、全文搜索等),并且内置插件系统,可以根据需求拓展功能。(如果文章中有错误内容,欢迎大家交流指正。json代码解读复制代码json代码解读复制代码ts代码解读复制代码json代码解读复制代码至此,rspress的基本配置已经完成。原创 2024-09-20 10:28:29 · 853 阅读 · 0 评论 -
关于Javascript作用域的那些事儿
作用域是指在程序中定义变量的可访问性和可见范围。在编程语言中,作用域定义了变量的生命周期及其在代码中可访问的范围。不同的作用域规定了不同变量的可见性和访问权限,有助于避免变量冲突和提高代码的可维护性。原创 2024-09-20 10:22:20 · 611 阅读 · 0 评论 -
Vue3 竟然可以像React的useContext,通过高阶组件透传数据
typescript代码解读复制代码。原创 2024-09-19 10:29:21 · 1260 阅读 · 0 评论 -
前端动画库大比拼:为何选择Velocity.js
在现代网页设计中,动画效果是提升用户体验的重要手段。: 一个与jQuery动画API兼容的动画引擎,以其卓越的性能和丰富的功能,成为了开发者的好工具。本文将详细介绍,探讨其特点、使用场景,并提供一个在Vue环境中的使用案例。是一个强大的JavaScript动画库,它不仅完全兼容jQuery的方法,还能在不依赖jQuery的情况下独立工作。这意味着开发者可以在不牺牲性能的前提下,享受到jQuery动画的便利。以其轻量级、高性能和丰富的动画功能,成为了前端开发者在实现动画效果时的优选工具。原创 2024-09-19 10:28:00 · 287 阅读 · 0 评论 -
KRouter 1.0 发布,支持参数注入以及 KMP 跨平台。
因为时间关系,KRouter 第一版本写的比较粗糙,只能说勉强能用,最近空了点重新设计了一下并且完善了使用方式,支持了 Kotlin 跨平台以及参数注入,实现方案也从 ServiceLoader 彻底替换成通过 KSP 收集路由信息,并且发布到了 maven 中央仓库。原创 2024-09-19 10:26:31 · 1021 阅读 · 0 评论 -
你知道 6 大 JavaScript 引擎的秘密吗?
每个 JavaScript 引擎都有其独特的优势和适用场景。V8 引擎以其高性能和广泛应用闻名,特别是在 Chrome 和 Node.js 中表现出色。SpiderMonkey 提供了强大的调试工具和灵活性,适用于复杂的 Web 应用。JavaScriptCore 通过优化苹果设备性能,为 iOS 和 macOS 提供了卓越的用户体验。Chakra 的模块化设计和多线程优化使其在不同平台和嵌入式环境中表现良好。Rhino 通过与 Java 的紧密集成,为企业级应用提供了灵活性和可扩展性。原创 2024-09-19 10:25:37 · 1043 阅读 · 0 评论 -
前端如何播放AMR格式的音频文件
最近在做的一个需求里,有一个播放音频的功能。上游给到的音频文件是.amr格式,我也是第一次见这种格式的音频。我就像往常一样,直接通过一个audio标签来引入,结果发现根本播放不了。js代码解读复制代码在后续搜了一些资料发现,浏览器是不支持直接播放amr格式的音频的,需要转成wav或者mp3等格式。原创 2024-09-19 10:23:38 · 1092 阅读 · 0 评论 -
Vue3探秘系列— directive:指令的实现原理(十一)
一个自定义指令由一个包含类似组件生命周期钩子的对象来定义。钩子函数会接收到指令所绑定元素作为其参数。比如定义一个v-log指令,这个指令做的事情就是在指令的各个生命周期去输出一些log信息:javascript代码解读复制代码然后你可以在创建应用后注册它:javascript代码解读复制代码接着在App组件中使用这个指令:javascript代码解读复制代码当你点击按钮后,会先执行指令定义的和mounted钩子函数,然后你在input输入框中输入一些内容,会执行和。原创 2024-09-19 10:22:35 · 1119 阅读 · 0 评论 -
说说JavaScript中的数据类型?存储上的差别?
obj1 是⼀个引⽤类型,在赋值操作过程汇总,实际是将堆内存对象在栈内存的引⽤地址复制了⼀份给了 obj2 ,实际上他们共同指向了同⼀个堆内存对象,所以更改 obj2 会对 obj1 产⽣影响。a 的值为⼀个基本类型,是存储在栈中,将 a 的值赋给 b ,虽然两个变量的值相等,但是两个变量。引⽤类型数据存放在堆中,每个堆内存对象都有对应的引⽤地址指向它,引⽤地址存放在栈中。引⽤类型对应的值存储在堆中,在栈中存放的是指向堆内存的地址。简单类型赋值,是⽣成相同的值,两个对象对应不同的地址。原创 2024-09-18 10:57:22 · 920 阅读 · 0 评论 -
cursor 和 GitHub copilot 最强竞品:开源 Void 编辑器会取代他们吗?
你是否在使用 GitHub Copilot 或 Cursor 的时候,觉得它们的智能补全虽然强大,但总有些地方不尽如人意?比如,价格高昂,或者一些功能限制让人抓狂?如果你有类似的痛点,那么今天我要给你介绍一款新工具——Void,这款编辑器号称是开源的 Cursor 和 GitHub Copilot 替代品,而且完全免费!原创 2024-09-18 10:43:18 · 1291 阅读 · 0 评论 -
CSS 实现带tooltip的slider
首先来看滑动输入器的最原始形态html代码解读复制代码效果如下要自定义样式,一般要修改这几个伪元素css代码解读复制代码::-webkit-slider-container{ /*容器*/ } ::-webkit-slider-runnable-track{ /*轨道*/ } ::-webkit-slider-thumb{ /*手柄*/ }这里可以很轻松的改变轨道的宽高,拖拽手柄的大小等等css代码解读复制代码margin: 0;outline: 0;效果如下。原创 2024-09-18 10:39:38 · 1140 阅读 · 0 评论 -
CSS 新特性查漏补缺,快来看看你用过几个?
这些属性其实并没有多么新,但受限于固有的浏览器兼容思维,可能在日常开发中用的不多,随着 IE11 都已经是小众浏览器后,可以大胆用起来了。原创 2024-09-18 10:33:28 · 788 阅读 · 0 评论 -
学完 Pinia 真香,不想用 vuex 了
Storejavascript代码解读复制代码import { defineStore } from 'pinia' // 第一个参数是应用程序中 store 的唯一 id export const useUser = defineStore('user', { state: () => { return { name: 'Jack', age: 18 } }, getters: {}, actions: {} })javascript代码解读复制代码。原创 2024-09-15 10:15:08 · 715 阅读 · 0 评论 -
Vue3项目搭建与基础知识详解
对于初学者小白来说,在这种初学状态下,我们还是要对这些有个详细的了解的,以至于以后我们可以从容不迫的去编译属于我们自己的代码,总要弄清楚这些是干嘛,到底是怎么个事,对吧。之后我们就该学习一下Vue3中的一些ApI了。原文链接:https://juejin.cn/post/7388091090350571546。原创 2024-09-15 10:14:19 · 1042 阅读 · 0 评论 -
我为何要放弃Nextjs的App Router开发应用
App Router和Page Router我认为并不是一个简单的升级。而是一次完全革命性的改变。在对App Router的使用和对比中发现,App Router有自己的理念,基于RSC实现,或许未来是一个使用React开发的方向。但整体看来,App Router的方案尚未成熟,我看到更多的是Next对React的RSC的一种实现,而并非一个基于RSC的成熟SSR成熟解决方案。App Router基于RSC实现,服务端和客户端交互通过RSC Payload进行通信,确实大大提高了服务端代码的安全性。原创 2024-09-15 10:13:28 · 810 阅读 · 0 评论 -
天天提交代码,git commit 提交时能规范一下吗?
写好git commit提交有什么好处呢?查看提交的log也非常的优雅,这个就不多提了方便查找日志记录,通过简单的过滤便能定位到具体想要查找的log方便问题回溯,通过git log就能查找到当时提交的代码文件,以及修改的代码其实如果使用过github的release, 可以直接根据feat和fix来过滤提取日志发布版本接下来我就来实践一下,首先我这里使用的是pnpm安装依赖的。今天主要是在提交代码时稍微自动化一点,并且让提交规范统一一些。具体操作的源码项目其实还可以将脚本修改一下。原创 2024-09-15 10:12:40 · 318 阅读 · 0 评论 -
初识Vue框架
Vue 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型,帮助你高效地开发用户界面。无论是简单还是复杂的界面,Vue 都可以胜任。Vue官方文档。原创 2024-09-15 10:11:40 · 1280 阅读 · 0 评论 -
Vite 热更新(HMR)原理了解一下
用过Vite进行项目开发的同学,肯定听说过,Vite在开发环境和生产环境是两种不同的资源处理方式。在开发环境,Vite以Vite只需要在浏览器请求源码时进行转换并按需提供源码。根据情景动态导入代码,即只在当前屏幕上实际使用时才会被处理。而在本地开发中,肯定会有本地代码的变更处理,如何最大限度的在不刷新整体页面的情况下,进行代码的替换呢。这就用到这一特性。而承载HMR的部分就是,我们需要在开发阶段启动一个Dev Server。体现在代码中就是我们在Vite的配置文件-中会有一个单独的字段 -server。原创 2024-09-14 10:09:28 · 1096 阅读 · 0 评论 -
Git 工程化之提交规范
Git 提供了多种不同类型的钩子(hooks),可以在特定的操作时执行自定义的脚本或命令sql代码解读复制代码。原创 2024-09-14 10:07:46 · 811 阅读 · 0 评论 -
❌ Button.jsx - 不太科学的文件命名?
Pascalcase - 大驼峰命名,过去一直是比较主流的文件命名风格,组件函数命名为Pascalcase,为了保持统一往往将组件的文件也命名为Pascalcase,同理,class类也会命名为Pascalcase,这是一个很简单直白的逻辑 - 即任何模块名为大写开头的其文件名也大写开头。如果我们去Google搜索一下关键词,几乎清一色的采用Pascalcase,如下链接但是接下来我要讨论的是这种文件命名的问题。原创 2024-09-14 10:02:36 · 1054 阅读 · 0 评论 -
Ling(灵):追求极致响应速度的LLM工作流优化
从今年年初开始,我自己创业,做儿童教育方向的AI应用产品。技术上来讲,最核心的其实是复杂的内容生成工作流的编排及内容输出,这里面有非常复杂的工作流。举个例子,比如我们的产品的核心工作流,涉及到非常多的Agent,大概如下图所示:可以看到,从用户输入话题,到最终生成内容,经过了问题改写、简答、大纲、子问题拆解和文章生成等好几个步骤,中间还穿插并行生成封面和口语化内容,这些内容都需要通过LLM的工作流编排来实现。原创 2024-09-14 09:59:59 · 324 阅读 · 0 评论 -
鸿蒙版 React Native 正式开源,ohos_react_native 了解一下
最后,可以看到本次开源的 ohos_react_native 完善度很高,从文档和内容都十分丰富,虽然中间建立的 N-API 到 C-API 的重构,但是经历一整年的修补,目前整体完成度还不错,相信对于 RN 开发适配鸿蒙的帮助还是相当可以的,目前看来距离 Next 的正式发布也不远了。原文链接:https://juejin.cn/post/7413617657919307826。原创 2024-09-14 09:56:26 · 1067 阅读 · 0 评论 -
从源码分析vue2和vue3的响应式区别(二)
vue3的响应式还是很简洁的,但是它解决了vue2响应式中存在的问题,包括不能处理数组,不能处理数组上的length属性,以及对象上不存在的属性劫持。原文链接:https://juejin.cn/post/7412672705302495243。原创 2024-09-13 10:24:11 · 345 阅读 · 0 评论