自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

码飞_CC的博客

知其然,还要知其所以然,分享是件令人愉悦的事~

  • 博客(134)
  • 资源 (8)
  • 收藏
  • 关注

原创 React中JSX背后的故事

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

2021-01-04 15:44:59 162 4

原创 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 9146 5

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

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

2019-07-26 15:01:38 3192 24

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

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

2018-07-25 22:50:47 121201 182

原创 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 48 3

原创 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 89

原创 调出cmd输入时的光标

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

2021-05-08 11:05:37 30

原创 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 159

原创 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 254

原创 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 315

转载 面对 ESM 的开发模式,webpack 还有还手之力吗?(转载)

snowpack / vite 等基于 ESM 的构建工具出现,让项目的工程构建不再需要构建一个完整的 bundle。很多人都觉得我们不再需要打包工具的时代即将到来。借助浏览器 ESM 的能力,一些代码基本可以做到无需构建直接运行。对于 webpack 而言,社区掀起的这一波 ESM 热潮,将 webpack 编译的速度推到了风口浪尖。webpack 在 v5 版本中也是针对编译的性能做出了不少努力,除了提供了物理缓存的优化之外,还提供 Module Federation 的方案,这给我们上层的应用实践带来

2021-04-06 19:41:01 139

原创 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 51

原创 JavaScript深拷贝看这篇就行了!(实现完美的ES6+版本)

本版本的深拷贝考虑了Symbol作为对象属性的情况(Symbol相关介绍看这:Symbol)。由于引用类型在赋值时只传递指针,这种拷贝方式称为浅拷贝。而创建一个新的与之相同的引用类型数据的过程称之为深拷贝。在JavaScript中,基础类型值的赋值是直接拷贝一份新的一模一样的数据,这两份数据相互独立,互不影响。而引用类型值(对象类型)的赋值是传递对象的引用(也就是对象所在的内存地址,即指向对象的指针),相当于多个变量指向同一个对象,那么只要其中的一个变量对这个对象进行修改,其他的变量所指向的对象也

2021-03-17 19:27:15 565

原创 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 247

原创 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 2056

原创 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 1426 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 42

原创 解决npm报错:‘cross-env’ 不是内部或外部命令,也不是可运行的程序 或批处理文件。

项目npm start启动时报错了(删除了node_modules文件夹下的.bin和.cache文件夹就会出现该错误),如下图。原因是缺少依赖,在此项目目录下重新下载依赖即可解决该问题:删除node_modules文件夹,重新执行npm install,安装若有问题,可以参考这里:npm install 安装出错时尝试过的方法...

2021-01-22 11:29:18 1972

原创 Could not freeze ....., Cannot read property ‘hash‘ of undefined 的解决办法

项目中单独对Antd(或其他包)进行升级时,项目可以正常启动,但是编译过程中会输出一大片的这种红色的错误,如下:看错误日志可知,可能是hardsource出现问题,解决方法:删除 ./node_modules/.cache 后,再npm start重启项目。以上操作完如果还存在问题,可以重新执行一下npm install,再重启一下项目,问题应该就解决了。...

2020-12-07 16:56:36 518 1

原创 antd使用:在一个Modal中使用同个form表单实现编辑和新增功能

项目开发中,我们时常会遇到使用Modal弹窗和Form组件搭配实现编辑已有条目和新增条目的功能(如下图),这两个功能所使用到的表单是一样的,唯一的不同点是:编辑条目是要将已有的信息填入表单,而新增条目是表单所有字段为空。既然表单是一样的,我们当然不想重复代码。刚开始的想法是往Form组件传入默认值的方式来实现编辑时的填充功能。该方法编辑的时候表单确实是有传入值填充,但是关闭Modal再点击新增时,发现Form表单还是有值填充,这不符合我们的要求,查看文档发现了一条信息:<Modal />

2020-11-18 21:11:29 1034

原创 使用”发布-订阅“模式驱动组件间的数据传输

本文主要讲解通过发布-订阅模式驱动数据流,来实现React中组件间的通信。React是单向数据流的,也就是将数据以props属性的方式流向组件树中比自己层级更低的组件。组件间通信的方式常见的主要有以下几种:父-子组件间通信:这个最常见也很容易,父组件直接把数据以props的方式传递给子组件即可。子-父组件间通信:因为数据只能单向流动的,所以子组件并不能直接将数据传递给父组件。但是props的形式是可以多种多样,所以我们可以通过将父元素中绑定了自身上下文的函数以props的形式传递给子组件,然后子组件

2020-11-06 15:47:05 194

原创 JS基础很扎实?来挑战看能否一次性全做对!

1. 来试试看,以下12道题是否能一次性全答对:parseInt("")Number("")isNaN("")parseInt(null)Number(null)isNaN(null)parseInt("12px")Number("12px")isNaN("12px")parseFloat("1.6px") + parseInt("1.2px") + typeof parseInt(null)isNaN(Number(!!Number(parseInt("0.8"))))t

