如何声明存储主函数变量的子函数并实现变量关联？

我希望把主函数中的重要变量提取到子函数中，以此提升主函数的可读性。以下是我的主函数和子函数代码，请问怎么实现子函数里声明的变量和主函数关联调用？

原主函数代码 #

function calci() {

    VarOfElements(connection) ;

    
    const condExceededPersons = inp2 > 4;
    const condPersonsCosts = persons === 4 && km > 0;
    const condNonePersonsCosts = persons < 4 || inp2 != null;

    if (condExceededPersons) {
        output.innerHTML = "Only four persons can drive with you!";
    } else if (condPersonsCosts) {
        var personsExpenses = 5;
    } else if (condNonePersonsCosts) {
        personsExpenses = 0;
    }
    const noInput = inp1 != null;
    if (noInput) {
        output.innerHTML = "Please enter a distance";
    }
    const conditionSevenO = km <= 7 && km > 0;
    const overSevenOeq = km > 7 && km > 0;

    if (conditionSevenO) {
        y = 3.9
        var wholeExpenses = routePrice * km + y + personsExpenses;
        output.innerHTML = "You have to pay " + wholeExpenses.toFixed(2) + "€";
    } else if (overSevenOeq) {
        y = 3.9
        let sevenLess = km - 7;
        let overSevenRoute = 1.65;
        let overSeven = sevenLess * overSevenRoute;
        let seventhExpenses = 16.10;
        wholeExpenses = y + seventhExpenses + overSeven + personsExpenses;
        output.innerHTML = "You have to pay " + wholeExpenses.toFixed(2) + "€";

    }
}

原子函数代码 #

function VarOfElements(connection) {
    var y;
    var routePrice = 2.3;
    inp1 = document.getElementById('input-box1');
    inp2 = document.getElementById('input-box2');
    var km = parseInt(document.getElementById('input-box1').value);
    var persons = parseInt(document.getElementById('input-box2').value);
    output = document.getElementById('output-box');
}

解决方案：让子函数返回变量集合 #

最清晰且符合可读性要求的方式是让子函数返回一个包含所有需要变量的对象，主函数调用子函数后接收这个对象，再使用其中的变量。这样既避免了全局变量污染，又明确了变量的来源。

修改后的子函数 #

function VarOfElements() {
    // 移除未使用的connection参数
    const routePrice = 2.3;
    const inp1 = document.getElementById('input-box1');
    const inp2 = document.getElementById('input-box2');
    const km = parseInt(inp1.value);
    const persons = parseInt(inp2.value);
    const output = document.getElementById('output-box');
    let y; // 保留变量声明，供主函数赋值使用

    // 返回打包后的变量对象
    return {
        routePrice,
        inp1,
        inp2,
        km,
        persons,
        output,
        y
    };
}

修改后的主函数 #

function calci() {
    // 调用子函数并接收变量集合
    const elements = VarOfElements();
    // 解构对象，直接使用变量名，提升代码可读性
    const { routePrice, inp1, inp2, km, persons, output } = elements;

    let personsExpenses = 0;
    const condExceededPersons = persons > 4;
    const condPersonsCosts = persons === 4 && km > 0;

    if (condExceededPersons) {
        output.innerHTML = "Only four persons can drive with you!";
    } else if (condPersonsCosts) {
        personsExpenses = 5;
    }

    // 修复输入有效性判断逻辑
    if (isNaN(km)) {
        output.innerHTML = "Please enter a valid distance";
        return; // 提前退出，避免无效计算
    }

    const conditionSevenO = km <= 7 && km > 0;
    const overSevenOeq = km > 7;

    if (conditionSevenO) {
        const wholeExpenses = routePrice * km + 3.9 + personsExpenses;
        output.innerHTML = `You have to pay ${wholeExpenses.toFixed(2)}€`;
    } else if (overSevenOeq) {
        const sevenLess = km - 7;
        const overSeven = sevenLess * 1.65;
        const wholeExpenses = 3.9 + 16.10 + overSeven + personsExpenses;
        output.innerHTML = `You have to pay ${wholeExpenses.toFixed(2)}€`;
    }
}

关键改动说明 #

• 子函数返回对象：将所有需要传递的变量打包成对象返回，明确变量传递关系，避免全局变量污染。
• 主函数解构赋值：通过解构直接使用变量名，保持代码简洁，同时清晰展示变量来源。
• 修复原代码问题：修正了原代码中用DOM元素直接做数值判断的错误，完善输入有效性逻辑，统一变量声明规范。

内容的提问来源于stack exchange，提问作者65 sami