码飞_CC的博客

原创 数据平台前端架构设计

随着部门业务的不断增大，流量渠道的不断增加，公司对于个性化报表与数据分析的需求越来越强烈。非技术同学常常需要依赖 BI 来生成报表，而 BI 的人力有限，无法高效地支撑日常运营的报表与分析的需求。此外，因不同人员构建 SQL 语句的不同，即使是同一指标也可能导致数据口径不统一从而造成沟通上的隔阂。为了满足高效的数据报表生成与分析需求， 实现更加精细的数字化运营目标，低使用门槛的自主数据分析平台 Bee-Known 应运而生。本文主要介绍自主数据分析平台前端的架构设.........

原创 React中JSX背后的故事

本篇文章主要讲解JSX的来龙去脉，不讲解JSX的语法（不了解的可参考：JSX 简介）。如果你对以下三个问题能够清晰解答，本篇文章就可以不用看了。JSX 的本质是什么，它和 JS 之间到底是什么关系？为什么要用 JSX？不用会有什么后果？JSX 背后的功能模块是什么，这个功能模块都做了哪些事情？如果不能清晰地回答，那希望看完本篇文章你能有所收获。先举个小例子让你回忆一下JSX，以下代码中函数组件App中返回的部分即为JSX（<div className="App">Hello Wo

原创 记录使用Git过程中遇到的问题及解决方法

文章目录1. 将某个分支的commit提交到另一个分支上补充：Git命令速查表我们经常使用Git来管理项目开发的版本，这里记录一些我遇到的问题及解决方法。1. 将某个分支的commit提交到另一个分支上在项目开发过程中，有时会穿插进一些小需求、小改动，我们可能就直接在当前功能分支上改了提交了，反正到时要一起发布，没啥影响。但是，可能由于各种不可控因素导致当前版本不能如期发布，而那些小需求、小改动需要提前发布，这时就坑爹了，难道还要再傻乎乎的拉分支写一遍？？当然不是！我们可以使用git cherry-

原创 JavaScript中的new操作符的原理解析

文章目录new关键字进行的操作自己实现new操作符JavaScript中new操作符用于创建一个给定构造函数的对象实例。如下例子：function Person(name, age){ this.name = name; this.age = age;}const person1 = new Person('Tom', 20)console.log(person1) // Pers...

原创 前端开发都应该懂的事件循环（event loop）以及异步执行顺序（setTimeout、promise和async/await）

文章目录1. JS是单线程的2. 事件循环（event loop）JS中的事件循环原理以及异步执行过程这些知识点对新手来说可能有点难，但是是必须迈过的坎，逃避是解决不了问题的，本篇文章旨在帮你彻底搞懂它们。说明：本篇文章主要是考虑浏览器环境，Node环境我没有研究过暂时不讨论。文章的内容也是博采众长以及结合自己的理解完成的，相关参考文献文章末尾也会给出，若有侵权请告知整改。不废话，让我们从简...

原创 帮你彻底搞懂JS中的prototype、__proto__与constructor（图解）

  作为一名前端工程师，必须搞懂JS中的prototype、__proto__与constructor属性，相信很多初学者对这些属性存在许多困惑，容易把它们混淆，本文旨在帮助大家理清它们之间的关系并彻底搞懂它们。这里说明一点，__proto__属性的两边是各由两个下划线构成（这里为了方便大家看清，在两下划线之间加入了一个空格：_ _proto_ _）。   现在正式开始！让我们从如下一个简单的例...

原创 html文件通过script标签引入外部js文件，但没正确加载的原因

移动端H5应用，html文件通过script标签引入外部js文件，但没正确加载，在移动设备上难以排查。

原创 vite本地启动项目，localhost换成本机ip地址不能访问的解决方法

【代码】vite本地启动项目，localhost 换成 本机ip地址不能访问的解决方法。

原创 前端可视化工具生态

原创 2024 年的 Node.js 生态系统

网站展示了 Node.js 生态系统中积极维护且流行的库。

原创 git push代码报错：Failure when receiving data from the peer

clash for windows的默认端口是7890,配置代理即可解决。

原创 2024 React 和 Vue 的生态工具

2024React和Vue的最强生态工具

原创 前端组件库

原创 React首次加载渲染2次的问题

但此篇文章就不展开一一赘述了，这里仅回归到本文探讨的问题：组件的一次更新流程，在视图真正刷新之前的部分都是可能被多次调用的，因而这些部分中不能出现副作用，开发环境下会刻意触发两次以使得开发者能注意到误用的副作用。会调用2次的情况，依赖数组明明没有变化，怎么会调用2次？百思不得其解，依赖没变化的话，那肯定是整个组件重渲染了。不会渲染任何可见的 UI。它为其后代元素触发额外的检查和警告。是一个用来检查项目中潜在问题的工具。这怎么都渲染了2次！在开发React项目的时候，发现。后来查了一下，原来是。

