JavaScript Modules: From Chaos to Modularity

// utils.js - circa 2006
var Utils = (function () {
	// Private variables (hidden in closure)
	var privateSecret = 'This is private';

	// Public API
	return {
		add: function (a, b) {
			return a + b;
		},
		getSecret: function () {
			return privateSecret;
		},
	};
})();

// Usage
Utils.add(2, 3); // ✅ 5
Utils.privateSecret; // ❌ undefined - encapsulated!

// math.js (CommonJS)
function add(a, b) {
	return a + b;
}

function multiply(a, b) {
	return a * b;
}

// Export API
module.exports = {
	add: add,
	multiply: multiply,
};

// Or shorthand:
exports.add = add;
exports.multiply = multiply;

// app.js
const math = require('./math.js');

console.log(math.add(2, 3)); // 5
console.log(math.multiply(4, 5)); // 20

// math.js (AMD)
define(['dependency1', 'dependency2'], function (dep1, dep2) {
	function add(a, b) {
		return a + b;
	}

	// Return public API
	return {
		add: add,
	};
});

// app.js
require(['math'], function (math) {
	console.log(math.add(2, 3)); // 5
});

// math.js (ES6 Modules)
export function add(a, b) {
	return a + b;
}

export function multiply(a, b) {
	return a * b;
}

// Default export
export default function subtract(a, b) {
	return a - b;
}

// app.js
// - Use { add, multiply } to import the named exports 'add' and 'multiply'.
// - Use 'subtract' (without braces) to import the default export.

import subtract, { add, multiply } from './math.js';

console.log(add(2, 3)); // 5
console.log(multiply(4, 5)); // 20
console.log(subtract(10, 3)); // 7

// components/Button.js
export function PrimaryButton(text) {
	return `<button class="btn-primary">${text}</button>`;
}

export function SecondaryButton(text) {
	return `<button class="btn-secondary">${text}</button>`;
}

export const buttonStyles = {
	primary: 'bg-blue-500',
	secondary: 'bg-gray-500',
};

// Option 1: Import specific items
import { PrimaryButton, SecondaryButton } from './components/Button.js';

// Option 2: Import all as namespace
import * as Buttons from './components/Button.js';
Buttons.PrimaryButton('Click me');

// Option 3: Rename imports
import { PrimaryButton as PBtn } from './components/Button.js';

// components/Card.js
export default function Card({ title, content }) {
	return `
    <article class="card">
      <h3>${title}</h3>
      <p>${content}</p>
    </article>
  `;
}

// You choose the name
import Card from './components/Card.js';
import MyCard from './components/Card.js'; // Same thing!

// utils.js
export default function mainUtility() {
	return 'Main function';
}

export function helperOne() {
	return 'Helper 1';
}

export function helperTwo() {
	return 'Helper 2';
}

import mainUtility, { helperOne, helperTwo } from './utils.js';
// Default first, then named in braces

// components/index.js
export { PrimaryButton, SecondaryButton } from './Button.js';
export { default as Card } from './Card.js';
export { Section } from './Section.js';

// Now import everything from one place:
// import { PrimaryButton, Card, Section } from './components/index.js';

// Static import (loaded immediately)
import utils from './utils.js';

// Dynamic import (loaded when needed)
async function loadFeature() {
	const module = await import('./heavy-feature.js');
	module.initialize();
}

// Use case: Code splitting (splitting your app's code into smaller chunks that are loaded only when needed, improving performance by reducing initial load time)
button.addEventListener('click', async () => {
	const { animate } = await import('./animations.js');
	animate(element);
});

/**
 * Math utilities
 * Demonstrates multiple named exports
 */

export function add(a, b) {
	return a + b;
}

export function subtract(a, b) {
	return a - b;
}

export function multiply(a, b) {
	return a * b;
}

export function divide(a, b) {
	if (b === 0) throw new Error('Division by zero');
	return a / b;
}

// Export constant
export const PI = 3.14159;
export const E = 2.71828;

// Export object
export const MathConstants = {
	PI,
	E,
	GOLDEN_RATIO: 1.61803,
};

/**
 * DOM utilities
 * Demonstrates default and named exports together
 */

// Default export - main utility
export default function createEl(tag, attrs = {}, children = []) {
	const el = document.createElement(tag);

	// Set attributes
	Object.entries(attrs).forEach(([key, value]) => {
		if (key === 'className') {
			el.className = value;
		} else if (key.startsWith('on')) {
			// Event listener
			el.addEventListener(key.substring(2).toLowerCase(), value);
		} else {
			el.setAttribute(key, value);
		}
	});

	// Append children
	children.forEach((child) => {
		if (typeof child === 'string') {
			el.appendChild(document.createTextNode(child));
		} else {
			el.appendChild(child);
		}
	});

	return el;
}

// Named exports - helper functions
export function append(parent, ...children) {
	children.forEach((child) => parent.appendChild(child));
}

