ÂĢ Methods Object Pattern

Vue.js-inspired methods object pattern for clean handler organization and better code separation.

đŸŽ¯ Benefits:

📝 Basic Usage

Define handlers in a separate object and pass to constructor:

// 1. Define handlers object
const myHandlers = {
    handleSave: (event, target) => {
        console.log('Saving data...');
    },

    handleDelete: (event, target) => {
        console.log('Deleting item...');
    }
};

// 2. Pass to constructor
new YpsilonEventHandler({
    body: ['click']
}, {}, {
    methods: myHandlers
});

🔧 Advanced Patterns

Complex handlers with state management and async operations:

📚 Module Integration

Import handlers from separate modules for better organization:

// userHandlers.js
export const userHandlers = {
    handleLogin: (event, target) => { /* login logic */ },
    handleLogout: (event, target) => { /* logout logic */ }
};

// dataHandlers.js
export const dataHandlers = {
    handleLoad: (event, target) => { /* load logic */ },
    handleSave: (event, target) => { /* save logic */ }
};

// main.js
import { userHandlers } from './userHandlers.js';
import { dataHandlers } from './dataHandlers.js';

const allHandlers = { ...userHandlers, ...dataHandlers };

new YpsilonEventHandler({...}, {}, {
    methods: allHandlers
});

📋 Event Log

Handler events will appear here...