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

.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.

Answer 2

당신이 알 수 있듯이 플러그인

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

에 전달 된 설정으로 기본값을 확장 할 수 있습니다, 같은 키가있는 경우 항상 이전의 것들을 덮어 쓰게됩니다 마지막으로 전달 된 객체입니다.
이것은 일반적으로 플러그인이 사용자가 전달한 객체로 기본 설정을 확장하는 방식으로 작성하는 것이 쉽지는 않지만 같은 키를 만났을 때 객체가 다른 값을 덮어 쓰는 방식에서 더 확장 가능합니다.