2020-10-14 21:18:03 373 4

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

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

2020-09-04 14:47:31 341

原创 如何将页脚(footer)保持在页面底部

文章目录1. 问题描述2. 解决方案2.1 使用position属性实现(兼容较老的浏览器)2.2 使用Flex实现2.3 使用Grid实现1. 问题描述将footer保持在视觉窗口的底部是常见的需求。当页面的内容主体高度较大(超出屏幕可视区域的高度)时,footer元素直接跟在内容后面即可。但是,当一个 HTML 页面包含少量的内容时,footer元素就会坐落在页面的中间,在下面留下空白,这看起来很糟糕,尤其是在大屏幕上。如下图:2. 解决方案我们先给出基础的页面代码:<!DOCTYP

2020-08-24 19:16:24 1061

原创 React Warning: A component is changing an uncontrolled input of type text to be controlled问题解决

这里记录一下React开发过程中遇到的一个Waring及解决方法。一个Input输入框,当你在输入框中输入时,控制台显示Waring,Console 输出如下:Warning: A component is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide

2020-08-21 19:27:31 1720

原创 CSS3中的calc()函数以及在less中的使用

1. calc()函数在css3中我们可以通过calc()函数来动态计算长度值,如:#div { width: calc(100% - 100px);}它的语法是calc(expression)expression参数是必须的,它是一个数学表达式,结果将采用运算后的返回值。使用calc() 函数时需要注意的点:运算符前后都需要保留一个空格,例如:width: calc(100% - 10px);任何长度值都可以使用calc()函数进行计算calc()函数支持"+", "-"

2020-08-07 21:39:19 1228

原创 页面滚动到顶部

function scrollToTop() { const c = document.documentElement.scrollTop || document.body.scrollTop; if (c > 0) { window.requestAnimationFrame(scrollToTop); window.scrollTo(0, c - c / 8); }}

2020-07-16 14:50:14 458

原创 VS Code保存文件时自动删除行尾空格

操作如下:同时按下Ctrl键、 ,键(或者:菜单栏的文件=>首选项=>设置)弹出设置页面,在输入框中输入files.trimTrailingWhitespace,打勾选中,即可使VS Code在保存文件时自动删除行尾空格强迫症的福音。...

2020-07-03 10:00:53 3709 2

转载 你不知道的 Blob

你不知道的 Blob一、Blob 是什么二、Blob API 简介2.1 构造函数2.2 属性2.3 方法三、Blob 使用场景3.1 分片上传3.2 从互联网下载数据3.3 Blob 用作 URL3.4 Blob 转换为 Base643.5 图片压缩3.6 生成 PDF 文档四、Blob 与 ArrayBuffer 的区别4.1 Blob vs ArrayBuffer五、参考资源如果你允许用户从你的网站上下载某些文件,那你可能会遇到 Blob 类型。为了实现上述的功能,你可以很容易从网上找到相关的示例,

2020-06-27 11:26:31 1106

原创 浮动元素的位置,只参考前一个元素的位置即可

如下图,1、2、3三个元素左浮动,虚线为父容器,此时再添加一个左浮动的元素4,总宽度超出了父元素宽度,那么4号元素的位置应该是这样的?它的位置不是A也不是B:浮动元素的位置,其实只参考前一个元素的位置即可。所以元素4的位置只需考虑元素3的位置即可,如下:我们换一下位置,同理可以得到如下结果(只需考虑元素1的位置):float属性会导致父元素的高度塌陷,解决方法可查看:CSS float浮动规则以及父元素高度塌陷的解决方法...

2020-05-31 12:51:14 1492

原创 前端很容易遇到的一个大坑

前端开发时,我们经常会通过.操作符来获取属性值,这里有一个很容易。比如,后端接口定义中data字段类型为数组,

2020-05-25 19:51:15 7543 6

转载 JSON.stringify() 的 5 个秘密特性

JSON.stringify() 方法能将一个 JavaScript 对象或值转换成一个 JSON 字符串作为一名 JavaScript 开发人员,JSON.stringify()是用于调试的最常见函数。但是它的作用是什么呢,难道我们不能使用 console.log()来做同样的事情吗?让我们试一试。//初始化一个 user 对象const user = { "name" : "Prat...

2020-04-01 20:47:12 2076

原创 JS实现判断栈的压入、弹出序列

作为前端,接触算法的机会可能比较少,但是我们脑子可不能锈了~一道题目:输入两个整数序列,第一个序列表示栈的压入顺序,判断第二个序列是否为该栈的弹出顺序。假设压入栈的所有数字均不相等。例如:1,2,3,4,5是某个栈的压入顺序,序列4,5,3,2,1是该栈对应的一个弹出序列,但4,3,5,1,2就不可能是该压栈序列的弹出序列。这里,我用JS来实现这道题,其中用数组来模拟栈的操作。主要思路就是:...

