本文旨在解决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的最佳实践，将有助于构建更健壮、更易于管理的前端应用。
以上就是简化jQuery代码：利用函数避免重复逻辑与优化事件绑定的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1528772.html
微信扫一扫 
支付宝扫一扫 
