奇舞周刊-CSDN博客

原创更轻巧的状态管理工具——Hookstate

本文作者为 360 奇舞团前端开发工程师Hookstate前言作为 React 开发人员，管理中型应用程序的状态可能很困难。在开发小型应用程序时，将状态从一个组件传递到另一个组件相对简单。当应用程序的规模发生变化时，就会变得不方便，因为你需要无层级关系组件状态的互相访问支持。Hookstate是一个完全基于React状态hook的状态管理库。它实施简单、快速、直接且可扩展。不需要模版，它也可以在 ...

2024-04-22 16:58:05 199

原创奇舞周刊第526期：Vue3 超前版发布三个新特性！有望全面拥抱 JSX/TSX！

奇舞推荐■■■‍Vue3 超前版发布三个新特性！有望全面拥抱 JSX/TSX！我们都知道 Vue 一直主流是使用 template 模板来进行页面的编写。而就在最近，Vue3 的超前项目 Vue Macros 中，发布了 defineRender、setupComponent、setupSFC 这些新的 API，这代表了，以后 Vue3 有可能可以全面拥抱 JSX/TSX 了！！基于源码的 W...

2024-04-19 17:37:43 258

转载 Web 端 RTL 适配实践

前言在业务全球化的进程中，我们会面对产品本地化的需求。在中东地区，许多国家使用阿拉伯语、希伯来语等语言，其书写和阅读习惯是从右向左（简称 RTL），与我们日常使用的中、英文环境中的从左向右（简称 LTR）阅读习惯相反。为了确保我们的产品在 RTL 语言用户中依然能够提供良好的体验，需要进行 RTL 适配。RTL 布局概述如上图所示，左右两边分别展示了 RTL 和 LTR 的效果图。从图中我们可以直...

2024-04-18 18:36:14 9

原创小学生都开始学 Python 了！

本文作者系360奇舞团前端开发工程师前言Python 被认为是人工智能、机器学习的首选语言。因为人工智能要求机器能自主学习成长，机器要会学习，首先要积累大量的数据，然后运用机器学习算法如线性回归、决策树、神经网络等，让机器能从大量的数据中自主实现学习。Python 简洁易用的特点，以及在数据处理方面的强悍能力，使得目前市面上大部分人工智能的代码，都由 Python 来实现。一、Python 语言的...

2024-04-17 17:47:38 764

原创前端常用的几种请求方式

本文作者系360奇舞团前端开发工程师前端数据请求方式主要包括XMLHttpRequest、Fetch、Axios、WebSocket等。这些请求方式各有特点，适用于不同的场景。本文将从综合性能、优缺点、最佳使用场景以及使用方式的角度对这些数据请求方式进行分析。介绍XMLHttpRequest（XHR）XMLHttpRequest 是前端最早使用的数据请求方式。它支持异步请求，可以通过设置回调函数处...

2024-04-16 17:24:40 649

转载当我们执行 npm run serve 时到底发生了什么？

在前端开发中，npm run serve 是一个常见的命令，尤其是在使用 Vue CLI 构建项目时。但是为什么直接运行 vue-cli-service serve 会报错，但使用 npm run serve 却可以成功启动项目呢？npm scripts 的基本原理先回顾一下 npm 命令的基本原理。在 package.json 文件中的 "scripts" 字段允许我们定义一组自定义的命令。例如...

2024-04-15 16:42:35 26

原创奇舞周刊第525期：TypeScript很麻烦，不想使用！

奇舞推荐■■■TypeScript很麻烦，不想使用！文章提供了解决TypeScript使用问题的具体方法，还强调了代码复用、一致性和可维护性的重要性。对于正在或计划使用TypeScript的团队来说，这些都是非常有价值的建议和启示。‍Corona技术专题-网易云音乐大前端性能监控服务的设计与实现本文主要介绍了云音乐大前端性能监控服务在从 0 到 1 快速搭建期的整体设计与实现。重点介绍了配置式...

2024-04-12 20:17:13 569

转载看不懂来打我，vue3如何将template编译成render函数

前言在之前的通过debug搞清楚.vue文件怎么变成.js文件文章中我们讲过了vue文件是如何编译成js文件，通过那篇文章我们知道了，template编译为render函数底层就是调用了@vue/compiler-sfc包暴露出来的compileTemplate函数。由于文章篇幅有限，我们没有去深入探索compileTemplate函数是如何将template模块编译为render函数，在这篇...

2024-04-11 19:39:52 75

原创探探各个微前端框架

