Dynamic Type Resolution in Actions

Demonstrate a pattern for dynamically resolving action types based on certain state conditions or feature flags, to adapt to changing action type requirements.

<button id='actionButton'>Perform Action</button>

A button element in HTML that will trigger an action when clicked.

document.getElementById('actionButton').addEventListener('click', performDynamicAction);

Adding a click event listener to the button element that triggers the dynamic action function.

function getActionType(featureFlag) {
    // Check feature flag or state condition
    if (featureFlag) {
        return 'advancedAction';
    } else {
        return 'basicAction';
    }
}

Function to determine the action type based on a feature flag or state condition.

function performDynamicAction() {
    const actionType = getActionType(window.featureFlag);  // Assume featureFlag is a global variable or a state condition
    switch (actionType) {
        case 'basicAction':
            // Execute basic action
            console.log('Performing basic action');
            break;
        case 'advancedAction':
            // Execute advanced action
            console.log('Performing advanced action');
            break;
        default:
            console.log('Action type not recognized');
    }
}

Function that performs an action based on the resolved action type.

button {
    background-color: #4CAF50;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border: none;
    border-radius: 4px;
}

CSS styles for the button to make it visually appealing.