frontend_frank的博客

原创 揭秘webpack插件工作流程和原理

前言通过插件我们可以扩展webpack，在合适的时机通过Webpack提供的 API 改变输出结果，使webpack可以执行更广泛的任务，拥有更强的构建能力。本文将尝试探索 webpa...

转载 V8引擎的运行原理

一. 认识JavaScript引擎 1.1. 什么是JavaScript引擎当我们编写JavaScript代码时，它实际上是一种高级语言，这种语言并不是机器语言。高级语言是设计给开发人员使用的，它包括了更多的抽象和可读性。但是，计算机的CPU只能理解特定的机器语言，它不理解JavaScript语言。这意味着，在计算机上执行JavaScript代码之前，必须将其转换为机器语言。这就是JavaScri...

转载 基于大模型 + 知识库的 Code Review 实践

背景???? 想法源于在一次 Code Review 时，向 Claude 询问哪种写法代码更优雅得来。当时就想能不能让 AI 帮我们辅助做 Code Review？痛点信息安全合规问题：公司内代码直接调 ChatGPT / Claude 会有安全/合规问题，为了使用 ChatGPT / Claude 需要对代码脱敏，只提供抽象逻辑，这往往更花时间。三星引入 ChatGPT 不到 20 天，被曝发生 3...

转载 浅谈我对算法的理解，应用场景？

大家好，我是CodeQi！一位热衷于技术分享的码仔。在面试中，算法往往是一个不可回避的话题。面试官常常会问我们对算法的理解，以及我们如何在实际项目中应用算法。这个问题不仅考察我们的理论知识，还评估我们的实践能力。在接下来的内容中，我将通过几个具体的示例，详细讲解算法的基本概念及其在实际中的应用。????什么是算法？简单来说，算法是一组明确指令，用于解决特定问题的一系列步骤。一个好的算法应该具备以下特性...

转载 你做过什么有亮点的项目吗？

前言大厂面试中除了问常见的算法网络基础，和一些八股文手写体之外，经常出现的一个问题就是，你做过什么项目吗？看似简单的题目却让很多同学不知如何回答，因为面试就像相亲一样，你心仪的妹子不想听你说小学二年级还拿过三好学生，她其实只想了解现在的你，有什么特点和优点项目也是一样, 面试官其实是想看看你做过什么有亮点的项目, 其实大家日常做的项目都差不多，增删改查，登录注册，弹窗等等，所谓有亮点，就是在这些实...

转载 Pinia vs Vuex,应该选谁？

大家好，我是CodeQi！一位热衷于技术分享的码仔。当项目逐渐变大时，状态管理的问题开始显现了出来。这时，两个强大的状态管理工具：Vuex和Pinia。该选择哪一个呢？今天带各位大佬对比下两者的优势在何处，以及如何选择合适的状态管理库！什么是 Vuex？Vuex 是 Vue.js 的官方状态管理库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。它...

转载 【Vue3 + Vite】6个非常强大的后台管理项目！开源且免费！

大家好，我是CodeQi！一位热衷于技术分享的码仔。前俩天给各位大佬推荐的5个开源的Vue3后台管理系统，很受大家喜爱，感谢各位前端开发过程中一定离不开后台管理项目，今天在给大佬们分享一些非常强大的 Vue 3+vite开发的后台管理项目。希望能为你的开发提供灵感和参考。????放心，都是开源且免费的！1. Vue Vben Admin项目特点Vue Vben Admin 是一个基于 Vue 3、Vi...

转载 想看源码但是无从下口怎么办？

前言相信不少同学都有欧阳这种情况，年初的时候给自己制定了一份关于学习英语和源码的详细年度计划。但是到了实际执行的时候因为各种情况制定的计划基本都没有完成，年底回顾时发现年初制定的计划基本都没完成。痛定思痛，第二年年初决定再次制定一份学习英语和源码的详细年度计划，毫无疑问又失败了。经过多年的摸索，对于如何查看源码欧阳终于有了一些自己的心得。有的同学还想问英语有什么心得没，不要问，再问欧阳哭给你看。一...

转载 腾讯文档前端工程架构改造实践