本文作者为 360 奇舞团前端开发工程师微前端架构是为了在解决单体应用在一个相对长的时间跨度下，由于参与的人员、团队的增多、变迁，从一个普通应用演变成一个巨石应用(Frontend Monolith)后，随之而来的应用不可维护的问题。这类问题在企业级 Web 应用中尤其常见。微前端框架内的各个应用都支持独立开发部署、不限技术框架、支持独立运行、应用状态隔离但也可共享等特征。本文会从框架的应用隔离实...

2024-04-10 20:01:47 6583 3

原创使用React Context的一些优化建议

React ContextContext 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。常用 APIReact.createContextconstMyContext=React.createContext(defaultValue);创建一个 Context 对象。当 React 渲染一个订阅了这个 Context 对象的组件，这个组件会从组件树中离自身最...

2024-04-09 18:45:40 842

转载面试官居然要我用JS代码计算LocalStorage容量！

前言大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心LocalStorage 容量localStorage的容量大家都知道是5M，但是却很少人知道怎么去验证，而且某些场景需要计算localStorage的剩余容量时，就需要我们掌握计算容量的技能了~~计算总容量我们以10KB一个单位，也就是10240B，1024B就是10240个字节的大小，我们不断往loc...

2024-04-08 19:04:51 94

转载奇舞周刊第524期：这Proxy能干啥？

奇舞推荐■■■这Proxy能干啥？文章介绍了proxy的基础概念以及，并在文章最后会给出几个 proxy 的实际应用案例，扩展了对 proxy 使用的场景。让大家写出逼格更高，更有深度的代码。Vite 的实现原理，确实很巧妙本文采用代码断点调试的方式，从vite启动开始深入浅出的讲解了vite在开发和生产不同流程里中，如何进行的代码编译和打包。React 中 Form 的最佳实践本文将介绍 R...

2024-03-29 22:01:59 222

转载 CommonJS 和 ES Module 终于要互相兼容了？？？

大家好，我是 ConardLi。在现代 JavaScript 开发中，ECMAScript Module 已经逐渐成为了公认的业界标准。自 ESM 被引入 Node.js 以来，它的异步加载特性和模块解析逻辑广受大家好评。然而，由于历史原因，很多既有代码和第三方库仍依赖于 CommonJS 模块系统，然而因为 ESM 的异步加载的设计，两个模块化方案一直是无法共存的，这也成了很多开发者的一大痛点。...

2024-03-28 19:01:12 237

转载 React vs HTMX ，谁更适合你？

大家好，我是 ConardLi。HTMX 的终极目标目标，就是让开发者在 HTML 中就能实现现代浏览器级的交互性，而无需使用 JavaScript。这个前端库虽然起步晚，首次亮相是在 2020 年底，但却迅速吸引了开发者社区的眼球。在 2023 年的 "JavaScript Rising Stars" "前端框架” 类别里，HTMX 排名第二，仅次于 React。此外，HTMX 还在 GitHu...

2024-03-27 19:00:58 203

原创了解下handsfree.js-集成手势面部表情的前端库

本文作者系360奇舞团前端开发工程师一介绍Handsfree是一个通过计算机视觉集成手势，面部表情和各种姿势识别的前端库。其核心ai技术用到了tensorflow，可在浏览器上触发交互事件，比如滚动网页，检测人脸并展示相关表情，控制桌面游戏。也可以通过websocket接口控制任意与电脑连接的设备。原来这个库有详细的文档和相关代码示例，但不清楚为什么最近都找不到了，作者也很多年没有更新了，这个库...

2024-03-26 16:04:56 543

原创奇舞周刊第523期：来自 rust 生态的强烈冲击？谈谈 Leptos 在语法设计上的精妙之处...

奇舞推荐■■■来自 rust 生态的强烈冲击？谈谈 Leptos 在语法设计上的精妙之处过去很长一段时间，前端框架们都在往响应式的方向发展。同时又由于 React hooks 的深远影响，函数式 + 响应式成为了不少前端心中最理想的前端框架模样。Solid 成为了这种模式里最具代表性的框架。号称迄今最快？又一个新的 JavaScript 运行时发布了WinterJS 是一款极快的 Winter...

2024-03-22 19:16:58 718

转载 Beyond Compare! Rust Vs Js

本文作者系360奇舞团前端开发工程师文章标题：Beyond Compare! Rust Vs Js前言笔者最近计划开发一个SSR渲染的Blog。筹备之初,一度犹豫不决：是继续沿用较为熟悉的JavaScript技术栈，还是尝试当下非常热门的Rust相关技术栈，经过考虑，决定要做一些有挑战性的尝试。一般而言，WEB开发，动手之前，我们都会在脑海里会有一个大概的雏形，也就是说无论采用哪种语言、哪种方案...

