编写易于维护的JavaScript代码的艺术：实用指南

解释：
这个标题简洁明了地传达了文章的核心内容，即如何通过一些实用的方法编写出清晰、易于维护的JavaScript代码。同时，它也符合中文的口语表达习惯，容易让读者产生共鸣。

干净代码的艺术：编写可维护JavaScript的指南

简介:

编写干净的代码不仅仅是审美选择的问题——它是减少错误、促进团队合作并确保软件项目长期维护的基本做法。本指南将探讨编写干净JavaScript代码的原则、实践和实用技巧。

核心原则如下

1. 先讲可读性

代码被阅读的次数远远多于被编写。优质的代码就像一个故事，包括你未来的自己在内，都容易读懂。

糟糕:

    const x = y + z / 3.14; // 计算 x 为 y 和 z 除以 3.14 的和

全屏模式, 退出全屏

好的:

    const r = d / Math.PI;

全屏模式，退出全屏

2. 维护性真的很重要啊

可维护的代码不仅具备模块性，还遵循SOLID原则，并且减少依赖。

真糟糕：

function calculateArea(radius) {
    // ...许多嵌套的逻辑和复杂的计算...
    // ...多重任务...
    // ...多重任务...
    return 结果;
}

全屏显示，退出全屏

好

// 计算给定半径的圆的面积
function calculateArea(radius) {
    return Math.PI * radius * radius;
}

切换到全屏模式，退出全屏

3. 可测性

干净的代码天生就容易测试。把复杂的操作拆分成更小、可测试的单元。

糟糕:

以下是一个名为getRandomNumber的函数，它返回一个0到1之间的随机数。

function getRandomNumber() {
    return Math.random();
}

点击全屏 点击退出全屏

好的：接下来呢？

函数 getRandomNumber(随机生成器 = Math.random) {
    return 随机生成器();
}

切换到全屏模式，切换出全屏模式

4. 扩展性

干净的代码会随着项目平滑地发展。

真糟糕：

    function handleUserData(data) {
        if (data.type === 'admin') {
            // 管理员逻辑的50行代码
        } else if (data.type === 'user') {
            // 用户逻辑的50行代码
        } else if (data.type === 'guest') {
            // 访客逻辑的50行代码
        }
    }

切换到全屏模式 退出全屏

好的，

    const userHandlers = {
        管理员: handleAdminData,
        用户: handle用户数据,
        访客: handleGuestData
    };

    function handle用户数据(data) {
        // 用户数据
        return userHandlers[data.type](https://dev.to/data);
    }

点击全屏/退出全屏

常见陷阱和解决方法：

小贴士：

1. 命名困境

名字应当反映意图和情境。

不好：例如：

    function calc(a, b) {
        // 这是一个简单的函数，用于计算两个数的乘积并加上税费
        return a * b + 税费;
    }

全屏 退出

好:

/**

* 计算含税价格的函数

* @param basePrice 基本价格

* @param taxRate 税率

* @returns 含税后的价格
 */
function calculatePriceWithTax(basePrice, taxRate) {
    const TAX_MULTIPLIER = 1;
    return basePrice * taxRate + TAX_MULTIPLIER;
}

全屏 退出全屏

2. 避免回调噩梦

用现代异步模式替换嵌套回调。

坏的例子：

    getUserData(userId, function(user) {
        getOrders(user.id, function(orders) {
            processOrders(orders, function(result) {
                // 更多层级...
            });
        });
    });

全屏模式 退出全屏

好的:

    async function processUserOrders(userId) {
        try {
            const user = await getUserData(userId);
            const orders = await getOrders(user.id);
            return await processOrders(orders);
        } catch (error) {
            handleError(error);
        }
    }

全屏模式 退出全屏

3. 配置管理

建立一个关于配置值的统一真相来源。

差：

// 分布在多个文件中的代码片段
以下是代码示例：
const API_KEY = 'abc123';
const API_ENDPOINT = 'https://api.example.com';
这些是示例中的常量定义。

全屏模式 (点击进入)/退出全屏模式

好：

    // 配置文件 config.js
    export const config = {
        api: {
            key: process.env.API_KEY, // API密钥
            endpoint: process.env.API_ENDPOINT  // API端点
        }
    };

进入全屏 退出全屏

实用的权衡与折衷:

性能表现与易读性

在保证可读性的同时考虑性能需求：

// 更易读，性能略低
定义 doubledNumbers 常量为 numbers 数组中的每个元素进行两倍计算的结果;

// 不太易读，性能更高（当性能至关重要时）
通过一个 for 循环，将 numbers 中的每个元素乘以 2;

全屏 退出

纯函数编程 vs. 副效应

虽然纯函数是理想的，但在实际应用中，副作用是必要的。要将它们隔离并仔细处理：

    // 纯函数 (无副作用)
    function calculateTotal(items) {
        return items.reduce((sum, item) => sum + item.price, 0);
    }

    // 必要且独立的副作用
    async function saveOrderToDatabase(order) {
        await database.orders.save(order);
        logOrderCreation(order); // 记录订单创建
    }

全屏显示，退出全屏

最佳实践：

1. 给变量和函数起有意义的名字

• 变量名应反映其用途
• 函数名应描述其执行的动作
• 类名应代表其表示的实体

2. 尽量保持函数小巧

• 每个函数应该只做一件事
• 每个函数的行数应保持在20行以内
• 将复杂的逻辑抽取到单独的函数中

3. 避免使用魔法数字

• 使用命名常量来表示所有的数字
• 将相关的常量分组到配置项中

4. 优雅地处理错误

• 适当使用 try/catch 语句
• 提供有意义的错误提示
• 考虑错误恢复的方法

最后:

编写干净的代码是一场旅程，而不是一个终点。虽然完美的清洁可能无法达到，但通过持续的实践和务实的权衡来追求干净的代码，会使代码更易于维护、更可靠、更便于协作。记住，情境很重要——同样的代码在不同情况下可能会有所不同。关键是找到适合你具体情况的平衡点，同时保持一种让他人（包括未来的自己）会感激的代码。

🔗 点击这里请在我的LinkedIn上与我连接

让我们一起深入探索软件工程的世界吧！我经常分享关于JavaScript、TypeScript、Node.js、React、Next.js、数据结构和算法、Web开发等方面的见解。无论你是想提升技能还是探讨一些激动人心的话题，我都非常希望能与你连接并一起成长。

关注我：Nozibul Islam（领英）