当前位置: 首页 > news >正文

79.Options Object 模式

有许多模式可以用来改进你的组合式函数(composables)。 使用对象来传递参数是一种非常有用的模式,在很多地方都有使用 — 只需看看 VueUse 的源码就知道了。 但是,虽然这种模式乍看起来很简单,在实现时还是有一些需要考虑的事项:

  • 当你有很多选项时会发生什么?真的很多?

  • 当你只有几个选项时该怎么办?

  • 如何判断你是否在错误地使用这种模式?

在本文中,我们将探讨 Options Object 模式。我们将介绍实现的基础知识,然后转向高级用例以及权衡使用它时的利弊。

该模式如何工作

为了使我们的代码更具可重用性,我们需要它能覆盖广泛的情况。 我们通过传入一个包含所有配置选项的对象来实现这一点,这些选项决定了我们希望组合式函数如何表现:

const state = ref({ email: '' });const { history, undo, redo } = useRefHistory(state, {// 递归跟踪历史deep: true,// 限制我们保存的变更数量capacity: 10,
});

我们在这里使用对象而不是一长串参数:

const { history, undo, redo } = useRefHistory(state, true, 10));

使用选项对象而不是参数给我们带来了几个好处。

首先,它是自文档化的。我们在值旁边直接有参数的名称,所以我们永远不会忘记每个值的作用。 我们还可以为整个选项对象创建一个类型:

export type RefHistoryOptions {deep?: boolean;capacity?: number;
};export type RefHistoryReturn {history: Ref;undo: () => void;redo: () => void;
};export function useRefHistory(ref: Ref,options: RefHistoryOptions
): RefHistoryReturn {};

其次,我们不需要担心顺序或未使用的选项。我们用组合式函数覆盖的潜在边缘情况越多,就会有越多的选项。但我们通常只需要一次关注其中的几个 — 它们都是可选的。

第三,添加新选项变得更加容易。因为顺序无关紧要,并且没有任何选项是必需的,所以向我们的组合式函数添加新功能不会破坏任何东西。我们只需将它添加到可能的选项列表中并继续前进。

实现该模式

实现这个模式也不需要太多工作:

export function useRefHistory(ref, options) {const {deep = false,capacity = Infinity,} = options;// ...
};

首先,我们将选项对象作为最后一个参数传入。这使得选项对象本身成为一个可选参数成为可能。

必需的参数排在前面。通常,只会有一两个。更多的参数是代码异味,很可能意味着你的组合式函数试图做太多事情。

必需的参数(或参数们)通常是一个 Ref,或者如果我们也在实现灵活参数模式,则是一个 MaybeRef。

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • Knife4j:打造优雅的SpringBoot API文档
  • NAS远程下载,Docker部署qBittorrent、Transmission、贝锐花生壳
  • matlab处理函数2
  • 多维时序 | Matlab基于TCN-Transformer+LSTM双输入神经网络时间序列预测
  • 大模型——LLaVA和LLaMA的介绍和区别
  • element实现动态路由+面包屑
  • 量化交易backtrader实践(一)_数据获取篇(4)_通达信数据应用
  • 【吉利汽车安全应急响应中心-登录/注册安全分析报告-无验证方式导致安全隐患】
  • 探索端智能,加速大模型应用,火山引擎边缘智能 x 扣子技术沙龙等你来
  • MYSQL数据库——InnoDB存储引擎
  • Typescript 的类型断言
  • git编译安装报错
  • 设计模式篇--抽象工厂模式
  • 基于云计算的虚拟电厂负荷预测
  • Vscode python无法转到函数定义
  • 【跃迁之路】【463天】刻意练习系列222(2018.05.14)
  • 【知识碎片】第三方登录弹窗效果
  • JavaScript中的对象个人分享
  • Java-详解HashMap
  • node.js
  • PAT A1120
  • Python利用正则抓取网页内容保存到本地
  • python学习笔记-类对象的信息
  • Sass Day-01
  • thinkphp5.1 easywechat4 微信第三方开放平台
  • 服务器之间,相同帐号,实现免密钥登录
  • 关于Flux,Vuex,Redux的思考
  • 设计模式(12)迭代器模式(讲解+应用)
  • 提升用户体验的利器——使用Vue-Occupy实现占位效果
  • 一道面试题引发的“血案”
  • 一起来学SpringBoot | 第三篇:SpringBoot日志配置
  • 怎么把视频里的音乐提取出来
  • Spring Batch JSON 支持
  • #includecmath
  • #Linux(make工具和makefile文件以及makefile语法)
  • #nginx配置案例
  • (06)Hive——正则表达式
  • (07)Hive——窗口函数详解
  • (10)工业界推荐系统-小红书推荐场景及内部实践【排序模型的特征】
  • (delphi11最新学习资料) Object Pascal 学习笔记---第5章第5节(delphi中的指针)
  • (Redis使用系列) SpringBoot 中对应2.0.x版本的Redis配置 一
  • (大众金融)SQL server面试题(1)-总销售量最少的3个型号的车及其总销售量
  • (二) 初入MySQL 【数据库管理】
  • (二)fiber的基本认识
  • (附源码)基于ssm的模具配件账单管理系统 毕业设计 081848
  • (七)Appdesigner-初步入门及常用组件的使用方法说明
  • (十)T检验-第一部分
  • (十三)Flask之特殊装饰器详解
  • (四)Android布局类型(线性布局LinearLayout)
  • (转)nsfocus-绿盟科技笔试题目
  • (转载)微软数据挖掘算法:Microsoft 时序算法(5)
  • .NET MVC 验证码
  • .net实现客户区延伸至至非客户区
  • /etc/shadow字段详解
  • [ IO.File ] FileSystemWatcher