合并相似JavaScript函数：如何简化5个重复JS函数实现？

Great question! Having duplicate functions for nearly identical logic is a common pain point, and you're absolutely right to look for a cleaner approach. Here's how you can refactor this to cut down on repetition and make your code more maintainable:

1. Abstract a Reusable Function #

First, replace your 5 duplicate req1()/req2() etc. functions with a single generic function that accepts the tab ID as a parameter. This captures all the shared logic in one place:

// Generic function to fetch news for a given tab
function fetchNewsByTab(tabId) {
  // Replace this with your actual shared logic (API call, UI updates, etc.)
  fetch(`/your-api-endpoint?tab=${tabId}`)
    .then(response => response.json())
    .then(data => {
      // Example: Update your news list UI
      renderNewsItems(data);
      // Example: Switch active tab state
      setActiveTab(tabId);
    })
    .catch(error => console.error('Failed to load news:', error));
}

// Helper to update active tab styling
function setActiveTab(tabId) {
  // Remove active class from all tabs
  document.querySelectorAll('.news-btn-div').forEach(tab => {
    tab.classList.remove('current');
  });
  // Add active class to the selected tab
  document.querySelector(`[data-tab="${tabId}"]`).classList.add('current');
}

2. Simplify HTML Onclick Bindings #

Instead of writing a unique onclick for each tab, use the data-tab attribute to pass the ID to your generic function. This eliminates the need for separate reqN() calls:

<div class="news-wrap margin-top-div">
  <div class="news-btn-container-flex">
    <div class="news-btn-div current" data-tab="1" onclick="fetchNewsByTab(this.dataset.tab)">1</div>
    <div class="news-btn-div" data-tab="2" onclick="fetchNewsByTab(this.dataset.tab)">2</div>
    <div class="news-btn-div" data-tab="3" onclick="fetchNewsByTab(this.dataset.tab)">3</div>
    <div class="news-btn-div" data-tab="4" onclick="fetchNewsByTab(this.dataset.tab)">4</div>
    <div class="news-btn-div" data-tab="5" onclick="fetchNewsByTab(this.dataset.tab)">5</div>
  </div>
</div>

3. Pro Tip: Use Event Delegation (Cleaner & More Scalable) #

For an even better approach (no inline onclick attributes, better separation of concerns), use event delegation on the parent container. This works even if you add/remove tabs dynamically later:

Updated HTML (no inline handlers): #

<div class="news-wrap margin-top-div">
  <div class="news-btn-container-flex" id="newsTabContainer">
    <div class="news-btn-div current" data-tab="1">1</div>
    <div class="news-btn-div" data-tab="2">2</div>
    <div class="news-btn-div" data-tab="3">3</div>
    <div class="news-btn-div" data-tab="4">4</div>
    <div class="news-btn-div" data-tab="5">5</div>
  </div>
</div>

Updated JavaScript: #

// Wait for the DOM to load before binding events
document.addEventListener('DOMContentLoaded', () => {
  const tabContainer = document.getElementById('newsTabContainer');
  
  // Attach a single click listener to the parent container
  tabContainer.addEventListener('click', (event) => {
    // Check if the clicked element is a tab button
    if (event.target.classList.contains('news-btn-div')) {
      const tabId = event.target.dataset.tab;
      fetchNewsByTab(tabId);
    }
  });
  
  // Optional: Load the first tab's content on page load
  fetchNewsByTab(1);
});

// Keep your generic fetchNewsByTab and setActiveTab functions here
function fetchNewsByTab(tabId) {
  fetch(`/your-api-endpoint?tab=${tabId}`)
    .then(response => response.json())
    .then(data => {
      renderNewsItems(data);
      setActiveTab(tabId);
    })
    .catch(error => console.error('Failed to load news:', error));
}

function setActiveTab(tabId) {
  document.querySelectorAll('.news-btn-div').forEach(tab => {
    tab.classList.remove('current');
  });
  document.querySelector(`[data-tab="${tabId}"]`).classList.add('current');
}

Why This Works: #

• No Duplicate Code: All shared logic lives in one function instead of 5 copies
• Maintainability: If you need to update the logic (e.g., change the API endpoint, add loading states), you only have to edit one place
• Scalability: Adding a 6th tab is as simple as adding a new <div> with data-tab="6"—no extra JavaScript needed
• Cleaner Separation: Event delegation keeps your HTML free of inline JavaScript, making your code easier to read and debug

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