原创 Ant Design 官方推荐的实用前端工具

Ant Design 作为一款备受欢迎的 UI 组件库，不仅功能强大，还非常注重用户体验。在官网上还特别推荐了一系列其他实用的工具库，这些工具库能够与 Ant Design 形成互补，提供更为全面和高效的解决方案。

原创 问题解决：‘telnet‘ 不是内部或外部命令，也不是可运行的程序 或批处理文件

打开控制面板–》程序–》启用或关闭windows功能–》勾选Telnet客户端，点击确定即可。指令的时候，发现指令不可用，原因在于系统没安装telnet功能。当在windows终端中运行。

原创 80端口被system占用的处理方法

【代码】80端口被system占用的处理方法。

原创 Vue 3 + Vite 4 移动端低版本白屏处理

vue3打包后在低版本浏览器或webview中出现白屏，原因就是因为语法兼容问题。根据vite官方文档描述，默认支持 Chrome >=87、Firefox >=78、Safari >=14、Edge >=88。，所以需要我们手动兼容低版本。

原创 windows下Node版本的切换方式

Windows 下 node 版本切换方式

原创 让ChatGPT回答：从浏览器输入url开始，到页面渲染出来，详细的过程

浏览器也会对CSS规则进行继承和层叠的处理，最终将CSS规则应用到对应的DOM节点上，形成渲染树。这个过程被称为布局或回流，浏览器会对页面上所有的海报进行遍历和计算，以便计算出每个元素的布局和位置信息。此时，用户可以在浏览器中看到完整的页面，可以进行交互和操作。在HTML解析的过程中，如果浏览器遇到HTML标签、文本和注释等内容，就会将其转换成对应的DOM节点。以上就是从输入URL到页面渲染完成的11个步骤的详细解释，希望能够帮助您更加深入地了解浏览器的工作原理和Web页面的渲染过程。

原创 git push/pull 超时问题解决

git 超时处理

原创 CSS改变鼠标选中文字的样式

CSS改变鼠标选中文字的样式。

原创 Mac 将目录加入到环境变量 PATH

Mac 将目录加入到环境变量 PATH

原创 React 18 中自动批处理以减少重复渲染

从 React 18 版本开始，会默认自动进行批处理（automatic batching），减少组件的重复渲染，以此提升性能。本篇文章主要介绍以下的内容：什么是批处理、它以前是如何工作的，以及现在发生了什么变化。......

原创 VSCode experimentalDecorators 报错的处理

项目中使用到装饰器，发现会报错：对修饰器的实验支持功能在将来的版本中可能更改。在 “tsconfig” 或 “jsconfig” 中设置 “experimentalDecorators” 选项以删除此警告。解决方式网上很多说在 tsconfig.json 文件中添加配置："experimentalDecorators": true， 但是并不起作用，其实还需要一步：在 VSCode 的设置中，搜索 experimentalDecorators关键字，然后打勾重启编辑器即可...

转载 React 18 全览

React 18 正式版出来了，这篇文章感觉还不错，转载分享给大家原文： React 18 全览在 2021 年 6 月 8 号，React 公布了 v18 版本的发布计划，并发布了 alpha 版本。经过将近一年的发布前准备，在 2022 年 3 月 29 日，React 18 正式版终于和大家见面了。React 18 应该是最近几年的一个重磅版本，React 官方对它寄予了厚望。不然也不会将 React 17 作为一个过渡版本，也不会光发布准备工作就做了一年。在过去一年，我们已经或多或少了解到一

原创 Form 表单数据缓存的一种策略

Form 表单数据缓存的一种策略，提升用户表单操作体验，供交流学习

原创 Charles开启 macOS Proxy 时提示权限为只读

解决 Charles开启 macOS Proxy 时提示权限为只读的问题

原创 Chrome 控制台调试hover样式以及hover后才出现的元素

Chrome 控制台调试hover样式以及hover后才出现的元素

原创 微前端子应用路由更改时可能会遇到的坑

