前端开发
关注
分享
扫一扫
文章平均质量分 62
回顾基础，更新知识
江小虫儿
该吃吃，该喝喝，该学学。
展开
-
记录前端小细碎
13位时间戳转换成10位时间戳~原创 2022-12-08 20:19:33 · 339 阅读 · 1 评论 -
如何实现全屏？
全屏、退出全屏、全屏事件、浏览器兼容性原创 2022-12-06 11:49:04 · 1638 阅读 · 0 评论 -
网站如何实现整体变灰？
探索 css filter 的神秘之处转载 2022-12-06 11:11:18 · 363 阅读 · 0 评论 -
Angular 变化检测及解决 Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has change
最近遇到了一个问题：最终在这里找到了解决方案：https://angular.io/errors/NG0100。原创 2022-12-02 23:10:16 · 3715 阅读 · 0 评论 -
flex 布局设置最后一个元素靠右 margin-left: auto
flex 布局设置最后一个元素靠右 margin-left: auto。原创 2022-11-25 19:49:18 · 2533 阅读 · 0 评论 -
对 scroll 的认知和探索
由于浏览器对于滚动 scrollLeft 在 RTL 中的含义并不一致，CdkScrollable的scrollTo方法对浏览器原生scrollTo方法进行了规范化：left 和 right 总是指滚动容器的左侧和右侧，而与布局方向无关。第三，当元素上绑定了CdkScrollable指令，该指令会调用scrollDispatcher的register方法，将该scrollable引用及它对应的滚动事件订阅作为键值对注册到scrollContainers字典中。：读取或设置一个元素的内容垂直滚动的距离。原创 2022-11-02 22:03:04 · 1075 阅读 · 0 评论 -
sortablejs的使用实践
sortablejs 是一个强大的JavaScript拖拽库。今天介绍一下sortablejs在Angular项目中的基本使用。原创 2022-10-16 23:42:55 · 8201 阅读 · 1 评论 -
sortablejs 实践
在Angular项目中使用sortablejs实现拖拽。原创 2022-10-13 23:04:11 · 837 阅读 · 0 评论 -
IntersectionObserver 交叉观察者 -- 观察目标元素与可视区域的交叉区域
IntersectionObserver 提供了一种异步观察目标元素与祖先元素或顶级文档视口的交集变化的方法。IntersectionObserver接收两个参数，分别是callback和options。options可选，有默认值。原创 2022-10-11 22:54:17 · 466 阅读 · 0 评论 -
从输入 URL 到页面加载完成，发生了什么？
首先我们需要通过 DNS（域名解析系统）将 URL 解析为对应的 IP 地址。然后与这个 IP 地址确定的那台服务器建立起 TCP 网络连接，随后我们向服务端抛出我们的 HTTP 请求，服务端处理完我们的请求之后，把目标数据放在 HTTP 响应里返回给客户端，拿到响应数据的浏览器就可以开始走一个渲染的流程。渲染完毕，页面便呈现给了用户，并时刻等待响应用户的操作。...原创 2022-08-10 23:31:58 · 468 阅读 · 0 评论 -
在数组中间插入元素
👍🏻原创 2022-07-24 01:19:35 · 1544 阅读 · 0 评论 -
scroll 滚动事件节流、requestAnimationFrame、性能优化
由于滚动事件可以高速触发，因此事件处理程序不应执行计算成本高的操作，例如 DOM 修改。建议使用 requestAnimationFrame来节流，使用AddEventListenerOptions的passive来提供滚屏性能，防止卡顿。原创 2022-07-10 23:45:00 · 3646 阅读 · 0 评论 -
深入理解 addEventListener
参数一：事件类型，比如 click、mouseenter、drag等。参数二：事件被触发时的回调函数。options对象：useCapture: 默认值为false，事件将在冒泡阶段触发。 如果为true，事件将在捕获阶段触发。once: 表示 listener 在添加之后是否最多只调用一次。如果是 true， listener 会在其被调用之后自动移除。passive: 设置为 true 时，表示 listener 永远不会调用 preventDefault......原创 2022-07-10 23:15:31 · 6913 阅读 · 0 评论 -
mouseover 和 mouseenter
经过自身盒子触发，经过子盒子也触发。【mouseover会冒泡，鼠标从外部移入子元素或从父元素移入子元素，都会先触发子元素的mouseover再触发父元素的mouseover。】 只经过自身盒子触发，不冒泡。 ： 离开自身盒子触发自身的mouseout，进入子盒子也触发自身的mouseout。【 mouseout冒泡，从子元素进入父元素时，即触发子元素的mouseout，也会触发父元素的mouseout。】：仅在自身盒子时被触发，不冒泡。结论：对于同一个元素，鼠标移入后，会先触发mouseover，再触发m原创 2022-07-10 21:57:01 · 819 阅读 · 0 评论 -
stopPropagation 与 stopImmediatePropagation
stopPropagation 阻止冒泡至父元素。stopImmediatePropagation 阻止冒泡至当前元素的剩余的相同类型的事件。原创 2022-07-10 14:53:02 · 440 阅读 · 0 评论 -
事件流、事件捕获 和 事件冒泡
当事件发生时，会在发生事件的元素节点与DOM树根节点之间按照特定的顺序进行传播， 这个过程称之为事件流。【当页面触发一个事件时，会按照一定的顺序来响应事件，事件的响应过程称为事件流。】......原创 2022-07-10 14:18:54 · 379 阅读 · 0 评论 -
Sass系统学习
一、变量二、嵌套三、父选择器 &父选择器 & 是 Sass 发明的一种特殊选择器，在嵌套选择器中用于引用外部选择器。它可以以更复杂的方式来复用外部选择器。四、插值 #{表达式}用来输出或计算一个表达式的内容。字符串与变量的拼接使用 。常用于在写mixins时根据传入的参数创建选择器。五、函数 @function 和 @return 和 结合，用于定义可在 SassScript 表达式中使用的自定义函数，函数最后通过@......原创 2022-06-23 00:37:54 · 2734 阅读 · 0 评论 -
flex-shrink 解决实际问题（flex-shrink:0避免图片被压扁）
flex-shrink 属性指定了 flex 元素的收缩规则，默认值是1。在flex 元素的默认宽度之和大于容器的宽度时候，元素会发生收缩，其收缩的大小的依据是 flex-shrink 值。子元素的宽度之和为 100+100+300+300=800px，每个子的默认flex-shrink值是1。当父容器被压缩到小于800px的时候，比如压缩到560px时，里面的子元素也会被相应地压缩。各个子元素被压缩掉多少宽度呢？4个子div的宽度比是 1:1:3:3，4个子元素的默认flex-shrink值都是1，原创 2022-06-22 23:54:08 · 21905 阅读 · 1 评论 -
Chrome DevTools的performance面板查看性能
Record 按钮打开想要记录的页面，然后重新加载页面。–> 按 Record 按钮开始一次新的记录，记录时，Record按钮变红。–> 执行页面交互，然后按 Record 按钮停止记录。记录完成后，我们可以通过以下方式去查看我们关心的那部分的数据。一次记录完成之后，可以在Summary区域查看每一项工作花费的时间............原创 2022-06-12 19:03:21 · 1169 阅读 · 0 评论 -
渲染树的构建、回流、重绘、布局抖动
以下所有属性或方法，当在 JavaScript 中请求/调用时，将触发浏览器同步计算样式和布局。 这也称为回流或布局抖动，是常见的性能瓶颈...原创 2022-06-11 18:49:28 · 1123 阅读 · 0 评论 -
GitHub Copilot插件 - AI程序员
Copilot 是一个AI代码块程序员，它会根据你输入的提示，自动给你提供可选的代码块...原创 2022-01-29 13:09:07 · 32909 阅读 · 16 评论 -
html内容与背景图片的相对位置保持不变 background-position: center
缩放屏幕的时候，希望背景图和内容元素的相对位置保持不变。background-position: center;原创 2022-01-17 23:55:57 · 1289 阅读 · 0 评论 -
swiper分页器踩坑
Swiper 分页器点快了，或者切换几次，就会出现乱跳，跳的图跟点击的圆点不对应，怎么办？使用touchEventsTarget...原创 2022-01-17 23:15:59 · 1450 阅读 · 0 评论 -
RxJS的 combineLatest 和 forkJoin
combineLatest在需要订阅多个数据流的最新数据时使用。forkJoin在需要等多个接口返回数据后才能进行下一步操作时使用。combineLatest和forkJoin的区别...原创 2022-01-17 22:14:21 · 719 阅读 · 0 评论 -
Angular 组件Dom测试
Angular组件Dom测试中常用的一下方法及类，比如：createComponent()、ComponentFixture、nativeElement、DebugElement、By.css()等...原创 2022-01-03 17:50:31 · 2653 阅读 · 0 评论 -
Angular 组件类测试
Angular测试组件的基础知识 - 测试组件类，包括测试没有依赖的组件类，测试有依赖的组件类，以及测试@Input()和测试@Output()...原创 2022-01-03 14:31:01 · 805 阅读 · 0 评论 -
Angular中的 EventEmitter、@Output、@Input、OnChanges
EventEmitterl类及使用 EventEmitter 自定义事件。父子组件之间的数据传递及共享。监听@Input属性变化的两种方式：setter和ngOnChanges钩子。SimpleChanges对象等...原创 2022-01-03 13:32:32 · 2075 阅读 · 0 评论 -
Jasmine测试中 toHaveBeenCalled、toHaveBeenCalledWith、toHaveBeenCalledTimes
Jasmine中的 toHaveBeenCalled、toHaveBeenCalledWith、toHaveBeenCalledTimes的作用及示例...原创 2021-12-31 15:18:55 · 2716 阅读 · 0 评论 -
Jasmine测试中 Spy.and、Spy.calls、Spy.withArgs的强大之处
最近发现，在测试中遇到的很多困难，其实Jasmine已经给我们准备好了解决方案。原创 2021-12-31 14:42:55 · 678 阅读 · 0 评论 -
CSS选择器及权重计算
通过【CSS选择器】来控制HTML页面中的元素...原创 2021-10-17 13:38:04 · 202 阅读 · 0 评论 -
标签的显示模式（display）
块级元素、行内元素、行内块元素等重点知识的总结...原创 2021-10-17 11:16:12 · 235 阅读 · 0 评论 -
HTML 拖放功能 - Drag&Drop
Drag&Drop 拖拽功能的基本实现方法，DragEvent，DataTransfer等重要接口的解析...原创 2021-12-29 19:08:43 · 3303 阅读 · 0 评论 -
Jasmine测试中 spyOn、spyOnProperty、createSpy、createSpyObj
常用的Jasmine测试方法 spyOn、spyOnProperty、createSpy、createSpyObj 等关键点的总结和示例...原创 2021-12-28 23:33:56 · 2066 阅读 · 0 评论 -
JavaScript 自定义事件、触发事件
自定义事件的基本步骤：创建事件、初始化事件、事件监听、事件的触发...原创 2021-12-17 00:27:11 · 3627 阅读 · 0 评论 -
好用的git命令
细讲几个常用的git命令：git批量删除分支；git cherry-pick commitID拷贝commit；git stash 存储未完成的修改；git打tag等...原创 2021-12-16 23:15:22 · 453 阅读 · 0 评论 -
Mac使用brew安装mysql并将脚本数据导入数据库
分享实操过程：Mac使用brew安装mysql。 --> 通过命令行将sql脚本数据导入数据库。--> Navicat Premium 可视化数据库管理工具...原创 2021-12-11 21:03:44 · 1129 阅读 · 0 评论 -
重启n年前的vue项目时遇到的问题及解决方法
问题一：node sass 不再支持当前环境。问题二：找不到axios module。Error: Node Sass does not yet support your current environment: OS X 64-bit with Unsupported ...原创 2021-12-11 14:15:31 · 1214 阅读 · 0 评论 -
从gitee迁移仓库到github
从gitee迁移仓库到github原创 2021-12-11 11:09:17 · 1722 阅读 · 1 评论 -
Mac 配置 github ssh 公钥
使用git clone命令时遇到的问题及解决方案。The authenticity of host 'github.com' can't be established.git@github.com: Permission denied (publickey).fatal: Could not read from remote repository.Please make sure you have the correct access rightsand the repository exist原创 2021-10-11 00:24:14 · 700 阅读 · 0 评论 -
Mac上安装并使用 nvm
在Mac上安装node包管理工具nvm，以及nvm的常用命令列举和举例...原创 2021-10-09 00:15:21 · 427 阅读 · 0 评论