本文旨在解决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结构
$("Tooltip 1Tooltip 2").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结构，保持不变
$("Tooltip 1Tooltip 2").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})`;
总结
通过将重复的逻辑封装到函数中，并以正确的方式绑定事件处理器，我们可以显著提高jQuery代码的模块化、可读性和可维护性。遵循DRY原则和现代JavaScript的最佳实践，将有助于构建更健壮、更易于管理的前端应用。
