- 博客(156)
- 资源 (8)
- 收藏
- 关注
RSS订阅
原创 数据平台前端架构设计
随着部门业务的不断增大，流量渠道的不断增加，公司对于个性化报表与数据分析的需求越来越强烈。非技术同学常常需要依赖 BI 来生成报表，而 BI 的人力有限，无法高效地支撑日常运营的报表与分析的需求。此外，因不同人员构建 SQL 语句的不同，即使是同一指标也可能导致数据口径不统一从而造成沟通上的隔阂。为了满足高效的数据报表生成与分析需求， 实现更加精细的数字化运营目标，低使用门槛的自主数据分析平台 Bee-Known 应运而生。本文主要介绍自主数据分析平台前端的架构设.........
2022-06-05 15:48:22
558
原创 React中JSX背后的故事
本篇文章主要讲解JSX的来龙去脉，不讲解JSX的语法（不了解的可参考：JSX 简介）。如果你对以下三个问题能够清晰解答，本篇文章就可以不用看了。JSX 的本质是什么，它和 JS 之间到底是什么关系？为什么要用 JSX？不用会有什么后果？JSX 背后的功能模块是什么，这个功能模块都做了哪些事情？如果不能清晰地回答，那希望看完本篇文章你能有所收获。先举个小例子让你回忆一下JSX，以下代码中函数组件App中返回的部分即为JSX（<div className="App">Hello Wo
2021-01-04 15:44:59
464
4
原创 记录使用Git过程中遇到的问题及解决方法
文章目录1. 将某个分支的commit提交到另一个分支上补充：Git命令速查表我们经常使用Git来管理项目开发的版本，这里记录一些我遇到的问题及解决方法。1. 将某个分支的commit提交到另一个分支上在项目开发过程中，有时会穿插进一些小需求、小改动，我们可能就直接在当前功能分支上改了提交了，反正到时要一起发布，没啥影响。但是，可能由于各种不可控因素导致当前版本不能如期发布，而那些小需求、小改动需要提前发布，这时就坑爹了，难道还要再傻乎乎的拉分支写一遍？？当然不是！我们可以使用git cherry-
2020-09-04 14:47:31
713
原创 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...
2019-11-19 21:20:32
15641
10
原创 前端开发都应该懂的事件循环（event loop）以及异步执行顺序（setTimeout、promise和async/await）
文章目录1. JS是单线程的2. 事件循环（event loop）JS中的事件循环原理以及异步执行过程这些知识点对新手来说可能有点难，但是是必须迈过的坎，逃避是解决不了问题的，本篇文章旨在帮你彻底搞懂它们。说明：本篇文章主要是考虑浏览器环境，Node环境我没有研究过暂时不讨论。文章的内容也是博采众长以及结合自己的理解完成的，相关参考文献文章末尾也会给出，若有侵权请告知整改。不废话，让我们从简...
2019-07-26 15:01:38
5791
31
原创 帮你彻底搞懂JS中的prototype、__proto__与constructor（图解）
作为一名前端工程师，必须搞懂JS中的prototype、__proto__与constructor属性，相信很多初学者对这些属性存在许多困惑，容易把它们混淆，本文旨在帮助大家理清它们之间的关系并彻底搞懂它们。这里说明一点，__proto__属性的两边是各由两个下划线构成（这里为了方便大家看清，在两下划线之间加入了一个空格：_ _proto_ _）。 现在正式开始！让我们从如下一个简单的例...
2018-07-25 22:50:47
183081
242
原创 Ant Design 官方推荐的实用前端工具
Ant Design 作为一款备受欢迎的 UI 组件库，不仅功能强大，还非常注重用户体验。在官网上还特别推荐了一系列其他实用的工具库，这些工具库能够与 Ant Design 形成互补，提供更为全面和高效的解决方案。
2024-04-11 08:55:25
339
原创 问题解决：‘telnet‘ 不是内部或外部命令，也不是可运行的程序 或批处理文件
打开控制面板–》程序–》启用或关闭windows功能–》勾选Telnet客户端，点击确定即可。指令的时候，发现指令不可用，原因在于系统没安装telnet功能。当在windows终端中运行。
2024-02-21 15:40:21
412
原创 Vue 3 + Vite 4 移动端低版本白屏处理
vue3打包后在低版本浏览器或webview中出现白屏，原因就是因为语法兼容问题。根据vite官方文档描述，默认支持 Chrome >=87、Firefox >=78、Safari >=14、Edge >=88。，所以需要我们手动兼容低版本。
2023-12-18 14:39:57
658
原创 让ChatGPT回答：从浏览器输入url开始，到页面渲染出来，详细的过程
浏览器也会对CSS规则进行继承和层叠的处理，最终将CSS规则应用到对应的DOM节点上，形成渲染树。这个过程被称为布局或回流，浏览器会对页面上所有的海报进行遍历和计算，以便计算出每个元素的布局和位置信息。此时，用户可以在浏览器中看到完整的页面，可以进行交互和操作。在HTML解析的过程中，如果浏览器遇到HTML标签、文本和注释等内容，就会将其转换成对应的DOM节点。以上就是从输入URL到页面渲染完成的11个步骤的详细解释，希望能够帮助您更加深入地了解浏览器的工作原理和Web页面的渲染过程。
2023-04-23 10:59:11
1112
1
原创 React 18 中自动批处理以减少重复渲染
从 React 18 版本开始，会默认自动进行批处理（automatic batching），减少组件的重复渲染，以此提升性能。本篇文章主要介绍以下的内容：什么是批处理、它以前是如何工作的，以及现在发生了什么变化。......
2022-07-10 15:23:19
1469
原创 VSCode experimentalDecorators 报错的处理
项目中使用到装饰器，发现会报错：对修饰器的实验支持功能在将来的版本中可能更改。在 “tsconfig” 或 “jsconfig” 中设置 “experimentalDecorators” 选项以删除此警告。解决方式网上很多说在 tsconfig.json 文件中添加配置："experimentalDecorators": true， 但是并不起作用，其实还需要一步：在 VSCode 的设置中，搜索 experimentalDecorators关键字，然后打勾重启编辑器即可...
2022-04-22 13:10:41
804
转载 React 18 全览
React 18 正式版出来了，这篇文章感觉还不错，转载分享给大家原文： React 18 全览在 2021 年 6 月 8 号，React 公布了 v18 版本的发布计划，并发布了 alpha 版本。经过将近一年的发布前准备，在 2022 年 3 月 29 日，React 18 正式版终于和大家见面了。React 18 应该是最近几年的一个重磅版本，React 官方对它寄予了厚望。不然也不会将 React 17 作为一个过渡版本，也不会光发布准备工作就做了一年。在过去一年，我们已经或多或少了解到一
2022-04-20 10:27:51
862
原创 微前端子应用路由更改时可能会遇到的坑
手里有个项目（使用 icejs），该项目有作为子应用嵌入到其他主应用中，并且该项目中的部分页面存在以iframe的形式引入到其他的系统中的情况，这样如果对项目相关页面的路由做了调整的话，将会产生404的 bug ：页面找不到。举个例子，原来的项目中 routerConfig 配置了一个页面：const routerConfig = [{ path: '/manage/editDashboard/:id', name: '编辑看板', component: EditBoard,
2021-11-04 19:42:17
1452
转载 Mysql 删除数据表的三种方式详解
用法：当你不再需要该表时， 用 drop;当你仍要保留该表，但要删除所有记录时， 用 truncate;当你要删除部分记录或者有可能会后悔的话， 用 delete。删除程度可从强到弱如下排列：1. drop table tb;drop 是直接将表格删除，无法找回。例如删除 user 表：drop table user;2. truncate （table） tb;truncate 是删除表中所有数据，但不能与 where 一起使用；TRUNCATE TABLE user;3.
2021-08-31 19:30:54
513
原创 前端获取接口报400错误时返回的响应数据的方式
后端接口在处理请求时，如果发生错误，采用 throw Error() 的方式处理，这样前端请求的结果为：对应的响应数据：这时如果我们在代码中直接采用 try catch 来捕获并输出错误信息时，会发现是以下结果：onError: (err) => { console.log('err', err)}控制台输出：这并不是我们想要的 response 的数据。为什么结果会是这样呢？这里如果直接输出 err，其实等于输出 error.message。我们想要获取接口的返回的数
2021-08-17 20:19:54
6541
转载 危险的 target=“_blank” 与 “opener”
在学习安全研发规范的时候，发现一条规则“通过 A 标签跳转到其他页面且使用 target=_blank 时，必须添加 rel=noopener 属性”，这个以前还真没了解到，遂查询了一下，发现一片文章写得挺不错的，这里就不自己写，转载一下了（危险的 target="_blank" 与 “opener”）以下来自转载：在网页中使用链接时，如果想要让浏览器自动在新的标签页打开指定的地址，通常的做法就是在 a 标签上添加 target等于"_blank" 属性。然而，就是这个属性，为钓鱼攻击者带来了可乘之
2021-07-09 15:48:04
635
原创 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 ，再输入密码即可。...
2021-07-05 09:59:56
6636
转载 关于前端职业规划的一点思考
自己目前已经工作3年了，最近也刚换了新工作，日常也一直在考虑自己的前端职业规划到底是怎样的，个人目前视角还不是很宽广，以下这篇文章有点启发，故转发供大家借鉴。正文：不知道你上次思考前端职业规划是什么时候？如果你是一位学生，你肯定对前端这个职业感到陌生，你虽然没有经验，但却对未来充满好奇，你有大把时间来思考，但可能摸不着方向，有种拳头打在棉花上的无力感。如果你已经参加了工作，不论是刚开始实习，还是工作了 3 年、5 年甚至 10 年，一定觉得非常充实，但真正用于思考的时间足够吗？如果维持现状，再过 5
2021-06-27 23:21:18
701
原创 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
2021-05-12 19:11:56
2439
5
原创 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
2021-05-12 10:11:42
6127
原创 调出cmd输入时的光标
windows的cmd输入时光标消失了，着实蛋疼，可以使用以下方式调出光标：打开cmd，在输入中文后，按shift键，拼音变成英文的同时，光标就出现了。
2021-05-08 11:05:37
2357
原创 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该信息告诉我们监听事件超
2021-05-07 16:36:04
36077
3
原创 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
2021-04-14 21:02:12
6611
5
原创 Require statement not part of import statement. eslint@typescript-eslint/no-var-requires报错修改
修改.eslintrc.js文件的配置即可：module.exports = { ... rules: { ... '@typescript-eslint/no-var-requires': 0, }}
2021-04-09 19:50:32
4010
转载 面对 ESM 的开发模式，webpack 还有还手之力吗？(转载)
snowpack / vite 等基于 ESM 的构建工具出现，让项目的工程构建不再需要构建一个完整的 bundle。很多人都觉得我们不再需要打包工具的时代即将到来。借助浏览器 ESM 的能力，一些代码基本可以做到无需构建直接运行。对于 webpack 而言，社区掀起的这一波 ESM 热潮，将 webpack 编译的速度推到了风口浪尖。webpack 在 v5 版本中也是针对编译的性能做出了不少努力，除了提供了物理缓存的优化之外，还提供 Module Federation 的方案，这给我们上层的应用实践带来
2021-04-06 19:41:01
1679
1
原创 Node服务压测：win10 安装Apache2.4.46 并使用ab进行post请求压测
ab（apache bench命令的缩写）是apache自带的压力测试工具。首先下载安装Apache（下载地址：点这）选择合适自己电脑的版本，下载解压，得到如下内容：我们需要的是Apache24这个文件夹，将这个文件夹复制到C盘的根目录下（配置默认是C盘的根目录。当然，你可以选择自己喜欢的位置，需要修改Apache24\conf文件夹下httpd.conf中Define SRVROOT字段，可参考ReadMe.txt）双击 Apache24\bin目录下的httpd.exe，打开浏览器，输入lo
2021-04-02 16:58:20
655
原创 JavaScript深拷贝看这篇就行了！（实现完美的ES6+版本）
本版本的深拷贝考虑了Symbol作为对象属性的情况（Symbol相关介绍看这：Symbol）。由于引用类型在赋值时只传递指针，这种拷贝方式称为浅拷贝。而创建一个新的与之相同的引用类型数据的过程称之为深拷贝。在JavaScript中，基础类型值的赋值是直接拷贝一份新的一模一样的数据，这两份数据相互独立，互不影响。而引用类型值（对象类型）的赋值是传递对象的引用（也就是对象所在的内存地址，即指向对象的指针），相当于多个变量指向同一个对象，那么只要其中的一个变量对这个对象进行修改，其他的变量所指向的对象也
2021-03-17 19:27:15
24905
11
原创 webpack编译提速：使用externals和DllPlugin
原始未优化（userCenter.bundle.js：7.55 MB)：使用externals排除对ag-grid-community的打包后(userCenter.bundle.js:5.84 MB):再通过dll单独打包bizcharts后（userCenter.bundle.js：4.31 MB）：
2021-02-23 11:07:34
1281
原创 Uncaught SyntaxError: Cannot use import statement outside a module的解决方法
本地html文件中的script标签引入ES6的模块，直接在浏览器中打开该html文件，发现报错了：Uncaught SyntaxError: Cannot use import statement outside a module对应的index.html:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" con
2021-02-21 11:24:52
252184
21
原创 Error: Cannot find module ‘webpack-cli/bin/config-yargs‘的解决方法
安装webpack-dev-server包后，配置脚本"dev": "webpack-dev-server"，然后执行npm run dev发现报错：internal/modules/cjs/loader.js:883 throw err; ^Error: Cannot find module 'webpack-cli/bin/config-yargs' 从错误信息我们可以看到其实是webpack-cli缺少了config-yargs模块造成的，我的包版本如下："devDependen
2021-02-20 23:12:57
7491
1
转载 为什么我们要写 super(props) ？
有了 Hooks 以后，我们几乎就不需要 super 和 this 了，感兴趣的可以一看，了解背后的原理。本篇文章转载自Dan(React开发成员)的个人博客： Why Do We Write super(props)?首先，在这一生中，super(props) 出现在我代码里的次数比我知道的还要多：class Checkbox extends React.Component { constructor(props) { super(props); this.state = { i
2021-02-09 16:47:22
226
All-In-One Code Framework Coding Standards.docx
2020-05-26
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人