简化jQuery代码：利用函数避免重复逻辑与优化事件绑定-js教程-PHP中文网

简化jQuery代码：利用函数避免重复逻辑与优化事件绑定

心靈之曲

发布： 2025-10-12 09:26:32

原创

887人浏览过

简化jQuery代码：利用函数避免重复逻辑与优化事件绑定

本文旨在解决jquery开发中常见的代码重复问题，特别是当页面初始化加载和用户交互事件（如下拉菜单`change`事件）需要执行相同逻辑时。我们将通过封装核心逻辑到可重用函数，并正确绑定事件处理器，来消除重复代码，提升代码的可维护性和可读性。

在前端开发中，尤其是在使用jQuery进行DOM操作和事件处理时，我们经常会遇到需要在页面加载时执行一次特定逻辑，并在用户触发某个事件（如下拉菜单选择变化、按钮点击等）时再次执行相同逻辑的场景。如果不对这部分逻辑进行合理封装，很容易导致代码重复，降低可维护性。

问题场景：重复的逻辑与糟糕的事件绑定

考虑一个常见的需求：根据下拉菜单的选择值显示或隐藏不同的提示信息（tooltip）。初始代码可能如下所示，它在$(document).ready()中执行一次逻辑，又在change事件中重复执行一次：

$(document).ready(function(){
    var service = "";
    var otherservice = "";
    // 页面加载时检查一次
    service = '.v' + $('select#989022_58716pi_989022_58716 option:selected').val();
    otherservice = '#form-tooltips div:not('+service+')';
    $('#form-tooltips div'+service).show();
    $(otherservice).hide();

    // 每次选择变化时再次检查
    $('select#989022_58716pi_989022_58716').on('change', function(){
        service = '.v' + $('select#989022_58716pi_989022_58716 option:selected').val();
        otherservice = '#form-tooltips div:not('+service+')';
        $('#form-tooltips div'+service).show();
        $(otherservice).hide();
    });
});

// 提示信息的HTML结构
$("<div id='form-tooltips'><div class='v1381962'>Tooltip 1</div><div class='v1381965'>Tooltip 2</div></div>").insertAfter(".add-tooltip-after");

登录后复制

这段代码的问题在于，显示/隐藏提示信息的逻辑被重复了两次。当我们需要修改这段逻辑时，必须在两个地方进行修改，这不仅效率低下，还容易引入错误。

此外，尝试通过函数封装时，新手可能会遇到语法错误和错误的事件绑定方式，例如：

// 错误的函数定义和事件绑定尝试
function checkTooltip({ // 语法错误：函数定义不应使用对象解构，除非期望传入一个对象
    service = '.v' + $('select#989022_58716pi_989022_58716 option:selected').val();
    otherservice = '#form-tooltips div:not("+service+")'; // 字符串拼接错误
    $('#form-tooltips div'+service).show();
    $(otherservice).hide();
});
checkTooltip();
$('select#989022_58716pi_989022_58716').on('change', checkTooltip()); // 错误：立即执行函数并传递返回值

登录后复制

上述代码中的错误主要有两点：

集简云

软件集成平台，快速建立企业自动化与智能化

查看详情

函数定义语法错误：function checkTooltip({ ... }); 这种语法是用于解构参数对象的，但这里并没有传入参数，导致语法解析失败。
事件绑定错误：$('...').on('change', checkTooltip()); 会在事件监听器绑定时立即执行checkTooltip函数，并将其返回值（本例中为undefined）作为事件处理器。正确的做法是传递函数本身的引用，而不是函数执行的结果。

解决方案：封装函数与正确的事件绑定

为了解决上述问题，我们应该将重复的逻辑封装到一个独立的函数中，并在需要时调用该函数。同时，确保事件绑定时传递的是函数的引用。

以下是优化后的代码示例：

$(document).ready(function(){
    // 使用let/const声明变量是现代JavaScript的推荐做法，
    // 它们具有块级作用域，有助于避免变量污染。
    let service = '';
    let otherservice = '';

    // 定义一个函数来封装显示/隐藏提示信息的逻辑
    // 推荐使用箭头函数或传统函数声明
    const checkTooltip = () => {
        // 在函数内部获取当前选择值，确保每次执行都获取最新状态
        service = '.v' + $('select#989022_58716pi_989022_58716 option:selected').val();
        // 注意字符串拼接，确保选择器正确
        otherservice = '#form-tooltips div:not(' + service + ')';

        // 显示当前选中的提示，隐藏其他提示
        $('#form-tooltips div' + service).show();
        $(otherservice).hide();
    };

    // 1. 页面加载时执行一次该函数
    checkTooltip();

    // 2. 绑定change事件，当下拉菜单值改变时调用checkTooltip函数
    // 注意：这里传递的是函数引用 `checkTooltip`，而不是 `checkTooltip()` 的执行结果
    $('select#989022_58716pi_989022_58716').on('change', checkTooltip);
});

// 提示信息的HTML结构，保持不变
$("<div id='form-tooltips'><div class='v1381962'>Tooltip 1</div><div class='v1381965'>Tooltip 2</div></div>").insertAfter(".add-tooltip-after");

登录后复制

关键改进点：

DRY (Don't Repeat Yourself) 原则：通过将核心逻辑封装到checkTooltip函数中，我们消除了代码重复。现在，无论是在页面加载时还是在下拉菜单值改变时，都只调用这一个函数。
函数定义语法：采用了正确的函数定义方式，例如使用const checkTooltip = () => { ... };（箭头函数）或function checkTooltip() { ... }（传统函数声明）。
正确的事件绑定：
- $('...').on('change', checkTooltip);：这是正确的事件绑定方式。它将checkTooltip函数的引用作为事件处理器传递给on()方法。当change事件发生时，jQuery会自动调用checkTooltip函数。
- $('...').on('change', checkTooltip());：这是错误的。checkTooltip()会立即执行该函数，并将其返回值（在本例中为undefined）作为事件处理器。这意味着当change事件发生时，实际上没有函数被调用。
变量作用域：在函数内部定义和使用service和otherservice变量，确保它们在每次函数执行时都能获取到最新的下拉菜单值。使用let或const代替var是现代JavaScript的推荐实践，因为它们提供了块级作用域，有助于避免变量污染和意外行为。

注意事项与最佳实践：

选择器优化：在示例中，下拉菜单的选择器select#989022_58716pi_989022_58716显得非常冗长且不具可读性。在实际开发中，建议使用更简洁、语义化的ID或类名，例如select#service-selector，这将大大提高代码的可读性和可维护性。

缓存jQuery对象：如果某个jQuery选择器被频繁使用，可以将其缓存起来，避免重复查询DOM，从而提高性能。例如：

const $serviceSelector = $('select#service-selector');
const $formTooltips = $('#form-tooltips');
// ...
service = '.v' + $serviceSelector.find('option:selected').val();
$formTooltips.find('div' + service).show();
// ...
$serviceSelector.on('change', checkTooltip);

登录后复制

错误处理：在实际应用中，可以考虑添加错误处理机制，例如当选择器未找到元素时如何处理。
模板字符串：ES6的模板字符串（使用反引号 `）可以使字符串拼接更加简洁和易读：
```
otherservice = `#form-tooltips div:not(${service})`;
```
登录后复制