手里有个项目（使用 icejs），该项目有作为子应用嵌入到其他主应用中，并且该项目中的部分页面存在以iframe的形式引入到其他的系统中的情况，这样如果对项目相关页面的路由做了调整的话，将会产生404的 bug ：页面找不到。举个例子，原来的项目中 routerConfig 配置了一个页面：const routerConfig = [{ path: '/manage/editDashboard/:id', name: '编辑看板', component: EditBoard,

转载 Mysql 删除数据表的三种方式详解

用法：当你不再需要该表时， 用 drop;当你仍要保留该表，但要删除所有记录时， 用 truncate;当你要删除部分记录或者有可能会后悔的话， 用 delete。删除程度可从强到弱如下排列：1. drop table tb;drop 是直接将表格删除，无法找回。例如删除 user 表：drop table user;2. truncate （table） tb;truncate 是删除表中所有数据，但不能与 where 一起使用；TRUNCATE TABLE user;3.

原创 前端获取接口报400错误时返回的响应数据的方式

后端接口在处理请求时，如果发生错误，采用 throw Error() 的方式处理，这样前端请求的结果为：对应的响应数据：这时如果我们在代码中直接采用 try catch 来捕获并输出错误信息时，会发现是以下结果：onError: (err) => { console.log('err', err)}控制台输出：这并不是我们想要的 response 的数据。为什么结果会是这样呢？这里如果直接输出 err，其实等于输出 error.message。我们想要获取接口的返回的数

转载 危险的 target=“_blank” 与 “opener”

在学习安全研发规范的时候，发现一条规则“通过 A 标签跳转到其他页面且使用 target=_blank 时，必须添加 rel=noopener 属性”，这个以前还真没了解到，遂查询了一下，发现一片文章写得挺不错的，这里就不自己写，转载一下了（危险的 target="_blank" 与 “opener”）以下来自转载：在网页中使用链接时，如果想要让浏览器自动在新的标签页打开指定的地址，通常的做法就是在 a 标签上添加 target等于"_blank" 属性。然而，就是这个属性，为钓鱼攻击者带来了可乘之

原创 Error: EACCES: permission denied, access ‘/usr/local/lib/node_modules‘的解决方法

问题mac 使用npm安装包npm i -g xxxx的时候报错了:Error: EACCES: permission denied, access '/usr/local/lib/node_modules'，如下：从错误提示可知，我们的操作缺乏权限，对症下药，那么在执行命令时只要赋予管理员权限即可。解决方法在命令行前面添加sudo获取管理员权限，输入管理员密码就行。即将npm i -g xxxx 改为sudo npm i -g xxxx ，再输入密码即可。...

转载 关于前端职业规划的一点思考

自己目前已经工作3年了，最近也刚换了新工作，日常也一直在考虑自己的前端职业规划到底是怎样的，个人目前视角还不是很宽广，以下这篇文章有点启发，故转发供大家借鉴。正文：不知道你上次思考前端职业规划是什么时候？如果你是一位学生，你肯定对前端这个职业感到陌生，你虽然没有经验，但却对未来充满好奇，你有大把时间来思考，但可能摸不着方向，有种拳头打在棉花上的无力感。如果你已经参加了工作，不论是刚开始实习，还是工作了 3 年、5 年甚至 10 年，一定觉得非常充实，但真正用于思考的时间足够吗？如果维持现状，再过 5

原创 node-heapdump的安装及使用

heapdump可用于V8的堆内存快照记录，我们可以通过使用该模块来查看node服务运行时内存的使用情况，排查内存泄漏的问题。我在windows环境下安装时，并不是一次性成功，在此记录下安装成功的步骤。一、安装执行命令：npm install heapdump1.报 Can’t find Python executable “python” 相关的错误如：stack Error: Can't find Python executable "python", you can set the PYT

原创 Do not use “// @ts-ignore“ because it alters compilation errors问题的处理

使用TS编写代码时，有些情况下，比如第三方的库对象，我们想增加一些属性，并且确认是没问题的，但是TS检查时会报错导致不能正常编译运行，我们通过添加// @ts-ignore来告诉TS该条语句不检查类型问题，此时是可以正常编译了，但是// @ts-ignore这条注释标红了很难受：这个我们可以通过修改.eslintrc.js文件来消除该提示：module.exports = { ... rules: { ... "@typescript-eslint/ban-ts-comme

原创 调出cmd输入时的光标

windows的cmd输入时光标消失了，着实蛋疼，可以使用以下方式调出光标：打开cmd，在输入中文后，按shift键，拼音变成英文的同时，光标就出现了。

原创 MaxListenersExceededWarning: Possible EventEmitter memory leak detected.警告的处理

在用nestjs开发node服务的过程中，使用generic-pool创建puppeteer连接池，并发测试时发现控制台有警告信息，如下：(node:30460) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 SIGINT listeners added to [process]. Use emitter.setMaxListeners() to increase limit该信息告诉我们监听事件超

原创 Parsing error: Cannot read file ‘e:\.....\tsconfig.json‘. eslint

import的写法没啥问题，发现报错了：Parsing error: Cannot read file 'e:\.....\tsconfig.json'.这是由于我们配置查找的tsconfig.json文件路径配置有问题，只需配置 .eslintrc.js中的tsconfigRootDir属性（这里我们tsconfig.json文件和.eslintrc.js处于同一目录下）：module.exports = { // ... parserOptions: { project: "ts