2024-03-21 18:58:28 306

转载 Qwik 与 React Hydration 有何不同

本文译者为 360 奇舞团前端开发工程师原文标题：JavaScript on Demand: How Qwik Differs From React Hydration原文作者：Paul Scanlon原文地址：https://thenewstack.io/javascript-on-demand-how-qwik-differs-from-react-hydration/在本文中，我将深入介绍...

2024-03-20 15:42:41 287

转载从简单中窥见高端，彻底搞懂任务可中断机制与任务插队机制

React 知命境第 42 篇，原创第 155 篇前面用了几篇文章来跟大家分享什么是任务可中断，不过呢，可能是我介绍的方式太过于简单粗暴，以致于还是有部分同学没太明白，所以今天我就用最基础的方式重新跟大家分享一下什么是任务可中断0任务拆分首先，我们要明确的一个前提，是一个完整的函数执行是不可以中断的。因此如果你把一整个任务全部都放到一个函数中来执行，那么想要做到任务可中断是不可能的。例如，现在我有...

2024-03-19 14:47:14 324

转载调教 AI：让 ChatGPT 陪你玩猜单词游戏（附完整提示词）

如果你只是简单地使用 ChatGPT 来聊天，你可能还没有体会过 ChatGPT 提示词的真正魅力。之前我也觉得“「提示词工程」”这个概念有点小题大做，简单的写写 Prompt，怎么能叫做工程呢？写 Prompt 的普通人，连代码都不会写，又怎么能成为工程师？但是，当我做过几个项目之后，我才发现，原来 Prompt 真的是有很大的想象空间，一些看起来简单的指令，就能让 AI 帮你完成不可思议的事情...

2024-03-18 18:14:07 356

原创奇舞周刊第522期：“Vite 又开始搞事情了！！！”

奇舞推荐■■■Vite 又开始搞事情了！！！Vite 的最新版本将引入一种名为 Rolldown 的新型打包工具。unocss 究竟比 tailwindcss 快多少？我们知道 unocss 很快，也许是目前最快的原子化 CSS 引擎 (没有之一)。巧用滤镜实现高级感拉满的文字快闪切换效果这类文字快闪切换效果运用得当的话，能比较好的吸引用户的眼球。当然，今天并非是想用 CSS 实现上述的的效果...

2024-03-15 19:09:33 738

转载 ECMAScript 2024（ES15）将带来这些新特性，超实用！

ECMAScript 语言规范每年都会进行一次更新，而备受期待的 ECMAScript 2024 将于 2024 年 6 月正式亮相。目前，ECMAScript 2024 的候选版本已经发布，为我们带来了一系列实用的新功能。接下来，就让我们一起先睹为快吧！全文概览：Promise.withResolversObject.groupBy / Map.groupByArrayBuffer.protot...

2024-03-14 18:47:33 476

转载改了一行代码，数组遍历耗时从10.3秒降到了0.5秒！

大家好，我是江南一散人，本文是程序性能调优系列专题第一篇。本专题除讲解常见性能问题以及分析、调优手段外，还会重点讲解一些对系统性能至关重要，却又经常被忽视的高级话题，如Cache、指令流水线、Superscalar、SIMD、分支预测、内存屏障等。此外，还会涉及到编译器、操作系统等话题。两个简单的测试程序定义一个同样大小的二维数组，然后循环遍历，对数组元素赋值。• array1.c 对数组按行进行...

2024-03-13 16:37:31 417

原创 Vite为什么比Webpack快

本文作者为 360 奇舞团前端开发工程师一.引言Vite和Webpack作为两个主流的前端构建工具，在近年来备受关注。它们的出现使得前端开发变得更加高效和便捷。然而，随着前端项目规模的不断增大和复杂度的提升，构建工具的性能优化也成为了开发者关注的焦点。在性能方面，Vite相比于Webpack表现出了明显的优势，尤其是在本地开发时冷启动速度、HMR性能和构建速度等方面。本文将深入解析Vite为什么比...

2024-03-12 17:49:32 1528

原创 Redux Toolkit

本文作者为 360 奇舞团前端开发工程师阅读本文章前，需要先了解下 redux 的基本概念与用法，Redux Toolkit 是建立在 Redux 基础之上的工具包，因此需要对 Redux 的基本概念有一定的了解，包括 Action、Reducer、Store、Middleware 等。理解 Redux 的工作原理和数据流程有助于更好地理解和使用 Redux Toolkit。简单复习下 redux...

