- 博客(40)
- 收藏
- 关注
RSS订阅原创 useEffect 不可忽视的 cleanup 函数
一文带你了解在 react 开发中使用 useEffect 时，容易被忽视的 cleanup 函数，借助 cleanup 函数可避免内存泄露和网络请求竞态问题，让你的代码更健壮。
2023-09-02 23:05:16
603
原创 前端如何统计用户在一个页面上的停留时长？
本文讲述了前端统计用户在页面上的停留时长的几种方法，可借助 DOMContentLoaded 、onload、pageshow、pagehide、visibilitychange 这些事件来搭配实现。
2023-08-19 17:55:22
2019
原创 React 如何获取上一个 State 的值？
在 react 开发中，对于某一个 state ，我们可能需要获取它的上一个状态的值，本文带你了解获取上一个 state 的值的两种方法。
2023-07-21 20:59:05
705
原创 canvas 的妙用
我们在做国际化网站的时候，必然会遇到多语言的场景，而同一个词语或者语句，翻译成不同国家的语言后，其长度是不一样的。假设有这么一个场景：有一个固定宽度的按钮，按钮文案为中文的时候，它可以一行展示，但是翻译成英文或者其它语言的时候，长度超过了按钮的宽度，默认情况下是会换行展示成两行。现在需求是当文案超过按钮宽度之后，缩小文案，让文案始终展示成一行。本文将介绍如何使用 canvas 来实现此业务场景。
2023-07-17 13:24:27
110
原创 如何使用 IntersectionObserver API 来实现数据的懒加载？（以 Vue3 为例）
使用 IntersectionObserver 来实现数据的懒加载
2023-01-05 15:31:50
3154
3
原创 React Native Error: Unable to resolve module ./debugger-ui/debuggerWorker.aca173c4
Error: Unable to resolve module ./debugger-ui/debuggerWorker.aca173c4
2022-08-24 15:33:45
1806
1
转载 关于react的setState方法更新state的异步和同步问题
最近在用react重构项目的过程中遇到了setState更新state的问题，在一篇博客中找到了答案，这篇博客写得挺好的，里面总结了setState的用法和异步、同步更新state的方法和原理。React中setState更新state核实异步何时同步...
2021-04-06 12:08:17
432
原创 滚动加载数据（懒加载），今天终于去把它实现了
之前在浏览一些网站以及使用一些软件（某云音乐）时，都发现了它们有一个功能，那就是滚动加载数据，比如说滚动加载图片或者评论数据。秋招面试的时候在说到性能优化的时候也说了懒加载，可面试官进一步问具体怎么实现时，我却沉默了，心想，不就是随着滚动条的滚动加载数据吗？要怎么具体？好吧，我不会（我真是个酸菜鱼）。秋招结束后一直想找个时间去把代码实现了，可还是太懒了，一直拖。今天需要模仿某云音乐的评论加载功能，便去实现了。懒加载原理容器既然是滚动加载数据，那么我们就需要一个有滚动条的容器，如下代码便创建了一
2021-03-19 23:43:15
5866
2
原创 vue相同路由多次跳转组件不刷新问题
问题起因最近做项目遇到了一个问题，如下图：在menu中动态了生成了如上几条item，当我点击每条item，会拿到当前item的id，也就是歌单的id，去向后台请求对应id的歌单里面的数据，然后展示出来，展示组件的路由命名为userplaylist-detail。每次点击都会执行如下代码：this.$router.push({ name: "userplaylist-detail", query: { id } });也就是往路由中添加路由userplaylist-detail，vue的组件监测
2021-03-08 23:17:34
1047
2
原创 html5 video标签切换url不生效，还是播放初始url的视频
最近在做一个桌面应用程序（一个基于electron的音乐播放器），在写mv播放界面时用到了video标签，代码如下：<video width="520" height="400" controls style="cursor: pointer" autoplay > <source :src="mvUrl" type="video/mp4" /> </video>项目是用vue.js来构建UI的，如上图所示，source标签的src属性使用了vue的动态绑
2021-03-07 21:59:15
3660
原创 Port 5000 is already in use，前端开发端口被占用的解决办法
前端开发的端口使用在未出现前后端分离的时候，我们似乎没有听说过前端端口。自前后端分离出现，react、vue等现代化框架的大量使用，我们才接触到前端端口，比如react的默认端口是3000，vue的默认端口是8080，react和vue构建的项目的启动方式都是基于node的，当启动项目的时候，其实就是在操作系统里启动了一个node服务。端口被占用的解决办法当我们使用react或者vue进行开发的时候，或多或少都会遇到端口被占用的情况，原因是我们启动项目的时候，就开启了一个node进程，这个node进程
2021-01-13 11:29:49
4409
原创 axios POST请求报错：Uncaught (in promise) Error: Request failed with status code 415以及400 (Bad Request)
最近学习了React，想拿React来重构之前做的一个Vue项目，在重构的过程中，便发现了一件奇怪的事情，百思不得其解。axios POST 请求首先我测试了登录接口，由于之前在实习的时候看到公司的前端接口代码都是封装好的，感觉这种封装的编码规范非常好，所以我便学习了一下怎么封装axios接口，并写了一个，代码如下所示：import axios from 'axios'function requestMethod({ url, method, data = {}, headers
2020-12-17 15:39:04
21743
原创 前端面试题之 [‘1‘, ‘2‘, ‘3‘].map(parseInt) 的返回结果是什么？
乍看之下结果好像是[1,2,3]，但既然是面试题，就不会这么简单，我们下面来分析一下。parseInt函数我们先来了解一下parseInt函数的作用。函数作用：parseInt函数解析一个字符串参数，并返回一个指定基数(几进制)的整数语法：parseInt(string, radix)参数解析：第一参数是一个字符串；第二个参数radix的范围是2~36，表示2进制到36进制。第二个参数 radix的规则：如果省略该参数或其值为 0，则默认以10进制来返回结果如果该参数以 “0x” 或 “0
2020-12-04 17:15:45
487
原创 使用vue-cli搭建的vue项目在移动端调试
有时我们在开发Web项目的时候会遇到需要适应手机的需求，这时我们可以通过ip地址来连接手机和电脑，在手机上实时预览。首先查看本电脑的ipv4地址Window+R,输入cmd回车，调出命令行工具输入ipconfig命令，即可查看本机的ipv4地址2. 然后打开config文件下的index.js文件，更改host为本机的ipv4地址3. 启动项目，让手机和电脑连接同一个wifi（手机和电脑必须在同一个无线网络下），然后在手机的浏览器上输入地址：http://172.16.29.242:80
2020-12-04 09:39:27
318
原创 在项目中使用Vuex进行状态管理
Vuex是什么？Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。这里的状态我们可以理解为应用中的数据。Vuex的组成每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。store中主要包含三大组成部分：state、action、mutation。它们的定义如下：state：驱动应用的数据源；action：响应
2020-11-30 12:39:54
332
原创 Vue监听多个值
在使用vue进行开发时，我们有时会遇到这样的需求：当某些变量同时不为空时才进行某些业务逻辑操作。我们一看到需求就会想到使用侦听器watch来完成，大多数人在刚开始学习vue的时候，触到的是只需要监听一个值，然后进行业务逻辑操作，对于多值监听，可能很陌生，但其实它也很容易实现，一句话来说就是：先定义一个computed，然后在computed中使用对象的解构赋值返回要监听的值，这样一来，只需监听所定义的计算属性即可达到监听多值的效果。watch监听多值的实现首先我的项目中有如下data属性（我有一个功能
2020-11-25 21:05:20
1669
原创 Ant Design Vue的select组件placeholder属性失效
Ant Design Vue是为vue开发的一套前端UI框架，之前在开发的过程中，发现其select组件的一个问题，如图：在上述的select组件中，我设置了placeholder=“请输入”，但是如上图所示，placeholder并未生效。原因是：当select 组件的 v-model 绑定的变量初始为 0，null 或者为’’,那么 placeholder属性将会失效，只有初始化为 undefined 才可以让 placeholder 属性生效。（我一开始在组件上使用 v-model 绑定的变量初
2020-11-25 20:35:20
1675
4
原创 Vue中央事件总线实现兄弟组件间的通信
在使用Vue进行开发的过程中，难免会遇到兄弟组件之间通信的需求。实现兄弟组件通信最简单的方式就是：要发送数据的子组件先把数据传给父组件，再由父组件传给需要接收数据的子组件。然而上述传递方式过于繁琐，我们接下来讨论另外一种通信方式。中央事件总线这里就用我今年3月份参加全国大学生计算机设计大赛做的一个作品举例。首先我们先建立一个bus.js文件，如下图所示（项目是使用vue-cli脚手架搭建的）：bus.js的代码如下：import Vue from 'Vue'const EventBus =
2020-11-25 13:07:29
548
原创 React错误： Expected an assignment or function call and instead saw an expression
最近在学习react，在进行编码的过程中发现了如上错误，错误的意思是：希望是一个赋值或者是函数调用，而不是一个表达式。下面我们来分析一下错误。首先我的代码是这样的：错误提示是在map函数那里出错了，出错在于标红的花括号，因为这里我使用的是JSX来渲染元素，在JSX语法中，花括号被当成表达式（上述es6箭头函数的写法正常情况下是没有问题的）。我们应该做如下修改：//把花括号去掉（es6箭头函数的写法：当回调函数只有一个语句时，可以省略花括号） { this.state.posts.map(i
2020-11-19 11:28:11
29335
1
原创 你不知道的javascript之继承
如果我们学习过面向对象编程语言，比如说Java，那么我们对继承这个概念不会陌生。在类似于Java的语言中，继承基本都是使用extends关键字来实现，而在js中却不是这样（本篇文章只考虑es6之前继承的实现方式，es6中已经可以使用extends关键字）什么是继承？继承的定义：通过【某种方式】让一个对象可以访问到另一个对象中的属性和方法，我们把这种方式称之为继承 。比如说：A对象通过继承B对象，就能直接拥有B对象的属性和方法，从而可以调用B对象的属性和方法。js中实现继承的方法js中有很多种方法可以
2020-11-18 17:29:02
114
原创 前端面试官必问系列之隐式类型转换
什么是隐式类型转换？我们在开发的过程中，很多时候都会用到双等号 == 进行判断，以决定接下来执行哪些业务逻辑。隐式类型转换：==在比较两个不同类型的值时会发生隐式类型转换，会将其中之一或两者都转换为相同类型后再进行比较。那么转换的规则是什么呢？隐式类型转换的规则字符串和数字做相等比较，会把字符串转为数字let a = 10;let b = '10';console.log(a == b); //true有布尔值时，会把布尔值转为数值let a = true;let b = '1';
2020-11-18 16:34:09
758
原创 你不知道的javascript之数组的那些事
数组是我们一开始学习js的时候就接触到的数据结构，也是我们在开发中用得最多的，但是数组有很多我们一开始不知道的东西，而这些东西，往往会成为面试官经常会问的问题，笔者在准备实习和秋招的过程中深深地体会到了这一点。今天我们就来揭开数组藏在海平面下的那一角。数组的length属性数组的length属性我们并不陌生，因为我们会经常使用这个属性来获取存在数组中数据的总数，以便进行一些操作，比如说分页。其实，对于数组来说，length是数组的一个内置属性，数组会根据索引长度来更改length的值，这个特性会使得
2020-11-17 11:12:55
191
原创 你不知道的javascript之文件操作（file类型的input以及FileReader API）
文件操作是每一门编程语言中必不可少的功能，js也不例外。前端的很多UI框架，如bootstrap、layui、element-ui等都对js原生的文件api进行了封装，让我们很方便地进行文件操作。但是也正是这种便利，导致我们很多人对原生的文件api有点陌生，今天我们就来揭开它的神秘面纱。type='file’的input元素如下html代码是我们一开始学习html的时候必然会接触到的，它在页面上会表现为一个按钮，当我们点击按钮的时候，就会打开操作系统的文件选择框，我们可以选择文件。<input
2020-11-17 09:58:10
1878
原创 面试官必问系列之手写new
在js中，我们常常使用new关键字来创建一个对象，那么它的原理是怎么样的呢？我们今天来探讨一下。new一个对象经历了哪些阶段？new创建对象主要经历了如下几个阶段：创建一个新的对象把所创建对象的__proto__属性值设置为构造函数的prototype执行构造函数中的代码，构造函数中的this指向新创建的对象返回这个新的对象手动实现new了解了new的作用过程，那么下面我们按照过程了手动实现一个new。//myNew函数接收两个参数，一个是构造函数，另一个是传给构造函数的参数func
2020-11-11 10:57:06
190
原创 面试官必问系列之手动实现instanceof
instanceof的作用instanceof是类型判断符，它能精确地判断引用数据类型，即数组[]和对象{}，比如 [] instanceof Array 会返回true。说到instanceof，不得不提typeof，typeof可以精确地判断除null外的基本数据类型，因为 typeof null 会返回object。instanceof的原理原理是：判断instanceof左边的值是否是instanceof右边的值的实例，即instanceof左边的值是否在instanceof右边的值的原型
2020-11-10 16:43:38
432
原创 面试官必问系列之性能优化中的防抖和节流
什么是防抖？什么是节流？防抖：用户触发高频事件(比如说点击事件)后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间，n秒后再执行。总之，就是等待用户触发完事件n秒内不再触发事件，再执行函数。节流：用户触发高频事件(比如说点击事件)后n秒内函数只会执行一次。也就是说，不论用户在n秒内触发多少次事件，最终函数都会在n秒后执行一次。防抖和节流的应用场景防抖：登录、发短信等按钮，避免发送多次请求文本编辑器的自动保存input输入框，每隔特定时间发送请求（输入搜索）或者展开下拉列表
2020-11-10 16:05:48
271
原创 面试官必问系列之手动实现一个缓存函数
题目描述：有一个函数add()，参数不固定，用来计算参数的和。现要求实现一个cacheFn， 能缓存函数执行结果 。效果如下：newFn = cacheFn(add);newFn(1,2) //输出3，运行时间为2snewFn(2,3,4) //输出9，运行时间为2.5snewFn(1,2) //输出3，运行时间为0s（上面已经计算过）实现过程：//首先实现add函数的累加效果function add() { let args = Array.from(arguments);//argume
2020-11-07 16:48:16
229
原创 面试官必问系列之对象的深浅拷贝
什么是浅拷贝、深拷贝？浅拷贝是只复制原对象的的一份引用，即复制了一个指向原对象的指针。深拷贝是把原对象内的数据完全复制一份过来，并且申请一个全新的空间来存储复制过来的数据。浅拷贝和深拷贝的区别我们来观察如下代码：//浅拷贝let obj1 = { a:1};let copyObj1 = obj1;copyObj1.a = 2;console.log(obj1.a); //2console.log(copyObj1.a); //2//深拷贝let obj2 = { a:3};
2020-11-06 10:44:09
86
原创 你不知道的javascript之对象的全面解析
学习js必然绕不开对象，今天我们就来比较全面地了解一下js中对象。定义对象的语法对象可以通过两种形式定义：声明（文字）形式和构造形式。文字形式：var myObj = { key: value // ... };构造形式：var myObj = new Object(); myObj.key = value;构造形式和文字形式生成的对象是一样的。唯一的区别是，在文字声明中你可以添加多个 键 / 值对，但是在构造形式中你必须逐个添加属性。js中的内置对象j
2020-11-05 17:02:19
116
原创 你不知道的javascript之this指向的全面解析
this到底是什么我们在学习js的过程中，相信都会在很多场景遇到this以及使用this，那么this它到底是什么呢？下面给出它的定义。当一个函数被调用时，会创建一个活动记录（执行上下文）。这个记录会包含函数在哪里被调用（调用栈）、函数的调用方法、传入的参数等信息。this 就是记录的其中一个属性，会在函数执行的过程中用到。调用位置和调用栈在理解 this 的绑定过程之前，首先要理解调用位置：调用位置就是函数在代码中被调用的 位置，而不是声明的位置。而调用栈就是：为了到达当前执行位置所调用的所有函数
2020-11-05 10:29:08
190
原创 vue之手动实现数据双向绑定
从学习到使用vue进行开发，已经过去了半年多，vue强大的功能令我叹服，在vue的众多功能中，数据的双向绑定是我喜欢的功能之一，下面带大家来手撕v-model，这也是在笔试或者面试中会遇到的问题。数据双向绑定的原理vue中数据的双向绑定的核心是使用了es5的Object.defineProperty()方法来劫持数据的getter和setter函数，以达到读取数据和获取数据的功能（这是旧的写法，新的写法使用了es6中proxy，感兴趣的朋友可自行去了解）。该方法会在一个对象上定义一个新属性或者修改一个对
2020-10-30 11:12:49
396
原创 你不知道的javascript之闭包
闭包的定义当函数可以记住并访问所在的词法作用域时，就产生了闭包，即使函数是在当前词法作用域之外执行的。闭包的理解上述对闭包的描述貌似有点难以理解，不过问题不大，我们通过下面的段代码来理解，就明白是什么意思了。function foo() { var a = 2; function bar() { console.log( a ); } return bar; } var baz = foo(); baz()
2020-10-29 13:04:17
124
原创 你不知道的javascript之变量声明和函数提升
最近重温了《你不知道的Javascript》这本书，看到自己做的笔记和标记，感慨良多，仿佛回到了半年前刚看这本书时的震撼和激动，因为这本书让我了解到了js的诸多原理。虽说已经学习js两三年了，也跟老师做过项目，做过课程设计，参加过中国大学生计算机设计大赛，暑假在虎牙实习，本以为自己的js水平已经可圈可点，但自从看了这本书后，才发现自己不过是了解了js庞大的知识体系中的冰山一角。所以我决定把我了解到的一些js原理的东西写下来，希望能帮到有缘人。接下来要讲述的是js中的变量声明提升和函数声明提升，后续还
2020-10-20 15:28:19
127
原创 js的一些笔记
js单线程的证明反证：假设js支持多线程操作，js可以操作DOM，那么会有这样一个场景：一个线程在删除DOM，一个线程在获取要删除的DOM的数据，这明显不合理，所以js是单线程得证。
2020-10-20 09:16:27
64
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人