提高可读性和可维护性代码的 5 个简单提示

最新推荐文章于 2023-08-29 20:05:09 发布

jeans5201

最新推荐文章于 2023-08-29 20:05:09 发布

阅读量576

点赞数

文章标签： html

原文链接：https://javascript.plainenglish.io/5-easy-tips-for-more-readable-and-maintainable-code-540f81daa711

版权

本文介绍了五个编程技巧：布尔变量前缀、HTML元素id位置、DOM操作与函数命名、CQRS模式应用和条件语句的括号使用。这些技巧旨在增强代码清晰度和维护性，适用于前端开发、后端架构和HTML/JS编程。

摘要由CSDN通过智能技术生成

1. 用“is”或“can”等动词作为布尔变量的前缀

在声明布尔变量时，在变量名前加上“is”或“can”等动词，以帮助读者快速了解他们正在使用的值的类型。让我们看一些例子。

display vs isDisplaying

const 显示 = 假；
const isDisplaying = false; // 更好的

虽然您可以将display解释为“yes”或“no”，但我认为 display 还可以包含诸如“block”、“in-line”、“none”等值。而对于“isDisplaying”，范围可能性可能仅限于“真”或“假”

切换 vs canToggle

const 切换 = 假；
const canToggle = false; // 更好的

再一次，我认为“canToggle”比“toggle”更直观。“toggle”为更多解释打开了大门，例如“off”或“on”，或者甚至可以是执行一些附加逻辑的函数。使用 canToggle，很明显它要么是一个布尔值，要么是一个返回布尔值的函数。

moreItems 与 areMoreItems

const moreItems = false;
const areMoreItems= false; // 更好的

在这个例子中，我们以“are”作为前缀，它只是复数（许多）的“is”的一种形式。在这种情况下，“moreItems”可以指一系列附加项目，但 areMoreItems 清楚地代表是否有更多项目。

2. 将 'id' 属性放在 HTML 元素的首位

如果您使用 HTML，或者像 React 或 Vue 这样的 JavaScript 框架，您应该知道 <input> 或 <div> 上的属性数量会快速增长。在浏览大型 html 文件或表单时，始终将 id=”elementId” 属性放在首位确实很有帮助，以便读者快速知道他们正在查看什么元素

<span style="background-color:#f2f2f2"><span style="color:rgba(0, 0, 0, 0.8)"><span style="color:#292929"><form id="signUpForm"> 
   // 正确的方式
   <input 
      id="email" // 在顶部清除
      type="email" 
      onChange={(e) => setEmail(e.target.value)} // 反应代码
      value={email} 
      tabIndex="1" 
    </input></span><span style="color:#292929">    // 错误的方式
    <input 
      onChange={(e) => setPhone(e.target.value)} // React 代码
      value={phone} 
      tabIndex="2" 
      id="phone" // ID 更难找到
      类型="电话"    
    </input> 
</form></span></span></span>

对于第一个输入，我们将 id 属性放在首位，对于第二个输入，我们将其隐藏在一些属性中。在扫描此代码时，我认为读者会比第二个更快地将第一个输入识别为电子邮件字段。在第二个输入中，读者可能必须扫描 onChange 方法并尝试从那里解释，而在第一个输入中很难错过。

3. 与 DOM 交互时，始终在函数前加上 'handle'

如果您在使用像 React 这样的框架/库时将回调函数传递给 DOM 元素，并且您正在接收一种形式的“事件”对象，我强烈建议您在函数前加上“句柄”。你会经常在 React 文档中看到这一点，但我想重新说明这个约定在阅读组件时有多大帮助。

<span style="background-color:#f2f2f2"><span style="color:rgba(0, 0, 0, 0.8)"><span style="color:#292929">// 不太好
function save(event){ 
   event.preventDefault(); 
}</span><span style="color:#292929"><button onClick={save}></form></span><span style="color:#292929">VS</span><span style="color:#292929">// 好
函数 handleSave(event){ 
   event.preventDefault(); 
}</span><span style="color:#292929"><button onClick={handleSave}></form></span></span></span>

如果您从执行业务逻辑或调用 API 服务的外部来源引入其他方法，例如“保存”，那么区分与 DOM 元素交互的函数和不与 DOM 元素交互的函数，并使用前缀“句柄”确实很有帮助' 使这变得简单而有效。

4. 使用 CQRS 模式来区分查询和命令

如果您不熟悉 CQRS 模式，我建议您先阅读Martin Fowler 的这篇精彩文章。我的简要概述是操作分为两类，查询（获取信息）和命令（对某事采取行动）。如果您了解 CRUD，那么查询就是“R”，命令就是“CUD”（以及其他所有内容）。

由于大多数应用程序具有查询和命令的平衡，因此构建应用程序以区分两者可以使您的代码更易于阅读和更易于维护。例如，如果您的应用程序调用一个 api，我会在我的 React 应用程序中创建一个 backendConfig 文件并像这样构建它。

<span style="background-color:#f2f2f2"><span style="color:rgba(0, 0, 0, 0.8)"><span style="color:#292929">// backendConfig.js //</span><span style="color:#292929">导出 queryEndpoints = { 
   getAllCustomers: '/api/get-all-customers' 
   getCustomer: '/api/get-customer/' 
}</span><span style="color:#292929">export commandEndpoints = { 
   createCustomer: '/api/create-customer', 
   updateCustomer: '/api/update-customer' 
}</span>
<span style="color:#292929">// 客户服务.js //</span><span style="color:#292929">从 './backendConfig.js' 导入 {queryEndpoints, commandEndpoints}</span><span style="color:#292929">// 创建客户方法
... 
axios.post(commandEndpoints.createCustomer, customer); 
...</span><span style="color:#292929">// 获取客户方法
... 
const customer = await axios.get(queryEndpoints.getCustomer + customerId); 
...</span></span></span>

这个例子省略了很多周围的逻辑，但希望您理解意图并掌握将端点划分为查询和命令的好处。如果您有一个更大的 API，这可能非常有用，并且在添加新端点或查找现有端点时应该可以节省您的时间。

5. 条件语句总是使用大括号

你们中的一些人可能不同意我的观点，但我在编写条件语句时总是使用括号。如果你来自 python,也许你喜欢只使用缩进，但我发现大括号提供了大量的空白，既可以阅读代码，又可以快速承认你需要考虑一个条件。此外，您将遇到必须对多行条件使用大括号的情况，因此最好保持一致并在任何地方使用它们。我知道您可能希望使用更少的代码行，但我认为让某人不小心跳过重要的条件是不值得的。

<span style="background-color:#f2f2f2"><span style="color:rgba(0, 0, 0, 0.8)"><span style="color:#292929">// 好的
if(isValid){ 
   save(); 
}</span><span style="color:#292929">对比</span><span style="color:#292929">// 不太好 - 不太一致
if(isValid) save(); 
或
if(isValid) 
   save();</span></span></span>

我确实使用三元运算符，但我通常会尝试通过换行和缩进使它们显而易见。我也只在将结果分配给变量时使用它们。

<span style="background-color:#f2f2f2"><span style="color:rgba(0, 0, 0, 0.8)"><span style="color:#292929">const errorMessage = !form.isValid 
   ? "表单无效" 
   :"";</span></span></span>