”工欲善其事,必先利其器。“—孔子《论语.录灵公》
首页 > 编程 > 掌握函数参数:JavaScript 中的少即是多

掌握函数参数:JavaScript 中的少即是多

发布于2024-11-03
浏览:707

Mastering Function Arguments: Less is More in JavaScript

嘿,开发者们! ?今天,让我们深入探讨编写干净、可维护的 JavaScript 的一个关键方面:管理函数参数

太多参数的问题

你遇到过这样的函数吗?

function createMenu(title, body, buttonText, cancellable, theme, fontSize, callback) {
  // ...a whole lot of logic here
}

如果你有,你就会知道试图记住参数顺序的痛苦,或者更糟糕的是,当有人不可避免地混淆它们时进行调试。 ?

二元规则

这是一条黄金法则:尝试将函数限制为两个或更少的参数
为什么?以下是一些令人信服的理由:

  • 改进的可测试性:更少的参数意味着更少的测试用例来覆盖所有可能性。
  • 增强可读性:更容易一目了然地理解函数的用途。
  • 减少认知负担:使用该函数的开发人员可以减少参数的心理调整。

但如果我需要更多参数怎么办?

好问题!这就是对象解构的神奇之处。看看这个:

function createMenu({ title, body, buttonText, cancellable, theme = 'light', fontSize = 16, callback = () => {} }) {
  // Your implementation here
}

// Usage
createMenu({
  title: "Settings",
  body: "Adjust your preferences",
  buttonText: "Save",
  cancellable: true
});

这种方法的好处

  • 模拟命名参数:您可以按任何顺序提供参数。 自记录:函数签名清楚地显示了期望的属性。 默认值:轻松设置可选参数的默认值。 防止副作用:解构克隆原始值,有助于避免意外突变。 Linter-Friendly:工具可以警告您未使用的属性。

专业提示:TypeScript Boost

如果您使用的是 TypeScript,您可以更进一步:

interface MenuOptions {
  title: string;
  body: string;
  buttonText: string;
  cancellable: boolean;
  theme?: 'light' | 'dark';
  fontSize?: number;
  callback?: () => void;
}

function createMenu(options: MenuOptions) {
  // Implementation
}

这增加了类型安全和自动完成功能,使您的代码更加健壮!

总结

通过采用这种模式,您会发现您的功能变得更加灵活,更易于使用,并且更易于维护。这是一个很小的变化,但却会对您的代码质量产生很大的影响。

您对这种方法有何看法?您还有其他管理函数参数的技巧吗?评论区一起讨论吧!

编码愉快! ?

版本声明 本文转载于:https://dev.to/56_kode/mastering-function-arguments-less-is-more-in-javascript-7a6?1如有侵犯,请联系[email protected]删除
最新教程 更多>
  • 如何在 React 中使用上下文
    如何在 React 中使用上下文
    欢迎回来,朋友们!
 今天我们将回顾名为 useContext 的 React Hook 的基础知识。 useContext 是一个强大的工具,它比 useState 更进一步,创建了一个类似全局的 State,可以将信息传递给子组件和孙组件,而无需直接传递 props。
 但我有点超前了。
