用工厂函数重构12类回收物料按钮逻辑——告别重复代码的JavaScript实践-php教程-PHP中文网

用工厂函数重构12类回收物料按钮逻辑——告别重复代码的JavaScript实践

本文详解如何通过高阶函数（工厂函数）将12个硬编码按钮回调压缩为1个可复用函数，实现动态填充物料信息、自动查找空行、聚焦输入框，并支持未来无缝扩展新物料类型。

本文详解如何通过高阶函数（工厂函数）将12个硬编码按钮回调压缩为1个可复用函数，实现动态填充物料信息、自动查找空行、聚焦输入框，并支持未来无缝扩展新物料类型。

在回收物资管理系统中，面对12种不同材质（如PET、PEAD、PVC等）的录入需求，若为每种物料单独编写 myFunction1() 到 myFunction12()，不仅代码冗余严重、维护成本高，还极易因复制粘贴引发参数错位、ID遗漏等低级错误。真正的工程化解法不是“写更多函数”，而是用函数生成函数——即采用 JavaScript 中的高阶函数（Higher-Order Function）与闭包机制，构建轻量级“物料按钮工厂”。

✅ 推荐方案：单函数工厂 + 动态DOM定位

将所有物料配置集中管理，用一个通用工厂函数生成专属回调：

// 【核心工厂】根据物料标识和单价，返回可直接绑定的点击处理器
function createMaterialHandler(materialCode, unitPrice) {
    return function () {
        // 按顺序查找第一个空闲行（material1 → material4）
        for (let i = 1; i <h3>✅ HTML 按钮改造：从12个 onclick 到声明式绑定</h3><p>原12个重复 <button onclick="myFunctionX()"> 可全部替换为语义化、易维护的写法：</button></p><pre class="brush:php;toolbar:false;"><!-- 示例：前3个按钮（其余同理） -->
<button type="button" class="botonimagen1" onclick="createMaterialHandler('1 PET', 1.5)()">
</button>
<button type="button" class="botonimagen1" onclick="createMaterialHandler('2 PEAD', 2.0)()">
</button>
<button type="button" class="botonimagen1" onclick="createMaterialHandler('3 PVC', 1.0)()">
</button>
<!-- ... 后续9个只需改参数，无需新增函数 -->

? 关键优势：

零全局函数污染（无需定义 myFunction1~myFunction12）；

物料配置与逻辑分离，增删类型仅需修改调用参数；

闭包自动捕获 materialCode 和 unitPrice，无需额外状态管理。

✅ 进阶：支持动态添加行（突破4行限制）

当前逻辑限定最多4行，但业务可能需要弹性扩容。可在工厂函数中加入 DOM 动态插入能力：

Java JDK 25

Java JDK 25 来自 OpenJDK 官方归档，版本为 JDK 25，本条下载地址已指向官方 Windows x64 zip 安装包直链，适合调试旧项目或兼容旧版 Java 运行环境。

下载

function createMaterialHandler(materialCode, unitPrice) {
    return function () {
        // 先尝试填充现有行
        for (let i = 1; i  {
                input.id = input.id.replace(/\d+$/, (n) => parseInt(n) + 1);
                input.value = '';
                input.readOnly = true;
            });
            // 更新新行中的label/placeholder等文本（按需）
            newRow.querySelector('input#material1').id = 'material5';
            newRow.querySelector('input#precio1').id = 'precio5';
            newRow.querySelector('input#peso1').id = 'peso5';
            newRow.querySelector('input#subtotal1').id = 'subtotal5';
            newRow.querySelector('input#quitar1').id = 'quitar5';

            lastRow.parentNode.appendChild(newRow);
            // 填充新行第一项
            fillRow(5, materialCode, unitPrice);
        }
    };
}

function fillRow(rowNum, code, price) {
    document.getElementById(`material${rowNum}`).value = code;
    document.getElementById(`precio${rowNum}`).value = price;
    const pesoEl = document.getElementById(`peso${rowNum}`);
    if (pesoEl) {
        pesoEl.readOnly = false;
        pesoEl.focus();
    }
}

⚠️ 注意事项与最佳实践

避免内联 onclick 的局限性：生产环境建议改用 addEventListener，便于统一事件委托与销毁：

// 在页面加载后批量绑定
document.querySelectorAll('.botonimagen1').forEach((btn, index) => {
    const config = [
        ['1 PET', 1.5], ['2 PEAD', 2.0], ['3 PVC', 1.0], /* ...共12项 */
    ];
    btn.addEventListener('click', createMaterialHandler(...config[index]));
});