- 博客(64)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 前端面试题大合集
防抖函数debounce指的是某个 函数在某段时间内，无论触发了多少次回调，都只执行最后一次。假如我们设置了一个等待时间3秒的函数，在这3秒内如果遇到函数调用请求就重新计时3秒，直至新的3秒内没有函数请求，此时执行函数，不然就以此类推重新计时。函数节流，指的是在一定的时间间隔内（比如说3秒），只执行一次，在这三秒内无视后来产生的函数调用请求，也不会延长时间间隔。3秒间隔结束后，第一遇到新的函数调用会触发执行，然后在这新的3秒内依旧无视后来产生的函数调用请求，以此类推。
2024-04-10 17:48:12
227
1
原创 从一个url输入到正常显示出来一个网页经历了哪些过程
最后进行浏览器渲染，浏览器对请求回来的文件进行解析，解析成浏览器可以识别的格式，然后渲染成我们可以看到的网页。发起HTTP请求把相关的html文档和相关资源例如css文件，图片从服务端给请求回来。建立TCP连接要三次握手，断开连接要四次挥手。主要是以上的几个步骤了。
2024-01-27 11:35:42
521
1
原创 JS 删除的是最后一页的最后一条，页码设置逻辑
3、如果删除成功之后的总页数比小于当前总页数，需要把当前页码减去1；否则，直接进行列表数据的请求。2、删除成功之后的总页数与当前总页数进行比较。1、计算操作后的总页数。
2023-08-14 16:51:14
172
原创 antd的Form表单
最近开发项目，发现在antd的form表单中直接嵌套下拉选框，忌廉选择级联选择器这些组件，发现在给这些组件设置值或者获取值的时候，发现方法都不好用了，发现了一个解决办法，就是一定要加上一个div，这样子问题就解决了。
2023-07-24 18:02:34
68
原创 text-overflow:ellipsis 不显示省略号问题
的原因，讲该元素设置为display:block就可以解决问题了。设置单行文字长度多长以省略号显示。结果发现没有发生作用。
2023-07-05 15:45:19
610
原创 JS 实现滚动定位和点击button跳转
最近在开发项目的时候，有一个交互上的需求，就是滚动内容区域的不同模块，要高亮显示上方模块对应的button，用到的是react+TS开发的项目，具体的代码如下：1.滚动定位到具体的tab下面的方法是关键的一个方法，就是获取一组button具体对应的id/** * 设置第二个tab的active的key * scrollTop + clientHeight == scrollHeight，说明滚动到最底部了，把值设置成20px * @param scrollTop * @param do
2021-10-25 14:58:13
1117
原创 Mac系统安装Homebrew
如果官网安装不成功，可以尝试一下在终端输入如下指令：/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"在输入以上指令要确保没有电脑没有连接VPN，可以用中国移动的手机热点去尝试。按回车后，根据提示操作：输入镜像序号 --> 输入Y，回车等待brew安装完成即可。...
2021-08-27 12:08:54
111
原创 webstorm启动报错Load error: undefined path variables
启动webstorm时，会报如下错误：出现这个问题的原因是由于less的环境没有设置好，请看解决方法：1.打开设置的面板，如下所示：2.重启webstorm，再次打开就没有此错误了
2021-08-19 09:40:11
2400
原创 useEffect使用技巧
useEffect如果第二个参数的数组不为空，传了多个参数的情况下，使用总结。如果第二个传了多个参数，如何查看是那个参数发生了变化呢？请看代码：// 在一个正常的Hooks函数中，有如下代码，此代码实现的原理就是通过useRef来达到缓存的目的 const [a, setA] = useState(); const [b, setB] = useState(); const [c, setC] = useState(); const myRef = useRef({a, b, c})
2021-04-20 10:39:19
1112
2
原创 使用Hooks的注意事项
在使用Hooks的过程中，需要注意的两点是： 不要在循环，条件或嵌套函数中调用Hook，必须始终在React函数的顶层使用Hook。这是因为React需要利用调用顺序来正确更新相应的状态，以及调用相应的钩子函数。一旦在循环或条件分支语句中调用Hook，就容易导致调用顺序的不一致性，从而产生难以预料到的后果。 只能在React函数式组件或自定义Hook中使用Hook。 为了避免我们无意中破坏这些规则，你可以安装一个eslint插件：npm install eslint-plugin-
2021-02-08 20:33:49
2029
原创 Vue2双向数据绑定原理
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-.
2021-02-04 20:19:07
100
原创 CSS3中的伪元素选择器与scss
以vue组件未例子来演示代码：<template> <div> Practice <ul> <li>面包屑一级导航</li> <li>二级导航</li> <li>内容</li> </ul> 哈哈哈 </div></template><script>export de
2021-01-26 15:44:02
2534
原创 vue2相关的技术栈对应的环境搭建
本文介绍了两个搭建好的环境，一个是web端，一个是mobile端，都在github上有代码的，欢迎star！欢迎PR！采用的技术栈包括：vue-cli3脚手架搭建出来的（SPA）单页面应用，涉及的技术包括vue2，vue-router，VueX，axios，sass，等等。web端：github-web端链接mobile端：github-mobile端链接欢迎在下方评论参与讨论！...
2020-12-30 11:52:44
210
原创 vue-cli3搭建环境报错
vue常见错误ERROR Error: vue-loader requires @vue/compiler-sfc to be present in the dependency tree.解决办法：npm i -D vue-loader@14这个时候报错就没有了
2020-12-29 16:29:47
355
原创 ES6的Promise结合reduce构建顺序执行队列
ES6的promise是用来处理异步操作的，他的一些基础的用法本篇就不在赘述，感兴趣的同学我可以给你们推荐几篇文章，让你们提升一下对Promise的基本认知，推荐如下：高级前端进阶-微信公众号上推送的一篇文章ES6Promise实战接下来话不多说，直接上代码： const createPromise = (id: number) => () => new Promise(resolve => setTimeout(()=>{ c
2020-12-24 17:28:30
1281
1
原创 JS 深度优先遍历与广度优先遍历 实现查找
在日常的开发工作中，牵扯到层级结构比较复杂的节点，如树形节点，级联选择器，这些都是牵扯到前端算法的遍历的；本文将介绍常用到的两种遍历方式：深度优先遍历和广度优先遍历深度优先遍历：depth first search广度优先遍历：breadth first search1.示意图通过两组示意图来明白什么叫做深度优先遍历和广度优先遍历图一（深度遍历示意图）深度遍历查找会按照图中绿色标注的数字去查找，就相当于是一条道走到黑，如果没有叶子节点的话，会再拐回来，回溯到上一个节点再搜索其余的，按
2020-12-17 19:06:29
1525
原创 React-移动端-用canvas实现电子签名，以及下载成PDF或者jpeg图片
前言电子签名通俗来说就是通过技术手段实现在电子文档上加载电子形式的签名，其作用类似于纸质合同上的手写签名或加盖的公章。虽然电子签名多年来合法性一直遭到质疑，但其在企业工作流审批、请柬、单据保全等场景应用广泛，最近的项目中就有这样一个手写签名并生成PDF文件的需求。实现思路使用canvas来实现手写签名的功能，然后将canvas转化为图片，贴在签名的位置； 将整个需要生成文档的dom区域（canvas对应的dom节点所在的区域）使用html2canvas插件转成一张大图； 使用JsPDF插件将
2020-12-10 14:13:06
1746
2
原创 Vue slot的使用范例
// MyComponent.vue这个是主文件<template> <div> <h2>匿名插槽</h2> <TodoList> <template v-slot:default> 任意内容 <p>我是匿名插槽内容</p> </template> </TodoList> <h2>具.
2020-11-26 14:10:53
124
原创 useMemo和useCallback的区别及使用场景
useMemo和useCallback都是reactHook提供的两个API，用于缓存数据，优化性能；两者接收的参数都是一样的，第一个参数表示一个回调函数，第二个表示依赖的数据。共同作用在依赖数据发生变化的时候，才会调用传进去的回调函数去重新计算结果，起到一个缓存的作用两者的区别useMemo 缓存的结果是回调函数中return回来的值，主要用于缓存计算结果的值，应用场景如需要计算的状态 useCallback 缓存的结果是函数，主要用于缓存函数，应用场景如需要缓存的函数，因为函数式组件每..
2020-11-23 16:43:37
34693
原创 ReactDOM.createPortal使用实例
最近在看React的官方文档，补习一下有关React的知识，这篇文章就介绍一下如何使用ReactDOM.createPortal来实现弹框组件的改造；比较初级，比较通俗易懂。Portal ，将子节点渲染到存在于父组件以外的 DOM 节点。ReactDOM.createPortal(child, container)第一个参数（child）是任何可渲染的 React 子元素，例如一个元素，字符串或 fragment。第二个参数（container）是一个 DOM 元素。上面的这句话引.
2020-11-23 11:17:24
7196
原创 前端用pdfjs实现预览PDF
最近做项目，产品经理要求实现预览PDF，最起初是采用iframe标签，把服务器返回的一个可预览的链接扔到iframe标签的src中，就实现预览了，但是这种实现有一个弊端，就是预览出来的pdf是可以选中并且复制的，但是产品经理要求不可复制于是就换了一种思路，采用pdfjs这个开源包来实现预览PDF，具体实现的技术细节请参考如下步骤：一.下载下载请前往官网下载，具体链接：PDFjs预览插件官方下载地址，要下载stable版本，下载后是zip压缩包，要用解压工具给解压一下二.解压解压之后的文件
2020-11-21 19:39:00
6182
1
原创 react，一句话概括受控组件和非受控组件的概念
受控组件：简单来说，就是一个组件的状态更新不依赖于react。像是一些表单元素：input，textarea，select这些，都是自己更新自己的状态；可以看一下代码：import React, { Component } from 'react';import ReactDOM from 'react-dom';class Demo1 extends Component { render() { return ( // 此input的value
2020-11-20 18:54:04
485
3
原创 OSS前端相关的上传，下载，预览
一.描述目前公司在做项目，应用的业务场景有上传，下载，预览；要求上传的文件的类型也比较多，有word，pdf，image，video，ai，psd等等这些类型，应用的是阿里云的OSS，本文就简单介绍一下前端（JS）相关的代码，用的框架是react，脚手架是antd pro4，重点介绍下阿里云相关的上传，下载，预览吧；二.OSS相关如果是项目的包管理工具用的是npm，应该先安装ali-oss这个包，然后通过import导入进来。import OSS from 'ali-oss'//如此就
2020-11-20 15:41:46
4031
原创 JS lodash库在开发中常用到的方法
一.摘要lodash是JS一个开箱即用的库函数，里面对于在日常开发中常用到的方法都是已经封装好的，使用起来非常方便，本篇记录了在日常开发过程总经常用的方法，就大概记录一下，具体请参考lodash的官方API：lodash官方API二.常用方法getimport { get } from 'lodash'// 从一个变量中取值，第一参数表示变量，第二个表示该节点对应的名称，第三个参数表示当取不到的时候设置的默认值const a1 = get(nextProps, 'treeVal'.
2020-11-19 18:15:06
1038
原创 React：refs转发和useImperativeHandle
具体的使用范例，可以参考官方API：Refs转发，本人也是看了官方API以后自己所学习理解领悟的给记录一下，如果有不正确的地方，可以在文章下方的评论区参与评论，然后指正出来！欢迎各位来评论吧！refs是用来绑定元素的，一定要注意：React中的props是无法传递ref的，ref实际上并不是props，他就像key一样，是专门处理的；使用非常简单，见下列代码吧：import React from 'react'import { Button } from 'antd'function M.
2020-11-19 14:21:07
202
原创 JS 树形数据结构的转化
平常在使用antd的tree或者elementUI的tree去开发项目的时候，要求向这个组件中传递的数据都是格式化好的，有嵌套层级的数组，这种情况下就需要我们自行封装方法去组装数据结构，具体的代码如下：// 格式化树数据function toTreeData(data) { const pos = {} const tree = [] let i = 0 while(data.length != 0) { if(data[i].pid == null) { tre
2020-11-19 10:44:28
1574
原创 react中的context，provider使用步骤
Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。具体详见：context官方API本篇文章只是详细的把我个人的学习日志给记录下来相当于又会了一个react相关的知识点，具体这些API可以参看官方API，已经写得很详细了；与context相关的API共有以下几个： React.createContext Context.Provider Class.contextType Context.Consumer C
2020-11-18 16:22:01
12113
原创 JS 查询树形节点的最深层级 && 递归查找树形节点的某个节点
用以下封装好的方法// 获取树形节点的最深层级export function getMaxFloor (treeData: any[] = []) { let max = 0 function each (data: any[] = [], floor: number) { data.forEach(e => { e.floor = floor if (floor > max) { max = floor }
2020-11-18 11:20:33
5068
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人