JAVASCRIPT#45 - jQuery .fn .extend() 플러그인 제작기초.

I die for you, i kill for you, i live for only you AJ.

JAVASCRIPT#45 - jQuery fn 오브젝트, .extend() 메소드와 플러그인 제작의 기초.

1. .fn

- 아래 코드를 보자. 무슨생각이 드는가.

$.fn.wow = function() { alert("i say wow"); }

우리는 $가 셀렉터에 관련된것임을 안다. 하지만 다른형태인 점fn점wow라는 형태를띄고 있다 어떻게 해석해야할까?

위의 코드는 간단히, wow(); 라는 메소드를 정의하고 있다고 보면 된다. 좋다 그러면 점fn .fn의 의미는 뭘까? 이는 아직 정해지지않은 자바스크립트에서 지원하는 오브젝트 전체를 뜻하는 가명이다. 위처럼 .fn으로 생성된 메소드는 아무나 이용하고 접근할 수 있는 메소드가 된다.

2. 오브젝트 색을 변경하는 플러그인을 만들어보자

$.fn.colorchanger = function(mycolor) { css("color", "mycolor"); }

이렇게 만들어진 메소드는 어떠한 오브젝트에 의해 호출되어 파라미터를 받고 css에서 color 값을 mycolor로 바꾸게 된다.

3. 다중 파라미터 받기, 옵션값 설정하기

위의 메소드를 파라미터를 받지못하거나 이상한 파라미터를 받았을때 사용할 기본 디폴트 파라미터및 값을 사용하는 플러그인 메소드로 만들어보자.

$.fn.colorchanger = function(options) { var settings = $.extend({}, { 옵션설정 }, options); }

옵션값을 사용하는 메소드를 만드는 과정이다. 살짝 복잡해 보이는데 풀어서 보자.

일단 options 라는 키워드는 무슨뜻일까? 이는 키워드가 아니라 그냥 파라미터를 의미한다. options를 teemo로 바꾸어도 된다. 단 뒤에서 사용하는 options도 teemo로 바꾸어야 겠지.

settings 또한 그냥 오브젝트를 만드는 과정중 사용한 오브젝트의 이름이다.

여기서 새로 사용한 키워드는 .extend()인데 이를 좀 살표볼 필요가 있다고 생각한다.

.extend() 란?
- 진짜 간단히 한마디로 정리하면 .extend는 합치는 메소드이다. 왜 앞에 아무것도 없냐고? 위의 .fn과 마찬가지로 jquery가 자체 지원하는 선택자없는 메소드 또는 가짜 가상의 선택자 (jquery)를 사용하고 있기 때문이다.

- .extend의 구조는 다음과 같다. $.extend({참/거짓}, 오브젝트1, 오브젝트2); 참거짓부분은 합치는 방법에대해 설정하는것인데 오직 true만을 쓸수있고 아무것도 쓰지않으면 거짓(false)를 전달하게 된다. 무엇에대한 참거짓이냐고? 이건

겹칠때 덮어씌울것인가 덮어씌우지 않을것인가에대한 결정이다. true이면 덮어씌우지 않고 false이면 덮어씌운다 (반대 ㄷㄷ)

- $.extend({참/거짓}, 오브젝트1, 오브젝트2); 는 간단히 오브젝트1에 오브젝트2 를 덮어씌운다. 라고 보면된다. 영어로 하면 merge 오브젝트2 into 오브젝트1 라고 하겠지. 오브젝트2를 오브젝트1에 합친다!

$.fn.colorchanger = function(options) { var settings = $.extend({}, { 옵션설정 }, options); }

다시 맨위 코드로 돌아가서 살펴보면 options 라는 객체를 {옵션설정}이라는 객체에 merge해줘서 settings 라는 새로운 객체에 저장하고 있는것을 볼수있다.

4. 색바꾸는 플러그인 완성형 코드

$.fn.colorchanger = function(options)
{
    $.fn.colorchanger.defaults = {color: "orange", backcolor: "green"};

    var settings = $.extend({}, $.fn.colorchanger.defaults, options);

    this.css({"color": settings.color, "background-color": settings.backcolor});
}

나의 플러그인 colorchanger.zip