前端
文章平均质量分 50
相关学习记录
blingbling_110
前端程序员
展开
-
前端开发经验小结
前端开发经验原创 2023-03-12 20:53:18 · 564 阅读 · 1 评论 -
【React Native】若干问题经验总结
React Native问题经验(大部分为安卓)原创 2023-03-12 20:34:26 · 706 阅读 · 0 评论 -
解决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 · 2398 阅读 · 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 · 637 阅读 · 0 评论 -
关于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 · 1546 阅读 · 0 评论 -
styled-components使用经验小结
参考文档https://styled-components.com/docs尽量不要使用内联样式styled-components(以下简称sc)的原理是在<head>元素中动态插入组件专属的<style>元素,而若要使用内联样式,需要将每个使用内联样式的元素替换为sc提供的组件,并将元素的所有属性通过attrs()方法传递。更推荐的做法是在组件顶层替换sc提供的组件,一般是StyledDiv(组件的命名可以自定义),然后对于各级子元素利用类名来应用样式。但对于经常起伏的样式原创 2022-01-14 14:40:05 · 554 阅读 · 0 评论 -
Node 最新 Module 导入导出规范
官方文档:https://nodejs.org/api/packages.html字节团队的整理:https://juejin.cn/post/6972006652631318564转载 2021-11-11 13:16:01 · 210 阅读 · 0 评论 -
关于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 · 1133 阅读 · 0 评论 -
TypeScript 高级类型及用法
https://juejin.cn/post/6985296521495314445转载 2021-10-18 17:01:14 · 304 阅读 · 0 评论 -
CSS布局基础知识
https://mp.weixin.qq.com/s/-LcNZWFFty2lWuND6uuNNA涵盖了:盒模型元素布局特性格式化上下文包含块文档流浮动定位行框外边距转载 2021-10-16 21:15:01 · 97 阅读 · 0 评论 -
canvas尺寸问题排查记录
在对项目中的BUG进行排查时最终发现是由于给canvas设置小数尺寸导致的,记录一下关于canvas尺寸问题的具体细节请参见:https://www.zhangxinxu.com/wordpress/2018/07/canvas-html-size-css-size/原创 2021-10-15 20:27:06 · 169 阅读 · 0 评论 -
vue-cli 源码分析
https://kuangpf.com/vue-cli-analysis/个人感觉在各种分析帖里算写的清晰、详略得当的,侵私删转载 2021-10-08 17:57:49 · 234 阅读 · 0 评论 -
Scss中@extend, @mixin, @function的区别
中文文档@extend只会将选择器添加到继承的样式上,并不会复制代码@extend无法使用参数;@mixin, @function可以@mixin是通过复制样式代码以复用;而@function是通过@return来输出返回值原创 2021-09-03 11:20:48 · 1479 阅读 · 0 评论 -
解决弹性盒子被内容撑开至超出其父元素的BUG
记录一次弹性盒子问题的解决方案,不一定具有普适性,仅供参考需求实现垂直弹性盒子,满足其中一个子元素给定高度,另一个子元素自动填充问题自动填充的子元素由于未设置高度,将被其内容支撑,直至超出父容器解决方案给该元素设置高度初始值例如:height: 0;示例代码<div class="container"> <div class="fix"></div> <div class="flex"> <div class="conte原创 2021-08-24 20:15:10 · 2124 阅读 · 0 评论 -
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 · 1521 阅读 · 0 评论 -
初学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 · 1077 阅读 · 0 评论 -
移动端禁用长按复制
添加全局禁止选择文本的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 · 586 阅读 · 0 评论 -
关于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 · 2631 阅读 · 0 评论 -
CSS设置滚动条不占空间、单行/多行文本超出时显示省略号
MDNoverflowtext-overflow滚动条不占空间overflow: overlay;行为与auto相同,但滚动条绘制在内容之上而不是占用空间。 仅在基于WebKit(例如,Safari)和基于Blink的(例如,Chrome或Opera)浏览器中受支持。超出文本显示省略号text-overflow: ellipsis;这个关键字的意思是“用一个省略号 (’…’, U+2026 HORIZONTAL ELLIPSIS)来表示被截断的文本”。这个省略号被添加在内容区域中,因此会原创 2021-07-09 11:32:30 · 2939 阅读 · 0 评论 -
利用期约(promise)连锁实现MFA(多因素认证)
利用期约(promise)连锁实现MFA(多因素认证)MFA期约连锁实现MFAMFA概念:通过两种以上的认证机制之后,才能得到授权本文以两步验证为例进行说明期约连锁期约连锁就是一个期约接一个期约地拼接。之所以可以这样做,是因为每个期约实例的方法(then()、catch()和finally())都会返回一个新的期约对象,而这个新期约又有自己的实例方法。这样连缀方法调用就可以构成所谓的“期约连锁”。实现MFA利用期约本身的状态(待定pending、落定settled)及期约连锁可以实现MFA原创 2021-07-02 17:02:00 · 317 阅读 · 0 评论 -
前端工程化工具总结和对比
前端工程化工具总结和对比包管理工具经过验证、较稳定的构建工具较新的构建工具自动化构建工具近期了解、学习了大量前端工程化工具,需要总结、对比一下它们的种类和功能前端流行工具中文文档汇总入口:Bootstrap中文网包管理工具名称优点缺点npm-安装速度比yarn慢、某些包的依赖问题导致安装失败yarn执行并行安装,速度较npm快-关于npm、yarn对比的文章太多了,选取一个比较典型的总结:npm7时代,优先选择npm系列;yarn可以用来安装包。项目原创 2021-06-29 18:05:26 · 577 阅读 · 0 评论 -
关于利用阿里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 · 608 阅读 · 0 评论 -
HTML可拖动行的表格
HTML可拖动行的表格实现思路实现代码实现思路行拖动的实现思路非常简单,选中一行,往上拖就与上面的行交换位置,往下拖就与下面的行交换位置。问题是如何得到交换行。我见过一个非常详细的教程,它会把表格里的每一行的高度与Y坐标计算出来,换言之,都时是比较e.pageX是否在[rowTop,rowBottom]区间之内。但这也带来第二个问题,有多少行就有多个这样的区间。于是解法就变成取事件源对象,然后再往上取其父对象,如果其父对象是TR元素,就取其[rowTop,rowBottom]区间…思路非常直接,同时也客转载 2021-06-03 14:28:20 · 1337 阅读 · 2 评论 -
HTML标签单击之后维持active状态
HTML标签单击之后维持active状态需求描述实现思路示例代码需求描述在用户单击标签后需要“高亮”该标签,例如:网站导航栏中的各项,在单击某项之后需要将其“高亮”以表明当前正在浏览的项目。实现思路专门用一个CSS类来实现维持样式,例如可以将该类取名为active(模仿:active伪类),在单击事件回调函数中将该标签元素增加active类,并将其余标签元素去掉active类示例代码//HTML<div class="tab" id="1" onclick="clickTab(this原创 2021-05-20 16:15:34 · 12227 阅读 · 6 评论 -
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 · 299 阅读 · 0 评论 -
JS垃圾回收简介
JS垃圾回收初体验如何定义垃圾根垃圾示例一个引用内部算法如何定义垃圾在JavaScript 内存管理中,判断垃圾的标准是可达性(Reachability)。可达是指存储在内存中的数据可通过某种方式访问或使用。根垃圾回收中有一类基本固有可达值,它们是无法被回收的,这些值称为根(roots):当前执行的函数,其局部变量和参数当前嵌套调用链上的其他函数,它们的局部变量和参数全局变量其他一些内部数据垃圾从根开始,通过引用或引用链不可达的所有数据,称为垃圾。JS引擎中有一个后台进程称为垃圾回翻译 2021-03-26 17:44:27 · 277 阅读 · 0 评论 -
记录一下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 · 162 阅读 · 0 评论 -
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 · 231 阅读 · 0 评论