文章/答案/技术大牛

发布

社区首页 >问答首页 >在JS和供应商前缀中连接字符串的可维护方式

问在JS和供应商前缀中连接字符串的可维护方式
EN

Code Review用户

提问于 2015-05-27 18:18:14

回答 2查看 63关注 0票数 2

我正在编写一个jQuery插件，其中包括在头上插入一个样式表。此外，我还需要供应商前缀。很多值都是从脚本中的变量派生出来的，我不知道如何以可维护的方式编写它。现在我只列出所有的东西，但也许有一个更好的方法，供应商前缀和这个脚本的整体结构？

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 += "}";

javascript

css

animation

回答 2

Code Review用户

回答已采纳

发布于 2015-05-28 07:48:33

为了扩展@janos的答案，我将发布一个用12行代码编写的简单模板引擎：

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 || '';
    });
}

要将其实现到代码中，您可以将bubble_css重写为如下所示：

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;",
    "}"
);

还请注意我如何将bubble_css += ''更改为bubble_css.concat('', '')

您的完整代码如下所示：

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 || '';
    });
}

票数 1

Code Review用户

发布于 2015-05-27 19:16:28

将多个bubble_css +=行更改为跨越多行的单个长串联将是一个改进。

更大的改进将是使用模板框架，例如胡须。

如果你不想依赖于一个框架，你可以编造一些简单的东西。例如，使用带有标记(如{{ bubble_in_ms }} )的单个字符串，并创建一个接受模板字符串的实用程序函数和要在模板中替换的键值对字典。

票数 2

页面原文内容由Code Review提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://codereview.stackexchange.com/questions/91970

复制

相似问题

问在JS和供应商前缀中连接字符串的可维护方式
EN

回答 2

Code Review用户

Code Review用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在JS和供应商前缀中连接字符串的可维护方式EN

回答 2

Code Review用户

Code Review用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在JS和供应商前缀中连接字符串的可维护方式
EN