jQuery代码重构：按功能拆分代码并提升可读性的方案评审请求

Hey folks, I’ve been diving into refactoring jQuery code that handles UI events lately, but I’ve struggled to find up-to-date documentation on modern approaches. So I’ve compiled my own research and want to get feedback from experienced developers like you on the refactoring plan I’ve put together.

Refactoring Goals #

• Split code by functionality
• Improve overall readability

The Current Code Pain Points #

First, let’s look at the typical jQuery event handling pattern I’ve been working with:

$("#nameText").on("input", function () {
    // Operations like manipulating HTML elements, extracting data, validation, AJAX requests, etc.
})
$("#surveyText").on("input", function () {
    // Operations like manipulating HTML elements, extracting data, validation, AJAX requests, etc.
})
$("#submitBtn").on("click", function (e) {
    // Operations like manipulating HTML elements, extracting data, validation, AJAX requests, etc.
})

While this style is straightforward and makes it easy to see which element triggers what action, it has some critical flaws:

• Overloaded responsibilities: Each handler mixes multiple tasks (DOM manipulation, data extraction, validation, AJAX) making the code verbose and hard to debug.
• Poor selector clarity: Sometimes CSS classes or IDs are poorly named, so you can’t immediately tell what an element does. Other times, we rely on navigation functions like find() or hierarchical selectors to target elements, which adds unnecessary complexity:

  $("#s_f01").find("li").on("click", function () {
      // Operations like manipulating HTML elements, extracting data, validation, AJAX requests, etc.
  })
  $(".s_btn01").on("click", function () {
      // Operations like manipulating HTML elements, extracting data, validation, AJAX requests, etc.
  })
  $("#submitBtn").on("click", function (e) {
      // Operations like manipulating HTML elements, extracting data, validation, AJAX requests, etc.
  })
  

• Scattered logic: As features iterate and code gets modified, event handlers for the same functionality end up spread across different parts of the codebase. For example:

  // Survey form related code (lines 10-200)
  $("#s_f01").find("li").on("click", function () {
      // Operations like manipulating HTML elements, extracting data, validation, AJAX requests, etc.
  })
  $(".s_btn01").on("click", function () {
      // Operations like manipulating HTML elements, extracting data, validation, AJAX requests, etc.
  })
  $("#submitBtn").on("click", function (e) {
      // Operations like manipulating HTML elements, extracting data, validation, AJAX requests, etc.
  })
  ...
  // New code added for survey form stats feature (line 1200)
  $("#SurveyFormOpenBtn").on("click", sendStatisticInfo_SurveyFormOpened());
  

Request for Review #

I’ve developed a refactoring plan focused on the two goals I listed earlier (function-based splitting and improved readability). I’d love to get your feedback on whether this approach addresses the pain points above, and if there are any best practices I’m missing or adjustments I should make.

内容的提问来源于stack exchange，提问作者prepare123