自定义博客皮肤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的博客

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

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

原创 React中JSX背后的故事

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

2021-01-04 15:44:59 121 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 7310 5

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

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

2019-07-26 15:01:38 2595 15

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

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

2018-07-25 22:50:47 103924 173

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

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

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

转载 为什么我们要写 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 17

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

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

2021-01-22 11:29:18 268

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

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

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

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

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

2020-11-18 21:11:29 367

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

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

2020-11-06 15:47:05 148

原创 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 336 4

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

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

2020-09-04 14:47:31 291

原创 如何将页脚(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 723

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

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

原创 页面滚动到顶部

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 443

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

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

2020-07-03 10:00:53 2369

转载 你不知道的 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 1003

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

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

2020-05-31 12:51:14 1306

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

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

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

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

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

2020-04-01 20:47:12 2066

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

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

2020-03-29 21:52:53 1909

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

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

2020-03-28 20:04:54 2503

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

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

2020-03-17 21:27:12 1895

原创 纯CSS实现气泡框

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

2020-03-16 20:33:52 1811

转载 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 995

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

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

2020-02-04 20:43:16 2008 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 1615

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

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

2020-01-14 22:46:30 2157

翻译 避免在移动端页面中使用100vh

100vh带来的问题在CSS中,视口单位(Viewport units)听起来不错。如果要设置一个元素的样式使它占据整个屏幕的高度,那么你可以设置height: 100vh,这样你就拥有一个完美的全屏元素,该元素会随着视口的变化而调整大小!可惜的是,事实并非如此。100vh在移动浏览器中以一种微妙但基本的方式被破坏,使其几乎无用。最好避免使用100vh,而应该通过javascript设置高度的方...

2019-12-06 18:29:35 2785 6

原创 ERROR in app.bundle.js from UglifyJs Unexpected token: name «element», expected: punc «;» 的错误处理

遇到问题webpack打包时使用UglifyJs(github地址)来压缩美化JS代码,在npm run build时报错了:// webpack.prod.js 内容const merge = require('webpack-merge')const UglifyJSPlugin = require('uglifyjs-webpack-plugin')const common = r...

2019-11-26 14:25:33 7053

原创 TypeError: CleanWebpackPlugin is not a constructor 的错误处理

遇到问题按照webpack官网的教程进行学习时,安装clean-webpack-plugin插件后(版本为:"^3.0.0"),再build时,发现报错了,配置如下:const CleanWebpackPlugin = require('clean-webpack-plugin')module.exports = { ... plugins: [ new C...

2019-11-25 15:54:36 2431 2

原创 引入ttf类型的字体不起作用的解决方法

前端引入一种后缀名为.ttf的字体,并在css文件中设置该字体,但是页面中并没有显示新引入的字体:@font-face { font-family: 'myFont'; src: url('./my-font.ttf') format('ttf'); font-weight: 600; font-style: normal;}.my-font { f...

2019-11-25 14:17:35 4469

原创 React input输入框异步校验的处理方式

文章目录前言处理方式1:防抖处理方式2:采用标记前言在日常工作中,我们经常接触到表单验证相关的功能。有些简单的校验(比如输入要求为手机号、邮箱、密码的字符组合等)可以直接由前端进行判断,但是有些复杂多变的判断(比如校验用户名是否存在、特殊行政区提示等)就必须发起请求由后端来验证,然后前端根据后端返回的结果进行提示等处理(这里称该校验的方式为异步校验)。处理方式1:防抖异步校验(选择框)存在...

2019-11-08 23:24:44 2555

原创 鼠标事件&使用小Tip

文章目录1. 鼠标事件类型1.1 简单事件1.2 复杂事件2. 鼠标事件的触发顺序3. 小Tips3.1 平时使用小技巧3.2 开发时的小技巧鼠标是我们日常生活中经常使用的,这里我们来简单了解下JS中的鼠标事件以及使用的一些小技巧。1. 鼠标事件类型我们将鼠标事件分为两类:简单事件和复杂事件1.1 简单事件mousedown/mouseup: 鼠标按钮在一个元素上点击/释放时触发。m...

2019-10-01 21:54:18 1155

原创 小练手——Finish line自动打开低于一定折扣的商品

Finish line是美国的一个运动品牌网站,我平时比较喜欢海淘鞋子,时不时可能想看看有没有什么好货,但是呢,每次都要自己点击然后再一个个查看比较麻烦,故自己想弄一些自动化地筛选,自动选出性价比高的东西。废话不多说,上源码(chrome浏览器,筛选鞋子可行):let timer = setInterval(()=>{ // 第一步:找到“下一页”的按钮,并触发点击事件 docu...

2019-09-27 22:00:51 903

原创 JS中的NaN

JavaScript中,NaN是一个特殊的数字值(typeof NaN的结果为number),是not a number的缩写,表示不是一个合法的数字。1. NaN的产生:一个不能被解析的数字Number('abc') // NaNNumber(undefined) // NaN失败的操作Math.log(-1) // NaNMath.sqrt(-1) // NaNMat...

2019-09-23 21:13:31 21954 10

翻译 JavaScript解构(Destructuring)的5个有趣用法

文章目录1. 交换变量(Swap variables)2. 访问数组项(Access array item)3. 不变的操作(Immutable operations)4. 解构可迭代对象(Destructuring iterables)5. 解构动态属性(Destructuring dynamic properties)6. 总结1. 交换变量(Swap variables)交换2个变量的的...

2019-09-11 15:40:26 1182 1

超大文件打开工具,秒开

超大文件打开工具,秒开

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的粉丝

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