사용자 정의 플러그인으로 jQeury 확장하기
jQuery를 사용하면 페이지에 특정코드 스타일을 사용하게 되는데, 엘리먼트를 확장 집합의
형태로 표현하고 jQuery 커맨드나 커맨드체인을 확장 집합에 사용하는 코드 스타일을 자주 쓰게 된다. 물론 자신만의 코드를 작성할 때는 마음대로 코드를 작성할 수 있다.
자신만의 코드를 패턴화하여 jQuery 확장으로 만들면 좋은 이유는 사이트 전체에 일관된 코드 스타일을 유지하는데 도움을 주고, 재사용이 가능하며, jQuery 가 제공하는 기반코드를 확용할 수 있다.
플러그인이 다른 jQuery 플러그인이나 자바스크립트 라이브러리와 충돌하지 않고 잘 동작하는지가 확실하게 보장되기 위해 알려진 일반적인 지침을 사용한다.
이름을 충돌하지 않도록 만드는 방법은
* 접두어로 jquery. 를 사용한다.
* 이어서 플러그인 이름을 적는다.
* .js 로 파일 이름을 끝맺는다.
예를 들어서
jquery.ngio.js 그리고, jQuery 대신 $ 를 사용하는 편이 훨씬 편한데, 충돌을 피하기 위해 $ 대신 jQuery를
사용하는 것이다. 하지만 $ 쪽이 훨신 편리하기에 포기하고 싶지 않다.
그래서, $ 라는 매개변수를 정의한 함수에 jQuery를 전달하면 $는 함수 안에서 jQuery의 참조임이 보장된다.
(function($) {
//
//
// 여시에 플러그인을 정의한다.
//
})(jQuery);'
복잡한 매개변수 목록을 단순하게 만들기.
플러그인은 대부분 매개변수를 몇 개만 요구할 정도로 단순하다. 선택적인 매개변수가 생략되면 적절한 기본값이 제공되며,매개변수가 생략되면 매개변수의 순서에 내포된의미도 변경된다.
function complex(p1,p2,p3,p4,p5){이 함수는 매개변수가 5개인데, 이 중에 첫 매개변수를 제외한 모든 매개변수가 선택사항일 경우, 선택적인 매개변수가 너무 많다면 매개변수가 생략되었을 때 호출자의 의도를 합리적으로 추측하기가 어려워진다. 이 함수의 호출자가 마지막 매개변수만 생력했다면 마지막 선택적 인수를 null 값으로 확인할수 있기 때문에 문제되지 않지만,
but 호출자가 p5를 명시하고 p2~p4 까지는 기본값으로 지정하고 싶은 경우엔 호출자는 생략된 매개변수 부분에 생략표시를 하고 다음과 같이 작성해야 한다.
complex(valueA, null, null, null, valueB);위와 같은 경우 null 과 매개변수의 순서를 주의깊게 봐야하는 단점이 있다.
일반적으로 이러한 문제를 해결하는 데 선택사항의 해기(option hash)를 많이 사용한다.
선택사항의 해시를 사용하면 선택적인 매개변수 정보를 이름/값 쌍 형식의 프로퍼티로
가지는 자바스크립트의 Object 인스턴스로 전달한다.
complex( valueA, { p5:valueB } ); 또는
comlplex( valueA, { p3 : valueC, p5 : valueD } );위와 같은 방법을 사용하면 null을 사용하여 생략된 매개변수를 표시할 필요가 없고 매개변수의 개수를 세지 않아도 된다.
필수 매개변수 하나와 선택항목을 여섯 개 가진 복잡한 함수 예제를 다시 살펴보자
complex(p1, options)함수 내에서 $.extend() 유틸리티 함수를 사용해 기본값에 전달된 옵션을 합칠 수 있다.
function comlex( p1, options ){ var settings = $.extend({ option1: defaultValue1 , option2: defaultValue2 , option3: defaultValue3 , option4: defaultValue4 , option5: defaultValue5 , option6: defaultValue6 , options || { } ); // 함수의 나머지 부분
}settings 변수는 페이지 개발자가 options 매개변수로 전달한 값과 기본값을 합친 값을 가진다. 주목할 점은 ||{}를 사용하여 options 객체가 null이거나 undefined 인지를 확인하고 있다는 것이다. 만약 options 변수가 false라면 (null과 undefined는 조건식에서 false이다) 빈 객체가 사용된다.
ex)
$.say = function(what) { alert( 'I say ' + what ); }
jQuery.say = function(what) { alert( 'I say ' + what ); }
(function($) {
$.say = function(what) { alert( 'I say ' + what ); }
}) (jQuery);
|
## 데이터를 조작하는 유틸 함수 만들기고정폭으로 숫자 값을 표시하려면 숫자 값과 고정폭 필드(폭은 문자의 수로 정의)에 맞는 형식이 필요하다. 대개 이러함 형식은 값을 고정폭 필드에 우측 정렬시키고 값의 길이와 필드의 길이 차이를 조정하기 위해 채움 문자( fill character )로 앞 여백을 채운다.
함수 문법 : $.toFixedWidth$.toFixedWidth( value, length, fill )
: 매개변수 - value (Number) 형식화될 값
- length (Number) 결과 필드의 길이
- fill (String) 앞 단의 값을 채울 채움 문자, 생략하면 0을 사용한다.
(function($){
$.toFixedWidth = function( value, length, fill ){
var result = value.toString();
if( !fill ) fill = 0;
var padding = length - result.length;
if( padding < 0 ){
result = result.substr(-padding);
}
else{
for(var n = 0; n < padding; n++)
result = fill + result;
}
return result;
};
})(jQuery);