如果你...
    编程 发布于2024-11-03
  • JavaScript 可以修改 PHP 会话变量吗?
    JavaScript 可以修改 PHP 会话变量吗?
    使用 JavaScript 设置 PHP 会话变量你可以使用 JavaScript 操作 PHP 会话变量吗?是的,您可以通过 AJAX 请求使用 JavaScript 设置 PHP 会话变量。操作方法如下:JavaScript 代码:jQuery('#div_session_write').loa...
    编程 发布于2024-11-03
  • Babel 6 修改后的默认导出行为有何影响和解决方法?
    Babel 6 修改后的默认导出行为有何影响和解决方法?
    Babel 6 修改后的默认导出行为:从方便到语义一致性的转变在一项突破性的改变中,Babel 6 修改了其方法导出默认值,引入从之前受 CommonJS 启发的行为到严格的 ES6 原则的转变。这一变化给开发者带来了机遇和挑战。此前,Babel 在默认导出声明中添加了一行“module.expor...
    编程 发布于2024-11-03
  • 如何识别数据框中具有部分字符串匹配的列?
    如何识别数据框中具有部分字符串匹配的列?
    识别名称中包含部分字符串的列在数据框中,您的任务是查找名称部分与特定字符串。与精确匹配不同,要求是识别包含字符串“spike”但可能在其之前或之后包含其他字符的列,例如“spike-2”、“hey spike”或“spiked-in”。 为了实现这一点,我们可以利用循环来迭代数据框的列名称。在此循环...
    编程 发布于2024-11-03
  • 用一个简单的属性来加速你的 CSS
    用一个简单的属性来加速你的 CSS
    您知道吗,您可以通过使用 all: unset; 来大幅减小 CSS 文件大小?这会重置元素上的所有属性,一次性清除所有继承的样式,使您的 CSS 更精简且更易于管理。 尝试一下,看看您的代码变得多么干净!如何管理继承的样式?
    编程 发布于2024-11-03
  • TypeScript 冒险与类型挑战 – Day Pick
    TypeScript 冒险与类型挑战 – Day Pick
    大家好。 我正在解决类型挑战,以更深入地研究 TypeScript。 今天,我想分享一下我对Pick的了解。 - 挑战 - interface Todo { title: string description: string completed: boolean } ty...
    编程 发布于2024-11-03
  • 如何扩展 JavaScript 中的内置错误对象?
    如何扩展 JavaScript 中的内置错误对象?
    扩展 JavaScript 中的 Error要扩展 JavaScript 中的内置 Error 对象,您可以使用 extends 关键字定义 Error 的子类。这允许您使用附加属性或方法创建自定义错误。在 ES6 中,您可以定义自定义错误类,如下所示:class MyError extends E...
    编程 发布于2024-11-03
  • 将测试集中在域上。 PHPUnit 示例
    将测试集中在域上。 PHPUnit 示例
    介绍 很多时候,开发人员尝试测试 100%(或几乎 100%)的代码。显然,这是每个团队应该为他们的项目达到的目标,但从我的角度来看,只应该完全测试整个代码的一部分:您的域。 域基本上是代码中定义项目实际功能的部分。例如,当您将实体持久保存到数据库时,您的域不负责将其持久保存在数据...
    编程 发布于2024-11-03
  • 如何使用 SQL 搜索列中的多个值?
    如何使用 SQL 搜索列中的多个值?
    使用 SQL 在列中搜索多个值构建搜索机制时,通常需要在同一列中搜索多个值场地。例如,假设您有一个搜索字符串,例如“Sony TV with FullHD support”,并且想要使用该字符串查询数据库,将其分解为单个单词。通过利用 IN 或 LIKE 运算符,您可以实现此功能。使用 IN 运算符...
    编程 发布于2024-11-03
  • 如何安全地从 Windows 注册表读取值:分步指南
    如何安全地从 Windows 注册表读取值:分步指南
    如何安全地从 Windows 注册表读取值检测注册表项是否存在确定注册表项是否存在:LONG lRes = RegOpenKeyExW(HKEY_LOCAL_MACHINE, L"SOFTWARE\\Perl", 0, KEY_READ, &hKey); if (lRes...
    编程 发布于2024-11-03
  • Staat源码中的useBoundStoreWithEqualityFn有解释。
    Staat源码中的useBoundStoreWithEqualityFn有解释。
    在这篇文章中,我们将了解Zustand源码中useBoundStoreWithEqualityFn函数是如何使用的。 上述代码摘自https://github.com/pmndrs/zustand/blob/main/src/traditional.ts#L80 useBoundStoreWithE...
    编程 发布于2024-11-03
  • 如何使用 Go 安全地连接 SQL 查询中的字符串?
    如何使用 Go 安全地连接 SQL 查询中的字符串?
    在 Go 中的 SQL 查询中连接字符串虽然文本 SQL 查询提供了一种简单的数据库查询方法,但了解将字符串文字与值连接的正确方法至关重要以避免语法错误和类型不匹配。提供的查询语法:query := `SELECT column_name FROM table_name WHERE ...
    编程 发布于2024-11-03
  • 如何在 Python 中以编程方式从 Windows 剪贴板检索文本?
    如何在 Python 中以编程方式从 Windows 剪贴板检索文本?
    以编程方式访问 Windows 剪贴板以在 Python 中进行文本检索Windows 剪贴板充当数据的临时存储,从而实现跨应用程序的无缝数据共享。本文探讨如何使用 Python 从 Windows 剪贴板检索文本数据。使用 win32clipboard 模块要从 Python 访问剪贴板,我们可以...
    编程 发布于2024-11-03
  • 使用 MySQL 存储过程时如何访问 PHP 中的 OUT 参数?
    使用 MySQL 存储过程时如何访问 PHP 中的 OUT 参数?
    使用 MySQL 存储过程访问 PHP 中的 OUT 参数使用 PHP 在 MySQL 中处理存储过程时,获取由于文档有限,“OUT”参数可能是一个挑战。然而,这个过程可以通过利用 mysqli PHP API 来实现。使用 mysqli考虑一个名为“myproc”的存储过程,带有一个 IN 参数(...
    编程 发布于2024-11-03
  • 在 Kotlin 中处理 null + null:会发生什么?
    在 Kotlin 中处理 null + null:会发生什么?
    在 Kotlin 中处理 null null:会发生什么? 在 Kotlin 中进行开发时,您一定会遇到涉及 null 值的场景。 Kotlin 的 null 安全方法众所周知,但是当您尝试添加 null null 时会发生什么?让我们来探讨一下这个看似简单却发人深省的情况! ...
    编程 发布于2024-11-03

免责声明: 提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发到邮箱:[email protected] 我们会第一时间内为您处理。

Copyright© 2022 湘ICP备2022001581号-3