2024-03-11 19:02:28 845

原创奇舞周刊第521期：实现vue3响应式系统核心-MVP 模型

奇舞推荐■■■实现vue3响应式系统核心-MVP 模型手把手带你实现一个 vue3 响应式系统，代码并没有按照源码的方式去进行组织，目的是学习、实现 vue3 响应式系统的核心，用最少的代码去实现最核心的能力，减少我们的学习负担，并且所有的流程都会有配套的图片，图文 + 代码，让我们学习更加轻松、快乐。批量任务导致页面卡死？怎么办？任务拆分？本文主要介绍了在德地图展示海量点位时，页面卡顿问题的...

2024-03-08 19:02:53 1159

原创如何使用Docker来渐进式提升开发及部署体验

本文作者为 360 奇舞团前端开发工程师前言某些项目在进行私有化部署的时候遇到了一些问题：内网隔离环境，一些npm包需要先下载到u盘再拷贝到对应的机器上进行安装，安装起来很麻烦。测试环境下，代码和机器配置调试好了，部署到线上机器的时候却出现了问题。线上机器迁移的时候，又需要在新的机器上进行机器配置了调试，等于又把之前要做的事情重来一遍。在有部署文档的情况下交给其他人去给不同的用户部署的时候，自己还...

2024-03-06 10:30:46 1162

原创为什么 JavaScript 中的 0.1 + 0.2 不等于 0.3

