JSFiddle - React, Tailwind, and code Playground

by javarouka

HTML

<!DOCTYPE html>
<html>
    <body>
        <h1>머리가 안돌땐</h1>        
        <p><span id="drink"></span> 마신다</p>
    </body>
</html>

CSS

p {
    padding: 10px;
    background-color: #eee;
    box-shadow: 1px 1px 2px 2px #ccc;
}

JavaScript

(function(ctx) {

    var FN_PARSE = /^function\s*(\S+)[^\(]*\(\s*([^\)]*)\)\s*\{([\W\w]+)\}$/m,
            STRIP_COMMENT = /((\/\/.*$)|(\/\*[\s\S]*?\*\/))/mg,
            M = {};

    ctx.Injector = {
        register: function(name, mo) {
            M[name] = mo;
        },
        execute: function(fn, ctx) {
            return this.di(fn, ctx || this)();
        },
        di: function(fn, ctx){
            var parsed = fn.toString().match(FN_PARSE),
                    fnName = parsed[1],
                    args = parsed[2].replace(STRIP_COMMENT, '').split(','),
                    body = parsed[3],
                    i = 0, j,
                    injected = [];
            for(j = args.length; i < j; i++) {
                injected[i] = M[args[i].trim()] || undefined;
            }
            return function() {
                return fn.apply(ctx || null, injected);
            }
        }
    };
})(this);

var Coffee = {
    pour: function(some) {
        return "커피를 " + some + "에 따르고 ";
    }
}
var Milk = {
    pour: function(some) {
        return "우유를 " + some + "에 따르고 "
    }
}
Injector.register('cof', Coffee);
Injector.register('mik', Milk);
function Cup(cof, /**/mik) {
    var me = "머그컵";
    return Coffee.pour(me) + Milk.pour(me) + " 섞어";
}
var drink = Injector.di(Cup);

var coffeeMilk = drink(),
    directDrink = Injector.execute(Cup);

document.getElementById('drink').innerHTML = coffeeMilk;

document.getElementById('drink').innerHTML += "<br/> 다시 " + directDrink;