export function clear(element) {
	element.innerHTML = '';
}

export function setText(element, text) {
	element.textContent = text;
}

export function addClass(element, ...classes) {
	element.classList.add(...classes);
}

export function removeClass(element, ...classes) {
	element.classList.remove(...classes);
}

/**
 * Button Component
 * Demonstrates component patterns with modules
 */

// Named exports for button variants
export function PrimaryButton(text, onClick) {
	const button = document.createElement('button');
	button.className = 'btn btn-primary';
	button.textContent = text;
	if (onClick) button.addEventListener('click', onClick);
	return button;
}

export function SecondaryButton(text, onClick) {
	const button = document.createElement('button');
	button.className = 'btn btn-secondary';
	button.textContent = text;
	if (onClick) button.addEventListener('click', onClick);
	return button;
}

// Configuration object export
export const ButtonConfig = {
	defaultClass: 'btn',
	variants: ['primary', 'secondary'],
	sizes: ['sm', 'md', 'lg'],
};

// Generic button factory (default export)
export default function Button({ text = 'Button', variant = 'primary', onClick = null } = {}) {
	const button = document.createElement('button');
	button.className = `btn btn-${variant}`;
	button.textContent = text;
	if (onClick) button.addEventListener('click', onClick);
	return button;
}

/**
 * Card Component
 * Demonstrates default export pattern
 */

export default function Card({ title, content, footer = null } = {}) {
	const card = document.createElement('article');
	card.className = 'card';

	if (title) {
		const h3 = document.createElement('h3');
		h3.textContent = title;
		card.appendChild(h3);
	}

	if (content) {
		const p = document.createElement('p');
		p.textContent = content;
		card.appendChild(p);
	}

	if (footer) {
		const div = document.createElement('div');
		div.className = 'card-footer';
		div.appendChild(footer);
		card.appendChild(div);
	}

	return card;
}

// Named export for card utilities
export function CardGrid(cards = []) {
	const grid = document.createElement('div');
	grid.className = 'card-grid';
	cards.forEach((card) => grid.appendChild(card));
	return grid;
}

/**
 * Components barrel file
 * Aggregates all component exports
 *
 * This is the "facade pattern" - provides a clean public API
 * while hiding internal implementation details
 */

// Re-export everything from Button
export { PrimaryButton, SecondaryButton, ButtonConfig, default as Button } from './Button.js';

// Re-export from Card
export { default as Card, CardGrid } from './Card.js';

// Now consumers can do:
// import { Button, Card, PrimaryButton } from './components/index.js';

/**
 * Home view
 * Demonstrates importing from multiple modules
 */

import { PrimaryButton, SecondaryButton, Card } from '../components/index.js';
import { add, multiply, MathConstants } from '../utils/math.js';
import createEl, { append, clear } from '../utils/dom.js';

export default function HomeView(container) {
	clear(container);

	// Create header
	const header = createEl('header', {}, [createEl('h2', {}, ['Welcome to Modular JavaScript'])]);

	// Create card with math demo
	const mathCard = Card({
		title: 'Math Utilities Demo',
		content: `
      2 + 3 = ${add(2, 3)}
      4 × 5 = ${multiply(4, 5)}
      π ≈ ${MathConstants.PI}
    `,
		footer: SecondaryButton('Calculate More', () => {
			alert(`Golden Ratio: ${MathConstants.GOLDEN_RATIO}`);
		}),
	});

	// Create buttons section
	const buttonsSection = createEl('section', {}, [
		createEl('h3', {}, ['Component Library']),
		PrimaryButton('Primary Action', () => alert('Primary clicked!')),
		SecondaryButton('Secondary Action', () => alert('Secondary clicked!')),
	]);

	// Append all to container
	append(container, header, mathCard, buttonsSection);
}

/**
 * About view
 * Demonstrates dynamic imports
 */

import { Card, CardGrid } from '../components/index.js';
import createEl, { append, clear } from '../utils/dom.js';

export default async function AboutView(container) {
	clear(container);

	const header = createEl('h2', {}, ['About Modular Architecture']);

	const cards = [
		Card({
			title: 'Encapsulation',
			content: 'Each module has its own scope, preventing global pollution.',
		}),
		Card({
			title: 'Reusability',
			content: 'Write once, import anywhere. DRY principle in action.',
		}),
		Card({
			title: 'Maintainability',
			content: 'Changes are localized. Fix once, benefit everywhere.',
		}),
	];

	const grid = CardGrid(cards);

	// Dynamic import demo
	const dynamicButton = createEl(
		'button',
		{
			className: 'btn btn-primary',
			onClick: async () => {
				// Lazy load math module only when needed
				const math = await import('../utils/math.js');
				alert(`Dynamically loaded PI: ${math.PI}`);
			},
		},
		['Load Math Dynamically']
	);

	append(container, header, grid, dynamicButton);
}

