工业园做网站的公司,古典网站建设欣赏,家乡的网站设计模板,网络推广方案的参考文献Dumb components#xff0c;在 Angular 开发中也被称为 Presentational components#xff0c;它们的主要职责是通过展示数据和触发事件#xff0c;把业务逻辑和 UI 表现分离开来。Dumb components 只通过 Input() 接收数据#xff0c;Output() 向外发送事件#xff0c;不…Dumb components在 Angular 开发中也被称为 Presentational components它们的主要职责是通过展示数据和触发事件把业务逻辑和 UI 表现分离开来。Dumb components 只通过 Input() 接收数据Output() 向外发送事件不负责处理任何业务逻辑这些逻辑由 Smart components 或服务来承担。这是典型的单一职责原则的实现能够提高代码的可维护性和可测试性。
Dumb components 的核心思想是让组件尽可能地简洁只负责渲染自己所需的内容以及通过输出事件来通知外界操作。这种组件完全与业务逻辑解耦因此它们不依赖于业务状态的变化只专注于 UI 的展示。当业务逻辑发生变化时不需要对它们做任何改动。
使用 Dumb components 有几个好处
提高代码复用性因为这些组件只负责渲染 UI所以可以在多个地方重用。易于测试由于没有业务逻辑只需测试组件的输入输出和渲染结果即可。易于维护每个组件功能单一当 UI 或业务逻辑变化时只需修改与之相关的组件降低了出错的概率。
下面是一个简单的例子通过具体代码来说明什么是 Dumb components 以及如何使用。
例子一个用户卡片组件
我们要实现一个用户卡片组件它只负责展示用户信息并提供一个按钮来触发“删除”操作。所有的用户数据和删除操作的业务逻辑都在父组件中管理。
Step 1: 创建 Dumb 组件
首先我们创建一个 UserCardComponent它接受用户数据并展示同时提供一个输出事件。
// user-card.component.ts
import { Component, Input, Output, EventEmitter } from angular/core;Component({selector: app-user-card,templateUrl: ./user-card.component.html,styleUrls: [./user-card.component.css]
})
export class UserCardComponent {Input() user: any;Output() delete new EventEmittervoid();onDelete() {this.delete.emit();}
}!-- user-card.component.html --
div classuser-cardh3{{ user.name }}/h3p{{ user.email }}/pbutton (click)onDelete()Delete/button
/div这里 UserCardComponent 仅负责展示用户信息并且提供了一个 onDelete 方法来触发 delete 事件。组件的输入属性 user 是一个对象包含用户的 name 和 email 信息。
Step 2: 在父组件中使用 Dumb 组件
创建一个父组件 UserListComponent 来管理用户列表和删除操作。
// user-list.component.ts
import { Component } from angular/core;Component({selector: app-user-list,templateUrl: ./user-list.component.html,styleUrls: [./user-list.component.css]
})
export class UserListComponent {users [{ name: John Doe, email: john.doeexample.com },{ name: Jane Doe, email: jane.doeexample.com }];deleteUser(index: number) {this.users.splice(index, 1);}
}!-- user-list.component.html --
divapp-user-card*ngForlet user of users; let i index[user]user(delete)deleteUser(i)/app-user-card
/div在 UserListComponent 中维护了一个用户数组 users。为了删除用户我们定义了一个 deleteUser 方法并在模板中通过 Angular 的 *ngFor 指令渲染多个 UserCardComponent。当 UserCardComponent 触发 delete 事件时调用父组件的 deleteUser 方法进行相应处理。
Dumb 组件的进一步优化
为了更通用化和可维护可以把输入数据的类型和输出事件的类型定义更加明确。
定义用户模型
// user.model.ts
export interface User {name: string;email: string;
}在组件中使用模型
// user-card.component.ts
import { Component, Input, Output, EventEmitter } from angular/core;
import { User } from ./user.model;Component({selector: app-user-card,templateUrl: ./user-card.component.html,styleUrls: [./user-card.component.css]
})
export class UserCardComponent {Input() user: User;Output() delete new EventEmittervoid();onDelete() {this.delete.emit();}
}在父组件中使用模型
// user-list.component.ts
import { Component } from angular/core;
import { User } from ./user.model;Component({selector: app-user-list,templateUrl: ./user-list.component.html,styleUrls: [./user-list.component.css]
})
export class UserListComponent {users: User[] [{ name: John Doe, email: john.doeexample.com },{ name: Jane Doe, email: jane.doeexample.com }];deleteUser(index: number) {this.users.splice(index, 1);}
}通过这些步骤我们实现了一个典型的 Dumb 组件。它只专注于展示用户信息通过触发 delete 事件通知父组件而父组件负责管理用户数据和删除操作的具体实现。
总结
Dumb components 是实现单一职责原则的关键它们通过接收输入和发送输出事件把业务逻辑和 UI 表现分离开来提高了代码的复用性、可测试性和可维护性。通过上面的例子展示了在 Angular 中如何创建和使用 Dumb components从而使应用程序更加模块化、结构清晰。
