2
\$\begingroup\$

I am writing a jQuery plugin which, among other things, inserts a stylesheet in the head. Additionally, I also require vendor prefixes. A lot of values are derived from variables in the script, and I'm unsure how I can write this in a maintainable manner. Now I just list everything, but maybe there's a better way for vendor prefixing and overall structure of this script?

var bubble_in_ms = to_ms(args.bubble_in),
    opacity_out_ms = to_ms(args.opacity_out),
    text_in_ms = to_ms(args.text_in),
    bubble_color_rgb = rgbGenerator(args.bubble_color),
    bubble_css = "";

bubble_css += ".bubble {-webkit-animation: ";
bubble_css += "bubble-effect-in " + bubble_in_ms + "ms forwards,";
bubble_css += "bubble-effect-out " + opacity_out_ms + "ms ";
bubble_css += bubble_in_ms + "ms forwards;";
bubble_css += "animation: ";
bubble_css += "bubble-effect-in " + bubble_in_ms + "ms forwards,";
bubble_css += "bubble-effect-out " + opacity_out_ms + "ms ";
bubble_css += bubble_in_ms + "ms forwards;";
bubble_css += "background: ";
bubble_css += "rgba(" + bubble_color_rgb.r + "," + bubble_color_rgb.g + "," + bubble_color_rgb.b + ",";
bubble_css += args.bubble_opacity + ")";
bubble_css += "}";
bubble_css += ".bubble-wrap:after {-webkit-transition: ";
bubble_css += "opacity " + text_in_ms + "ms;";
bubble_css += "transition: ";
bubble_css += "opacity " + text_in_ms + "ms;";
bubble_css += "}";
\$\endgroup\$

2 Answers 2

1
\$\begingroup\$

To extend @janos answer i will post a simple template engine written in 12 lines of code:

function tpl(str, data) {
    return str.replace(/\{\{(.*?)\}\}/g, function(_, key) {
        var f = key.split('.');
        var d = data[f.shift()];

        while ( f.length && d ) {
            d = d[f.shift()];
        }

        return d || '';
    });
}

To implement this into your code you would rewrite your bubble_css to something like this:

var bubble_css = "".concat(
    ".bubble {",
        "-webkit-animation: ",
            "bubble-effect-in {{bubble_in_ms}}ms forwards,",
            "bubble-effect-out {{opacity_out_ms}}ms {{bubble_in_ms}}ms forwards",
        ";",
        "animation: ",
            "bubble-effect-in {{bubble_in_ms}}ms forwards,",
            "bubble-effect-out {{opacity_out_ms}}ms {{bubble_in_ms}}ms forwards",
        ";",
        "background: rgba({{bubble_color_rgb.r}}, {{bubble_color_rgb.g}}, {{bubble_color_rgb.b}}, {{args.bubble_opacity}})",
    "}",
    ".bubble-wrap:after {",
        "-webkit-transition: opacity {{text_in_ms}}ms;",
        "transition: opacity {{text_in_ms}}ms;",
    "}"
);

Also note how i changed bubble_css += '' to bubble_css.concat('', '')


Your full code would look something like this:

var bubble_css = "".concat(
    ".bubble {",
        "-webkit-animation: ",
            "bubble-effect-in {{bubble_in_ms}}ms forwards,",
            "bubble-effect-out {{opacity_out_ms}}ms {{bubble_in_ms}}ms forwards",
        ";",
        "animation: ",
            "bubble-effect-in {{bubble_in_ms}}ms forwards,",
            "bubble-effect-out {{opacity_out_ms}}ms {{bubble_in_ms}}ms forwards",
        ";",
        "background: rgba({{bubble_color_rgb.r}}, {{bubble_color_rgb.g}}, {{bubble_color_rgb.b}}, {{args.bubble_opacity}})",
    "}",
    ".bubble-wrap:after {",
        "-webkit-transition: opacity {{text_in_ms}}ms;",
        "transition: opacity {{text_in_ms}}ms;",
    "}"
);

var data = {
    args: args,
    bubble_in_ms: to_ms(args.bubble_in),
    opacity_out_ms: to_ms(args.opacity_out),
    text_in_ms: to_ms(args.text_in),
    bubble_color_rgb: rgbGenerator(args.bubble_color)
}

tpl(bubble_css, data);

function tpl(str, data) {
    return str.replace(/\{\{(.*?)\}\}/g, function(_, key) {
        var f = key.split('.');
        var d = data[f.shift()];

        while ( f.length && d ) {
            d = d[f.shift()];
        }

        return d || '';
    });
}
\$\endgroup\$
2
\$\begingroup\$

Changing the many bubble_css += lines to a single long concatenation spanning multiple lines would be an improvement.

Even more improvement would be using a template framework, for example moustache.

If you don't want to depend on a framework, you could cook up something simple. For example, use a single string with markups like {{ bubble_in_ms }}, and create a utility function that takes the template string and a dictionary of key-value pairs to replace in the template.

\$\endgroup\$
2
  • \$\begingroup\$ Would writing them as a longs tring really improve maintainability? I don't think it would, actually. It would only make it harder to find the relevant parts in the string. \$\endgroup\$ May 30, 2015 at 11:58
  • \$\begingroup\$ In it's current form, it's hardly readable, and for that same reason, making changes would be error prone. So yes, I think a long string, if more readable, will make this easier to maintain. The relevant parts will be as hard to find as they are in any solution with templates. If it gets too hard, it can be mitigated with good documentation. \$\endgroup\$
    – janos
    May 30, 2015 at 12:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.