????目录1 老旧的工程架构让业务开发走得越来越慢2 上百个 npm 包仓库的自动化发布系统3优化组件库的构建体积与速度4多仓库带来困境重重，决心尝试大仓脱困5 如何阻止代码劣化6 总结腾讯基础开发中心负责维护着腾讯文档除编辑器外的大部分业务， 包括 90+ npm 包与 170+ 的 CDN 组件，还有六个 application 服务，散落在七个业务仓库中。随着业务量和开发同学的逐渐增多，基础...

转载 Vue3 除了Ref、Reactive还有哪些东西

点击下方“前端开发爱好者”，选择“设为星标”第一时间关注技术干货！哈喽，大家好 我是 xy????????‍????。使用 Vue3，如果你只会使用 Ref、Reactive，那你真的就该 Out 了！！！前言最近团队的工作相对较少，我决定利用闲暇时间对代码进行审查和优化。在此过程中，我发现了一个令我惊讶的现象：在项目中 99% 的响应式变量声明都使用了 Ref 或 Reactive。虽然这两个 API 在大多数场...

转载 推荐8个还在疯狂输出的前端大佬

前端学习，关注这几个大佬就够了。他们的文章提供的前端知识非常完备，也经常推荐前端面试、个人成长相关的文章，对于你来说，学前端，关注这些公众号就够了。不多说，直接看这些大佬的介绍。????程序员成长指北考拉，一个有趣且乐于分享的妹子！目前就职于某知名外企，负责部门中台搭建。公众号专注 Node.js 技术栈，从 高级前端 到 Node.js与前端工程化 再到 后端数据库，祝您成为优秀的高级 Node.js...

转载 浅谈编码提效

编码 是软件工程全生命周期中最最关键的环节，不幸的是，这同时也是最复杂最容易出问题的环节。编码是一种非常复杂抽象的脑力活动，开发者之间受技能、熟练度、经验、习惯、偏好等影响往往会呈现出较大的效率差异，这是普遍存在的客观事实，但站在工程化管理视角，我们需要设法尽可能克服这些差异，使得团队每一个个体都有较为稳定的编码产出；需要保证不同个体产出的代码集成后，系统各部件依然能如预期地正常运行；同时，需要确...

转载 Vue3 中的 v-bind 指令：你不知道的那些工作原理

大家好，我是欧阳！本文约1700+字，整篇阅读大约需要6分钟。前言v-bind指令想必大家都不陌生，并且都知道他支持各种写法，比如<div v-bind:title="title">、<div :title="title">、<div :title>(vue3.4中引入的新的写法)。这三种写法的作用都是一样的，将title变量绑定到div标签的title属性上。...

转载 学会这12个JavaScript实用技巧，做一个优雅的前端人

JavaScript 是一种应用场景多且功能强大的语言，对于现代 Web 开发至关重要。掌握一些 JavaScript 实用技巧对于提升代码质量和开发效率至关重要，这些技巧可以帮助开发者更高效地编写和维护代码，让代码变得优雅且不过时，让你成为更高效、更有效的前端开发人员。这篇文章就来和大家一起探讨几种 JavaScript 开发技巧，每种技巧都有介绍代码和示例，让我们一起来提升你的 JavaScr...

转载 Vue 开源项目：一款实用的个人音乐流媒体服务器，轻松打造属于自己的音乐天堂！！！...

点击上方蓝字关注我们大家好，我是CodeQi！你们是否曾经希望有一款属于自己的音乐流媒体服务器，可以随时随地播放你喜欢的音乐，而不必依赖于 QQ音乐 或 Apple Music？有时候，我们是不是会幻想自己是一个拥有私人音乐库的DJ，随时随地可以播放自己喜爱的曲目？别担心，我也有过这种想法。不过现在，这个梦想可以轻松实现了！让我为你们介绍 Koel，一款实用的个人音乐流媒体服务器，让你轻松打...

转载 tailwindcss 高级思维模型

时间是过得真快，从刚开始决定 all in tailwindcss，到现在非常熟练的使用，已经过去了一个多月的时间了。在这个期间，我写了几篇文章给大家分享我的使用感受。但是呢，还是有很多人不理解我为什么如此推崇它，因此，我决定再写一篇文章，来跟大家分享一下，在真实项目中，我是如何使用 tailwindcss 的。区分基础能力与高度封装随着几个版本的迭代，为了增强自己的适用范围，tailwindcs...

