crary,记忆-CSDN博客

原创前端时间格式占位符学习

在日期时间格式化中，常见的时间格式占位符用来表示年、月、日、小时、分钟、秒等信息，通常用于格式化和解析日期时间。下面是以及它们的使用场景。

2024-11-28 17:30:00 1330

用户发起请求：用户输入 URL 或点击链接，浏览器向服务器发起请求。请求服务器：通过 HTTP 向服务器发送请求。服务器处理：服务器返回 HTML 文件（静态或动态生成）。浏览器接收响应：解析 HTML，构建 DOM。加载外部资源：请求并加载 CSS、JS 和其它资源。构建渲染树：合并 DOM 和 CSSOM，生成渲染树。布局：根据渲染树计算元素的位置和尺寸。绘制：为每个元素绘制样式和内容。合成：将不同层合成，形成最终图像。呈现：页面显示在用户屏幕上，用户可以交互。

2024-11-17 11:45:00 687

原创 RxJs 之 switchMap 学习

switchMap 主要用来处理连续的、异步的数据流，确保只处理最新的请求或事件，避免了不必要的请求或操作。在需要取消上一个操作并只关注最后一次结果时，switchMap 是一个非常有用的工具。switchMap会在源 observable 发出新值时触发。每当输入框的值发生变化时，switchMap会取消上一个请求并发起新的请求。防抖操作符（如 debounceTime）可以避免每次输入都触发请求，只在用户停止输入后才发起请求。

2024-11-17 09:00:00 997

原创 Angular中的ngOnchange()的汇总

监听的是组件的输入属性（@Input()，每当父组件传递给子组件的输入属性发生变化时，会被触发并接收一个对象，包含所有变化的输入属性的详细信息。监听对象@Input()属性。变化内容：父组件传递给子组件的数据变化。当你看到中的和都是undefined组件初始化时：当组件第一次被创建并接收到@Input()数据时，Angular 会触发，即使没有显式的变化，也会将和都设为undefined，尤其当输入属性还没有被赋值时。父组件的输入值是undefined：如果父组件传递的@Input()值本身是。

2024-11-16 12:00:00 1201

原创 display: none 和 *ngIf 和 visibility:hidden 的学习

属性/指令*ngIf作用通过 Angular 逻辑控制完全添加或移除元素通过 CSS 控制隐藏元素但保持元素在 DOM 中隐藏元素但元素仍然在 DOM 中且占用空间DOM 元素移除是（移除元素及其占用的空间）否（元素仍在 DOM 中）否（元素仍在 DOM 中）空间占用否（元素完全不占用空间）否是（元素仍占据空间）生命周期钩子会触发进入和离开 DOM 时的钩子（如ngOnInit不会触发钩子不会触发钩子渲染性能可能较低，尤其是频繁添加/移除元素时（动态地销毁和创建 DOM 元素，可能更高效）

2024-11-16 09:00:00 964

原创【前端】Node.js 项目依赖管理的基础（二）

没有文件时，执行不会安装任何依赖，仅创建一个空的目录。因此，为了有效管理项目的依赖，建议始终创建并维护文件。问：如果没有package.json文件，但是有 node_module文件， npm i会发生什么如果在项目目录中没有文件，但存在文件夹，执行在没有文件的情况下，执行不会对现有的目录做任何操作，保留原有的包状态，但不能对依赖进行管理或安装。为了有效管理项目，建议始终使用文件。问：如果没有package-lock.json文件， npm i会发生什么如果在项目中没有文件，执行没有文件时，执行。

2024-10-12 09:00:00 646

原创【前端】Node.js 项目依赖管理的基础（一）

npm是包管理工具。是项目的配置文件，定义了依赖和脚本。记录了确切的依赖版本，确保一致性。是实际存放依赖包的地方。

2024-10-11 17:56:57 671

原创【前端】常用的版本控制符号汇总

使用 `^` 时，可以更新到同一大版本下的所有次版本和补丁版本。- 使用 `~` 时，只能更新到同一小版本下的补丁版本。选择哪个取决于你对版本稳定性的需求。如果希望更大范围的更新，可以使用 `^`；如果希望更严格控制版本，可以使用 `~`。版本号详解：在软件版本控制中，版本号通常采用语义化版本控制（Semantic Versioning）标准，格式为MAJORMINORPATCH（主要版本.次要版本.补丁版本）- 补丁版本：针对 bug 修复，保持向后兼容。

