本文将指导读者如何通过封装函数来优化重复的 jQuery 代码，特别是在处理页面加载和用户交互时动态更新 UI 的场景。我们将以一个根据下拉菜单选择项显示不同提示信息的实例为例，详细解析如何将重复的逻辑提取为可重用的函数，从而提高代码的可读性、可维护性，并避免常见的语法错误。
在前端开发中，我们经常需要根据用户的操作或页面状态动态地更新用户界面（UI）。一个常见的场景是，当页面加载时需要检查某个初始状态，并且在用户后续与该元素交互时（例如，改变下拉菜单的选项）再次执行相同的逻辑。这种模式很容易导致代码重复，降低代码的可维护性和可读性。本教程将通过一个具体的 jQuery 示例，演示如何有效地避免这种重复。
识别重复代码问题
假设我们有一个下拉菜单，根据其选中的值，需要显示不同的提示信息（tooltip）。初始的实现可能如下所示，它在页面加载时检查一次，并在下拉菜单值改变时再次执行相同的逻辑：
$(document).ready(function(){
var service = "";
var otherservice = "";
var selectId = 'select#989022_58716pi_989022_58716'; // 优化选择器重复
// 页面加载时检查下拉菜单值
service = '.v' + $(selectId + ' option:selected').val();
otherservice = '#form-tooltips div:not('+service+')';
$('#form-tooltips div'+service).show();
$(otherservice).hide();
// 下拉菜单值改变时再次检查
$(selectId).on('change', function(){
service = '.v' + $(selectId + ' option:selected').val();
otherservice = '#form-tooltips div:not('+service+')';
$('#form-tooltips div'+service).show();
$(otherservice).hide();
});
});
// 提示信息的HTML结构，通常在页面其他地方或通过JS动态生成
$("<div id='form-tooltips'><div class='v1381962'>Tooltip 1</div><div class='v1381965'>Tooltip 2</div></div>").insertAfter(".add-tooltip-after");在这段代码中，显示和隐藏提示信息的逻辑在 $(document).ready() 块中和 on('change') 事件处理器中重复出现了。这种重复不仅增加了代码量，而且一旦需要修改提示逻辑，就必须在多个地方进行同步更新，容易出错。
解决方案：封装为可重用函数
为了避免代码重复，我们可以将这部分逻辑封装到一个独立的函数中。这样，无论是在页面加载时还是在事件触发时，我们都可以简单地调用这个函数。
错误的尝试及原因分析
在尝试封装函数时，初学者可能会遇到语法错误。例如，以下尝试是错误的：
$(document).ready(function(){
var service = '';
var otherservice = '';
// 错误的函数定义语法
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();
// 错误的事件绑定：checkTooltip() 会立即执行并将其返回值（undefined）作为事件处理器
$('select#989022_58716pi_989022_58716').on('change', checkTooltip());
});上述代码中的主要问题在于函数定义的语法不正确，以及事件处理器绑定时对函数的调用方式不当。JavaScript 函数定义通常使用 function name() { ... } 或箭头函数 const name = () => { ... } 形式。此外，在事件绑定时，我们应该传递函数本身的引用，而不是调用函数的返回值。
正确的函数封装与应用
以下是正确的函数封装和应用方式：
$(document).ready(function(){
// 建议使用 let 或 const 替代 var
let service = '';
let otherservice = '';
const selectId = 'select#989022_58716pi_989022_58716'; // 缓存选择器
// 定义一个函数来处理提示信息的显示/隐藏逻辑
const checkTooltip = () => {
// 获取当前选中项的值，并构建选择器
service = '.v' + $(selectId + ' option:selected').val();
// 构建要隐藏的其他提示信息的选择器
otherservice = '#form-tooltips div:not(' + service + ')';
// 显示与选中值对应的提示信息
$('#form-tooltips div' + service).show();
// 隐藏所有其他提示信息
$(otherservice).hide();
};
// 页面加载时立即执行一次，以处理初始状态（如页面刷新后值仍存在）
checkTooltip();
// 绑定 change 事件，当下拉菜单值改变时调用 checkTooltip 函数
// 注意：这里是传递函数引用 checkTooltip，而不是执行函数 checkTooltip()
$(selectId).on('change', checkTooltip);
});
// 提示信息的HTML结构，通常在页面其他地方或通过JS动态生成
$("<div id='form-tooltips'><div class='v1381962'>Tooltip 1</div><div class='v1381965'>Tooltip 2</div></div>").insertAfter(".add-tooltip-after");代码解析与注意事项
-
函数定义 (const checkTooltip = () => { ... }):
- 我们使用 ES6 的箭头函数语法定义了 checkTooltip 函数。这是一种简洁的函数定义方式，也可以使用传统的 function checkTooltip() { ... } 语法。
- 函数体内包含了所有与显示/隐藏提示信息相关的逻辑。
-
变量声明 (let service = '';):
- 推荐使用 let 或 const 替代 var 进行变量声明。let 允许变量在块级作用域内重新赋值，而 const 用于声明常量（不可重新赋值）。这有助于避免变量污染和意外的副作用。
-
缓存选择器 (const selectId = 'select#989022_58716pi_989022_58716';):
- 将重复使用的选择器字符串存储在一个常量中，可以提高代码的可读性，并便于后续修改。
-
初始调用 (checkTooltip();):
- 在 $(document).ready() 内部直接调用 checkTooltip()，确保页面加载时根据当前下拉菜单的选中值显示正确的提示信息。这对于处理页面因表单提交错误而刷新，但下拉菜单值仍保持不变的情况非常重要。
-
事件绑定 ($(selectId).on('change', checkTooltip);):
- 这是关键点之一。在 on() 方法中，我们将 checkTooltip 函数本身作为第二个参数传递，而不是调用它（即 checkTooltip()）。
- 当 change 事件发生时，jQuery 会自动调用 checkTooltip 函数。如果写成 checkTooltip()，那么函数会在事件绑定时立即执行，并将函数的返回值（通常是 undefined）作为事件处理器，导致事件无法正常触发。
-
选择器优化建议:
- 原始的选择器 select#989022_58716pi_989022_58716 包含了一长串数字和下划线，可读性较差。在实际项目中，建议使用更具语义化和人类可读性的 ID 或类名，例如 select#service-selector。这会使代码更容易理解和维护。
总结
通过将重复的逻辑封装到函数中，我们成功地将 jQuery 代码从重复模式转变为更简洁、更易于维护的结构。这种重构不仅减少了代码量，还提高了代码的可读性，并使得未来的功能扩展或修改变得更加简单。在编写 JavaScript 和 jQuery 代码时，始终寻找机会将重复的逻辑提取为可重用的函数，是提高代码质量的关键实践之一。