转载 深入了解Vite：依赖预构建原理

前言前面我们有提到Vite在开发阶段，提倡的是一个no-bundle的理念，不必与webpack那样需要先将整个项目进行打包构建。但是no-bundle的理念只适合源代码部分（我们自己写的代码），vite会将项目中的所有模块分为依赖与源码两部分。依赖：指的是一些不会变动的一些模块，如：node_modules中的第三方依赖，这部分代码vite会在启动本地服务之前使用esbuild进行预构建。esb...

转载 整理了几个输出原创文章的博主，收藏下来慢慢看

前端学习，关注这几个大佬就够了。他们的文章提供的前端知识非常完备，也经常推荐前端面试、个人成长相关的文章，对于你来说，学前端，关注这些公众号就够了。不多说，直接看这些大佬的介绍。????程序员成长指北考拉，一个有趣且乐于分享的妹子！目前就职于某知名外企，负责部门中台搭建。公众号专注 Node.js 技术栈，从 高级前端 到 Node.js与前端工程化 再到 后端数据库，祝您成为优秀的高级 Node.js...

转载 字节跳动发布“豆包MarsCode”智能开发工具，面向国内开发者免费

6 月 26 日，字节跳动在北京发布了基于豆包大模型打造的智能开发工具 - 豆包MarsCode ，面向国内开发者免费开放。本场发布会以“用 AI 激发创造”为主题，在草地露营的轻松氛围中发布了豆包MarsCode 并介绍了其主要功能，同时发布开发者及社区共创计划，吸引了众多业界人士、开发者和科技爱好者的关注。豆包MarsCode产品发布会现场豆包MarsCode——用 AI 激发创造字节跳动开发...

转载 AT大厂面试题与全栈知识体系结合

转载 20个超好看的落地页/首页模板

来分享 20 个超好看的落地页/首页模板。代码：https://github.com/RSurya99/nefa代码：https://github.com/RSurya99/trippi代码：https://github.com/cruip/tailwind-landing-page-template代码：https://github.com/vivid-labs/vivid-landing-te...

转载 精彩！Vue 实现消息列表向上无缝滚动！丝滑...

点击上方蓝字关注我们大家好，我是CodeQi！最近，我的老板又给我布置了一个有趣的任务——实现一个消息列表向上无缝滚动的效果。刚听到这个需求时，我差点以为要让我编写一个“电梯广告屏”！不过，作为一个乐于挑战的开发者，这种需求反而激发了我的兴趣。于是，我带上 Vue.js，开始了这次“无缝滚动”的冒险之旅。今天，我就来分享一下我是如何一步步实现这个效果的。项目初始化首先，我们需要初始化一个 V...

转载 逆天的react小游戏，附源码&体验链接

原文链接：https://gold.xitu.io/post/585a3e151b69e60056fe44fb点击下面原文链接体验游戏github源码：https://github.com/chvin/react-tetris先来个demo图正常速度的录制，体验流畅。不仅pc屏幕自适应，在手机使用手指也能响应式操作：将state储存在localStorage，精确记录所有状态。网页关了刷新了、程...

转载 罗列n个前端博主（简介、擅长领域等），希望对初学者有所帮助

推荐几个前端领域的公众号，他们不仅拥有丰富的技术内涵，还具备引人深思的原创能力。我相信，他们的文章总能给你带来启发和思考，关注他们，了解前端领域的前沿技术和最新动态，激发你对前端的热情和持续探索!前端开发爱好者「前端开发爱好者」号主xy，掘金签约作者，目前在某独角兽公司担任【前端Leader】，公众号创建的初心是【致力于基础到进阶再到实践总结】。目前已经分享了上百篇关于前端学习路线、前端进阶、数据...

转载 这12个前端库，帮我在工作中赢得了不少摸鱼时间

点击上方蓝字关注我们大家好，我是CodeQi！今天，我想跟大家分享一个小秘密：有12个前端库，帮我在工作中赢得了不少摸鱼时间。别误会，我不是在提倡懒惰，而是在强调如何通过高效的工具提高工作效率，从而有更多的时间来处理其他重要的任务，或者……摸鱼。没错！就是摸鱼。毕竟，提高效率后，工作做完了，摸鱼也是一种享受。下面，我就来详细介绍一下这12个神奇的前端库，以及它们是如何帮我节省时间的。1. A...