2024-10-11 13:51:50 1149

原创学习Math.random()的应用

在 JavaScript 中，Math是一个内置对象，提供了许多用于数学计算的函数和常量。它不需要实例化，因为所有的属性和方法都是静态的。 toString()方法用法。padStart()方法的用法。时间戳格式化。

2024-08-23 11:30:00 3026

原创讨论 Angular 项目中打开页面，页面中的浏览器滚动条自动滚动到底部学习

项目的X页面，HTML是通过循环数组进行数据展示，其中进入页面有两个入口，第一个入口是通过点击某个label进行路由跳转，进入页面之后触发API获取页面数据并进行处理（API进行时会显示loading），API加载完，loading消失，随之展示数据在页面上。第二个入口是点击另一个页面的table的row进行路由跳转，进入页面后会对从table row传过去的数据进行处理并进行展示。更奇怪的问题来了，第一个入口并不存在上述问题，只有第二个入口存在问题！setTimeout这个方法一定要有！

2024-08-21 14:00:00 267

原创 Angular之store全局状态管理浅学（二）

Selector 函数触发次数：每次 store 更新时，无论状态是否实际发生变化，选择器都会触发，并发出当前的 state。执行次数：每次 store 更新时（即每次有 action 被处理时），会执行一次。即使 action 不改变状态，这个日志输出也会因为选择器每次都发出新的 state 而被执行。这种设置适用于需要监控整个 store 状态的情况。selector函数的调用次数：不会多次触发selector 函数的调用，前提是state.a没有发生变化。

2024-08-21 10:15:00 1035

原创 Angular之store全局状态管理浅学（一）

提供了一种强大的机制来管理 Angular 应用程序的状态，使得应用程序的状态变化变得可预测和可追踪。通过定义 actions、reducers 和 selectors，并使用select函数来订阅状态变化，我们可以实现高效的状态管理，同时提高应用程序的可维护性和可测试性。同时，结合Effects可以处理复杂的异步逻辑，使得应用程序的状态管理更加完善和健壮。// 应用状态的类型定义// 用户状态的类型定义// 创建特性选择器，用于选择用户状态// 创建选择器函数，用于选择用户信息。

2024-07-19 09:49:20 1850

原创浅学document对象之获取页面元素

HTMLCollection 是一个类数组对象，表示由 DOM 方法返回的元素集合，例如。方法返回的就是 HTMLCollection 对象。方法可以根据类名获取所有具有相同类名的元素，返回一个 HTMLCollection。方法可以根据 CSS 选择器获取所有匹配的元素，返回一个 NodeList。方法可以根据元素的 ID 属性获取到对应的 DOM 元素。方法可以根据 CSS 选择器获取匹配的第一个元素。通过 CSS选择器获取多个元素集合。通过 CSS选择器获取单个元素。通过类名获取元素集合。

2024-07-18 09:15:00 1868

原创 Angular路由属性的学习

在Angular中，canActivate 是路由守卫（Route Guards）的一种，用于控制用户对特定路由的访问权限。路由守卫是Angular路由系统中的一个功能，它们可以在路由激活之前执行自定义逻辑，以决定是否允许路由激活。路由守卫是Angular中一个非常强大的功能，它不仅可以用于简单的权限控制，还可以用于更复杂的场景，比如角色基础的访问控制、页面刷新时的认证状态检查等。在Angular中，resolve是路由系统中的一个特性，用于在路由激活之前获取数据。方法中定义获取数据的逻辑。

2024-07-10 12:00:00 943

原创前端响应式设计之媒体查询

媒体查询（Media Queries）是用于在网页设计中根据用户设备的特征（如屏幕宽度、高度、设备类型等）来应用不同的样式表规则的技术。它允许开发者根据用户设备的特性动态调整网页的布局和样式，以提供更好的用户体验。：指定CSS样式应用的设备或媒体类型。allprintscreenspeech：指定CSS样式根据设备或环境的不同特性而应用或不应用。媒体特性必须用小括号括起来，并且包含一个或多个表达式，例如设备的宽度或高度。widthheightresolution：使用的逻辑操作符包括andnot和。

