Jquery CSS 方法 : better writing

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

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