本文将指导读者如何通过封装函数来优化重复的 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动态生成$("Tooltip 1Tooltip 2").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动态生成$("Tooltip 1Tooltip 2").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 代码时，始终寻找机会将重复的逻辑提取为可重用的函数，是提高代码质量的关键实践之一。
以上就是jQuery 代码重构：通过函数避免重复指令以优化动态 UI 更新的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1529491.html
微信扫一扫 
支付宝扫一扫 
