JSFiddle - React, Tailwind, and code Playground

by jakie8

HTML

<div class="storage-js" data-storageKey="someKey" data-action="onStart:helloThere,onExit:goodbye"></div>

JavaScript

/**
 * This storagejs variable is not within the document
 * document-ready scope. As you can see to the left,
 * the load is set to "no wrap (body)".
 */

var storagejs = (function(){
    
    function sayHello(){
        alert('Hello');
    }
    function sayGoodbye(){
        alert('Goodbye');
    }

    return {
        helloThere: sayHello,
        goodbye: sayGoodbye
    }
})();


/**
 * Then we create our own document-ready wrap, and call
 * our storagehs app from above. The logic of this code
 * loops through each storage-js element, gets the
 * actions, and executes them. Now this is not exactly
 * what you want, but hopefully you can see how I am
 * calling the actions. Take a look at your console
 * when you run this page, and you will see the actions
 * logged.
 */
$(document).ready(function(){
    
    $('.storage-js').each(function(){
        $element = $(this),
        actions   = ($element.attr('data-action')).split(',');

        for(var i in actions){
            var action = (actions[i]).split(':');
            console.log(action);
            
            if(action[0]=='onStart'){
                storagejs[action[1]](); // This is the string to method call       
            }
            if(action[0]=='onExit'){
                storagejs[action[1]](); // This is the string to method call
            }
        }                
    });
    
});