游乐游手机版
首页/前端开发/文章详情

命令查询设计模式提升Angular应用性能与可维护性

时间:2026-06-13 06:44
基本概念 命令 (Commands) 命令,说白了就是一次能改变系统状态的操作。通常通过向后端发起REST调用来实现。每个命令跑完会返回一个结果,执行的时候还会考虑执行策略。每次执行都会返回一个Observable——命令执行完了,它会发出一个可选的成功结果,然后结束;如果执行过程中间出了岔子,那就

基本概念

命令 (Commands)

命令,说白了就是一次能改变系统状态的操作。通常通过向后端发起REST调用来实现。每个命令跑完会返回一个结果,执行的时候还会考虑执行策略。每次执行都会返回一个Observable——命令执行完了,它会发出一个可选的成功结果,然后结束;如果执行过程中间出了岔子,那就抛出错误。

这里有个细节得拎清楚:订阅这个结果Observable并不会触发命令的执行,订阅本身是可选的,你完全可以不订阅。

定义命令的方式很简单——把CommandService.create工厂方法的调用结果存成类的属性就行。一个命令通常包含两部分:

  • 调度命令的函数(通常是调用连接器的函数)
  • 选项对象(通常用来指定执行策略)

举个直观的例子:

protected updateCommand: Command<{ details: User }> = this.command.create(
  (payload) =>
    this.userIdService.takeUserId(true).pipe(
      switchMap((uid) =>
        this.userProfileConnector.update(uid, payload.details)
      ),
  {
    strategy: CommandStrategy.Queue,
  }
);

查询 (Queries)

查询和命令最大的区别在于:查询不会改变系统状态,它只是从系统里把数据捞出来,不搞破坏。通常查询也返回一个Observable,发出数据后结束,供订阅者消费。和命令一样,查询也可以配置执行策略。

执行策略

命令和查询的执行方式,可以通过执行策略来灵活控制。常见的就这么几种:

  • Parallel(并行):所有命令或查询同时开跑,不管顺序。
  • Queue(队列):按照调用的先后顺序排队执行,这是默认策略。
  • CancelPrevious(取消上一个):如果前一个还没执行完,新的执行一启动,就把上一个取消掉。上一个的结果流会直接完成,不发出任何值。
  • ErrorPrevious(上一个错误):如果前一个还在跑,新的执行开始了,那么上一个就会报错。上一个的结果流会抛出一个错误。

实际示例

光说概念容易晕,咱们拿一个实际场景来感受一下。假设我们在做一个用户管理系统,现在需要创建一个命令来更新用户详情。

第一步,定义更新命令:

protected updateCommand: Command<{ details: User }> = this.command.create(
  (payload) =>
    this.userIdService.takeUserId(true).pipe(
      switchMap((uid) =>
        this.userProfileConnector.update(uid, payload.details)
      ),
  {
    strategy: CommandStrategy.Queue,
  }
);

在这个例子里,updateCommand接收用户详情,然后发往后端。执行策略选的是队列——多个更新请求按顺序逐个执行,保证数据不会乱。

再来个查询的例子。假设我们要获取某个用户的个人资料:

protected getUserProfileQuery: Query<{ userId: string }, UserProfile> = this.query.create(
  (payload) => this.userProfileConnector.getProfile(payload.userId),
  {
    strategy: QueryStrategy.Parallel,
  }
);

getUserProfileQuery这个查询,拿用户ID当输入,从后端把用户资料取回来。这里选的是并行策略——同时拿多个用户的资料也没问题,性能更好。

总结

Commands and Queries设计模式在Angular应用开发里是个核心概念,能帮你把系统状态和后端交互管得明明白白。命令搞定那些可能改变系统状态的操作,查询只负责取数据、不动原始状态。执行策略则给了你控制执行方式的灵活度:并行、队列、取消上一个、报错上一个——按需选择。

好好用这个模式,能让Angular应用的性能和可维护性都上一个台阶。系统状态一致性有保障,和后端的通信也更清晰。对于复杂应用来说,它就像一把趁手的工具,让代码的组织和管理变得更清爽。

来源:https://www.jb51.net/javascript/303168asu.htm
上一篇Facade服务暴露命令简化代码提升可访问性与组合性 下一篇Angular6中Debug Failure at typeToString错误的完整解决方法与原因深度分析
本站内容用于信息整理与展示,如有侵权或内容问题请及时联系处理。

相关推荐

补充同频道和同主题内容,方便继续浏览更多相关内容。

同类最新

继续查看同栏目最近更新的文章。

更多
Layui弹出层监听子页面键盘快捷键实现方法
前端开发 · 2026-07-06

Layui弹出层监听子页面键盘快捷键实现方法

子页面键盘事件监听需在DOM加载完成后绑定,父页无法直接监听子页按键,必须由子页自身监听后通过parent或postMessage通知父页。典型写法为子页调用父页已定义的关闭函数。需注意焦点状态、输入法及layui版本兼容性等陷阱。

Layui表单提交时携带当前页面Meta信息的实现方法
前端开发 · 2026-07-06

Layui表单提交时携带当前页面Meta信息的实现方法

Layui表单提交不会自动携带页面Meta信息,需在form on( submit )回调中手动读取meta内容并拼接到表单数据,注意后端字段映射及特殊字符编码,多meta时按需选取。

HTML5拖拽事件流状态转移监控调试
前端开发 · 2026-07-06

HTML5拖拽事件流状态转移监控调试

HTML5拖拽事件流易因漏监听或未调用preventDefault而中断。需掌握dragstart设置数据、dragover接受放置、drop触发条件等关键点。通过统一日志捕获事件上下文、识别常见状态丢失场景并配合可视化面板,可清晰定位拖拽过程断点。

uni-app实现小红书商品详情图卡片切换
前端开发 · 2026-07-06

uni-app实现小红书商品详情图卡片切换

通过手写touch事件与transform控制五张卡片,动态计算translateX、scale、opacity及z-index模拟层叠滑动效果。滑动距离超过80rpx触发切换,否则复位。图片仅渲染当前及前后两张,有效优化加载性能与渲染效率。

图像旋转倾斜与扭曲的Canvas像素矩阵变换
前端开发 · 2026-07-06

图像旋转倾斜与扭曲的Canvas像素矩阵变换

Canvas图像变形本质是操作坐标系,图像被动跟随。旋转需先平移原点至目标中心再旋转后复位;倾斜通过仿射变换矩阵实现;扭曲无原生API,可用分块模拟或转用WebGL。每次变换前保存状态,完成后恢复,避免坐标系偏移。