转载 使用 docker 搭建属于自己的个人相册，让生活中的美好不再丢失！

前言随着数码设备的普及，许多人都积累了大量的照片和视频。如何高效地管理、浏览和分享这些数字资产成了一个重要问题。PhotoPrism 是一款开源的照片管理应用，它通过先进的图像识别技术和用户友好的界面，帮助用户轻松地管理和分享照片。本篇文章将详细介绍如何使用 Docker 搭建属于自己的 PhotoPrism 个人相册。特性PhotoPrism 具备以下主要特性：1.强大的搜索功能：支持按地点、...

转载 听说在 Vue 3 中实现动态表单很难？作为一个前端开发者，表示一切都是小意思！！...

点击上方蓝字关注我们大家好，我是CodeQi！最近，我的老板给我布置了一个任务：实现一个用户可以随时增删字段的动态表单。你知道的，作为一个前端开发者，我平时和表单关系可不算好，这次的任务无疑是向我发起了挑战。于是，我带上了 Vue 3 这个利器，开始了我的动态表单征程。接下来，我会带着大家一起从入门到精通，深入了解如何在 Vue 3 中实现动态表单。介绍动态表单是一种允许用户根据需求动态调整...

转载 浅析Vite本地构建原理

前言随着Vue3的逐渐普及以及Vite的逐渐成熟，我们有必要来了解一下关于vite的本地构建原理。对于webpack打包的核心流程是通过分析JS文件中引用关系，通过递归得到整个项目的依赖关系，并且对于非JS类型的资源，通过调用对应的loader将其打包编译生成JS 代码，最后再启动开发服务器。了解到webpack的耗时主要花费在打包上，Vite选择跳过打包，直接以以 原生 ESM 方式提供源码，这...

转载 VueUse——一个大大提升开发效率的Vue3的工具库

前言VueUse是一个基于Composition API实现的基本 Vue 组合实用函数的集合。VueUse可能是受到了react-use的启发，可以看做是vue版的hook，Vue Compostion API支持了更好的逻辑分离，让这些常用的工具可以被复用，能够让你快速地构建丰富的应用，大大地提高你的开发效率在，避免自己去封装一些常用的功能函数，比如：防抖，节流，定时器等。几天前，一个偶然...

转载 Vue vs React：回顾每种工具的优缺点

Vue 和 React 是创建 JavaScript 网络应用程序最常用的两种工具。但我们该如何在两者之间做出选择呢？在本篇 Vue 与 React 的对比中，我们将尝试找出答案。我们将回顾每种工具的优缺点，提供选择使用哪种工具的技巧，并帮助你开始使用。总览什么是Vue？Vue趣事什么是React？React趣事Vue vs React：全面比较React 灵活性Vue 灵活性使用 React 进...

转载 前端生成海报图技术选型与问题解决

作者：vivo 互联网大前端团队 - Tian Yuhan本篇文章主要聚焦海报图分享这个形式，探讨纯前端在H5&小程序内，合成海报到下载到本地、分享至社交平台整个流程中可能遇到的问题，以及如何解决。一、引言绝大多数的电商平台都会设计分享裂变的功能，激励用户进行分享，这是一种拉新促活的常见措施。提到分享裂变，就免不了需要生成用户专属的分享链接或者专属海报。当然分享推广的形式多种多样，有文本链...

转载 JavaScript高级系列之V8引擎的运行原理

一. 认识JavaScript引擎 1.1. 什么是JavaScript引擎当我们编写JavaScript代码时，它实际上是一种高级语言，这种语言并不是机器语言。高级语言是设计给开发人员使用的，它包括了更多的抽象和可读性。但是，计算机的CPU只能理解特定的机器语言，它不理解JavaScript语言。这意味着，在计算机上执行JavaScript代码之前，必须将其转换为机器语言。这就是JavaScri...

转载 彻底搞清楚vue3的defineExpose宏是如何暴露方法给父组件使用