本文作者为 360 奇舞团前端开发工程师在使用 JavaScript 处理运算时，有时会碰到数字运算结果不符合预期的情况，比如经典的 0.1 + 0.2 不等于 0.3。当然这种问题不只存在于 JavaScript，不过编程语言的一些原理大致相通，我以 JavaScript 为例解释这种问题，并说明前端如何尽可能保证数字精确。let a = 0.1,b=0.2,c=0.3console.log(...

2024-03-05 17:13:30 6022

转载探讨：是否可以不见用户，利用AI做用户洞察/需求分析（附上可用的GPTs）

这个探讨的缘起呢，是很多企业内部的产品经理，因为各种原因，无法接触用户。首先，做产品不接触用户当然不对，但这就是现状，所以探索一下有没有可能借力AI把这个事情的危害减少，哪怕一点点。为什么可以试试？第一，因为AI相比任何人，有着更广泛的数据/知识基础，所以有理由相信，对于任意目标用户群体，AI都具备一定的理解。在任何领域，AI就算比不上专家，也会比外行要了解一些。当我们作为产品经理，在做一些“自己...

2024-03-04 19:02:11 509

原创奇舞周刊第521期：“一切非 Rust 项目均为非法”

奇舞推荐■■■拜登：“一切非 Rust 项目均为非法”科技巨头要为Coding安全负责。这并不是拜登政府对内存安全语言的首次提倡。“程序员编写代码并非没有后果，他们的⼯作⽅式于国家利益而言至关重要。”白宫国家网络总监办公室（ONCD，以下简称网总办）在本周一发布的报告中说道。2024 AI & 前端：回首展望，光芒未至，破晓之前！AI 工具如同瑞士军刀般，其功能与用途变得越来越多样，它...

2024-03-01 17:35:23 1173

原创 clickhouse 大表数据归档处理解决办法

本文作者为 360 奇舞团前端开发工程师李彬一、需求场景基于目前项目在各个应用上的数据采集，尤其是性能监控上的采集，数据量越来越大，例如pv数据的采集表三个月的数据量已经在3亿+，数据量小的也有几百万，但是目前的常用的查询需求只用查询最近30内的数据，故此，考虑设计一种方案，可以将表中的数据维持在最近1个月上（视为热数据），之前的数据（视为冷数据）做归档处理，但是偶尔可能也会用来查询分析。二、常...

2024-02-27 15:12:23 1582

原创 Vue项目构建优化

本文作者为 360 奇舞团前端开发工程师宁航在开发大型前端项目时，往往是一个需求对应一个分支，当完成需求后，就需要将代码打包、部署。代码通常需要部署到多个环境中，这些环境包括：日常环境、测试环境、回归环境和生产环境。回归环境用于在发布前进行测试，生产环境是用户访问的版本。随着时间的推移，项目中会不断引入许多新的依赖（如第三方库、插件等）和图片资源，代码数量也会逐渐增多，从而导致构建项目更加耗时，...

2024-02-26 18:37:39 1507

原创奇舞周刊第520期：这个浏览器，想必只有开发者才会用吧？

奇舞推荐■■■这个浏览器，想必只有开发者才会用吧？在数字世界的深处，隐藏着一种不为普通人所知的浏览器形态——无头浏览器。对于大多数用户而言，浏览器的存在就是为了浏览网页、获取信息，而对于开发者来说，浏览器则是他们手中的魔法工具，可以用来测试代码、抓取数据，甚至控制网页。那么，无头浏览器究竟是什么？它又是如何满足开发者的需求呢？本文就来一起探索这个看似神秘的浏览器。5.25秒变0.023秒：小程...

2024-02-02 18:00:53 1087

转载 CSS 和 SVG 实现彩色图片阴影

在平时开发中，有时候会碰到这样的彩色阴影，效果如下是不是非常有质感？下面分别介绍CSS和SVG两种实现方式，一起看看吧一、实现原理从设计上看，其实原理很简单，一张原图和一张模糊的图，叠加在一起就行了，示意如下那么具体如何实现呢？接着往下看二、CSS 滤镜首先，单纯的CSS并不能直接做出这种效果，毕竟无法生成一份相同的图片，因此，我们需要手动创建一个相同的图层。假设HTML如下<di...

2024-02-01 18:31:03 757

原创 JavaScript中的设计模式

本文作者为 360 奇舞团前端开发工程师JavaScript设计模式是编程世界的智慧结晶，提供了解决常见问题的优秀方案。无论你是初学者还是经验丰富的开发者，掌握这些模式都能让你的代码更清晰、更灵活。本文将为你介绍一些常见的设计模式，帮助你提高代码质量，构建更可维护的应用。让我们一起深入了解这些设计模式的精妙之处吧！什么是设计模式设计模式是在软件设计中反复出现的问题的解决方案。它们是经过验证的、可重...

2024-01-30 18:01:00 2084

转载写一个 Vue3 Hooks，计算网页的帧数 FPS

前言平时我们在打游戏的时候，都会接触到帧数这个名词，也就是fps，帧数越高，说明画面的显示更加流畅。背景刚好最近公司的某个项目，需要实时展示网页的帧数，所以也涉及到了如何去计算帧数这个问题。如何计算？什么是帧数呢？就是一秒内有多少帧，所以想要计算帧数的话，我们需要算出一秒内有多少帧。想要算帧，大家可以想一下用哪个 API 跟帧有关系的？是的，那就是requestAnimationFrame...

2024-01-29 18:30:40 676

转载组件进入离开动画？试试 react-transition-group

列表是很常见的场景：如果我们想给它加上进入离开的动画效果：怎么做呢？一般我们会用 react-transition-group 来做。在 npm 官网可以看到，这个包每周有 750w 下载量，还是非常流行的：那这个包怎么用呢？我们写下代码试一下：npxcreate-react-apptransition-group-test用 create-react-app 创建个项目。把它跑起来：npm...

2024-01-27 19:01:05 714

转载奇舞周刊第519期：用 View Transition API 在 Web 做出 Native 般丝滑的动画

记得点击文章末尾的“阅读原文”查看哟~下面先一起看下本期周刊摘要吧奇舞推荐■■■用 View Transition API 在 Web 做出 Native 般丝滑的动画介绍了 View Transition API 的使用和原理，通过该 API 可以在 Web 中实现类似 Native 般丝滑的动画效果。View Transition API 允许我们通过定义不同的 transiti...

2024-01-26 20:20:53 696

转载 Solid 作者从 React 中学到最重要的是什么？

大家好，我卡颂。前端界有句玩笑话 —— 「React 一点都不 react，Solid 才应该叫 React」。作为一款「借鉴了很多 React 特性」的前端框架，截至目前，Solid已经有 29.6kstar。显然，他已经得到了社区的认可。前段时间，Solid的作者「Ryan Carniato」在博文Thinking Locally with Signals[1]中提到 —— Solid从Rea...

2024-01-25 19:01:11 697

转载轻量级、可插拔、OOP 式图形编辑器开发引擎

前言图形编辑器在多个行业中扮演着至关重要的角色，其应用范围广泛且影响深远。以 Figma 为典范的 Web 图形设计工具，为人们提供了一个自由发挥创造力的平台，随着 Web 平台的发展壮大，技术如 WebGL 和 WebGPU 的涌现与成熟，为传统的 OpenGL 图形编辑系统迁移到 Web 环境带来了新的可能性，极大地拓展了创新的边界。开发一个图形编辑器是一个涉及多个层面的复杂工程任务，Grap...

2024-01-24 17:22:33 713

空空如也

空空如也