2024-06-21 12:00:00 1172

原创 HTML5的新属性

是 HTML5 中的一个布尔属性，用于指定页面加载后自动将焦点（即光标）放在指定的输入字段上，使用户可以立即开始在该字段中输入内容。属性是 HTML5 中用于表单验证的一个属性，它用于指定一个正则表达式，以验证输入字段中的值是否符合特定的模式。属性，可以更灵活地组织和布局表单元素，使其可以跨越不同的 HTML 结构，而仍然能够在逻辑上属于同一个表单。属性，因为只有一个元素可以拥有焦点，这可能会导致意外的用户体验，特别是在用户期望焦点在其他元素上时。属性，但在某些较旧的浏览器版本中可能不被完全支持。

2024-06-21 10:30:00 1599

原创前端响应式设计的概念

响应式设计（Responsive Design）是一种网页设计和开发的方法论，旨在使网站能够适应各种不同的设备和屏幕尺寸，包括桌面电脑、平板电脑和手机等移动设备。其核心理念是一个网站能够根据访问者的设备特性自动调整布局、内容和功能，以提供最佳的用户体验。

2024-06-21 09:24:09 821

原创 HTTP 415错误状态码

HTTP 415错误状态码是指"Unsupported Media Type"（不支持的媒体类型）。这通常发生在客户端向服务器发送请求时，请求中包含的媒体类型（例如Content-Type头部）不被服务器支持或识别的情况下。

2024-06-18 12:00:00 16426

原创 Angular13 如何创建一个模拟后端mockServe

在前端和后端的同时开发中，从事应用程序的 Angular 开发人员必须能够与虚假后端进行交互，以便通过模拟后端数据来创建 UI。其中我们就会使用和的npm 包来帮助我们完成这个过程。

2024-06-18 10:30:00 1119

原创 CSS滤镜（Filter）学习

CSS滤镜（Filter）是一种强大的视觉效果工具，允许开发者在不借助额外图像处理软件的情况下，直接通过CSS对HTML元素（如图片、文本、背景等）应用各种图像处理效果，如模糊、颜色变化或者其它图形处理等，这些效果可以在浏览器中进行硬件加速。属性应用到HTML元素上的一系列图像处理函数。这些函数可以单独使用，也可以组合在一起，产生丰富多彩的视觉效果。下面这位大大的博文，图文并茂，大家有兴趣真的可以看一下哦！，但它们在实现方式、效果和应用场景上有一些不同。

2024-06-14 12:00:00 1209

原创 CSS动画学习

transform属性应用于2D 或 3D转换。可以实现倾斜、移动、旋转、缩放这四类动画效果。

2024-06-14 09:00:00 1267

原创前端获取API的响应时间的方法总结

则用于在超时时切换到备用的 Observable。如果你想要处理 Observable 的超时情况并执行特定的操作，可以使用。如果你想要在超时时切换到备用的 Observable 进行替代操作，可以使用。用于处理 Observable 的超时情况，而。

2024-06-06 00:00:00 1448

原创 HTTP 的三次握手

HTTP 的三次握手是指在建立 TCP 连接时，客户端和服务器之间进行的三步握手过程。这个过程确保了双方都能够互相通信，并且同步了彼此的序列号和确认号。

2024-06-03 20:00:00 1280

原创 HTML textArea元素的使用你知道多少？

下面的三种方法在Enter键提交表单时都要额外处理一下，因为Enter键会换行，这样会带来一定的高度样式的不正确性，所以这时我们可以用。模拟textarea文本域实现高度自适应；scrollHeight手动设置。Enter键换行的默认行为。textArea自适应高度。第二种方法：通过用JS中的。来设置文本域自适应高度；textArea的高度；

2024-05-15 09:30:00 3232

原创比较文本数据和二进制数据

文本数据和二进制数据是前端数据处理两种常见的数据类型。这两种数据类型在表示和处理方式上存在一定的异同。

2024-05-10 12:30:00 621

原创 AbortController Web API 学习

