React Context:组件跨层级共享状态参数
通常情况下,我们通过props将参数从父组件传递给子组件,达到组件间状态参数共享的目的。但是面对嵌套了多层组件的情况,继续使用props一层一层的传递参数是非常冗余和繁琐的。对于这种包含多层组件的传参,React提供了Context能力来支持父组件向它包含的无论嵌套层级有多深的子组件传递状态参数,让状态共享变的简单。使用步骤一、创建Context通过createContext创建Context
前端 · 阅读 1108 · 2023年11月28日 22:13

iframe页面通信 - iframe 页面如何传递数据
当我们的Web页面需要复用现有网站的页面时,我们通常会考虑代码层面的抽离引用,但是对于一些过于复杂的页面,通过iframe嵌套现有的网站页面也是一种不错的方式。虽然对于用户而言,看到的页面其实是一个整体,但是本质上是两个甚至多个页面的组装,那么页面跟页面之间的交互就避免不了相互通信。iframe 页面之间的通信主要是通过监听页面的全局 `message`事件,然后其他页面通过 `postMessa
前端 · 阅读 1004 · 2023年12月5日 09:51

一文讲清TypeScript装饰器的概念以及如何使用TypeScript装饰器
TypeScript装饰器是什么?装饰器(Decorator)是TypeScript提供的一个高级语法,它类似于一种特殊类型的声明,可以附加到类声明,方法,访问符,属性或参数上。装饰器主要以函数的形式出现,运行在编译阶段,以实现对所修饰对象的行为的修改或增强。这是一个功能强大且在TypeScript编程中常用的特性。TypeScript装饰器有什么作用?装饰器在TypeScript中的主要应用场景
前端 · 阅读 3069 · 2023年12月23日 18:51

Golang 如何获取当前运行文件的目录
Golang如何获取当前运行文件的目录?Golang的开发中,有时候我们需要获取当前正在运行的程序所在的目录路径,这对于读取相对路径下的配置文件或资源文件非常有用。本文将展示几种在Golang中获取当前运行文件目录的方法。方法一:使用os包Go语言的os包提供了很多与操作系统交互的功能,其中就包括了获取当前执行的程序的绝对路径。packagemainimport("fmt""os""path/f
服务端 · 阅读 2079 · 2024年4月19日 22:45

前端如何利用依赖倒置原则
前端如何利用依赖倒置原则设计模式依赖倒置原则(DependencyInversionPrinciple,简称DIP)是面向对象设计中的一项重要原则,强调的是一种松耦合的设计方式,使得软件模块之间的耦合度降低,从而提高系统的稳定性和可扩展性。在前端开发中,依赖倒置原则同样适用,并可以大大提高前端项目的可维护性和灵活性。理解依赖倒置原则本质上就是要明白“高层模块不应依赖于低层模块,二者都应依赖于抽象
前端 · 阅读 489 · 2024年5月26日 13:21

基于React实现:弹窗组件与Promise的有机结合
弹窗在现代应用中是最为常见的一种展示信息的形式,二次确认弹窗是其中最为经典的一种。当我们在React,Vue这种数据驱动视图的前端框架中渲染弹窗基本是固定的使用形式。使用方式:创建新的弹窗组件,在需要弹窗的地方引用并且需要在外层维护弹窗组件的显示/隐藏状态。这只是庞大项目中一处需要弹窗的地方,如果项目中存在N个需要弹窗的场景,我们都需要将上述步骤重复一次。这会让我们的项目组件变得臃肿冗余。
前端 · 阅读 2647 · 2023年9月5日 11:58

浏览器 JS 中的有哪些 Observer,详细介绍四个 Observer 的使用方式
当我们谈到前端开发时,观察者模式(ObserverPattern)是一个非常强大的设计模式,它允许我们订阅和监测某些数据或事件的变化。在JavaScript的世界里,浏览器提供了几种不同的Observer接口,它们让开发者能够感知并作出反应对于DOM的变动、用户的交互以及性能等方面的改变。今天,我将为大家介绍几种常见的Observer,并给出简明的解释与示例。MutationObserver:监听
前端 · 阅读 810 · 2024年2月24日 01:30

基于 NestJS 操作 TypeORM 中的多对多 ManyToMany
TypeORM是一个在TypeScript和JavaScript(ES7,ES6,ES5)中提供了许多开箱即用特性的ORM,它能够改善我们处理数据库操作的效率与可维护性。在复杂的应用开发过程中,数据间的关系处理显得尤其重要。今天我们将在NestJS中探索TypeORM的ManyToMany(多对多)关系,这是一种常见且强大的数据模型关系。在建立应用程序时,我们通常需要处理大量的增删查改(CRUD)
服务端 · 阅读 3349 · 2024年1月1日 22:59

一篇文章学会 NestJS 中间件的使用,让你的应用更灵活和可扩展
当我们基于NestJS框架构建和管理应用程序时,常常需要在特定的阶段执行一些额外的操作,例如在接收请求时进行身份验证,或在发送响应之前添加一些自定义的HTTP头。这就是我们需要理解和使用NestJS中间件的原因——它就像一道门,所有的请求必须要过这道门,而我们可以在门上挂上各种“魔法”,使得我们的应用程序更强大、更容易管理。什么是NestJS中间件NestJS中间件实际上就是一个函数,这个函数可以
前端 · 阅读 4279 · 2024年1月1日 20:13

Next.js 如何使用中间件 Middleware
当我们提到中间件(Middleware),你可能会想到后端服务,如Express.js中用于处理HTTP请求的函数。但在Next.js中,中间件也是一个非常重要的概念。Next.js中间件代表了在服务器和浏览器之间的一层强大的逻辑处理层,它们可以在请求被处理成页面之前或在页面渲染之后执行代码。什么是Next.js中间件?Next.js中间件是在Next.js10版本中引入的概念,并在后续版本中得到
前端 · 阅读 4403 · 2024年3月4日 09:53
