Jquery CSS方法：更好的写作

Question

我正在编写一个插件，我需要用户自定义它的功能，而不是在外部 CSS 中。我有一个带有一些默认样式的对象，可以被用户覆盖。但是我需要根据其他功能设置width和marginLeft。 因此，根据我的经验，我会通过在 css 方法中传递默认样式（由用户提供）来添加它，但如果不是通过添加 .css() 方法的新行，我将无法添加更多字符串。

有没有更好的方法来编写这段代码？

var style: {
    'position': 'fixed',
    'top': 0,
    'left': 0,
    'bottom': 0
};

$( 'div' ).css( style )
          .css({
              width: 300,
              marginLeft: -300,
          });

Answer 1

您可以使用传递给插件的设置扩展默认值

var styles = $.extend(
    {  // defaults
        position : 'fixed',
        top      : 0,
        left     : 0,
        bottom   : 0
    },
    settings, // settings object passed in
    {
        width      : 300, // always overwrites the above
        marginLeft : -300,
    }
)

$('div').css(styles);

您会注意到，如果存在相同的键，最后传递的对象将始终覆盖之前的对象。
这通常是插件使用用户传入的对象扩展默认设置的方式，编写起来并不容易，但在遇到相同键时对象覆盖彼此的值的方式更具可扩展性。

Answer 2

使用 .extend() 它将两个或多个对象的内容合并到第一个对象中。

var theirStyles = {
   'position' : 'absolute',
   'top' : '0',
   'left' : '0',
   'bottom' : '0',
   'margin' : '0',
   'font-size' : '30px'
};

var myStyles = {
   'width' : '300px',
   'margin-left' : '-300px'
};


var combinedStyles = $.extend({},  myStyles, theirStyles);


$('div').css(combinedStyles);

希望有帮助！

FIDDLE。