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

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

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

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

2019-11-19 21:20:32 3820 5

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

文章目录1. JS是单线程的2. 事件循环(event loop) JS中的事件循环原理以及异步执行过程这些知识点对新手来说可能有点难,但是是必须迈过的坎,逃避是解决不了问题的,本篇文章旨在帮你彻底搞懂它们。 说明:本篇文章主要是考虑浏览器环境,Node环境我没有研究过暂时不讨论。文章的内容也是博...

2019-07-26 15:01:38 1334 9

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

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

2018-07-25 22:50:47 72966 149

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

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

2020-07-03 10:00:53 54 0

转载 你不知道的 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 与 A...

2020-06-27 11:26:31 162 0

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

如下图,1、2、3三个元素左浮动,虚线为父容器,此时再添加一个左浮动的元素4,总宽度超出了父元素宽度,那么4号元素的位置应该是这样的? 它的位置不是A也不是B: 浮动元素的位置,其实只参考前一个元素的位置即可。所以元素4的位置只需考虑元素3的位置即可,如下: 我们换一下位置,同理可以得到如下...

2020-05-31 12:51:14 551 0

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

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

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

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

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

2020-04-01 20:47:12 1455 0

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

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

2020-03-29 21:52:53 1512 0

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

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

2020-03-28 20:04:54 1769 0

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

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

2020-03-17 21:27:12 1328 0

原创 纯CSS实现气泡框

文章目录用CSS画三角形气泡框正三角形的气泡框斜三角形的气泡框总结 在工作中,我们可能会遇到气泡框相关的需求,如下图: 这个气泡框我们可以使用纯CSS代码来实现。接下来跟我一起一步步实现吧! 用CSS画三角形 用CSS画个三角形,相信大家都很熟悉了吧。主要思路: 将元素的的宽高设置为0; 然后...

2020-03-16 20:33:52 1319 0

转载 HTTP的前世今生

文章目录HTTP 0.9 / 1.0HTTP/1.1HTTP/2HTTP/3 本文转载自:HTTP的前世今生 HTTP (Hypertext transfer protocol) 翻译成中文是超文本传输协议,是互联网上重要的一个协议,由欧洲核子研究委员会CERN的英国工程师 Tim Berners...

2020-02-29 19:25:01 644 0

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

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

2020-02-04 20:43:16 1105 0

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

文章目录1. display: none、visibility: hidden与opacity: 0的区别2. 补充:其他隐藏元素的方法 1. display: none、visibility: hidden与opacity: 0的区别 display: none、visibility: hidd...

2020-01-21 14:31:39 1031 0

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

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

2020-01-14 22:46:30 1441 0

转载 如何撤销 Git 操作?

文章目录1.撤销提交2.丢弃提交3.替换上一次提交4.撤销工作区的文件修改5.从暂存区撤销文件6.撤销当前分支的变化 本文转载自阮一峰的博客:如何撤销 Git 操作? Git 版本管理时,往往需要撤销某些操作。本文介绍几种最主要的情况,给出详细的解释。更多的命令可以参考《常用 Git 命令清单》一...

2020-01-13 14:38:15 481 0

转载 常用 Git 命令清单

文章目录1.新建代码库2.配置3.增加/删除文件4.代码提交5.分支6.标签7.查看信息8.远程同步9.撤销10.其他 关于git相关操作的教学文章多如牛毛,我也就不再赘述了,本文转载自:常用 Git 命令清单 一般来说,日常使用只要记住下图6个命令(感觉这个图非常有助于记忆),就可以了。但是熟练...

2020-01-13 14:04:51 517 0

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

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

2019-12-06 18:29:35 1021 3

原创 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 UglifyJ...

2019-11-26 14:25:33 3287 0

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

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

2019-11-25 15:54:36 1123 1

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

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

2019-11-25 14:17:35 1369 0

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

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

2019-11-08 23:24:44 1152 0

原创 鼠标事件&使用小Tip

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

2019-10-01 21:54:18 745 0

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

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

2019-09-27 22:00:51 488 0

原创 JS中的NaN

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

2019-09-23 21:13:31 10155 1

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

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

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

原创 CSS实现自适应布局:子元素项目整体居中,内部项目左对齐

日常工作时,我们可能遇到这样一个布局:一个父元素框框(随着浏览器大小自适应宽度)里面有许多按钮,然后这些按钮(宽度固定)的整体需要在父元素内居中对齐,而按钮整体的内容又是从左往右排列。这里提供一个解决方法,示例如下: 有如下代码: <div class="wrap">...

2019-08-28 10:38:29 1520 2

原创 正则表达式小记

