- 博客(70)
- 收藏
- 关注
RSS订阅原创 前端框架编译器之模板编译
编译原理概述编译原理：是计算机科学的一个分支，研究如何将 高级程序语言 转换为 计算机可执行的目标代码 的技术和理论。高级程序语言：Python、Java、JavaScript、TypeScript、C、C++、Go 等。计算机可执行的目标代码：机器码、汇编语言、字节码、目标代码等。编译器 (Compiler)：是一种将高级编程语言 源代码 转换为计算机可执行代码 目标代码 的软件工具。它是将源代码翻译成机器语言的程序。以下是编译器的基本工作流程：词法分析 [Lexical Analysi
2024-04-27 17:56:42
762
原创 Angular 变化检测及解决 Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has change
最近遇到了一个问题：最终在这里找到了解决方案：https://angular.io/errors/NG0100。
2022-12-02 23:10:16
2746
原创 flex 布局设置最后一个元素靠右 margin-left: auto
flex 布局设置最后一个元素靠右 margin-left: auto。
2022-11-25 19:49:18
2317
原创 对 scroll 的认知和探索
由于浏览器对于滚动 scrollLeft 在 RTL 中的含义并不一致，CdkScrollable的scrollTo方法对浏览器原生scrollTo方法进行了规范化：left 和 right 总是指滚动容器的左侧和右侧，而与布局方向无关。第三，当元素上绑定了CdkScrollable指令，该指令会调用scrollDispatcher的register方法，将该scrollable引用及它对应的滚动事件订阅作为键值对注册到scrollContainers字典中。：读取或设置一个元素的内容垂直滚动的距离。
2022-11-02 22:03:04
413
原创 sortablejs的使用实践
sortablejs 是一个强大的JavaScript拖拽库。今天介绍一下sortablejs在Angular项目中的基本使用。
2022-10-16 23:42:55
6594
1
原创 IntersectionObserver 交叉观察者 -- 观察目标元素与可视区域的交叉区域
IntersectionObserver 提供了一种异步观察目标元素与祖先元素或顶级文档视口的交集变化的方法。IntersectionObserver接收两个参数，分别是callback和options。options可选，有默认值。
2022-10-11 22:54:17
339
原创 从输入 URL 到页面加载完成，发生了什么？
首先我们需要通过 DNS（域名解析系统）将 URL 解析为对应的 IP 地址。然后与这个 IP 地址确定的那台服务器建立起 TCP 网络连接，随后我们向服务端抛出我们的 HTTP 请求，服务端处理完我们的请求之后，把目标数据放在 HTTP 响应里返回给客户端，拿到响应数据的浏览器就可以开始走一个渲染的流程。渲染完毕，页面便呈现给了用户，并时刻等待响应用户的操作。...
2022-08-10 23:31:58
379
原创 scroll 滚动事件节流、requestAnimationFrame、性能优化
由于滚动事件可以高速触发，因此事件处理程序不应执行计算成本高的操作，例如 DOM 修改。建议使用 requestAnimationFrame来节流，使用AddEventListenerOptions的passive来提供滚屏性能，防止卡顿。
2022-07-10 23:45:00
2676
原创 深入理解 addEventListener
参数一：事件类型，比如 click、mouseenter、drag等。参数二：事件被触发时的回调函数。options对象：useCapture: 默认值为false，事件将在冒泡阶段触发。 如果为true，事件将在捕获阶段触发。once: 表示 listener 在添加之后是否最多只调用一次。如果是 true， listener 会在其被调用之后自动移除。passive: 设置为 true 时，表示 listener 永远不会调用 preventDefault......
2022-07-10 23:15:31
6505
原创 mouseover 和 mouseenter
经过自身盒子触发，经过子盒子也触发。【mouseover会冒泡，鼠标从外部移入子元素或从父元素移入子元素，都会先触发子元素的mouseover再触发父元素的mouseover。】 只经过自身盒子触发，不冒泡。 ： 离开自身盒子触发自身的mouseout，进入子盒子也触发自身的mouseout。【 mouseout冒泡，从子元素进入父元素时，即触发子元素的mouseout，也会触发父元素的mouseout。】：仅在自身盒子时被触发，不冒泡。结论：对于同一个元素，鼠标移入后，会先触发mouseover，再触发m
2022-07-10 21:57:01
706
原创 stopPropagation 与 stopImmediatePropagation
stopPropagation 阻止冒泡至父元素。stopImmediatePropagation 阻止冒泡至当前元素的剩余的相同类型的事件。
2022-07-10 14:53:02
299
原创 事件流、事件捕获 和 事件冒泡
当事件发生时，会在发生事件的元素节点与DOM树根节点之间按照特定的顺序进行传播， 这个过程称之为事件流。【当页面触发一个事件时，会按照一定的顺序来响应事件，事件的响应过程称为事件流。】......
2022-07-10 14:18:54
187
原创 Sass系统学习
一、变量二、嵌套三、父选择器 &父选择器 & 是 Sass 发明的一种特殊选择器，在嵌套选择器中用于引用外部选择器。它可以以更复杂的方式来复用外部选择器。四、插值 #{表达式}用来输出或计算一个表达式的内容。字符串与变量的拼接使用 。常用于在写mixins时根据传入的参数创建选择器。五、函数 @function 和 @return 和 结合，用于定义可在 SassScript 表达式中使用的自定义函数，函数最后通过@......
2022-06-23 00:37:54
2027
原创 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
21022
1
原创 Angular CDK Scrolling 之 ViewportRuler（源码阅读）
ViewportRuler 是一种可注入的服务，用于衡量浏览器视口的范围
2022-06-19 23:34:56
235
原创 Chrome DevTools的performance面板查看性能
Record 按钮打开想要记录的页面，然后重新加载页面。–> 按 Record 按钮开始一次新的记录，记录时，Record按钮变红。–> 执行页面交互，然后按 Record 按钮停止记录。记录完成后，我们可以通过以下方式去查看我们关心的那部分的数据。一次记录完成之后，可以在Summary区域查看每一项工作花费的时间............
2022-06-12 19:03:21
901
原创 渲染树的构建、回流、重绘、布局抖动
以下所有属性或方法，当在 JavaScript 中请求/调用时，将触发浏览器同步计算样式和布局。 这也称为回流或布局抖动，是常见的性能瓶颈...
2022-06-11 18:49:28
626
原创 Angular路由的一些思考与验证
1. 使用replaceUrl:true来解决实际问题。 2. ActivatedRoute 查询路由数据时什么时候用params?什么时候用queryParams?什么时候用snapshot快照？ 3. Router什么时候用navigate？什么时候用navigateUrl?
2022-05-15 17:12:50
682
1
原创 Angular 路由小记
Route属性说明pathMatch路径匹配策略，为 “prefix” 或 “full” 之一。默认为“prefix”。默认情况下，路由器会从左边开始检查 URL 中的各个元素，以查看此 URL 是否匹配给定的路径，遇到任何一个匹配的，就停止。比如，‘/team/11/user’ 能匹配 ‘team/:id’。路径匹配策略 “full” 表示与整个 URL 匹配。重定向空路径路由时，执行此操作很重要。否则，因为空路径是任何 URL 的前缀，所以路由器即使在导航到重定向目标时也会进行重
2022-05-12 23:39:14
284
原创 Angular原生动态加载器与Portal
Angular 动态加载组件的两种方式。 Angular动态加载内嵌视图。 Angular cdk 之 Portal 支持动态加载组件或视图。原生动态加载器与portal的区别是什么？
2022-05-12 21:35:20
667
原创 Angular cdk 之 Overlay 源码分析
文章目录一、Overlay简介二、Overlay 源码阅读2.1 OverlayConfig 浮层配置2.2 OverlayContainer 浮层容器2.3 Overlay 服务2.3.1 Overlay服务对外提供了两个方法2.3.2 创建浮层2.3.3 create方法具体做了什么？2.4 OverlayRef2.4.1 OverlayReference2.4.2 attach 方法具体做了哪些事情？2.5 OverlayPositionBuilder （overlay定位策略
2022-05-12 20:59:57
1553
原创 灵活可配置可拖拽的栅格布局 angular-gridster2
最近新认识了一个包，跟大家分享一下：angular-gridster2。它是一个功能强大的，支持动态配置，支持拖拽改变卡片大小，支持拖拽变更页面布局的网格布局组件。https://www.npmjs.com/package/angular-gridster2...
2022-05-12 20:25:09
1134
1
原创 Angular之ViewContainerRef、ViewRef、EmbeddedViewRef、TemplateRef
文章目录1. ViewContainerRef 视图容器2. EmbeddedViewRef 嵌入式视图3. ViewRef 视图（1）视图 view（2）视图树4. 实际应用 -- ngTemplateOutlet指令的实现1. ViewContainerRef 视图容器ViewContainerRef 可以将一个或多个视图附着到组件中的容器。abstract class ViewContainerRef { abstract element: ElementRef abstract inj
2022-05-03 01:39:25
931
原创 NgZone：runOutsideAngular和run结合使用，减少变化检测，提高性能
Angular变化检测只会由运行于 NgZone 中的异步操作触发。 runOutsideAngular和run结合使用，减少变化检测，提高性能。 会触发变化检测的行为有：(1) 任何浏览器事件，比如click、keydown等。(2) setInterval() 、setTimeout。 (3) http请求。
2022-03-07 20:29:32
1639
原创 Angular报错：Can‘t bind to ‘ngModel‘ since it isn‘t a known property of ‘xxx‘
Angular报错：Can't bind to 'ngModel' since it isn't a known property of 'xxx'。原因是没有导入...
2022-02-15 22:29:24
1161
原创 Angular测试中 fakeAsync、tick、flush、flushMicrotasks
fakeAsync包装一个函数，以便在 fakeAsync Zone 中执行。tick为fakeAsync Zone 中的计时器模拟异步时间流逝。比如 tick(1000) 模拟时间流逝1秒。通过flush`清空宏任务队列，并返回本应该经过的毫秒数`，来为 fakeAsync Zone 中的计时器模拟异步时间流逝。flushMicrotasks刷新所有未完成的微任务...
2022-02-11 13:09:32
630
原创 GitHub Copilot插件 - AI程序员
Copilot 是一个AI代码块程序员，它会根据你输入的提示，自动给你提供可选的代码块...
2022-01-29 13:09:07
32507
16
原创 Angular激活路由前解析数据、从路由中获取信息
Resolve接口定义了开始导航时调用 `resolve()` 路由器在最终激活路由之前等待数据解析。ActivatedRoute允许访问与该组件关联的路由的信息。用于遍历 `RouterState` 树并从节点提取信息。
2022-01-20 00:34:25
1148
原创 html内容与背景图片的相对位置保持不变 background-position: center
缩放屏幕的时候，希望背景图和内容元素的相对位置保持不变。background-position: center;
2022-01-17 23:55:57
958
原创 swiper分页器踩坑
Swiper 分页器点快了，或者切换几次，就会出现乱跳，跳的图跟点击的圆点不对应，怎么办？使用touchEventsTarget...
2022-01-17 23:15:59
1245
原创 RxJS的 combineLatest 和 forkJoin
combineLatest在需要订阅多个数据流的最新数据时使用。forkJoin在需要等多个接口返回数据后才能进行下一步操作时使用。combineLatest和forkJoin的区别...
2022-01-17 22:14:21
626
原创 Angular 组件Dom测试
Angular组件Dom测试中常用的一下方法及类，比如：createComponent()、ComponentFixture、nativeElement、DebugElement、By.css()等...
2022-01-03 17:50:31
2053
原创 Angular 组件类测试
Angular测试组件的基础知识 - 测试组件类，包括测试没有依赖的组件类，测试有依赖的组件类，以及测试@Input()和测试@Output()...
2022-01-03 14:31:01
746
原创 Angular中的 EventEmitter、@Output、@Input、OnChanges
EventEmitterl类及使用 EventEmitter 自定义事件。父子组件之间的数据传递及共享。监听@Input属性变化的两种方式：setter和ngOnChanges钩子。SimpleChanges对象等...
2022-01-03 13:32:32
1637
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人