调用 controller.abort()方法会关闭与服务器的连接，但不会触发 EventSource 对象onclose()事件处理程序。相反，调用 controller.abort() 方法会立即关闭连接，而不会触发任何事件处理程序。在上面的示例中，我们首先创建了一个AbortController实例，并从中获取一个signal对象，然后将该signal对象传递给fetch请求的配置中。当需要取消请求时，调用 controller.abort()方法即可中止请求，并触发一个 AbortError错误。

2024-05-10 11:00:00 481

原创 EventSource之重连特性学习

需要注意的是，retry 字段是可选的，如果不设置 retry 字段，浏览器会使用默认的重新连接时间间隔。因此当在 onerror 事件处理程序中编写重连逻辑时，可能会导致浏览器和服务器之间的 EventSource 连接频繁断开和重连，从而在网络面板中出现大量的 SSE 连接。下面的示例中，我们将 eventSource 对象的 retry 字段设置为 3000，表示在连接中断后，浏览器会每隔 5 秒尝试重新连接服务器一次。当连接中断后，浏览器会根据 retry 字段的值来确定重新连接的时间间隔。

2024-05-08 09:00:00 4858

原创 CSS的哪些样式可以继承？哪些不可以？

在 CSS 中，有一些样式是可以被子元素继承的，也有一些样式是不会被子元素继承的，同时要注意继承性质，覆盖继承、继承链等在继承过程发挥的作用。

2024-05-04 14:00:00 670

原创 JS中的数据绑定方式，以及Angular中如何实现数据绑定

在 JavaScript 中，单向数据绑定和双向数据绑定是两种常见的数据绑定方式。在 Angular 中，单向数据绑定和双向数据绑定的实现方式有插值表达式、属性绑定等

2024-05-04 10:00:00 340

原创 HTTP预请求（Preflight Request）

服务器接收到预请求后，会检查这些头部信息，并根据请求头部中的信息来决定是否允许实际请求。HTTP预请求（Preflight Request）是CORS（跨域资源共享）机制中的一种请求，用于在实际的跨域请求之前进行一次预检请求，以确定是否可以安全地发送实际请求。当服务器接收到预请求后，应该返回一个带有合适的CORS头部信息的响应，以表示服务器是否支持跨域请求，并确定是否允许实际请求。预请求的目的是确保跨域请求的安全性，防止潜在的安全风险。这种机制可以有效地防止跨域请求可能带来的安全风险。

2024-05-03 12:00:00 1688

原创 CSS的样式选择器以及优先级算法汇总

特定性是一个用于计算选择器优先级的值，通常由选择器中ID选择器、类选择器和元素选择器的数量组成。特定性是一个用于计算选择器优先级的值，通常由选择器中ID选择器、类选择器和元素选择器的数量组成。：类选择器和属性选择器的优先级相同，比元素选择器的优先级高。如果同一个元素同时使用了ID选择器和类选择器，ID选择器的样式会被应用。：某些样式是可以继承的，即子元素会继承父元素的样式。属性中定义的样式具有更高的优先级，会覆盖外部样式表和内部样式表中的样式。声明的样式具有最高的优先级，会覆盖其他所有样式。

2024-05-03 09:30:00 819

原创 CSS的常用的伪类选择器及其使用

伪类选择器（Pseudo-classes）是CSS中用来选择元素的特定状态或行为的选择器。它们以冒号（:）开头，用于为那些处于特定状态的元素应用样式。伪类选择器可以根据元素的不同状态或位置来选择应用样式，提供了更多样式控制的可能性

2024-05-02 16:56:25 454

原创 Angular 常用管道（过滤器）汇总

Angular是一个开发框架，而Angular.js是Angular的旧版本。Angular是一个完全重写的框架，它引入了很多新的特性和改进，以提高性能和开发体验。相比之下，Angular.js是一个较旧的版本，已经不再维护和更新。过滤器可以用在表达式中，对数据进行处理后再显示在页面上。在Angular中，过滤器已经被废弃，取而代之的是管道。，它可以在模板中使用，用于对数据进行处理并显示在页面上。除了上面提到的过滤器（管道pipe），我们还能自定义管道（pipe），下面是在Angular中创建一个。

2024-05-02 16:55:13 109

mockServe example

空空如也