2

我正在创建一个插件，允许用户通过键入这样的内容来定义通知。

growl-top-left-300px;

我正在使用拆分来消除宽度，但这仍然需要我有很多 if 语句，因为我的用户有以下选择

例如我有

if (position == "growl-top-left" || position == "growl-left-top") {
    container.css ({
        top: '0px',
        left: '0px'
    });
}else if (position == "growl-top-right" || position == "growl-right-top") {
    container.css ({
        top: '0px',
        right: '0px'
    });
}else if (position == "growl-top-center" || position == "growl-center-top") {
    // apply css // Not done yet
}else if (position == "growl-bottom-left" || position == "growl-left-bottom") {
    container.css ({
        bottom: '0px',
        left: '0px'
    });
}else if (position == "growl-bottom-right" || position == "growl-right-bottom") {
    container.css ({
        bottom: '0px',
        right: '0px'
    });
}else if (position == "growl-bottom-center" || position == "growl-center-bottom") {
    // apply css // not done yet
}

但正如您可以想象的那样，这似乎有很多冗余代码，我只想知道是否有人有更好的方法来清理它？

我认为如果我能获得顶部和左侧的 css 值会很好，这样我就可以编写以下代码：

container.css ({
    retrivedCSS[0]: '0px',
    retrivedCSS[1]: '0px'
})

其中 retrivedCSS[0] 将是第一个位置，而 [1] 将是第二个位置

4

3 回答 3

2

这个怎么样：

// map string to one key
var key = position.split("-").sort().join("-");

var map = {

    "growl-bottom-center": "your CSS",
    // ...
    "growl-right-top": "your CSS"

}

applyCSS(map[key]);
于 2013-03-01T16:19:23.503 回答
2

如何拆分位置字符串并使用这些标记。见下文，

var tokens = position.split('-');

var updateCSS = {};
updateCSS[tokens[1]] = updateCSS[tokens[2]] = '0px';    

container.css (updateCSS);

如果您使用更复杂的字符串growl-top-center-padding等，请使用迭代。

var updateCSS = {};
var tokens = position.split('-');

for (var i = 0; i < tokens.length; i++) {
   if(tokens[i] == 'growl') continue;

   updateCSS[tokens[i]] = '0px';
}

container.css (updateCSS);
于 2013-03-01T16:26:50.297 回答
1

使用可以使用fallthrough switch 语句，尽管它们仍然很丑陋。

switch(position.split("-").sort().join("-")) {
    case 'growl-top-left': //apply css
        break;
    case 'growl-center-top': // apply css
        break;
}

感谢@Amberlamps 关于使用 position.split("-").sort().join("-") 的绝妙建议，他的完整解决方案也绝对比这更好。

于 2013-03-01T16:18:46.580 回答