- 博客(1756)
- 收藏
- 关注
RSS订阅转载 没有那么难！10 分钟带你构建monorepo架构，前端通用自动化 CI/CD 方案
点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群今天我们主要讨论3方面内容：如何搭建比较高效好用的monorepo工程前端如何基于搭建的monorepo工程实现自定义cli工具普通前端项目以及monorepo工程项目自动化cicd核心问题以及解决方案基于 pnpm-workspace + Turborepo + lerna 搭建 monorepo 的 cli 工程首先利用 pnpm 初始...
2024-08-13 09:15:41
4
转载 重新学习 TypeScript 类型系统
点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群作者：转转技术团队https://juejin.cn/post/7374614838008774656很多开发者已经将 Typescript 加入到自己的项目里进行开发，初衷是为了项目在开发时拥有类型检查能力。TypeScript 通过易上手且功能强大的类型系统，为 JavaScript 提供了强大的类型检查能力。在类型的帮助下，我们无...
2024-08-13 09:15:41
6
转载 Vue3 组件封装的一些技巧和心得
点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群在日常开发的过程中，使用Vue的组件进行业务拆分，代码解耦是一个很好的选择；今天就来分享一下我在使用Vue3进行组件封装的一些技巧和心得，希望能够帮助到大家；1. 组件特性在Vue中组件是一个独立的实例，每个组件都有共通点，就是：属性、插槽、事件、方法；在日常我们使用第三方组件库的时候，组件库的文档都会说明上面四个特性，而组件封装就是围绕这...
2024-08-12 09:15:45
7
转载 axios中的那些天才代码！看完我实力大涨！
前端Q我是winty，专注分享前端知识和各类前端资源，乐于分享各种有趣的事，关注我，一起做个有趣的人～公众号点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群axios的两种调用方式经常调接口的同学一定非常熟悉aixos下面的两种使用方式：axios(config)//配置式请求axios({method:'post',url:'/user/12345',});axi...
2024-08-09 09:15:25
13
转载 领域驱动设计DDD在B端营销系统的实践
本文整理自美团技术沙龙第73期《基于领域驱动设计（DDD）的架构演进和实践》，系统复杂性根源于隐晦（难理解），耦合（难改动）和变化（难扩展），DDD正是应对系统复杂性的重要方法。本文针对B端营销系统设计中的复杂性，从战略设计，战术设计到代码架构，详细介绍了DDD在各个阶段的实践，期望为大家提供一些可供参考和借鉴的思路。1 背景2 基本概念3 战略设计实践4 战术设计实践5 代码架构实践6 总结7 ...
2024-08-09 09:15:25
14
转载 深度分享：从零实现一个JS引擎
点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群背景这是很久之前的一个念想，当时为了加深自己对js的理解，明白js引擎是如何工作的。于是从上网找了一个giao-js[1]，感觉还不错，因此想学习一下。原文地址：https://juejin.cn/post/7205517870976270394JS引擎之前有篇文章理解React中Fiber架构(一)[2]中有讲到浏览器进程如何渲染网页和执...
2024-08-08 12:48:09
13
转载 Vue3 又一新选择：VueHooks Plus 强势来袭！
前端Q我是winty，专注分享前端知识和各类前端资源，乐于分享各种有趣的事，关注我，一起做个有趣的人～公众号点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群哈喽，大家好 我是 winty。替代 VueUse，这一次我选择 VueHooks Plus！在 Vue3 的浪潮中，Composition API 以其灵活和强大的能力，成为了前端开发中的一股新潮流。然而，当 React 开发者...
2024-08-08 12:48:09
40
转载 服务端开发必备：9大性能优化秘技
点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群????目录1 缓存2 并行化处理3 批量化处理4 数据压缩处理5 无锁化6 分片化7避免请求8池化9异步处理10 总结笔者最近对负责项目做了一些服务性能优化的工作，主要优化了项目中的一些不合理设计，例如：服务间使用 json 传输数据；监控上报处理逻辑在主流程中；重复数据每次都请求下游服务；多个耗时操作串行请求等。取得了 A 服务平均耗时...
2024-08-07 09:15:33
26
转载 Lodash 的又一方法被替代了，探索 JS 新特性 Object.groupBy
点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群ES 2024增加了很多 JS 的新特性其中 Object.groupBy 是最受大家关注的新方法之一：Object.groupBy() 静态方法根据提供的回调函数返回的字符串值对给定可迭代对象中的元素进行分组。返回的对象具有每个组的单独属性，其中包含组中的元素的数组。它的具体语法如下所示：Object.groupBy(items,c...
2024-08-07 09:15:33
18
转载 7种JavaScript 中位运算符的神奇用法
点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群JavaScript与许多其他编程语言不同，JavaScript 没有定义不同类型的数字，如整数、短整型、长整型、浮点型等。整数精度（不带小数点或指数表示法）最多为 15 位。小数精度的最大位数为 17 位，但浮点运算并不总是 100% 准确。位运算直接计算二进制位，位运算直接处理每个位。它是一种非常低级的操作。优点是速度极快，但缺点是非常...
2024-08-06 09:15:13
17
转载 什么？原来前端错误上报这么简单！！
点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群前言项目上线之后，用户如果出现错误（代码报错、资源加载失败以及其他情况），基本上没有办法复现，如果用户出了问题但是不反馈或直接不用了，对开发者或公司来说都是损失。由于我这个项目比较小，只是一个迷你商城，所以不需要收集很复杂的数据，只需要知道有没有资源加载失败、哪行代码报错就可以了，市面上有很多现成的监控平台比如sentry，在这里我选择...
2024-08-06 09:15:13
20
转载 threejs做特效：实现物体的发光效果-EffectComposer详解！
点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群简介与效果概览各位大佬给个赞，感谢呢！threejs的开发中，实现物体发光效果是一个常见需求，比如实现楼体的等待照明要想实现这样的效果，我们只需要了解一个效果合成器概念：EffectComposer。效果合成器能够合成各种花里胡哨的效果，好比是一个做特效的AE，本教程，我们将使用它来实现一个简单的发光效果。如图，这是我们将导入的一个模型 ....
2024-08-05 09:15:17
50
转载 源码视角，Vue3为什么推荐使用ref而不是reactive
点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群ref 和 reactive 是 Vue3 中实现响应式数据的核心 API。ref 用于包装基本数据类型，而 reactive 用于处理对象和数组。尽管 reactive 似乎更适合处理对象，但 Vue3 官方文档更推荐使用 ref。 我的想法，ref就是比reactive好用，官方也是这么说的，不服来踩！下面我们从源码的角度详细讨论这两个...
2024-08-02 09:15:10
15
转载 几行代码，优雅的避免接口重复请求！同事都说好！
点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群背景简介我们日常开发中，经常会遇到点击一个「按钮」或者进行「搜索」时，请求接口的需求。如果我们不做优化，连续点击「按钮」或者进行「搜索」，接口会重复请求。❝首先，这会导致性能浪费！最重要的，如果接口响应比较慢，此时，我们在做其他操作会有一系列bug！❞那么，我们该如何规避这种问题呢？如何避免接口重复请求防抖节流方式（不推荐）使用防抖节流方式...
2024-08-01 09:15:15
24
转载 某一线前端小组长的 Code Review 分享
点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群☀️ 前言大家平时网上搜索能搜出一堆Code Review 实践、Code Review 流程、如何如何 Code Review 等等。好像实际的 review 记录并不多，恰好本人有幸担任前端小组长一职，平时摸鱼就去偷偷看看大家又写了什么优秀代码。所以今天就由小弟我，给大家分享一下，小厂一线前端平时写的代码????作者能力有限，里面的评论不...
2024-07-31 09:15:27
25
转载 如何实现一个分词器
点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群如何实现一个分词器在开发代码补全插件的过程中，根据项目需要，我实现了一个分词器，本文将介绍分词器的具体实现细节。一、什么是分词器？分词器是 NLP（natural language processing，自然语言处理）领域的一个重要部分，它可以把一段文本转换为小的单元，称为 token 。token可以是单词、字符、标点符号等。在基于 Tr...
2024-07-30 10:11:36
19
转载 JavaScript Set新增7个方法
点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群前言JavaScript Set 对象的操作方法现在已经成为 Baseline 的一部分，这意味着这些方法在所有主流浏览器中都有支持。现在可以使用 JavaScript 中的 Set 方法来执行诸如 intersection 、 union 等集合操作。庆祝：此网络特性现已在三大浏览器引擎中可用，并于 2024 年 6 月 11 日起成...
2024-07-30 10:11:36
30
转载 一文吃透 WebSocket 原理
前端Q我是winty，专注分享前端知识和各类前端资源，乐于分享各种有趣的事，关注我，一起做个有趣的人～公众号点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群哈罗大家好，我是Winty。通常我们开发H5，都是基于HTTP协议，典型的 请求/响应 模式。随着web能力越来越丰富，更多的小伙伴有机会尝试一些新的网络协议，比如 WebSocket ，这在一些实时性要求比较高的场景出现频率很高。今...
2024-07-29 09:15:12
17
转载 前端构建系统浅析
开发者编写JavaScript代码，而浏览器运行JavaScript代码。从根本上说，前端开发不需要构建步骤。那么，为什么现代前端需要构建步骤呢？随着前端代码库越来越庞大，以及开发者体验越来越重要，直接将JavaScript源码传输给客户端会带来两个主要问题：不支持的语言特性：由于JavaScript在浏览器中运行，而浏览器种类繁多、版本各异，每增加一种语言特性，能运行你JavaScript的客户...
2024-07-29 09:15:12
16
转载 牛啊牛啊！大佬用Tauri开发一个即时通讯软件
点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群这段时间正在学习桌面端开发，目前了解了Electron和Tauri,在搜索教程的时候发现了一位大佬用Tauri开发了个即时通讯的软件，并且技术栈用的也是VUE3和TypeScript，所以今天就给大家分享一下这个项目——HuLaHuLa 是一个基于 Tauri、Vite 5、Vue 3 和 TypeScript 构建的即时通讯系统。它利...
2024-07-26 09:15:54
36
转载 Monorepo - 理论篇
点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群去年年底，公司进行了部门调整，自己原先做的项目也交给部门内别的科室去做了，做了一年的系统，总有些伤感。原先是做的是客服系统，主要包含客服、话务、工单和三方四大模块，使用的技术栈包含JQuery、React、Vue2和Vue3。客服系统是单点登录，通过Iframe连接上述四大模块，也算是比较原始的微前端技术。今年年初被调到其他部门，开始做其他...
2024-07-26 09:15:54
27
转载 17个强大的 AI 工具，让你的工作效率翻倍
点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群技术在以前所未有的速度向前发展，而人工智能是我们这个时代最具变革性和影响力的创新之一。对于开发人员来说，人工智能工具已经成为我们工具包中的重要组成部分，开启了曾经难以想象的可能性领域。在本文中，我编译了一些最有用的开发人员工具，它们将帮助您加快日常工作流程并提高工作效率。现在，我将每个工具中的直接链接、主要功能进行简单描述，希望这些工具能够...
2024-07-25 09:37:34
88
转载 VTable 一款高性能的多维数据分析表格，更是一个在行列间创作的方格艺术家家...
点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群一、项目简介VTable 是 VisActor 可视化体系中的表格组件库，基于可视化渲染引擎 VRender 进行封装。核心能力如下：性能极致：支持百万级数据快速运算与渲染多维分析：多维数据自动分析与呈现表现力强：提供灵活强大的图形能力，无缝融合VChartVTable提供了三种主要的表格形态，包括基本表格、多维透视表格和透视组合图。可以满...
2024-07-25 09:37:34
48
转载 面试官：如果一个NPM包部分功能不满足需求，如何修改其部分功能~
点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群本文由前端小伙伴@Moment 授权转载。欢迎大家踊跃投稿。原文链接：https://juejin.cn/post/7355383157556019239对第三方包进行修改以适应特定需求是一个常见的场景。尽管直接修改 node_modules 中的代码是可能的，但这种做法并不推荐，因为这些改动在下次运行 npm install 或更新包时会...
2024-07-24 09:15:23
22
转载 答应我，不要再用console.log调试了
点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群故事背景 事情是这样的，因为我经常会接到一些 CR，就时常会看到推上来的 console.log 写在代码里没删...这太要命了，要知道这在明治维新时期可是要浸猪笼的所以，今天正好趁这个机会，分享一下我平时是怎么调试代码的注意：我用的是 vscode,其它IDE按照这个思路，大差不差1. 调试配置 要实现最基本的配置其实很简单,你只需要在...
2024-07-24 09:15:23
23
原创 让小程序在 APP 运行的高性价比选择 ——FinClip
背景最近我所在的团队有想在一个 APP 上运行微信小程序，目前这个 APP 是采用 Native+H5 的形式，主要存在以下问题：H5不支持本地缓存H5无法获取APP原生的一些系统权限(类似访问通讯录、调用硬件、访问蓝牙)一个APP往往由 IOS 和 Android 两个团队维护，不仅浪费人力，还经常因为应用商店审核导致发版不一致因此，如果我们在 APP 上运行小程序，那就是 Native+小程序...
2024-07-23 09:16:02
680
转载 飞书一键复制网页内容为图片原理
点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群李经理在使用飞书时无意中发现,飞书竟然支持一键复制网页内容到剪贴板的功能。他立即叫来了公司的前端开发小王,兴致勃勃地说:"小王啊,你看,飞书的这个功能多方便!我们公司的协同办公系统是不是也可以实现类似的功能?这样用户体验一定能得到很大提升!"小王看着李经理充满expectant的眼神, 虽然内心已经吐槽"就这点功能至于吗", 但表面上还是恭...
2024-07-22 09:15:27
47
转载 上手 Day.js 日期处理库
点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群Day.js 是一个轻量级的 JavaScript 日期处理库，类似于 Moment.js，但体积更小。Day.js 提供了丰富的 API 来解析、格式化和操作日期。以下是 Day.js 的一些基本使用方法首先，确保你已经安装了 Day.js。你可以通过 npm 或 yarn 将其添加到你的项目中：npm install dayjs// ...
2024-07-22 09:15:27
49
转载 13个漂亮的登录页面，附源代码地址
点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群今天给大家分享13个超好看的登录页面，这些登录页面不仅有静态的，还有动态的，看看有没有你喜欢的？源码地址：https://codepen.io/Mohuth/pen/QWgrPvp源码地址：https://codepen.io/afgprogrammer/pen/mYQQJV源码地址：https://codepen.io/fghty/pen...
2024-07-19 10:10:24
45
转载 React 渲染流程可视化，有大佬实现了！
点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群终于有大佬把 React 复杂的流程可视化出来了，让我们来看看效果：体验这个功能的网址：https://jser.pro/ddir/rie下面是作者关于这个功能的介绍：我为什么创建它？当我在 2021 年首次深入探索 React 时，我为自己绘制了一些图表[1]来帮助理解 React 的内部结构，下面是其中之一。React 内部结构图显...
2024-07-18 09:48:28
38
转载 图片碎片化渲染特效实现
点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群本文将分享一个图片碎片化展示的效果，具体效果如下，请诸君按需食用。原理这种特效早在几年前就已经出现，属于老演员了????，它最早是经常在轮播图（banner）上应用的，那会追求各种花里胡哨的特效，而现在感觉有点返璞归真了，简洁实用就行。今天咱们来看看它的具体实现原理是如何的，且看图：一图胜千言，不知道聪明的你是否看明白了？????大概原理是：通过容器/...
2024-07-17 09:15:00
37
转载 Tailwind轻松实现夜间模式，能跟随系统又能手动控制！
点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群通过本文，你将会收获到：如何让vscode不会再对 @tailwind , @apply 之类的属性报错如何让你的应用既能跟随系统设置，又能手动设置夜间模式图片如果本文对你有所帮助，希望你能动动小手点个免费的赞，这会让我更有动力进行写作，谢谢你！VSCode配置：这一步可以让你的 @apply 和 @tailwind 之类的 @ 属性都不会...
2024-07-17 09:15:00
27
转载 Promise：为什么没有取消？
点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群在JavaScript中，Promise是用于处理异步操作的对象，它代表一个异步操作的最终完成（或失败）及其结果值。然而，JavaScript的Promise并不提供内置的取消（cancel）机制。Promise是经过了深思熟虑，才不自带取消功能的！！！这篇文章，将围绕着设计的哲学，以及从状态机的角度，解释为什么不需要cancel。即使如此...
2024-07-16 09:15:28
31
转载 基于wujie的解决方案来简单聊聊微前端
前言因为目前有时间了，所以在整理一下自己这几年写过的一些东西的相关文档，准备把一些东西改一下发出来，有的内容可能并不复杂，甚至有点浅显，但是也是对自己这几年的一些复盘和总结了如果有需要，转载前请向我确认另：刚入职的公司把总监和经理都干掉了，有可能因为发展路线原因不再需要前端，现在求一份广州 、 深圳的前端开发工作本科5年经验，19年毕业，18年开始从事前端工作，基础良好、有千万级日活产品开发维护经...
2024-07-15 09:15:43
38
转载 “Vue 之父”最新采访：我是第一个吃螃蟹的人
前言对于前端开发而言，循序渐进，基于标准的 HTML + CSS + JS “前端三剑客”构建，是否是更好的选择？或者，你是否需要一个“多面手框架”，例如 Next 或 Angular，它们兼具 SSR（服务端渲染）、路由和导航，以及更强大的状态管理等内置功能？当然，这取决于你要构建的网站的规模。但如果你是 Vue 爱好者，那其实你已经是渐进式框架的拥护者了。如果你确实需要更复杂的功能，可以使用其...
2024-07-15 09:15:43
32
转载 通过可视化彻底搞懂 Promise执行逻辑
点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群JavaScript 中的 Promise 一开始可能会让人感到有些难以理解，但是如果我们能够理解其内部的工作原理，就会发现它们其实是非常易于掌握的。在这篇博客文章中，我们将深入探讨 Promise 的一些内部机制，并探索它们是如何使得 JavaScript 能够执行非阻塞的异步任务。一种创建 Promise 的方式是使用 new Pr...
2024-07-12 11:19:45
37
转载 都应该会的前端代码规范 - 日志打印规范
点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群在前端开发中，随着项目迭代升级，日志打印逐渐风格不一，合理的日志输出是监控应用状态、调试代码和跟踪用户行为的重要手段。一个好的日志系统能够帮助开发者快速定位问题，提高开发效率。本文将介绍如何在前端项目中制定日志输出规范。1. 日志等级首先，我们需要定义不同的日志等级，以便根据消息的重要性进行分类。通常，日志等级从低到高可以分为以下几类：DE...
2024-07-11 09:15:49
26
转载 又一次变革，Vue 更彻底的拥抱了函数式
点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群!最近没授权，但是还抄我文章的有点多，粉丝朋友看到了会反馈给我，你们要小心一点，我暂时先不举报你们，等你们多抄一点，情节严重的时候，到时候一波举报，搞不好号都给你封了！你们要小心哦我本来今天想写一篇文章跟大家介绍一下 React Native for Windows + macOS。之前没有用过，所以这两天花时间调研了一下，也写了一些基础的...
2024-07-09 09:15:20
92
转载 面试官：谈谈前端路由的实现原理【hash＆history】
点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群今天我们来聊一聊前端路由。当谈到前端路由时，指的是在前端应用中管理页面导航和URL的机制。前端路由使得单页应用（Single-Page Application，SPA）能够在用户与应用交互时动态地加载不同的视图，而无需每次都重新加载整个页面。在前端开发中，常用的前端路由库有很多，比如React Router、Vue Router和Angul...
2024-07-09 09:15:20
46
转载 前端代码规范 - 图片相关
点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群在前端项目中，图片资源是构成网站视觉效果的重要元素。合理的图片使用规范不仅可以提高页面加载速度，还可以增强用户体验。本文将详细介绍前端项目中图片，包括图标（Icon）和大图等的使用规范。1. 图片格式选择如下是各图片类型的优缺点，业务开发中要根据实际的场景选择合适的图片格式。能支持WebP的场景推荐WebP，其他推荐使用PNG。JPEG适用...
2024-07-08 09:15:32
27
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人