/**
 * Main entry point
 * Demonstrates module orchestration
 */

import HomeView from './views/home.js';
import AboutView from './views/about.js';
import { PrimaryButton, SecondaryButton } from './components/index.js';

// Get app container
const app = document.getElementById('app');

// Simple router
const routes = {
	home: HomeView,
	about: AboutView,
};

let currentRoute = 'home';

// Navigation
function navigate(route) {
	if (routes[route]) {
		currentRoute = route;
		routes[route](app);
	}
}

// Create navigation
function createNav() {
	const nav = document.createElement('nav');
	nav.style.marginBottom = '2rem';

	nav.appendChild(PrimaryButton('Home', () => navigate('home')));
	nav.appendChild(SecondaryButton('About', () => navigate('about')));

	document.body.insertBefore(nav, app);
}

// Initialize app
function init() {
	console.log('🚀 Modular JavaScript App Initialized');
	console.log('📦 All modules loaded via ES6 imports');

	createNav();
	navigate('home');
}

// Start
init();

// Make navigate available globally for debugging
window.navigate = navigate;

// src/components/Notification.js
export default function Notification({ message, type = 'info' } = {}) {
	// TODO: Create notification element
	// Types: 'success', 'error', 'warning', 'info'
}

export function SuccessNotification(message) {
	return Notification({ message, type: 'success' });
}

// TODO: Add ErrorNotification and WarningNotification

// src/utils/store.js
const state = {};
const listeners = [];

export function setState(key, value) {
	state[key] = value;
	listeners.forEach((fn) => fn(state));
}

export function getState(key) {
	return state[key];
}

export function subscribe(callback) {
	listeners.push(callback);
	// Return unsubscribe function
	return () => {
		const index = listeners.indexOf(callback);
		if (index > -1) listeners.splice(index, 1);
	};
}

// src/main.js
import { setState, getState, subscribe } from './utils/store.js';

subscribe((state) => {
	console.log('State changed:', state);
});

setState('user', { name: 'Alice', role: 'developer' });
console.log(getState('user'));

// ✅ Good: Focused responsibility
// src/utils/validation.js
export function isEmail(str) {
	/* ... */
}
export function isURL(str) {
	/* ... */
}
export function isPhone(str) {
	/* ... */
}

// ❌ Bad: Mixed responsibilities
// src/utils/everything.js
export function isEmail(str) {
	/* ... */
}
export function fetchAPI(url) {
	/* ... */
} // Different concern!
export function formatCurrency(num) {
	/* ... */
} // Different concern!

// ✅ Good: All dependencies visible at top
import { Button } from './components/Button.js';
import { Card } from './components/Card.js';
import { add, multiply } from './utils/math.js';

function myFeature() {
  // Use imports
}

// ❌ Bad: Hidden dependencies (dynamic imports everywhere)
function myFeature() {
  const math = await import('./utils/math.js'); // Hard to track
}

// ✅ Good: Named exports for multiple utilities
// utils/array.js
export function unique(arr) {
	/* ... */
}
export function flatten(arr) {
	/* ... */
}
export function chunk(arr, size) {
	/* ... */
}

// Import what you need
import { unique, flatten } from './utils/array.js';

// ✅ Good: Default export for single component
// components/Hero.js
export default function Hero({ title, subtitle }) {
	// Single main component
}

// Import with semantic name
import Hero from './components/Hero.js';

// ✅ Good: Clean public API
// components/index.js
export { Button, PrimaryButton } from './Button.js';
export { Card } from './Card.js';
export { Hero } from './Hero.js';

// Consumers see clean API
import { Button, Card, Hero } from './components/index.js';

// ❌ Bad: Expose internal structure
import Button from './components/internal/ui/Button.js';

// ❌ Bad: Circular dependency
// A.js
import { functionB } from './B.js';
export function functionA() {
	functionB();
}

// B.js
import { functionA } from './A.js'; // ⚠️ Circular!
export function functionB() {
	functionA();
}

// ✅ Good: Extract shared logic
// shared.js
export function sharedLogic() {
	/* ... */
}

// A.js
import { sharedLogic } from './shared.js';

// B.js
import { sharedLogic } from './shared.js';

/**
 * Card Component
 *
 * Creates a styled card element for displaying content
 *
 * @module components/Card
 * @param {Object} options - Card configuration
 * @param {string} options.title - Card title
 * @param {string} options.content - Card content
 * @param {HTMLElement} [options.footer] - Optional footer element
 * @returns {HTMLElement} The card element
 *
 * @example
 * const card = Card({
 *   title: 'Hello',
 *   content: 'World'
 * });
 */
export default function Card({ title, content, footer = null } = {}) {
	// Implementation
}

// app.js - 5000 lines of unmaintainable code
var app = {
	// 100+ functions all in one file
	// Global variables everywhere
	// Dependencies unclear
	// Testing? Good luck.
};