文章目录1. 使用正则很酷1.1 不使用正则1.2 使用正则2. JS中正则表达式的创建方式3. 术语与操作符3.1 精确匹配3.2 匹配一类字符3.3 转义3.4 匹配开始与匹配结束3.4 重复出现3.5 预定义字符类3.6 分组3.7 或操作符(OR)3.8 反向引用 在开发的过程中,我们不使...

2019-08-07 21:18:21 1784 0

原创 帮你彻底搞懂防抖和节流(附带在React使用的一个例子)

文章目录前言防抖(debounce)节流(throttle)两个比喻来帮助区分防抖和节流 前言 开门见山,使用防抖和节流技术的意义:节约资源,提升用户体验。 浏览器中有许多事件会在很小时间间隔内频繁触发,比如:监听用户的输入(keyup、keydown)、浏览器窗口调整大小和滚动行为(resize...

2019-07-17 16:55:02 2204 0

原创 重新巩固JS(四)——JavaScript函数

文章目录1. 函数概述2. 函数定义3. 函数调用4. 函数参数4.1 默认值4.2 剩余参数5. 函数内部属性5.1 arguments对象5.2 this对象6. 函数是特殊对象6.1 函数的属性:length 和 name6.1.1 length属性6.1.2 name属性6.2 函数的方法...

2019-07-10 21:44:38 503 0

原创 解决localhost改为本机IP后网页无法访问的方法

在web开发时,有时我们遇到问题需要同事帮忙看看,或者是开发的一些移动端的页面需要在真机上测试,这时我们就需要通过IP的方式来访问网页。当然,对方想要通过你的IP来访问网页,你们需要在同一个局域网内才行。 解决方法 将应用的监听改为0.0.0.0,基于webpack的项目把dev的config文件...

2019-06-17 22:33:48 6802 2

原创 修改input元素placeholder样式的方法

我们时常需要跟input输入框打交道,很多情况下都要对placeholder的内容进行修改,例子: {/* React的写法 */} <input type="text" placeholder={'placeholder'}/> 默认情况下的...

2019-06-14 20:36:39 5655 0

转载 阿里蒋航:Serverless 将使前后端从分离再度走向融合

文章目录1. Serverless 的背景和发展历程InfoQ:Serverless 的背景和发展历程是什么?2. Serverless 的概念及定义InfoQ:BaaS 出现很早,但一直没火起来,包括 Facebook 关闭了 Parse 服务,为什么现在又认为 Serverless 必须依赖它...

2019-05-29 20:59:10 1202 0

转载 看懂 Serverless,这一篇就够了

文章目录1. 无服务器(Serverless)计算是什么2. 理解Serverless技术---FaaS和BaaS2.1 Faas(Function as a Service,函数即服务)2.2 Baas(Backend as a Service,后端即服务)3. 无服务器(Serverless)...

2019-05-29 16:11:59 64160 3

原创 console.log打印对象时属性缺失的解决方法

文章目录1. 序2. console.log()输出对象属性缺失3. 获取正确的结果3.1 方法1:对象展开3.2 方法2: JSON.stringfy()看字符串 1. 序 在编写代码时,我们常常用console.log()的方式将信息在控制台中打印出来以帮助我们进行前端调试。一般情况下,我们打...

2019-05-22 20:53:22 1369 0

原创 重新巩固JS(三)——JavaScript语句

文章目录1. 条件语句1.1 if else语句1.2 switch语句2. 循环语句2.1 while语句2.2 do while语句2.3 for语句2.4 for in语句3. 控制语句3.1 continue语句3.2 break语句4. 异常捕获语句5.with语句(不推荐使用) 重新巩...

2019-05-21 21:02:16 863 0

原创 重新巩固JS(二)——JavaScript操作符与表达式

JavaScript操作符与表达式1.表达式1.1原始表达式1.2表达式2.操作符 1.表达式 1.1原始表达式 3.14 //数字直接量 "hello world" //字符串直接量 /pattern/ //正则表达式直接量 true //返回一个布尔值: 真 fa...

2019-05-20 20:49:34 931 0

转载 框架的游戏:2019 年 JavaScript 流行趋势

框架的游戏:2019 年 JavaScript 流行趋势1. 当今 JS 开发者需要具备的能力:我们基于数据的研究2. 主要收获3. 专家对 JS 开发未来趋势的看法 JavaScript 生态系统复杂多变,各种框架让人眼花缭乱。究竟孰优孰劣,如今的发展趋势是怎样的,用人单位又需要怎样的人才?本文...

2019-05-20 09:44:09 1641 1

原创 React实现浏览器打印部分内容

React 浏览器打印

2019-05-14 20:05:34 2129 0

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