- 博客(77)
- 收藏
- 关注
原创 前端 类数组对象 学习
则是指的一个对象,它具有类似数组的特性,比如有一个 length 属性表示数组的长度,可以通过索引访问其中的元素。数组对象通常是通过类数组对象或类似数组的对象转换而来,但它并不是真正的数组。到这里,我们已经搞清楚类数组对象的概念,那它可以转换成数组吗?下面是类数组对象转换成数组的5种方法。:指的是一个数组,其中的每个元素都是一个对象。这些对象可以包含多个属性,形成一个包含多个对象的数组结构。实际上,它们都是用来存储一组有序数据的数据结构,只是在不同的语境下有不同的称呼。
2024-03-09 13:00:00 533
原创 Angular中手动触发更新检测机制的优缺点及注意事项
在学习angular页面更新的时候,也就是在我之前的博客中都会提到使用angular中手动触发更新检测(通过调用。方法)来解决,但是其实在实际的项目开发中,是不太推荐这种方法解决的,下面我将介绍这个办法的优缺点和需要注意的事项。
2024-03-07 11:00:00 676
原创 Angular变化检测 2.0版本学习
在学习如何在Angular中实现文字逐字显示的过程中,我发现要保证用户的体验感的关键点在于:如何确保实时更新.html页面的内容显示,保证及时在UI界面反应出后端返回的数据。那如何解决这个问题呢?下面是上面博客的进阶版学习---->这篇博客主要是。,话不多说,直接上代码。
2024-03-07 09:00:00 950
原创 Angular 将一个字符串进行逐字显示的方法汇总
公司项目是angular,所以实际中使用,我是要考虑到应用Angular框架中,下面是我想到的一些方法汇总,欢迎大家检阅!1.在组件的HTML模板中使用*ngFor指令和setTimeout函数实现逐字显示效果; 2.使用RxJS的interval操作符和map/pluck/scan/bufferCount操作符;3.使用rjxs的timer操作符和map/pluck/scan/bufferCount操作符.
2024-03-06 18:00:00 975
原创 JS 将一个字符串进行逐字显示的方法汇总
毋庸置疑,现在chatGTP是非常火热的,在这个时候公司项目中提到了AI智能对话UI显示界面模仿chatGTP的UI一样,显示答案不能一蹴而就,而要逐字逐字显示。至此,我先学习一个JS版本的。
2024-03-05 12:15:00 448
原创 Angular 如何让ngModel 不受父表单控件影响,变成独立模式
在项目中使用 ngModel 时,有时候我们需要将 ngModel 设置为独立模式,以避免父表单控件对其进行干扰。例如,当我们在一个表单中使用自定义组件,并且这个组件内部也有自己的 ngModel 时,为了避免冲突,我们可以将这个 ngModel 设置为。在自定义组件中使用 ngModel 时,为了避免父表单控件对其进行干扰,可以将 ngModel 设置为 standalone 模式。可以帮助我们更好地管理 ngModel 的行为,避免不必要的干扰和冲突,以及提供更灵活的配置选项。
2024-03-04 15:45:00 686
原创 CSS 什么是伪类?什么是伪元素?
是用来向元素的特定部分添加特殊样式的关键词,例如::before用于在元素内容前插入内容,::after用于在元素内容后插入内容等。伪元素创建了一个虚拟的元素,允许开发者在元素内的特定位置插入样式和内容。是用来向特定选择器添加特殊效果的关键词,例如:hover用于鼠标悬停时改变元素样式,:active用于元素被点击时改变样式等。伪类是用来选择元素的特定状态或行为,而伪元素是用来选择元素的特定部分。伪类以单冒号(:)开头,伪元素以双冒号(::)开头。
2024-03-04 11:00:00 318
原创 HTTP常见状态码 汇总
部分信息解析汇总:1** 信息类 例如:2** 响应成功:表示动作被成功接收、理解、接受 例如:3** 重定向:为了完成指定的动作,必须接受进一步处理 例如:4** 客户端错误类:请求包含错误语法或者不能正确执行 例如:5** 服务端端错误类:服务器不能正确执行一个正确的请求 例如:
2024-03-03 19:35:59 433
原创 JS中用来截取部分内容的方法有哪些?
在 JavaScript 中,我们可以使用多种方法来截取字符串或数组的部分内容。方法来截取数组的部分内容,与字符串的。对于数组,我们可以使用。
2024-02-22 12:00:00 382
原创 Angular项目中为什么不能在开发者工具中进行Debug?
启用Source Maps后,Angular将会生成与编译后的JavaScript文件对应的Source Maps文件,这样在浏览器的开发者工具中就可以将编译后的JavaScript代码映射回原始的TypeScript代码,方便调试和定位问题。Source Maps是一种文件,它将编译后的JavaScript代码映射回原始的TypeScript代码,以便在开发者工具中显示原始代码而不是编译后的代码。在Angular项目中,我们通常可以通过浏览器的开发者工具(如Chrome开发者工具)进行调试。
2024-02-22 09:00:00 355
原创 Angular升级后运行编译变慢?如何解决?
公司的Angular项目升级后,使用体验感十分不好,运行、编译的时间明显增长,工作效率是十分低下,但奈何公司的大佬们都有自己的事情要忙,结识的大佬也不够多,只能靠自己找度娘了。但是,哎,你还别说,真让我找到了!注意按照上面截图改了之后初始运行整个项目的时间几乎没有太大改变,但是编译时间是有明显改善的!),大家有条件可以自行查看,不过个人觉得上面大大的文章已经十分详细了,完全足够!总结解决办法:添加development构建配置,也就是我们需要手动将。,并将serve中target的。
2024-02-21 22:16:15 828
原创 块级上下文格式(Block Formatting Context,BFC)
块级上下文格式(BFC)是 CSS 中的一个概念,用来描述块级盒子在页面布局中的行为。一个块级上下文格式(BFC)是一个独立的渲染区域,其中的元素布局受到这个上下文中的其他元素的影响,而不受外部元素的影响。
2024-02-21 11:30:00 368
原创 创建对象时 new操作符做了什么
操作符可以实例化一个对象,并且确保构造函数中的属性和方法正确地被应用到新创建的对象上。在 JavaScript 中,使用。下面我们通过代码来详细说明。
2024-02-20 23:25:08 451
原创 Angular中如何实现防抖和节流
在Angular中实现防抖和节流的方法有多种,这篇博客主要是详细介绍两种常用的方法:使用RxJS操作符和使用Angular自带的工具。
2024-02-19 20:30:00 610
原创 JS 深克隆和浅克隆 浅析
深克隆(Deep Clone)和浅克隆(Shallow Clone)是在复制对象或数组时常用的两种概念。它们主要区别在于复制的深。
2024-02-18 19:42:47 447
原创 SSE之fetchEventSource学习
通过之前的SSE学习。和SSE之eventSource。EventSource的限制都来源它不支持POST请求,为了解决上面所陈述的那些限制,我们可以通过fetch的方式完成post相关操作
2024-01-26 12:00:00 660
原创 SSE之EventSource学习
使用EventSource非常简单,只需要在客户端创建一个新的EventSource对象,然后指定要连接的服务器端URL即可。一旦连接建立,服务器端发送的事件将会被自动接收并触发相应的事件处理函数。对象上,EventSource是一个用于接收服务器发送的事件流的API。它允许客户端通过HTTP连接订阅服务器端的事件,并在服务器端发送事件时接收到通知。参考与推荐: 更详细版本强烈推荐大家一定一定要阅读阮一峰大大的文章!SSE 的客户端 API 部署在。在这里想强调一下服务器的。中的第四点的event事件,
2024-01-25 17:30:00 906
原创 Server-Sent Events 学习
SSE(Server-Sent Events,服务器发送事件)是一种用于实现服务器端向客户端实时推送数据的技术。它允许服务器端发送任意数量的事件到客户端,而客户端可以通过EventSource API来订阅这些事件流。
2024-01-24 16:30:00 799
原创 Html5——拖放和释放API
定义在拖动元素上触发的事件,以便在不同阶段处理拖动操作。常用的事件有dragstart(拖动开始)、drag(拖动过程中)、dragend(拖动结束)。HTML5拖放释放API(Drag and Drop API)是一组用于在网页上实现拖放功能的API。它允许用户将网页上的元素拖动到其他位置,并在释放时执行特定的操作。定义允许拖动元素放置的区域。通过监听dragover事件和drop事件来处理放置操作。使用draggable属性将元素标记为可拖动。
2024-01-23 09:00:00 357
原创 Angular combineLatest 操作符学习——保证在某些数据不为空的前提下进行下一步
然后,我们使用 RxJS 中的 combineLatest 操作符将这两个 Observable 对象合并成为一个新的 Observable 对象,它会发出一个数组,数组中包含了 value1 和 value2 两个输入框的最新值。我们使用 subscribe 方法订阅上述合并后的 Observable 对象,当订阅到最新值数组时,我们判断其中的两个值是否都存在,如果存在,则在 runApiWithValues 方法中调用需要执行的 API。当任何一个源 Observable 发出新值时,
2024-01-22 11:30:00 381
原创 Angular 表单的validation校正学习
Angular中的表单valid是指表单中的输入项是否符合预设的规则和条件。在Angular中,可以通过使用表单控件的属性和方法来判断表单的valid状态,例如使用form.valid属性来判断整个表单是否valid,或者使用formControl.valid属性来判断单个表单控件是否valid。在使用表单valid的时候,可以通过在模板中使用ngIf指令来根据valid状态来显示或隐藏相应的内容,或者在组件中使用valid状态来进。
2024-01-20 15:17:19 465
原创 前端 JS篇快问快答
concat()、map()、filter()、forEach()、slice() 方法也不会报错,它们会返回一个新数组或 undefined。虽然 concat() 方法不会改变原数组,但如果原数组中包含对象或数组,那么新数组中的对象或数组仍然会被引用,因此修改新数组中的对象或数组也会影响原数组。:数组中的concat()返回的是新数组,但是为什么有个时候原数组也会受到影响?:数组中的push()和unshift()方法返回的什么?:数组中的pop()和shift() 方法返回的什么?
2024-01-11 11:00:00 363
原创 CSS的transform属性学习
transform是一个复合属性,转换函数可以都写到这个属性中,CSS会按顺序执行这些函数,所以要注意书写顺序,一般来说其格式为transform: translate() rotate() scale() …:当同时使用位移(translate)和其他属性(如旋转、缩放)时,应该将位移函数放到最前面。:如果同时使用多个转换函数,需要注意它们的书写顺序。:当同时使用位移和旋转属性时,位移最好放到最前面。因为旋转会导致元素的坐标系也跟着旋转,如果先旋转再位移,可能会导致效果出错。
2024-01-10 18:00:00 834
原创 Angular中的装饰器有哪些?怎么用?
在下面例子中,我们创建了一个名为ExampleComponent的组件,并使用@HostBinding装饰器将color属性绑定到组件的宿主元素的样式颜色上。因此,当这个组件被渲染时,它的宿主元素(即组件本身)的文本颜色会自动变为蓝色,因为color属性被绑定到了宿主元素的样式颜色上。@HostBinding 装饰器用于将属性绑定到宿主元素上。例如,如果我们有一个指令或组件,并在该指令或组件中使用 @HostBinding 装饰器来绑定样式属性,那么这些样式属性将会自动应用到该指令或组件的宿主元素上。
2024-01-08 17:00:00 999
原创 scroll、offset、client —— JS三大家族
getBoundingClientRect()方法用于获取元素位置,这个方法没有参数,可以获取页面中某个元素的左,上,右和下分别相对浏览器视窗的位置。getBoundingClientRect()是DOM元素到浏览器可视范围的距离(不包含文档卷起的部分)。
2024-01-07 18:00:00 1644
原创 RxJS之fromEvent学习
阅读此博客前,可先阅读博客对RxJS进行简单的了解。fromEvent是 RxJS 中的一个操作符,用于将事件转换为可观察的对象。它的作用是创建一个可观察对象,该对象会监听指定事件源上特定类型的事件,并在事件发生时发出相应的数据。在 RxJS 中,事件源可以是等是事件源对象,eventType是要监听的事件类型(如 click、input、scroll等)。
2024-01-03 17:30:00 457
原创 Rxjs概念 学习
RxJS 的核心概念包括可观察对象(Observable)、观察者(Observer)、操作符(Operators)和调度器(Schedulers)等。RxJS 提供了丰富的属性和方法用于创建、操作和处理可观察对象。方法,将观察者对象订阅到可观察对象上。这样,当可观察对象发出值时,观察者对象的。它基于观察者模式和迭代器模式,提供了丰富的操作符和工具,用于处理和操作数据流。方法会被调用来处理这些值,当可观察对象完成时,观察者对象的。方法,用于处理可观察对象发出的值、错误和完成信号。RxJS 的用法主要包括。
2024-01-02 17:00:00 777
原创 纯前端 文件上传汇总
由于安全原因,当在浏览器中运行的时候,我们是无法直接上传文件到服务器的。所以我们只能使用一些模拟的方法来演示文件上传的效果。最后一句:在实际项目中,文件上传的逻辑是要与服务器端进行交互的,才能实现真正的文件上传功能。以下是汇总的三种方法可以用来模拟文件上传的效果,并且代码可以在浏览器中直接运行。
2023-12-30 13:30:00 369
原创 Angular——:host 和::deep
组件投影是在组件中将其父级html内容(包括html和css)插入到组件的特定区域的技术。::ng-deep是一个特殊的CSS伪类选择器,用于穿透组件样式影响子组件的选择器。它允许在父组件的样式中选择并修改子组件的样式。在Angular中,:host和::ng-deep是用于在组件样式中选择和修改宿主元素和子组件的特殊选择器。组件样式继承是将样式从父组件传递到子组件的一种方式。例如,如果我们想将父组件的一些样式传递给子组件,可以在子组件中使用。在下面示例中,父组件中的html内容将被投射到子组件中。
2023-12-29 13:00:00 451
原创 Angular中的ng-content的妙用你知道多少
在这个例子中,`中的 role="button"的 元素也会被投影进去。因为在 app-child组件中,我们使用了ng-content 的 select[attr.role=button]属性来选择带有 role="button"属性的元素进行插入。所以,无论父组件中有多少个带有 `role="button"` 属性的元素,只要它们被包裹在 `` 组件中,它们都会被投影到 `app-child` 组件中的对应位置。它的作用类似于 HTML 中的。
2023-12-28 15:45:00 375
原创 Angular变化检测学习1.0版本 —— 数据更新时*ngFor 循环的html页面没有更新
在ts文件中定义了一个数组array和一个function,其中function是用于向数组push数据的,在html中的页面中通过*ngFor循环数组array进行内容显示。但是当我在function中一条一条地push数据到数组array中的时候,html页面中的内容并没有更新或者实时更新,例如会出现push5,6条甚至更多数据之后在一起更新在页面上。这种方法就是给数组中的每一个数据提供一个唯一的ID,这能保证检测到数组数据的变化,从而改变html视图。
2023-12-28 11:00:00 416
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人