javascript - 带选项的函数 - 我应该使用 $.extend() 来使代码不那么冗长吗？

Question

我正在构建这样的状态指示器：

G = { status : function(type, msg) {
    var opts = {
        'plain': ['#ccc', '#000'],
            'alert': ['#900', '#fff']
    }
    var $el = $('<div id="status"></div>')
        .css({
        'background': opts[type][0],
            'color': opts[type][1]
    })
        .html(msg)
        .appendTo('body');
    return $el;
}}

我这样称呼它：

G.status('plain','hello'); //makes a black text on grey background message
G.status('alert','ouch'); //makes a white text on red background message

问题： 我可能有更复杂的参数，而不是 CSS，比如各种选项的对象，其中一些可能是可选的。有没有更优雅的方式来做到这一点？我有一种感觉，我并没有真正使用 javascript 和 jquery 来发挥其最大潜力，并使代码过于复杂。

想一想，我想这可能已经在其他地方问过，但我还没有找到。

Answer 1

我可能会使用类。一个优点是您可以添加任意数量的状态类型，而无需更新创建它们的函数。只需将样式添加到您的 CSS 中即可。

// type corresponds to a class in my CSS
function status(type, msg) {
    var $el = $('<div id="status"></div>')
        .addClass(type)
        .html(msg)
        .appendTo('body');
    return $el;
}

status('plain', 'hello');

CSS：

.plain {
    background: #ccc;
    color: #000;
}