2020-03-29 21:52:53 1933

原创 微信小程序获取自定义元素的宽高、使用”事件穿透”来达到状态同步的效果

微信小程序获取元素宽高的方式:// 自定义组件需要用:this.createSelectorQuery()const query = wx.createSelectorQuery()query.select('.my-class').boundingClientRect(res => { this.setData({ itemHeight: res.height, itemW...

2020-03-28 20:04:54 2601

原创 React请求数据的一种优化思路

文章目录1. 前期:分散开发时的阶段2.中期:统一的阶段3. 后期:单次访问只发起1次请求大家在网购或者寄快递时,应该都有碰到地址选择栏,也就是选择省市区。我在开发一个国外快递官网的时候也遇到了这个需求,在这个项目中,由于国外业务刚展开,并不是所有区域都可选的,需要人工维护这份数据(时常会改动),所以地址信息是由后端维护的,当前端页面遇到需输入地址的地方,就向后端发起地址数据的请求。在这,我记...

2020-03-17 21:27:12 1972

原创 纯CSS实现气泡框

文章目录用CSS画三角形气泡框正三角形的气泡框斜三角形的气泡框总结在工作中,我们可能会遇到气泡框相关的需求,如下图:这个气泡框我们可以使用纯CSS代码来实现。接下来跟我一起一步步实现吧!用CSS画三角形用CSS画个三角形,相信大家都很熟悉了吧。主要思路:将元素的的宽高设置为0;然后设置相应的边框即可实现。详细来讲就是给某一方向的边框添加宽度以及颜色,然后将其旁边两个方向(或一个)的...

2020-03-16 20:33:52 1947

转载 HTTP的前世今生

文章目录HTTP 0.9 / 1.0HTTP/1.1HTTP/2HTTP/3本文转载自:HTTP的前世今生HTTP (Hypertext transfer protocol) 翻译成中文是超文本传输协议,是互联网上重要的一个协议,由欧洲核子研究委员会CERN的英国工程师 Tim Berners-Lee发明的,同时,他也是WWW的发明人,最初的主要是用于传递通过HTML封装过的数据。在1991年...

2020-02-29 19:25:01 1000

原创 获取项目(文件夹)的树形结构

在写项目文档的时候,有时我们想要对项目的结构进行说明,当然我们是不可能手动来写文件结构的,在windows系统下,有一个tree命令可以帮我们生成对应的树结构。使用方式如下:我们只要在命令提示符(CMD)中进去到你想要生成的树结构的文件夹,然后直接输入tree回车即可:这里只显示文件夹的路径,如果还想要显示文件夹中的文件,则输入tree /f即可:当然,如果我们想要将结果保存到一个文件中...

2020-02-04 20:43:16 2355 1

原创 display: none、visibility: hidden与opacity: 0的区别

文章目录1. display: none、visibility: hidden与opacity: 0的区别2. 补充:其他隐藏元素的方法1. display: none、visibility: hidden与opacity: 0的区别display: none、visibility: hidden与opacity: 0都可以让元素隐藏,它们之间的区别见下表:特性(行为)displa...

2020-01-21 14:31:39 1793

原创 Node读写Excel文件(txt文件)

文章目录读取txt文件的内容写入txt文件读取Excel文件前端有时要处理一些数据(比如多语言文件内容的替换),我们不要傻乎乎地干这种重复枯燥又浪费时间的ctrl C+ ctrl V的工作,这种事情交给计算机做再合适不过了。这篇文章只是简单地介绍前端如何通过Node来读取Excel或txt文件中的数据,然后写入到txt文件中的方法。首先给出文件的内容:test.txt文件只有一句话(我是txt...

2020-01-14 22:46:30 2569

超大文件打开工具,秒开

超大文件打开工具,秒开

2016-12-14

ArchSummit 北京 2016 PPT 下载合集2

ArchSummit 北京 2016 PPT 下载合集第二每部分,一共20几份PPT

2016-12-06

RecSys2016论文合集

RecSys2016论文合集

2016-11-21

ArchSummit 北京 2016 PPT 下载合集3

ArchSummit 北京 2016 PPT 下载合集第三部分,一共20几份PPT

2016-12-06

ArchSummit 北京 2016 PPT 下载合集

ArchSummit 北京 2016 PPT 下载合集第一部分,20几份PPT

2016-12-06

All-In-One Code Framework Coding Standards.docx

本文档描述了微软一站式代码示例库项目组所采纳的关于本地 C++ 和 .NET (C# 和VB.NET)代码的编程风格指导规范。

2020-05-26

mahout0.9 源码

解压直接从eclipse创建maven项目即可运行

2016-05-20

推荐系统代码

推荐系统代码

2016-05-05

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人 TA的粉丝

提示
确定要删除当前文章?
取消 删除