Question

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

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]将是第二个位置

Answer 1

这个怎么样：

// 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]);

Answer 2

如何分割位置字符串并使用这些令牌。见下文，

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

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

container.css (updateCSS);

如果您使用更复杂的字符串，例如growl-top-center-padding e.t.c，请使用迭代。

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

Answer 3

使用可以使用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（“ - ”）他的完整解决方案也绝对比这更好。

从字符串获取css属性

3 个答案: