- 博客(121)
- 收藏
- 关注
RSS订阅原创 H5浏览器上使用100vh的坑及解决办法
近期开发一个移动端的详情页，布局是有一排操作按钮固定在页面底部，中间内容部分在页面内总想滚动，开发时我把页面中间部分的高度设置为100vh - 50px，overflow：auto；在浏览器的控制台模式看没问题，微信上的浏览器和小程序看这个页面也没问题，最后突然发现在安卓和苹果手机的浏览器上展示有问题，具体表现为：安卓（华为mate60）：页面展示地址栏和底部导航栏时，看不到操作按钮，当页面滚动时顶部地址栏隐藏，底部的操作按钮被滚动上来了。
2024-04-28 18:05:27
477
原创 H5端 Tab标签滚动时吸顶&滚动至对应模块选中对应tab&开发中遇到的坑
注意：页面滚动至某一模块时，展示对应锚点。可以从下往上计算 各个模块与页面顶部的距离和Tab标签的高度来判读哪个模块当前在可视区，从而选中对应的Tab标签。解决办法：通过监听页面滚动事件，然后在滚动时移除之前聚焦元素的焦点状态来实现这个需求。当你开始滚动页面时，滚动事件处理器会将。在这个示例中，我添加了一个新的状态变量。2、页面滚动至某一模块时，展示对应锚点。1、点击Tab标签定位至对应模块。3、Tab标签滚动吸顶。，将继续监听滚动事件。
2024-04-28 17:18:09
272
原创 Echarts使用log对数轴时数值0不展示解决办法
接上篇文章，双对数轴展示展示看起来是没什么问题了，但经过自测发现，x坐标为0的时候，这条数据不展示了，echarts把x===0的数据给过滤了。到此，完美解决了对数轴坐标为0的问题🎉～
2024-01-19 17:38:03
740
原创 Echarts坐标轴如何实现log对数轴
最近开发一个loss曲线图，x轴和y轴都要求用log对数轴，刚开发的时候x轴用的类目轴（category）图表，设置axisLabel返回值，强制转化成对数，以及最小值最大值等，实现x轴刻度间隔为10的指数，但这样series的data数据渲染总是感觉很奇怪。当把x轴设置成log时，图标走线也是不容客观，很多数据也没见了，像是数据被echarts过滤掉似的，最后几经周折终于在网上查到了原因。
2024-01-19 17:21:36
694
原创 为什么 hooks 不能放在循环或者条件判断语句里？
遵守这条规则，你就能确保 Hook 在每一次渲染中都按照同样的顺序被调用。比如第一次执行函数组件时，我们拿到状态 count（通过 setState，初始值为 0 ）和 isDone（通过 setState，初始值为 false），它们其实被保存到一个有序表中，它们的值会记录下来： [0, true]。这个限制在开发中也确实会时常影响到我们的开发体验，比如函数组件中出现 if 语句提前 return 了，后面又出现 Hook 调用的话，React 官方推的 eslint 规则也会给出警告。
2023-10-30 18:19:06
391
原创 面试题之JavaScript经典for循环（var let）
如果你也在面试找工作，那么也一定遇到过这道for循环打印结果的题，下面我们来探讨下。
2023-10-26 10:01:02
368
原创 面试题之在async await中如何捕获到reject的Promise？
【代码】面试题之在async await中如何捕获到reject的Promise？
2023-10-25 19:49:29
426
原创 面试题之Vue和React的区别是什么？
Diff算法是一种对比算法，主要是对比旧的虚拟DOM和新的虚拟DOM，找出发生更改的节点，并只更新这些接地那，而不更新未发生变化的节点，从而准确的更新DOM，减少操作真实DOM的次数，提高性能。
2023-10-25 15:46:20
595
原创 查找2个dom节点的最近的共同父元素
自定义一个函数，参数为两个节点，一直进行while循环，查找oNode1节点的父节点，如果查找到的父节点包含oNode2节点，则打破该循环，将该父节点输出出去，这样就能获取到这两个节点最近的一个共同父节点。JavaScript的 contains 方法是用来查看dom元素的包含关系。* 查找两个节点的最近的一个共同父节点，可以包括节点自身。
2023-10-25 11:10:20
113
原创 微前端系列-样式隔离、元素隔离
各个应用之间可能相互设置标签样式，会相互影响，或者影响全局样式，比如应用A给body设置样式，应用B也给body设置样式。
2023-10-24 09:44:38
314
原创 乾坤js隔离
乾坤，作为一款微前端领域的知名框架，其建立在single-spa基础上。相较于single-spa，乾坤做了两件重要的事情，其一是加载资源，第二是进行资源隔离。而资源隔离又分为Js资源隔离和css资源隔离。我们把Js隔离机制常常称作沙箱，事实上，乾坤有三种Js隔离机制，并且在源代码中也是以 SnapshotSandbox、LegacySandbox、ProxySandbox三个类名来指代三种不同的隔离机制。下文我们统一以快照沙箱、支持单应用的代理沙箱、支持多应用的代理沙箱，来代表这三种不同的Js隔离机制。
2023-10-23 23:55:08
255
原创 4种实现JS深拷贝的方法
上述的几种方式不管优缺点如何，共同点是只能拷贝对象的可枚举属性，对于不可枚举或者原型上的属性，却不能拷贝，但对于基本的使用来说，已经足够了。
2023-10-12 20:25:11
4418
4
原创 常问面试题：TCP与UDP的区别
网络访问层又称作主机到网络层（host-to-network），网络访问层的功能包括IP地址与物理地址硬件的映射， 以及将IP封装成帧.基于不同硬件类型的网络接口，网络访问层定义了和物理介质的连接. 当然我这里说得不够完善，TCP/IP协议本来就是一门学问，每一个分支都是一个很复杂的流程， 但我相信每位学习软件开发的同学都有必要去仔细了解一番。下面着重讲解一下TCP协议和UDP协议的区别。
2023-10-10 11:34:49
331
原创 gp报错fatal: unable to access ‘https://github.com/XXX.git/‘: The requested URL returned error:403
之后继续执行正常的git push -u origin main 命令就可以了。修改url，在host前边加上你的github账号密码，用:和@分开。然后ctrl+c退出vim命令，输入：x退出。在网上看了些方法，最后找到了解决办法。修改git的config文件。输入i，打开vim编辑模式。
2023-09-21 12:37:55
186
原创 排序函数中，a 或 b 中有任何一个为 undefined解决方法
那么排序可能会出现问题，因为在比较过程中无法执行数值的减法操作。为了避免这种情况，可以在排序函数中添加一些逻辑来处理。的情况，返回 0 表示它们相等。然后，如果其中一个值为。值，例如将它们排在数组的末尾或者将它们视为较小的值。，我们将其排在另一个值之后。最后，如果两个值都不为。以下是一个示例，展示如何在排序函数中处理。，我们执行正常的比较操作。示例中，我们先处理了。
2023-08-23 10:31:39
95
原创 Antd List组件增加gutter属性后出现横向滚动，如何解决
第一次使用ant design的List列表组件，设置gutter间隔属性后，页面出现了横向滚动条，查阅文档发现是由于加间隔后导致容器宽度被撑开，ant design官方默认给外层容器加了margin-left和margin-right。
2023-07-12 19:06:35
1431
原创 react hooks的优缺点
如果类组件要复用代码, 经常需要高阶组件.在react hooks中, 自定义hooks可以将组件中类似的状态逻辑抽取出来, 做成一个useHook. 这样在每次调用时就会有一份独立的存储空间. 而且hooks实现起来代码量比较少, 维护更容易。
2023-04-07 17:17:47
613
1
原创 useCallback 与 useMemo 的区别 & 作用
一些文章长篇大论解释，其实直接看 typescript 声明就知道作用了，泛型 T 在 useCallback 中是一个钩子函数，在 useMemo 中是一个返回值。一个简单计数器 demo 解释全部作用：点击按钮 count 加 1，同时显示这个数是奇数还是偶数不用 hook 的代码使用 hook 后的代码看起来没有什么区别，甚至使用 hook 后代码还变复杂了。
2023-03-11 15:53:04
457
原创 React中setState什么时候是同步的，什么时候是异步的？怎么获取同步后的数据？
React中setState什么时候是同步的，什么时候是异步的？
2023-03-11 15:17:30
977
原创 React使用pubsub-js订阅发布和取消订阅
PubSub.subsribe( )是用于订阅消息，在componentDidMount( )中使用。在componentWillUnmount中取消订阅
2022-07-09 10:32:15
1428
原创 React面试习题
目录1.React中什么是受控组件和非控组件2.React中refs的作用是什么？有哪些应用场景？3. React组件的构造函数有什么作用？它是必须的吗？4. React.forwardRef是什么？它有什么作用？5. 类组件与函数组件有什么异同？（1）受控组件 在使用表单来收集用户输入时，例如等元素都要绑定一个change事件，当表单的状态发生变化，就会触发onChange事件，更新组件的state。这种组件在React中被称为受控组件，在受控组件中，组件渲染出的状态与它的value或checked属性相
2022-07-06 22:32:05
261
原创 hooks 的定义
在 [email protected] 之前，当我们谈论 hooks 时，我们可能谈论的是“组件的生命周期”。但是现在，以 react 为例，hooks 是：一系列以 “use” 作为开头的方法，它们提供了让你可以完全避开 class式写法，在函数式组件中完成生命周期、状态管理、逻辑复用等几乎全部组件开发工作的能力。...
2022-07-02 09:33:38
3595
原创 绝对定位（子绝父相），父元素高度自适应子元素
最近做一个标签功能，涉及到绝对定位问题，父元素设置了最小高度，当子元素高度超过父元素的最小高度时，父元素高度没有被撑开。如图所示，父元素边框的高度没有和子元素一致。经过调研，在实际开发中，父元素的高度是由里面的子元素撑开的，而绝对定位的子元素由于脱离了父元素文本结构，所以父元素高度没有被撑开。自适应宽高是需要以文档流布局为基础的，而绝对定位已经脱离了文档流布局了。解决方法如下：componentDidMount() { document.querySelector('.fa
2022-04-15 16:48:33
3056
1
原创 Too many re-renders. React limits the number of renders to prevent an infinite loop
一：报错原因及如何修复在函数组件使用useState更新state数据时页面出现如下报错：意思是：太多的被重新呈现。React限制呈现的数量，以防止无限循环。原因是代码<a onClick={ setVisible(false)}中，花括号{}方法体会被直接触发，在react呈现中调用setVisible函数，setVisible函数触发后，数据更新导致页面重新渲染，会继续触发onClick事件，回调中触发了重新呈现，最常见的是setState触发，这将再次调用事件回调，并导致Reac
2022-03-17 19:21:04
952
原创 react设置Cursor属性之url图片不展示原因
今天在设置鼠标为url地址图片时渲染区域鼠标形状没有显示，在控制台检查元素，url图片是有的，于是在网上一顿搜索，提示让用绝对路径，期间也将url换了网上的url地址，结果还是没有展示，如下：确定了图片路径没问题后，看到有人说可能和图片大小也有关系，于是找了比较小尺寸的图片，发现是可以的。下面介绍一下cursor image的尺寸，悬浮cursor不展示的小伙伴可以看一下是否是尺寸和引入img路径的原因。How Big Should cursor image be?about 32×
2022-03-15 17:16:00
1959
原创 URL传参中的字符加密及解码方式encodeURI/decodeURI、encodeURIComponent/decodeURIComponent 、escape/unescape
encodeURI/decodeURI、encodeURIComponent/decodeURIComponent 这四个方法的用处都是用来编码和解码URI的。encodedURI函数通过将特定字符的每个实例替换为一个、两个、三或四转义序列来对统一资源标识符 (URI) 进行编码 (该字符的 UTF-8 编码仅为四转义序列)由两个 "代理" 字符组成)。 encodeURI 自身无法产生能适用于HTTP GET 或 POST 请求的URI，例如对于 XMLHTTPRequests, 因为 "&
2021-11-19 15:29:16
2254
原创 antd-react-input 去除输入内容 记忆功能
ant-design Input 组件取消自动显示输入历史Form默认开启 aotuComplete 功能，当submit 时会记录输入历史，取消自动补充功能，只需在Form 上加autoComplete=“off”即可关闭自动提示输入历史 (这里的Complete的C需要大写)如果是原生 js 的 input 框则增加属性: autocomplete=“off” (这里的complete的C不需要大写)...
2021-09-27 15:40:57
1985
原创 url-loader 及源码简析
Loads files asbase64encoded URL安装npm install --save-dev url-loadeurl-loader功能类似于file-loader，但是在文件大小（单位 byte）低于指定的限制时，可以返回一个 DataURL。// webpack.config.jsmodule.exports = { module: { rules: [ { test: /\.(png|jpg|gif)$/, ...
2021-09-15 15:11:44
1126
原创 React中echarts 单个/多个图表自适应
项目中涉及到多个图表，需要宽度自适应屏幕的尺寸，因此想到了监听windows resize方法// 监听 window 窗口大小变化的事件window.onresize = function() { // 调用 echarts 实例对象的 resize 方法 this.myCharts.resize()}但是几经操作后发现，只有最后一个图表的尺寸会重新resize，会覆盖前几个图表的自适应，原因是this的指向不对let that=thisthis.lineChart.set
2021-09-10 14:27:16
957
原创 React-antd-RangePicker日期组件清空内容
做项目中遇到了一个需求，需要清空日历控件，查了api文档，并没有发现好的解决方法。经查阅一些文档，总结两种方法1、若使用form表单，可采用清空表单的方式清空日历组件，this.props.form.resetFields();2、若是单独写的日历组件，则可以通过设置一个key，然后在点击重置时修改key的值（看了网上一些博客都是这样写的），原理是给rangePicker控件添加key属性，点击重置时，修改key的值，如new Date()，相当于重新渲染控件，达到让控件重置的功能th
2021-09-02 11:05:31
4534
5
原创 JS获取url参数
function getQueryVariable(variable){ var query = window.location.search.substring(1); var vars = query.split("&"); for (var i=0;i<vars.length;i++) { var pair = vars[i].split("="); if(pair[0] == va.
2021-09-01 16:08:49
89
原创 D3.js与echart.js区别及应用场景
什么是D3？D3.js的全称是Data-Driven Documents，其实就是一个数据驱动的文档的js库，简而言之就是一个数据可视化的库。那什么是数据可视化呢？举个例子：给出一组数据 [10，80，40,100,30,20,50]如果我们想要看出这组数据的大小关系，单看数据显然不够直观。那么我们可以将它转换为一种简单易懂的图表的形式（如下图）这样我们就可以更加直观的获取数据所传递给我们的信息。这个过程就叫做数据可视化。在我们平时的项目开发中经常会遇到这种情况：后端返回给我们一
2021-08-12 16:54:12
3941
原创 WebGLProgram
WebGLProgram是WebGL API的一部分，它由两个WebGLShaders （webgl 着色器）组成，分别为顶点着色器和片元着色器（两种着色器都是采用GLSL 语言编写的）。创建一个WebGLProgram需要调用 GL 上下文的createProgram()方法，然后调用attachShader()方法附加上着色器，之后你才能将它们连接到一个可用的程序。WebGLProgram 的创建过程请参考下面的代码：var program = gl.createProgram(...
2021-08-12 11:33:16
272
原创 WebGLShader
WebGLShader可以是一个顶点着色器（vertex shader）或片元着色器（fragment shader）。每个WebGLProgram都需要这两种类型的着色器。要创建一个WebGLShader需要三步： 使用WebGLRenderingContext.createShader， 通过WebGLRenderingContext.shaderSource()然后挂接GLSL源代码 （ OpenGL Shading Language，OpenGL着色语言） ...
2021-08-12 11:22:07
292
原创 指令式绘图系统：如何用Canvas绘制层次关系图？
Canvas 是可视化领域里非常重要且常用的图形系统，在可视化项目中，它能够帮助我们将数据内容以几何图形的形式，非常方便地呈现出来。这篇文章主要会讲解如何用它的2D上下文来完成绘图，不会去讲和它有关的所有Api，重点只是希望通过调用一些常用的API讲清楚，Canvas2D能做什么、要怎么使用，以及它的局限性是什么。最后，还会用Canvas绘制一个表示省市关系的层次关系图（Hierarchy Graph）。如何用Canvas绘制几何图形？首先，我们通过一个绘制红色正方形的简单例子，来讲一讲Canv
2021-08-04 11:57:01
2486
2
原创 Web前端与可视化有什么区别？
首先是技术栈的不同。Web 开发主要以 HTML 来描述结构，以 CSS 来描述表现，以JavaScript 来描述行为。而可视化则较少涉及 HTML 和 CSS，它更多地要同浏览器的Canvas、SVG、WebGL 等其他图形 API 打交道。这是因为，Web 开发以呈现块状内容为主，所以 HTML 是更合适的技术。而可视化开发因为需要呈现各种各样的形状、结构，所以，形状更丰富的 SVG 以及更底层的 Canvas2D 和 WebGL 就是更合适的技术了。其次，Web 开发着重于处理普通的文...
2021-07-26 16:01:08
1179
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人