- 博客(100)
- 收藏
- 关注
RSS订阅原创 解决craco配置alias后WebStorm无法识别的问题
craco配置示例：// craco.config.jsconst path = require('path')const resolve = dir => path.resolve(__dirname, dir)module.exports = { webpack: { alias: { "@": resolve("src"), "components": resolve("src/components") } }}解决方
2022-04-23 16:24:47
2349
3
转载 TypeScript中type和interface的区别
interface VS type大家使用 typescript 总会使用到 interface 和 type，官方规范 稍微说了下两者的区别An interface can be named in an extends or implements clause, but a type alias for an object type literal cannot.An interface can have multiple merged declarations, but a type ali.
2022-03-09 11:39:29
611
原创 关于iframe与父页面是否共用渲染进程的问题
测试环境Chrome 99.0.4844.51（正式版本） （64 位）测试用例<!-- main.html --><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" con
2022-03-08 17:58:58
1455
原创 Android Gradle工程CI流水线执行结束后卡住不退出的解决方案
最近遇到安卓工程的CI在跑完后概率性出现卡住的现象。搜索相关资料发现Gradle工程默认情况下会开启守护进程（Daemon）进行构建，于是猜想可能是问题原因。禁用守护进程的方法：通过环境变量: 添加标志-Dorg.gradle.daemon=false到GRADLE_OPTS环境变量通过build.properties文件: 添加org.gradledaemon=false到%GRADLE_USER_HOME%\gradle.properties文件中采用方法一进行验证，在CI脚本中加入以下代码
2022-02-22 16:18:35
1823
1
原创 Gradlew构建出现的C:\Windows\System32\config\systemprofile\.gradle\caches问题记录
报错信息：> Task :app:processDebugResources FAILEDFAILURE: Build failed with an exception.* What went wrong:Execution failed for task ':app:processDebugResources'.> Could not resolve all files for configuration ':app:debugRuntimeClasspath'. > F
2022-02-21 15:20:32
2376
原创 styled-components使用经验小结
参考文档https://styled-components.com/docs尽量不要使用内联样式styled-components（以下简称sc）的原理是在<head>元素中动态插入组件专属的<style>元素，而若要使用内联样式，需要将每个使用内联样式的元素替换为sc提供的组件，并将元素的所有属性通过attrs()方法传递。更推荐的做法是在组件顶层替换sc提供的组件，一般是StyledDiv（组件的命名可以自定义），然后对于各级子元素利用类名来应用样式。但对于经常起伏的样式
2022-01-14 14:40:05
538
转载 Node 最新 Module 导入导出规范
官方文档：https://nodejs.org/api/packages.html字节团队的整理：https://juejin.cn/post/6972006652631318564
2021-11-11 13:16:01
185
原创 关于history.state为null的问题
最近在项目中需要写popstate回调，发现在这个回调里获取history.state有时会为null根据MDN的描述，popstate事件本身是有state属性的，因此用event.state对比测试了一下，发现和history.state不一样的，event.state可以获取到。猜测可能是浏览器响应这个事件时会强制将history.state置空，然后再从event.state获取并设置历史状态...
2021-11-01 20:41:00
1095
转载 CSS布局基础知识
https://mp.weixin.qq.com/s/-LcNZWFFty2lWuND6uuNNA涵盖了：盒模型元素布局特性格式化上下文包含块文档流浮动定位行框外边距
2021-10-16 21:15:01
71
原创 canvas尺寸问题排查记录
在对项目中的BUG进行排查时最终发现是由于给canvas设置小数尺寸导致的，记录一下关于canvas尺寸问题的具体细节请参见：https://www.zhangxinxu.com/wordpress/2018/07/canvas-html-size-css-size/
2021-10-15 20:27:06
138
转载 vue-cli 源码分析
https://kuangpf.com/vue-cli-analysis/个人感觉在各种分析帖里算写的清晰、详略得当的，侵私删
2021-10-08 17:57:49
203
原创 Scss中@extend, @mixin, @function的区别
中文文档@extend只会将选择器添加到继承的样式上，并不会复制代码@extend无法使用参数；@mixin, @function可以@mixin是通过复制样式代码以复用；而@function是通过@return来输出返回值
2021-09-03 11:20:48
1451
原创 解决弹性盒子被内容撑开至超出其父元素的BUG
记录一次弹性盒子问题的解决方案，不一定具有普适性，仅供参考需求实现垂直弹性盒子，满足其中一个子元素给定高度，另一个子元素自动填充问题自动填充的子元素由于未设置高度，将被其内容支撑，直至超出父容器解决方案给该元素设置高度初始值例如：height: 0;示例代码<div class="container"> <div class="fix"></div> <div class="flex"> <div class="conte
2021-08-24 20:15:10
2097
原创 Webpack CSS/SCSS中url()无法正常解析解决方案
仅供参考软件包版本：{ "css-loader": "^6.2.0", "css-minimizer-webpack-plugin": "^3.0.1", "mini-css-extract-plugin": "^1.6.0", "sass": "^1.35.1", "sass-loader": "^12.1.0", "url-loader": "^4.1.1", "webpack": "^5.39.1", "webpack-cli": "
2021-08-11 14:11:00
1479
原创 初学CSS发光圆形背景
利用radial-gradient() CSS函数实现示例：<div></div>div { width: 300px; height: 300px; background: radial-gradient(circle at top, orange, transparent 40%); /* 便于观察DOM */ border: solid 1px black;}
2021-08-10 17:22:16
1052
转载 移动端禁用长按复制
添加全局禁止选择文本的CSS属性* { -webkit-touch-callout: none; /* 系统默认菜单 */ -webkit-user-select: none; /* webkit浏览器 */ /*noinspection CssUnknownProperty*/ -khtml-user-select: none; /* 早期浏览器 */ -moz-user-select: none; /* 火狐浏览器 */ -ms-user-select:
2021-08-09 11:25:04
558
原创 关于event对象中的currentTarget属性有时候为null这件事
关于event对象中的currentTarget属性有时候为null这件事前景提要问题复现解决方案拓展探究闲得蛋疼前景提要event.currentTargetMDN只说明了它表示事件的当前目标，总是指向事件绑定的元素。让我们来看下示例一：<!-- HTML --><div id="outer"> <div id="inner"></div></div>/* CSS */#outer { width: 100px; h
2021-07-27 16:46:47
2422
原创 CSS设置滚动条不占空间、单行/多行文本超出时显示省略号
MDNoverflowtext-overflow滚动条不占空间overflow: overlay;行为与auto相同，但滚动条绘制在内容之上而不是占用空间。 仅在基于WebKit（例如，Safari）和基于Blink的（例如，Chrome或Opera）浏览器中受支持。超出文本显示省略号text-overflow: ellipsis;这个关键字的意思是“用一个省略号 (’…’, U+2026 HORIZONTAL ELLIPSIS)来表示被截断的文本”。这个省略号被添加在内容区域中，因此会
2021-07-09 11:32:30
2720
原创 利用期约（promise）连锁实现MFA（多因素认证）
利用期约（promise）连锁实现MFA（多因素认证）MFA期约连锁实现MFAMFA概念：通过两种以上的认证机制之后，才能得到授权本文以两步验证为例进行说明期约连锁期约连锁就是一个期约接一个期约地拼接。之所以可以这样做，是因为每个期约实例的方法（then()、catch()和finally()）都会返回一个新的期约对象，而这个新期约又有自己的实例方法。这样连缀方法调用就可以构成所谓的“期约连锁”。实现MFA利用期约本身的状态（待定pending、落定settled）及期约连锁可以实现MFA
2021-07-02 17:02:00
305
原创 前端工程化工具总结和对比
前端工程化工具总结和对比包管理工具经过验证、较稳定的构建工具较新的构建工具自动化构建工具近期了解、学习了大量前端工程化工具，需要总结、对比一下它们的种类和功能前端流行工具中文文档汇总入口：Bootstrap中文网包管理工具名称优点缺点npm-安装速度比yarn慢、某些包的依赖问题导致安装失败yarn执行并行安装，速度较npm快-关于npm、yarn对比的文章太多了，选取一个比较典型的总结：npm7时代，优先选择npm系列；yarn可以用来安装包。项目
2021-06-29 18:05:26
483
原创 关于利用阿里cnpmjs搭建的私有库修改registryHost不生效的问题
关于阿里cnpmjs自建私有库修改registryHost不生效的问题问题复现排查方法解决方案问题复现在搭建初期，将config/index.js中的registryHost配置项设置为'127.0.0.1:7001'然后测试时发现本地安装包正常，但其他客户机安装包会报错如下：npm ERR! code ECONNREFUSEDnpm ERR! syscall connectnpm ERR! errno ECONNREFUSEDnpm ERR! FetchError: request to h
2021-06-23 15:15:53
599
转载 HTML可拖动行的表格
HTML可拖动行的表格实现思路实现代码实现思路行拖动的实现思路非常简单，选中一行，往上拖就与上面的行交换位置，往下拖就与下面的行交换位置。问题是如何得到交换行。我见过一个非常详细的教程，它会把表格里的每一行的高度与Y坐标计算出来，换言之，都时是比较e.pageX是否在[rowTop,rowBottom]区间之内。但这也带来第二个问题，有多少行就有多个这样的区间。于是解法就变成取事件源对象，然后再往上取其父对象，如果其父对象是TR元素，就取其[rowTop,rowBottom]区间…思路非常直接，同时也客
2021-06-03 14:28:20
1254
2
原创 学习Git变基
学习Git变基WhatWhyHowWhatgit-rebase - Reapply commits on top of another base tipgit rebase命令允许在一个基础提交上重新应用另一个分支的提交，属于整合不同分支的两种方法之一（merge, rebase）。与git merge命令的区别：git日志中不会保留分支的提交节点命令git mergegit rebase优点保留原始合并日志信息删繁就简，避免分支过多缺点使分支杂乱冗余无法保
2021-05-26 14:25:31
141
原创 HTML标签单击之后维持active状态
HTML标签单击之后维持active状态需求描述实现思路示例代码需求描述在用户单击标签后需要“高亮”该标签，例如：网站导航栏中的各项，在单击某项之后需要将其“高亮”以表明当前正在浏览的项目。实现思路专门用一个CSS类来实现维持样式，例如可以将该类取名为active（模仿:active伪类），在单击事件回调函数中将该标签元素增加active类，并将其余标签元素去掉active类示例代码//HTML<div class="tab" id="1" onclick="clickTab(this
2021-05-20 16:15:34
11885
6
转载 Mermaid类图中UML关系简介
Mermaid类图中UML关系简介Mermaid表示法UML类图关系继承实现组合聚合关联依赖类图中常用的六种关系：继承、实现、组合、聚合、关联、依赖Mermaid表示法https://mermaid-js.github.io/mermaid/#/classDiagram?id=defining-relationship类型描述图例<|--继承，Inheritance<|..实现，Realization*--组合，Compositiono
2021-05-14 11:01:10
1803
转载 Web端即时通讯技术简介
Web端即时通讯技术简介HTTP协议WebSocket协议Web端即时通讯技术短轮询长轮询(comet)长连接(SSE)参考资料HTTP协议HTTP 协议构建于 TCP/IP 协议之上，是一个应用层协议，默认端口号是 80HTTP 是无连接无状态的详细介绍：https://hit-alibaba.github.io/interview/basic/network/HTTP.htmlHTTP 2.0：https://juejin.cn/post/6844903984524705800WebSock
2021-05-11 11:26:57
293
转载 C++中malloc/free与new/delete的区别与联系
一、基本概念 malloc/free： 1、函数原型及说明： void *malloc(long NumBytes)：该函数分配了NumBytes个字节，并返回了指向这块内存的指针。如果分配失败，则返回一个空指针（NULL）。 void free(void *FirstByte)： 该函数是将之前用malloc分配的空间还给程序或者是操作系统，也就是释放了这块内存，让它重新得...
2021-04-13 15:35:56
671
翻译 JS垃圾回收简介
JS垃圾回收初体验如何定义垃圾根垃圾示例一个引用内部算法如何定义垃圾在JavaScript 内存管理中，判断垃圾的标准是可达性（Reachability）。可达是指存储在内存中的数据可通过某种方式访问或使用。根垃圾回收中有一类基本固有可达值，它们是无法被回收的，这些值称为根（roots）：当前执行的函数，其局部变量和参数当前嵌套调用链上的其他函数，它们的局部变量和参数全局变量其他一些内部数据垃圾从根开始，通过引用或引用链不可达的所有数据，称为垃圾。JS引擎中有一个后台进程称为垃圾回
2021-03-26 17:44:27
132
原创 CSS同时解决外边距重叠和元素高度塌陷问题
CSS同时解决外边距重叠和元素高度塌陷问题问题描述外边距重叠元素高度塌陷解决方案问题描述外边距重叠这里针对父子元素的外边距重叠现象：父元素与第一个子元素的上外边距发生重叠。例如：<div id="d1"> <div id="d2"></div></div>#d1{ width: 10em; background-color: lightgreen;}#d2{ width: 5em; height: 5em; backgr
2021-03-23 00:19:06
204
转载 记录一下JS中典型布尔值转化
!!undefined // false!!null // false!!0 // false!!'' // false!!NaN // false!!1 // true!!'false' // true!![] // true!!{} // true!!function(){} // true!!/foo/ // true
2021-01-03 16:38:45
148
原创 Qt5 QFileDialog中文英文交界处乱码问题
QString fileName = QFileDialog::getOpenFileName( this, "导入文件", "", "支持的文件(*.hex *.s19 *.bin)");临时解决方案：QString fileName = QFileDialog::getOpenFileName( this,
2020-12-29 09:58:07
789
原创 CRC（循环冗余校验）查表算法的代码实现
CRC（循环冗余校验）查表算法的代码实现前言准备工作查表算法的由来查表算法的基本原理模二减法（异或运算）的性质对直接计算法进行分析基本原理的推广查表算法的代码实现测试用例正式编码代码的测试仓库地址前言CRC基本原理、数学描述和直接计算法的编程实现请参考笔者之前的劣文：https://blog.csdn.net/weixin_44256803/article/details/105805628本文假设读者已有以上CRC基础各种CRC类型汇总：https://reveng.sourceforge.io
2020-12-27 19:05:52
5469
4
原创 IDEA中通过Terminal运行《算法4》程序
IDEA中通过Terminal运行Algs4程序IDEA Terminal设置从终端输入从文件输入《算法4》中很多程序都需要从终端输入或从文件输入，记录一下自己遇到的问题和解决方案，所用的IDEA是2019.2.1 x64版本。IDEA Terminal设置首次单击Terminal时可能报无法打开的错误，日志如下：在文件->设置（Ctrl+Alt+S）中配置终端路径并顺便改一下起始目录：喜欢bash的同学可以设置bash。起始目录填写项目的输出目录，否则可能报找不到或无法加载主类的错误：
2020-09-03 23:43:58
552
1
转载 Section与Segment间的区别
Section与Segment间的区别汇编语法关键字程序的加载链接过程示例总结汇编语法关键字在汇编源码中，通常用语法关键字section或segment来表示一段区域，它们是编译器提供的伪指令，作用是相同的，都是在程序中"逻辑地"规划一段区域，此区域便是节。注意，此时所说的section或segment都是汇编语法中的关键字，它们在语法中都表示"节"，不是段，只是不同编译器的关键字不同而已，关键字segment在语法中也被认为与section意义相同。也就是说，汇编语法关键字中的section或se
2020-09-02 12:50:06
10467
原创 Eclipse与Visual Studio联调
调试JNA用到了，简单记录下吧先在Eclipse下断：在VS工程中选择附加到进程：选中待调进程并附加：此时便可在VS中下断，然后回到Eclipse中继续运行使程序自动在VS中断下：可见变量窗口中选中参数正是传入的第一个参数0xAA。...
2020-08-25 15:23:06
328
原创 Matlab 错误使用 mex 未找到支持的编译器或 SDK 问题解决记录
记录一下Matlab 与C混合编程时碰到的问题问题背景Matlab 版本：2017b编译器版本：Microsoft Visual C++ 2017 v15.0在进行mex -setup时报错：>> mex -setup错误使用 mex 未找到支持的编译器或 SDK……解决方案使用mex -setup -v命令查看详细信息：>> mex -setup -v……... 正在查找编译器 'Microsoft Visual C++ 2017 (C)'......
2020-07-22 11:41:54
1817
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人