如何基于ES6构建简洁可读的主JS站点文件结构？

Hey Chris, let's get your ES6 module structure sorted out—ditching the old IIFE-based Site wrapper doesn't mean losing control over initialization or state. Your proposed folder structure is perfect for a clean, modular setup, so here's a concrete example of how each file can work together, with clear separation of concerns and easy-to-manage initialization.

Core Principles We're Following #

• Single Responsibility: Each module handles one piece of functionality (no monolithic wrappers)
• Explicit Dependencies: Use ES6 import/export instead of implicit global state
• Centralized Initialization: Coordinate when modules load without tying them to a single class
• Private State: Let modules keep internal state private unless explicitly exported

1. js/utils.js – Reusable Utility Functions #

This file holds shared helpers that multiple modules might need. No initialization here—just pure functions or constants.

// DOM query helper
export const $ = (selector, context = document) => context.querySelector(selector);
export const $$ = (selector, context = document) => Array.from(context.querySelectorAll(selector));

// Debounce function for scroll/resize events
export const debounce = (func, wait) => {
  let timeout;
  return (...args) => {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), wait);
  };
};

// Global constants (if needed)
export const BREAKPOINTS = {
  mobile: 768,
  desktop: 1200
};

2. js/modules/navigation.js – Navigation Module #

This module manages all navigation-related logic (menu toggles, scroll behavior, etc.). It keeps internal state private and exports an initialization function.

import { $, debounce, BREAKPOINTS } from '../utils.js';

// Private state (only accessible within this module)
let isMenuOpen = false;
const navMenu = $('#main-nav');
const menuToggle = $('#menu-toggle');

// Private helper function
const toggleMenu = () => {
  isMenuOpen = !isMenuOpen;
  navMenu.classList.toggle('is-open', isMenuOpen);
  menuToggle.setAttribute('aria-expanded', isMenuOpen);
};

// Handle responsive nav behavior
const handleResize = debounce(() => {
  if (window.innerWidth >= BREAKPOINTS.desktop && isMenuOpen) {
    toggleMenu();
  }
}, 250);

// Public initialization function
export const initNavigation = () => {
  menuToggle.addEventListener('click', toggleMenu);
  window.addEventListener('resize', handleResize);
  
  // Optional: Initialize with menu closed
  menuToggle.setAttribute('aria-expanded', 'false');
};

3. js/modules/banner.js – Hero Banner Module #

Handles banner-specific logic (sliders, animations, etc.). Again, private state + public init function.

import { $, $$ } from '../utils.js';

// Private state
const bannerSlides = $$('.banner-slide');
let currentSlideIndex = 0;

// Private helper
const showSlide = (index) => {
  bannerSlides.forEach((slide, i) => {
    slide.classList.toggle('active', i === index);
  });
  currentSlideIndex = index;
};

// Auto-advance slides
const startSlideShow = () => {
  setInterval(() => {
    const nextIndex = (currentSlideIndex + 1) % bannerSlides.length;
    showSlide(nextIndex);
  }, 5000);
};

// Public init
export const initBanner = () => {
  if (bannerSlides.length === 0) return; // Exit if no slides exist
  
  showSlide(0);
  startSlideShow();
};

4. js/modules/testimonials.js – Testimonials Module #

Simple example of a module that fetches data or initializes a carousel.

import { $, $$ } from '../utils.js';

// Private state
const testimonialContainer = $('#testimonials-container');

// Private helper: Fetch testimonials (example async function)
const fetchTestimonials = async () => {
  try {
    const response = await fetch('/api/testimonials');
    const testimonials = await response.json();
    renderTestimonials(testimonials);
  } catch (err) {
    console.error('Failed to load testimonials:', err);
  }
};

// Private helper: Render testimonials to DOM
const renderTestimonials = (testimonials) => {
  testimonialContainer.innerHTML = testimonials.map(testimonial => `
    <div class="testimonial">
      <p>"${testimonial.quote}"</p>
      <span class="author">${testimonial.author}</span>
    </div>
  `).join('');
};

// Public init
export const initTestimonials = () => {
  if (!testimonialContainer) return;
  
  fetchTestimonials();
  // Add any interactive logic here (e.g., carousel controls)
};

5. js/modules/initialisation.js – Central Initialization Coordinator #

This file acts as the "traffic controller"—it imports all module init functions and runs them at the right time (after DOM is ready). No need for a global Site object!

import { initNavigation } from './navigation.js';
import { initBanner } from './banner.js';
import { initTestimonials } from './testimonials.js';

// Run all module initializations when DOM is fully loaded
export const initSite = () => {
  document.addEventListener('DOMContentLoaded', () => {
    initNavigation();
    initBanner();
    initTestimonials();
    
    // Add any one-time global setup here (e.g., analytics tracking)
    console.log('Site initialized!');
  });
};

6. js/main.js – Entry Point #

This is the single entry point for your Gulp/Babel setup. It just kicks off the initialization process.

import { initSite } from './modules/initialisation.js';

// Start everything up
initSite();

Why This Works Better Than Your Old IIFE Setup #

• No Global Pollution: ES6 modules have their own scopes, so you don't need to wrap everything in an IIFE to avoid global variables.
• Flexibility: If you need to disable a module, just comment out its import/init call in initialisation.js—no need to dig through a monolithic Site function.
• Testability: Each module can be tested independently (you can import initNavigation in a test file without loading the entire site).
• Readability: Anyone working on the code can immediately see what each file does, and where to find specific functionality.

Gulp/Babel Note #

Make sure your Gulp config is set up to bundle ES6 modules correctly—use @babel/preset-env with modules: false (to preserve ES6 module syntax) and a bundler like gulp-browserify or gulp-esbuild to bundle everything into a single file (or use code splitting if you want to load modules on demand).

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