前端知识总结
文章平均质量分 64
crary,记忆
这个作者很懒,什么都没留下…
展开
-
Angular Subject和BehaviorSubject之间的区别
缓存最新值就是保存了最新值的意思,也就是说BehaviorSubject 从它订阅开始就一定会收到值,要不就是初始值,要不就是最新一次的next()方法的传递的值。换句话说,BehaviorSubject从订阅开始就会向订阅者发送值,确保订阅者能够获取到初始值或者最新值。但是Subject对象是收到从它订阅开始之后next()传递的最新值,订阅时不会收到任何值!会缓存最新的值,并在有新的订阅者订阅时立即发送这个最新值给订阅者。因为它缓存的是最新的值,并不是缓存所有值!原创 2024-04-24 09:00:00 · 1113 阅读 · 0 评论 -
HTTP常见状态码 汇总
部分信息解析汇总:1** 信息类 例如:2** 响应成功:表示动作被成功接收、理解、接受 例如:3** 重定向:为了完成指定的动作,必须接受进一步处理 例如:4** 客户端错误类:请求包含错误语法或者不能正确执行 例如:5** 服务端端错误类:服务器不能正确执行一个正确的请求 例如:原创 2024-03-03 19:35:59 · 435 阅读 · 0 评论 -
Angular 如何让ngModel 不受父表单控件影响,变成独立模式
在项目中使用 ngModel 时,有时候我们需要将 ngModel 设置为独立模式,以避免父表单控件对其进行干扰。例如,当我们在一个表单中使用自定义组件,并且这个组件内部也有自己的 ngModel 时,为了避免冲突,我们可以将这个 ngModel 设置为。在自定义组件中使用 ngModel 时,为了避免父表单控件对其进行干扰,可以将 ngModel 设置为 standalone 模式。可以帮助我们更好地管理 ngModel 的行为,避免不必要的干扰和冲突,以及提供更灵活的配置选项。原创 2024-03-04 15:45:00 · 710 阅读 · 0 评论 -
CSS 什么是伪类?什么是伪元素?
是用来向元素的特定部分添加特殊样式的关键词,例如::before用于在元素内容前插入内容,::after用于在元素内容后插入内容等。伪元素创建了一个虚拟的元素,允许开发者在元素内的特定位置插入样式和内容。是用来向特定选择器添加特殊效果的关键词,例如:hover用于鼠标悬停时改变元素样式,:active用于元素被点击时改变样式等。伪类是用来选择元素的特定状态或行为,而伪元素是用来选择元素的特定部分。伪类以单冒号(:)开头,伪元素以双冒号(::)开头。原创 2024-03-04 11:00:00 · 323 阅读 · 0 评论 -
前端 类数组对象 学习
则是指的一个对象,它具有类似数组的特性,比如有一个 length 属性表示数组的长度,可以通过索引访问其中的元素。数组对象通常是通过类数组对象或类似数组的对象转换而来,但它并不是真正的数组。到这里,我们已经搞清楚类数组对象的概念,那它可以转换成数组吗?下面是类数组对象转换成数组的5种方法。:指的是一个数组,其中的每个元素都是一个对象。这些对象可以包含多个属性,形成一个包含多个对象的数组结构。实际上,它们都是用来存储一组有序数据的数据结构,只是在不同的语境下有不同的称呼。原创 2024-03-09 13:00:00 · 557 阅读 · 0 评论 -
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 · 990 阅读 · 0 评论 -
JS 将一个字符串进行逐字显示的方法汇总
毋庸置疑,现在chatGTP是非常火热的,在这个时候公司项目中提到了AI智能对话UI显示界面模仿chatGTP的UI一样,显示答案不能一蹴而就,而要逐字逐字显示。至此,我先学习一个JS版本的。原创 2024-03-05 12:15:00 · 514 阅读 · 0 评论 -
Angular中手动触发更新检测机制的优缺点及注意事项
在学习angular页面更新的时候,也就是在我之前的博客中都会提到使用angular中手动触发更新检测(通过调用。方法)来解决,但是其实在实际的项目开发中,是不太推荐这种方法解决的,下面我将介绍这个办法的优缺点和需要注意的事项。原创 2024-03-07 11:00:00 · 726 阅读 · 0 评论 -
Angular变化检测 2.0版本学习
在学习如何在Angular中实现文字逐字显示的过程中,我发现要保证用户的体验感的关键点在于:如何确保实时更新.html页面的内容显示,保证及时在UI界面反应出后端返回的数据。那如何解决这个问题呢?下面是上面博客的进阶版学习---->这篇博客主要是。,话不多说,直接上代码。原创 2024-03-07 09:00:00 · 984 阅读 · 0 评论 -
Angular升级后运行编译变慢?如何解决?
公司的Angular项目升级后,使用体验感十分不好,运行、编译的时间明显增长,工作效率是十分低下,但奈何公司的大佬们都有自己的事情要忙,结识的大佬也不够多,只能靠自己找度娘了。但是,哎,你还别说,真让我找到了!注意按照上面截图改了之后初始运行整个项目的时间几乎没有太大改变,但是编译时间是有明显改善的!),大家有条件可以自行查看,不过个人觉得上面大大的文章已经十分详细了,完全足够!总结解决办法:添加development构建配置,也就是我们需要手动将。,并将serve中target的。原创 2024-02-21 22:16:15 · 871 阅读 · 0 评论 -
Angular项目中为什么不能在开发者工具中进行Debug?
启用Source Maps后,Angular将会生成与编译后的JavaScript文件对应的Source Maps文件,这样在浏览器的开发者工具中就可以将编译后的JavaScript代码映射回原始的TypeScript代码,方便调试和定位问题。Source Maps是一种文件,它将编译后的JavaScript代码映射回原始的TypeScript代码,以便在开发者工具中显示原始代码而不是编译后的代码。在Angular项目中,我们通常可以通过浏览器的开发者工具(如Chrome开发者工具)进行调试。原创 2024-02-22 09:00:00 · 372 阅读 · 0 评论 -
创建对象时 new操作符做了什么
操作符可以实例化一个对象,并且确保构造函数中的属性和方法正确地被应用到新创建的对象上。在 JavaScript 中,使用。下面我们通过代码来详细说明。原创 2024-02-20 23:25:08 · 455 阅读 · 0 评论 -
块级上下文格式(Block Formatting Context,BFC)
块级上下文格式(BFC)是 CSS 中的一个概念,用来描述块级盒子在页面布局中的行为。一个块级上下文格式(BFC)是一个独立的渲染区域,其中的元素布局受到这个上下文中的其他元素的影响,而不受外部元素的影响。原创 2024-02-21 11:30:00 · 374 阅读 · 0 评论 -
JS如何提取URL中的参数并以jason格式返回结果
【代码】JS如何提取URL中的参数并以jason格式返回结果。原创 2024-02-20 11:00:00 · 845 阅读 · 0 评论 -
ES6中的Map数据结构的键可以是哪些数据类型
Map的键可以是任何数据类型,包括对象、函数、原始类型等。原创 2024-02-24 10:00:00 · 827 阅读 · 0 评论 -
Map 和 Set 学习
在 JavaScript 中,Map和Set是 ES6 引入的两种新的数据结构,用于存储和管理数据。原创 2024-02-24 19:15:00 · 2090 阅读 · 0 评论 -
JS 深克隆和浅克隆 浅析
深克隆(Deep Clone)和浅克隆(Shallow Clone)是在复制对象或数组时常用的两种概念。它们主要区别在于复制的深。原创 2024-02-18 19:42:47 · 499 阅读 · 0 评论 -
JS箭头函数学习
箭头函数是 ES6 中引入的一种新的函数声明语法,它提供了更简洁的语法形式,并且具有一些特点和注意事项。原创 2024-02-23 11:15:00 · 873 阅读 · 0 评论 -
JS中用来截取部分内容的方法有哪些?
在 JavaScript 中,我们可以使用多种方法来截取字符串或数组的部分内容。方法来截取数组的部分内容,与字符串的。对于数组,我们可以使用。原创 2024-02-22 12:00:00 · 436 阅读 · 0 评论 -
JS 数组中的splice方法汇总
方法是 JavaScript 数组对象的一个方法,用于对数组进行增、删、改操作。原创 2024-02-21 09:00:00 · 496 阅读 · 0 评论 -
Angular中如何实现防抖和节流
在Angular中实现防抖和节流的方法有多种,这篇博客主要是详细介绍两种常用的方法:使用RxJS操作符和使用Angular自带的工具。原创 2024-02-19 20:30:00 · 658 阅读 · 0 评论 -
防抖和节流 简介
防抖和节流都是用来控制函数执行频率的技术,可以用来提高性能和优化用户体验。原创 2024-02-18 19:00:00 · 469 阅读 · 0 评论 -
Html5——拖放和释放API
定义在拖动元素上触发的事件,以便在不同阶段处理拖动操作。常用的事件有dragstart(拖动开始)、drag(拖动过程中)、dragend(拖动结束)。HTML5拖放释放API(Drag and Drop API)是一组用于在网页上实现拖放功能的API。它允许用户将网页上的元素拖动到其他位置,并在释放时执行特定的操作。定义允许拖动元素放置的区域。通过监听dragover事件和drop事件来处理放置操作。使用draggable属性将元素标记为可拖动。原创 2024-01-23 09:00:00 · 440 阅读 · 0 评论 -
SSE之fetchEventSource学习
通过之前的SSE学习。和SSE之eventSource。EventSource的限制都来源它不支持POST请求,为了解决上面所陈述的那些限制,我们可以通过fetch的方式完成post相关操作原创 2024-01-26 12:00:00 · 853 阅读 · 0 评论 -
SSE之EventSource学习
使用EventSource非常简单,只需要在客户端创建一个新的EventSource对象,然后指定要连接的服务器端URL即可。一旦连接建立,服务器端发送的事件将会被自动接收并触发相应的事件处理函数。对象上,EventSource是一个用于接收服务器发送的事件流的API。它允许客户端通过HTTP连接订阅服务器端的事件,并在服务器端发送事件时接收到通知。参考与推荐: 更详细版本强烈推荐大家一定一定要阅读阮一峰大大的文章!SSE 的客户端 API 部署在。在这里想强调一下服务器的。中的第四点的event事件,原创 2024-01-25 17:30:00 · 969 阅读 · 0 评论 -
Angular 表单的validation校正学习
Angular中的表单valid是指表单中的输入项是否符合预设的规则和条件。在Angular中,可以通过使用表单控件的属性和方法来判断表单的valid状态,例如使用form.valid属性来判断整个表单是否valid,或者使用formControl.valid属性来判断单个表单控件是否valid。在使用表单valid的时候,可以通过在模板中使用ngIf指令来根据valid状态来显示或隐藏相应的内容,或者在组件中使用valid状态来进。原创 2024-01-20 15:17:19 · 503 阅读 · 0 评论 -
前端 JS篇快问快答
concat()、map()、filter()、forEach()、slice() 方法也不会报错,它们会返回一个新数组或 undefined。虽然 concat() 方法不会改变原数组,但如果原数组中包含对象或数组,那么新数组中的对象或数组仍然会被引用,因此修改新数组中的对象或数组也会影响原数组。:数组中的concat()返回的是新数组,但是为什么有个时候原数组也会受到影响?:数组中的push()和unshift()方法返回的什么?:数组中的pop()和shift() 方法返回的什么?原创 2024-01-11 11:00:00 · 365 阅读 · 0 评论 -
CSS的transform属性学习
transform是一个复合属性,转换函数可以都写到这个属性中,CSS会按顺序执行这些函数,所以要注意书写顺序,一般来说其格式为transform: translate() rotate() scale() …:当同时使用位移(translate)和其他属性(如旋转、缩放)时,应该将位移函数放到最前面。:如果同时使用多个转换函数,需要注意它们的书写顺序。:当同时使用位移和旋转属性时,位移最好放到最前面。因为旋转会导致元素的坐标系也跟着旋转,如果先旋转再位移,可能会导致效果出错。原创 2024-01-10 18:00:00 · 908 阅读 · 0 评论 -
Angular中的装饰器有哪些?怎么用?
在下面例子中,我们创建了一个名为ExampleComponent的组件,并使用@HostBinding装饰器将color属性绑定到组件的宿主元素的样式颜色上。因此,当这个组件被渲染时,它的宿主元素(即组件本身)的文本颜色会自动变为蓝色,因为color属性被绑定到了宿主元素的样式颜色上。@HostBinding 装饰器用于将属性绑定到宿主元素上。例如,如果我们有一个指令或组件,并在该指令或组件中使用 @HostBinding 装饰器来绑定样式属性,那么这些样式属性将会自动应用到该指令或组件的宿主元素上。原创 2024-01-08 17:00:00 · 1019 阅读 · 0 评论 -
scroll、offset、client —— JS三大家族
getBoundingClientRect()方法用于获取元素位置,这个方法没有参数,可以获取页面中某个元素的左,上,右和下分别相对浏览器视窗的位置。getBoundingClientRect()是DOM元素到浏览器可视范围的距离(不包含文档卷起的部分)。原创 2024-01-07 18:00:00 · 1661 阅读 · 0 评论 -
纯前端 文件预览方法汇总
【代码】纯前端 文件预览方法汇总。原创 2023-12-31 15:00:00 · 677 阅读 · 0 评论 -
纯前端 文件上传汇总
由于安全原因,当在浏览器中运行的时候,我们是无法直接上传文件到服务器的。所以我们只能使用一些模拟的方法来演示文件上传的效果。最后一句:在实际项目中,文件上传的逻辑是要与服务器端进行交互的,才能实现真正的文件上传功能。以下是汇总的三种方法可以用来模拟文件上传的效果,并且代码可以在浏览器中直接运行。原创 2023-12-30 13:30:00 · 375 阅读 · 0 评论 -
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 · 437 阅读 · 0 评论 -
Angular——:host 和::deep
组件投影是在组件中将其父级html内容(包括html和css)插入到组件的特定区域的技术。::ng-deep是一个特殊的CSS伪类选择器,用于穿透组件样式影响子组件的选择器。它允许在父组件的样式中选择并修改子组件的样式。在Angular中,:host和::ng-deep是用于在组件样式中选择和修改宿主元素和子组件的特殊选择器。组件样式继承是将样式从父组件传递到子组件的一种方式。例如,如果我们想将父组件的一些样式传递给子组件,可以在子组件中使用。在下面示例中,父组件中的html内容将被投射到子组件中。原创 2023-12-29 13:00:00 · 547 阅读 · 0 评论 -
粘性定位的详解——position:sticky
对定位的相关知识进行简单的回顾。言归正传,在实际开发运用中,我们不可置否的会发现:接触最多定位是absolute,relative,而对于粘性定位,在开发中我们可能不会一下子想到。那什么是粘性定位,一般应用在什么场景呢?position: sticky是CSS中的一种定位方式,它允许元素在滚动时固定在特定位置,直到滚动到特定位置时才开始滚动。它会产生动态效果,是。假设我们有一个导航栏,当用户向下滚动页面时,导航栏应该固定在页面的顶部。当用户向上滚动时,导航栏应该回到原来的位置。原创 2023-12-26 15:15:00 · 918 阅读 · 0 评论 -
前端 position定位
绝对定位的元素的位置是相对于它最近的已定位祖先元素(定位属性值为除 "static" 以外的任何值),如果没有祖先元素是已定位的,则相对于文档的 body 元素。注意:当相对定位的元素发生偏移后,原先在这个元素下面的其他元素会被覆盖,但是从文档流的角度,相对定位的元素仍然在原来的位置上,因此,后面的元素不会根据它进行布局。当元素在滚动到特定位置时,它将根据设置的 "top", "right", "bottom", "left" 值进行定位,直到滚动到另一个设定的位置,然后保持其位置不变。原创 2023-12-25 17:00:00 · 998 阅读 · 0 评论 -
CSS3中的resize属性—用于控制元素是否可以被用户调整大小
当使用resize属性时,应确保元素的大小调整不会破坏页面的响应式布局。CSS3中的resize属性用于指定元素是否可以调整大小,它可以应用于可调整大小的元素。:某些浏览器可能会对resize属性应用默认样式,因此在使用resize属性时,最好明确设置所需的样式。:默认情况下,在垂直方向上调整元素大小的范围是受限的,即元素的高度不能小于其内容的高度。:一些元素,特别是表单元素,可能有固定的大小规则或布局要求,无法通过。属性时,要确保父元素的宽度和高度足够大,以容纳调整后的元素大小。用于显示滚动条来容纳。原创 2023-12-20 17:00:00 · 1024 阅读 · 0 评论 -
JS 实现带手柄自由调整页面大小的功能
但在实际开发运用中,上面的代码是远远不够的,运行过上面代码的伙伴肯定能感觉到效果是不理想的,只能实现基本的调整页面大小的需求,而在调整页面大小的过程中是不灵活的,所以我们可以通过以下方式得到改善——最后一句:代码都是可直接运行的,所以大家可以先复制代码到自己电脑的编辑器上面运行看效果,是否能达到自己的预期需求哦!类名的元素时,会触发相应的事件处理函数,从而实现调整大小的效果。这样就能够更灵活地控制调整大小的行为和效果。:在下面的优化代码中,我们使用JavaScript 实现了调整大小的功能。原创 2023-12-20 18:30:00 · 398 阅读 · 0 评论 -
JavaScript 日期对象(Date)处理日期和时间的方法总结
【代码】JavaScript 日期对象(Date)处理日期和时间的方法总结。原创 2023-11-28 21:00:00 · 978 阅读 · 0 评论 -
一个网址(URL)有哪些部分组成?域名包括哪些?
例如www.example.com中的"www"是子域名,"example"是主域名,".com"是顶级域名。人们可以直接通过访问baidu.com来访问,也可以通过IP地址220.181.38.148来访问。每个部分都有特定的作用,用于指定访问的目标和传递相关信息。这种常见于项目中路由跳转的传参、get请求等。总结起来,一个完整的网址由。常见于a标签的超链接。原创 2023-09-22 16:46:51 · 6957 阅读 · 0 评论