- 博客(24)
- 收藏
- 关注
RSS订阅原创 forEach与await引发的血案
在业务代码中存在一段很普通的循环逻辑function handleValueSync(value) { console.log(value)}const list = [1, 2, 3, 4, 5, 6, 7, 8];list.forEach((value)=>handleValueSync(value))// 结果，1，2，3，4，5，6，7，8某一天，需求突然产生变化,原本同步的 handleValueSync方法变成了异步的...
2021-06-25 14:25:59
2090
3
原创 什么样的音乐和呼噜声最配？
什么样的音乐和呼噜声最配？在南京到北京的硬卧火车上，已经凌晨一点，我还因为对面铺位大叔的呼噜声而难以入眠，明天是工作日，我还要上班。当时的我既没有隔音耳机，也没有耳塞，手边只有一个普通的头戴式耳机，而且这个耳机如果放大声的音乐还会漏音，我别无选择，只能找一些音乐伴着呼噜声入睡。起初，我选择了一首最近很喜欢的双吉他演奏曲目，伴着呼噜声，它是这样的效果 。很明显，呼噜声在音乐声中异常突出，让人难以忍受。所以我决定换一首更为热闹的歌曲，想盖住呼噜的声音。我选择了一首充满热情的摇滚歌曲：呼噜声确实被盖住
2021-05-30 00:09:18
1090
原创 做一个在线调音器
弹吉他用的调音器APP总是有广告，而且功能受到限制，比如不支持特殊调弦。做成网页版的功能，不用安装APP，又可以在多端同时支持。需要实现这个功能，大概过程应该是这样：设备听到声音，分析声音的频率，判断出音高之后在屏幕上显示出来。在这个过程中我们可能需要解决这些问题：1.获取设备麦克风权限2.获取声音频率。现在开始实现代码。获取麦克风权限 API...
2021-05-29 18:07:45
4837
5
原创 React Fiber详解
问题是什么？我们先看一个例子：https://claudiopro.github.io/react-fiber-vs-stack-demo/在上面这张图片中，页面出现一卡一卡的现象。为什么人眼会感觉到卡顿？当浏览器每秒刷新的次数低于60hz人眼就会感知卡顿掉帧等情况。浏览器每秒刷新的次数 称为 FPS（frame per second）。理论上FPS越高人眼觉得界面越流畅，在两次屏幕硬件刷新之间，浏览器正好进行一次刷新（重绘），网页也会很流畅，当然这种是理想模式， 如果两次硬件刷新之间浏览器
2021-03-30 12:46:11
2983
1
原创 Javascript中类的实现
前言最近在读《你不知道的Javascript》 系列，读到关于原型和类的部分，里面提到一个观点：js中只有对象，没有类这个概念。在网上搜索关于“Javascript” 中是否有类 的问题，有很多争议。一段比较准确的描述是：在ECMAScript 6出现class的概念之后，才算是告别了直接通过原型对象来模拟类和类继承，但class也只是基于JavaScript原型继承的语法糖，并没有引入新的对象继承模式。这篇文章并不是为 Js是否有"类" 这个问题盖棺定论，而是看Js具体是如何通过原型实现传统
2021-03-02 00:36:41
748
1
原创 前端性能分析与优化
页面性能优化是前端绕不开的问题，本篇文章将讨论如何进行页面性能优化怎样评价页面性能浏览器加载过程分析浏览器加载页面的过程，然后在其中的各个环节进行优化。1.建立连接过程DNS解析 浏览器查找域名的IP地址浏览器给web服务器发送一个HTTP请求服务器发送永久重定向响应浏览器跟踪重定向地址服务器“处理”请求服务器发回一个HTML响应，返回相应的数据（html、css、js、图片等）2. 浏览器渲染解析HTML构建DOM树渲染树构建渲染树布局绘制渲染树优化思路针对
2020-12-28 20:06:32
576
2
原创 eslint原理入门
项目中一直用到eslint做代码检测，但对其原理一直没有搞得很清楚，这次借用参与eslint插件编写的契机，加深对eslint的了解。先送上ESLint官网地址，官网文档很全面很详细，基本的使用参考这里就可以了。eslint的作用ESLint 的用法包括两部分：通过配置文件配置 lint 规则；通过命令行执行 lint，找出不符合规范的地方（当然有些不符合的规则也可以尝试修复）；结合编辑器插件使用是更常见的做法。这篇文章并不会讲解eslint的配置方法，或者具体规则，着重在分析eslint
2020-10-19 20:42:15
946
原创 浏览器缓存机制
前言一个优秀的缓存策略可以缩短网页请求资源的距离，减少延迟，并且由于缓存文件可以重复利用，还可以减少带宽，降低网络负荷。对于一个数据请求来说，可以分为发起网络请求、后端处理、浏览器响应三个步骤。浏览器缓存可以帮助我们在第一和第三步骤中优化性能:比如说直接使用缓存而不发起请求，或者发起了请求但后端存储的数据和前端一致，那么就没有必要再将数据回传回来，这样就减少了响应数据。缓存位置浏览器缓存共有四种，且有一定的优先级，当所有缓存都没有命中时才回去进行网络请求。Service WorkerMe
2020-09-27 16:50:35
421
原创 Javascript中的Number类型和BigInt类型
NumberNumber类型使用IEEE 754 双精度 64 位浮点数格式来表示整数和浮点值，它由64位组成，这64位由3部分组成，（S：符号位，Exponent:指数域，Fraction：尾数域）。因为这样的特性，使得js在计算方面存在两个限制：1.当十进制小数的二进制表示的有限数字超过 52 位时，在 JavaScript 里是不能精确存储的，这时候就存在舍入误差(Round-off error)2.数字的最大值和最小值收到限制。舍入误差先看第一个问题，也是最为经典的 ：为什么在js中
2020-07-28 12:00:16
2520
原创 GOF设计模式（三）——原型模式和基于原型集成的JavaScript对象系统
在传统的面向对象编程语言中（如Java,C#）, 类和对象就像柏拉图所说的“模子”和姜饼人，所有的姜饼人（对象）总是从模子（类）中创建而来，类生成实例就像厨师用模子做出姜饼人。而在原型编程的思想中，类并不是必须的，对象未必从类中创建，而是通过克隆另一个对象得到。为了更清晰地了解原型模式，将其与面向对象编程的思想区分开，我们先来了解一下一种轻巧又基于原型的语言—— Io语言。IO语言Io语言在2...
2020-04-27 23:28:41
304
原创 从新版浏览器报错看touch事件和touch-event属性
Unable to preventDefault inside passive event listener浏览器报错：即Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/feature...
2019-12-20 09:10:21
670
原创 判断一个变量是不是数组
rt:判断一个变量 arr 是不是数组function isArray(arr){ //以下方法都可以 //原型链 return arr.__proto__ === Array.prototype; return Object.getPrototypeOf(arr) === Array.prototype; return Array.prototype.isPrototypeOf(...
2019-10-24 16:03:44
326
原创 手机号分隔成344的格式
需求：在input框中输入手机号要求显示用空格分隔成 "xxx-xxxx-xxxx"的格式解决方法:在 input 的上添加监听事件，如 onkeyup(原生input标签) 或 onchange(某些第三方组件)，对输入的内容进行处理再显示出来。笔者采用的是Elemrnt UI 的 input 组件，监听事件为input<el-input v-model="mobile" pla...
2019-03-29 11:42:05
2555
原创 post请求上传与下载excel文件、处理报错
需求：上传excel表格到服务器，然后接收返回的结果（二进制）并转成excel表格下载实施：采用 Element-UI的uploade 组件，功能较全且有完整的生命周期钩子可设置。 <el-upload class="upload-demo" ref="upload" action="" :on-remove="handl...
2019-03-22 12:28:20
3376
原创 任意图片等比例缩放填充正方形头像框
头像框为正方形，而用户上传的图像可能是正方形，也可能是横向或者纵向的长方形，直接设置img的width和height将可能导致图像拉伸变形，为了使图像的最短边填充满头像框进行等比例缩放，博主想了许多办法。此处假设头像框是边长为48px的正方形。 方案一img{width：auto;heigth:auto;max-width:48px;max-height:48px;}结果是图片...
2018-09-05 10:11:09
3036
原创 设置input透明背景及placeholder样式
关于 input 一些不很常用的属性设置：1.设置 input 背景为透明 2.设置 input 的 placeholder 属性，如更改颜色和字体。
2018-03-23 22:05:52
4124
原创 CSS基本布局——去除图片连接处的白线
在学习CSS基本布局时遇到图片连接处出现缝隙的问题，原代码如下所示： <main> <div class="content"> <img src="http://climg.mukewang.com/58c0eda50001e12416000480.jpg"> <img src="http://climg.mukewang.com/58c0edb80001c9f21
2018-03-20 22:20:18
11130
1
原创 [JS]理解闭包
执行环境和作用域 每个函数都有自己的执行环境。当执行流进入一个函数时，函数的环境就会被推入一个环境栈中。而在函数执行之后，栈将其环境弹出，把控制权返还给之前的执行环境。 当代码在一个环境中执行时，会创建变量对象的一个作用域链，保证对执行环境有权访问的所有变量和函数的有序访问。作用域的前端，始终都是当前执行的代码所在环境的变量对象。如果这个环境是函数，则将其活动对象作为变量对象。活动对象在最
2017-12-24 16:10:34
240
转载 欢迎使用CSDN-markdown编辑器
欢迎使用Markdown编辑器写博客本Markdown编辑器使用[StackEdit][6]修改而来，用它写博客，将会带来全新的体验哦：Markdown和扩展Markdown简洁的语法代码块高亮图片链接和图片上传LaTex数学公式UML序列图和流程图离线写博客导入导出Markdown文件丰富的快捷键快捷键加粗 Ctrl + B 斜体 Ctrl + I 引用
2017-12-08 22:14:31
167
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人