大家好，我是欧阳！本文约1400+字，整篇阅读大约需要6分钟。前言众所周知，当子组件使用setup后，父组件就不能像vue2那样直接就可以访问子组件内的属性和方法。这个时候就需要在子组件内使用defineExpose宏函数来指定想要暴露出去的属性和方法。这篇文章来讲讲defineExpose宏函数是如何暴露出去这些属性和方法给父组件使用。注：本文中使用的vue版本为3.4.19。看个demo父组件...

转载 Vue3.0+typescript+Vite+Pinia+Element-plus搭建vue3目前最流行的项目框架！

前言随着vue3.0的越来越受欢迎，开始有许多公司和个人开始学习并使用vue3开发项目。我从接触学习并使用vue2，到现在的vue3，工作中也一直在使用vue。vue3也发布很长时间了，目前vue3+vite+ts再结合一些优秀的UI框架，如Element plus，Ant design，Naive UI，移动端的Vant UI，成为了较为流行的前端技术之一。那么今天就带大家一起来搭建一个Vue3...

转载 628-稀土开发者大会前端专题概要【抢先预览】

自2021年起，稀土开发者大会已成功举办三届，始终致力于以技术的名义拓宽全球视野，并深切关怀开发者的成长与进步。如今，备受期待的第四届稀土开发者大会即将在2024年6月28日- 6月29日召开。大会的最新信息已在官网上陆续更新：https://conf.juejin.cn/xdc2024/?utm_source=wenzhang本届大会依旧以代码不止，掘金不停为核心理念，热情邀请所有热爱技术的开发...

转载 查缺补漏：数据加密是前端的活还是后端的活？

随着信息和数据安全重要性的日益凸显，如何保证信息数据在传输的过程中的安全成为开发者重点关注的内容。前端加密通常是指在浏览器中对各种传输的数据进行各种加密操作。然而前端加密更多的是用来对传输的数据进行简单的混淆，为了确保数据在传输过程中不被轻易的篡改和读取。可供我们选择的加密方式有很多种，需要我们在开发过程中根据实际的场景选择适合自己的加密解决方案。那么，本文将结合应用场景来介绍一下前端开发中常用的...

转载 12位出品人集结完毕，2折购票火热进行中！现在购票100%中奖

自2021年起，稀土开发者大会已成功举办三届，始终致力于以技术的名义拓宽全球视野，并深切关怀开发者的成长与进步。如今，备受期待的第四届稀土开发者大会即将在2024年6月28日- 6月29日召开。大会的最新信息已在官网上陆续更新：https://conf.juejin.cn/xdc2024/?utm_source=wenzhang本届大会依旧以代码不止，掘金不停为核心理念，热情邀请所有热爱技术的开发...

转载 浏览器的DOM和BOM

JavaScript有一个非常重要的运行环境就是浏览器，而且浏览器本身又作为一个应用程序需要对其本身进行操作，所以通常浏览器会有对应的对象模型（BOM，Browser Object Model）。我们可以将BOM看成是连接JavaScript脚本与浏览器窗口的桥梁。BOM主要包括一下的对象模型：window：包括全局属性、方法，控制浏览器窗口相关的属性、方法；location：浏览器连接到的对象的...

转载 罗列几个前端开发者的博主，各种方向的都有

推荐几个前端领域的公众号，他们不仅拥有丰富的技术内涵，还具备引人深思的原创能力。我相信，他们的文章总能给你带来启发和思考，关注他们，了解前端领域的前沿技术和最新动态，激发你对前端的热情和持续探索!初识Threejs欢迎来到「初识Threejs」，我是一名一线前端开发者，热爱记录分享。在这个公众号里，我将分享Three.js的研究、实践和感悟，所以，不管你是初入前端的新手，还是有一定经验的开发者，我...

转载 2024 年十大 Vue.js UI 库

Vue.js 是一个流行的 JavaScript 框架，它在前端开发者中越来越受欢迎，以其简单、灵活和易用性而闻名。Vue.js 如此受欢迎的原因之一是它拥有庞大的 UI 库生态系统。这些库为开发人员提供了预构建的组件和工具，帮助他们快速高效地构建漂亮且响应性强的用户界面。所以，让我们来看看 2024 年排名前 10 的 Vue.js UI 库，以确保您的开发生产力尽可能高！1.VuetifyVu...