티스토리 툴바

Daum
Tistory
로그인
블로그 이미지
카라크라스

Leon.Kim의 공부하는 블로그입니다. mail - kalaklas@gmail.com twitter - @kalaklas

Rss feed Tistory
Web/Javascript 2010/10/01 00:06

jQuery에 대한 간단한 스터디 정리


dojo이외 다른 javascript toolkit은 어떻게 구현 동작하는지 궁금해서
jQuery Cookbook을 일주일간 읽어보고 아래와 같은 목차로 나름의 정리를 해보았다.

목차
1. jQuery를 들어가며

2. jQuery기초
a. 돔탐색과 유틸들
b. jQuery Ajax
c. jQuery 이벤트

3. jQuery 플러그인
a. jQuery 외부 플러그인을 가져와서 써보기
b. jQuery Custom Plugin 개발해서 적용해보기
c. 외부 플러그인 가져오고, Custom 플러그인 개발할때 고려해야할 사항을 무엇이 있을까?

4. jQuery를 이용한 객체지향 프로그래밍

5. jQuery 최적화
a. 내가 만든 플러그인 js를 최적화 시켜보자.

6. jQuery 는 HTML5를 Support할까?












1. jQuery를 들어가며
왜 jQuery?
오픈소스로서 무료다.
라이브러리가 매우작다  114kb 이며, minify된 녀석은 18kb
수많은 커뮤니티
크로스브라우징을 내부에서 지원하여, 크로스브라우징에 관한 고민이 덜하다 (대부분의 javascript 라이브러리들이 그렇듯 . . .)
플러그인자료실이 광범위하며, 꾸준히 발전하고 있다
API가 완전하게 문서화 되어있다
다른 javascript 라이브러리들과 충돌을 방지해 주는 방법을 제공한다
개발자 뿐만 아니라 디자이너에게 있어서도 무척 친화적인 라이브러리이다

Write less, do more - 적게 작성하고, 보다 많이 한다.
      요소를 찾아 jQuery 메서드를 사용하여 작업을 수행한다
         DOM요소를 찾아서 작업을 수행한다
      요소 집합에 대해 여러 jQuery 메서드를 체인으로 연결한다
         jQuery를 이용하여 선택한 DOM요소에 jQuery 메서드를 체이닝하여 사용한다
         jQuery('#id').hide().text('identity').addClass('thisStyle').show();
         이는 내부적으로 체이닝을 지원하는 방식(래핑된 객체를 무조건 반환도록하는 방식)으로 구
          되어 있기에 가능하다. (나중에 우리가 메서드를 확장하거나 한다면, 당연히 래핑객체를 무
         조건 반환도록 구현 해줘야 체이닝이 끈어지지 않겠지)
      jQuery래퍼와 암시적인 반복을 사용한다
         jQuery를 이용하여 DOM을 탐색하면, 해당 DOM은 jQuery 기능이 래핑된다.
         var aNode = jQuery('#rokim'); // aNode jQuery가 래핑된 객체를 반환 받을 것이다.

jQuery API 구성
http://visualjquery.com/ 가 정말 쓸만한듯. 최신 jquery(지금은 1.4)의 API는 아니지만 . .
http://api.jquery.com/ 정식 API 온라인 문서의 URL이다.

JAVA 못지 않게 매우 잘 정리되어있다.

  • All
  • +Ajax
  •  Attributes
  •  Core
  •  CSS
  •  Data
  •  Dimensions
  • +Effects
  • +Events
  •  Forms
  • +Manipulation
  • +Miscellaneous
  •  Offset
  •  Plugin Authoring
  • +Properties
  • +Selectors
  • +Traversing
  •  Utilities
  • +Version
    •         


    2. jQuery기초
    a. 돔탐색과 유틸들

    돔탐색.
    http://api.jquery.com/category/traversing/ 에는 다양한 Traversing 메소드들이 잘 설명 되어 있으니 살펴 봐가며, 활용해보자. 아래는 간단한 몇가지 테스트 코드
    셀렉터와 jquery함수를 사용하여 DOM 요소 탐색하기
    jQuery는 pure-JavaScript CSS selector engine인 Sizzle 라이브러리를 include하여 좀더 강력한 DOM탐색을 지원한다 (자세한 정보 : sizzlejs.com)
    jQuery() 또는 $()
    var aNodes = jQuery('a'); //document내에 모든 <a> 요소를 선택한다
    var customNode = jQuery('#custom'); //document내에 id=custom인 요소를 선택한다
    var customNodes = jQuery('.classA'); //classA style class명을 적용받고 있는 요소를 선택한다.
    var customNodes = jQuery('#a, #b, div, ') ; //id를 a,b갖는 요소와 선택한다.
    var customNodes = jQuery('span', 'div'); // div 하위의 span 요소를 선택한다. 
     var customNodes  = jQuery('div span'); // 위와 동일하게 div하위 span요소를 선택한다. css셀렉터 표현식을 사용하니 더 간편하다.

    컨텍스트 기반 DOM 탐색 
        console.log("====== context based DOM Search test ");
        var tempNode = jQuery('#a');
        console.log(tempNode.text());
        console.log(tempNode.next().text());
        console.log(tempNode.nextAll().text());
        console.log(tempNode.parent().children().text());

    DOM을 생성하여 특정 Node에 Append하기
    jQuery('<div><span>Sweet candy</span></div>').find('span').addClass('classB').end().appendTo('#away');
    //DOM요소를 생성해서 span 요소에 classB css 스타일을 적용한뒤 away id를 가진 노드에 append한다.
    appendTo 이외에도 append(),
    prepend(), prependTo(),
    insertAfter(), insertBefore(),
    after(). before(), 등등 많다.

    DOM요소 제거
    jQuery('a').remove(); //a태그 요소 제거
    jQuery('a').remove('.classA') //a태그 classA클래스 적용된 녀석 제거

    DOM요소 교체
    var aNode = jQuery('#a'); var bNode = jQuery('#b');
    jQuery(aNode).replaceWith(bNode); //aNode를 bNode로 replace한다

    선택한 DOM 노드 선택 요소 집합을 루프 돌며 처리하기
        var awayNodes = jQuery('#away > span'); //away id가진 녀석 하위 span 요소들 선택
        jQuery.each(awayNodes, function(i){
    if(i%2 == 0){
          $(this).addClass('classA'); //i가 짝수면 이 요소에  classA 적용
    else{
          $(this).addClass('classB'); //i가 찍수면 이 요소에 classB 적용
    }
        });



    알아두어면 좋은 몇가지 유틸들
    jQuery.support  : console.dir(jQuery.support); object를 살펴보면 다양한 어트리뷰트들을 확인 할 수 있는데, 이는 브라우저의 기능을 탐지해서, 해당 어트리뷰트에 불린값을 가지고 있게된다.
     뭐 예를 들면 jQuery.support.tbody 의 경우 브라우저가 <tbody>요소가 없이도 table요소를 허락하는지 여부를 불린값으로 알려주는데, FF에서 당연히 true로 세팅되어 있다.
    기회가 되면 살펴 보도록하쟝

    jQuery.each() : 배열과 개체를 루프 돌며 처리

    jQuery.grep() : 배열에서 요소를 필터링 제거 할때

    jQuery.merge() : 배열 merging

    jQuery.extend() : 개체 확장




    b. jQuery Ajax

     jQuery의 ajax설계 구조에 있어 jquery.ajax() 메소드는 핵심이다.
    녀석은 모든 브라우저에서의 ajax call 기반을 제공한다.
    옵션 프로퍼티
    type : GET/POST
    url : 요청 url
    dataType : 서버로부터 반환될 데이터 타입에 대한 정의
    error : 에러 콜백
    success : 성공 콜백


    c. jQuery 이벤트 
    jQuery 이벤트 시스템은 는 이벤트 지향 프로그래밍을 지원하기에 bind  trigger될 수 있는 사용자 정의 이벤트를 만드는것이 가능하다.
    jQuery(listener).eventName(handlerFunction);


    예> 
    //myButton id를 가진 node를 클릭했을때, 해당 function 수행
    jQuery('#myButton').click(function(e){  
    console.log("Custom Event ~!");
    });

    //myButton id를 가진 node를 클릭했을때, 해당 function 수행
    jQuery('#myButton').bind('click', function(e){
    console.log("Custom Event ~!");
    });

    //myButton id를 사진 node를 click 또는 keydown했을때 해당 function 수행
    jQuery('#myButton').bind('click keydown', function(e){
    console.log("Custom Event ~!");
    });



    //이벤트에 정의해둔 function myEventHandler을 바인드
    function myEventHandler(e){
    if(!e.data){
    console.log("it's my event handler : nothing");
    return;
    }else{
    var userInfo = e.data;
    console.log('name : ' + e.data.name + userInfo.address + userInfo.age);
    return;
    }

    }

    jQuery('#myButton').click(myEventHandler).keydown(myEventHandler);

    jQuery('#myButton').bind('click keydown', muEventHandler);



    //데이타와 함께 이벤트 사용
    jQuery('#myButton').bind('click', 
    {name:'raeok', 
    address:'Seoul at Korea', 
    age:'28'}, 
    myEventHandler);




    //이벤트 처리기 전체를 제거하기
    특정 DOM요소에 바인드했떤 모든 이벤트 바인딩을 제거 하고 싶을때는 어떻게 해야할까?
    각각의 이벤트 플러그인에 네임스페이슷 줘서 한번에 관리하자~!

    jQuery('myButtonA').bind('click.myEventPlug', function (){
    console.log("event was launched");
    });

    jQuery('myButtonA').bind('click.myEventPlug', function (){
    console.log("event was launched");
    });

    jQuery('myButtonB').bind('click.myEventPlug', function (){

    console.log("event was launched");
    });

    this.unbind('. myEventPlug'); //해당 이벤트 바인드를 제거

    this.trigger('click.myEventPlug'); // 강제 수행


    //간략한 bind // unbind 예
    $(window).ready(function(){
    jQuery.fn.myPlugin = function(){
    console.log("myPlugin");
    var clickEvent = function(e){
    console.log('click');
    };
    var mousedownEvent = function(e){
    console.log('mousedown');
    }
    return this.bind('click.myPlugin', clickEvent).bind('mousedown.myPlugin',mousedownEvent);
    }
    jQuery.fn.dispose = function(){
    console.log("dispose");
    return this.unbind('.myPlugin');
    }
    var ajBtn2 = jQuery('#ajBtn2');
    ajBtn2.myPlugin();
    ajBtn2.trigger('click!');
    jQuery.leon = function(obj, name){
    console.log('unbind');
    obj.unbind(name);
    }
    jQuery.leon(ajBtn2, '.myPlugin');
    });
    })(jQuery);


    3. jQuery 플러그인
     jQuery는 메소드와 함수를 플러그인으로 넣을수 있는 방법을 제공한다.
    다운로드해서 사용하는 모든 플러그인들은 jQuery 플러그인 구조를 이용해 만들어져 있다.

    * 플러그인 구성시 주의사항
    파일명을 jquery.[플러그인명].js 로 짓도록 합니다. 예 : jquery.debug.js
    모든 새로운 메소드는 jQuery.fn 개체에 종속되도록 하고, 모든 함수는 jQuery 개체에 종속되게 한다.
    메소드 내에서 'this' 인스턴스는 현재 jQuery 개체를 가리킨다 (메소드 체이닝)

    * public Method 선언은 아래와 같다.
                    jQuery.fn.myPluginMethod = function(){
                        var clickEvent = function(e){
                            alert('click!!!');
                        };
                        
                        var mousedownEvent = function(e){
                            alert('mousedown');
                        }
                        return this.bind('click.myPlugin', clickEvent).bind('mousedown.myPlugin', mousedownEvent);
                    }

    선언한 public method myPluginMethod는 아래와 같이 사용이 가능하다.
    jQuery('#myButton').myPluginMethod ();

    * public 함수(static 함수)의 선언은 아래와 같다.
                    jQuery.myPluginFunction = function(){
                        alert("myPluginFunction");
                    }

    선언한 public function myPluginFunction은 아래와 같이 사용이 가능하다.
    jQuery.myPluginFunction();


    >> 모든 새로운 메소드는 jQuery.fn 개체에 종속되도록 하고, 모든 함수는 jQuery 개체에 종속되게 한다.

    jQuery Method와 Function (메소드와 함수)의 차이는 무엇일까?
    Method는 jQuery개체가 인스턴싱된 이후에 인스턴싱 객체를 통하여서만(selector로 jQuery 래핑된 객체) 사용이 가능하다.


    * 플러그인에 파라미터 전달하기
                    jQuery.fn.myPluginMethod = function(){
    console.dir(arguments);
                        var clickEvent = function(e){
                            alert('click!!!');
                        };
                        
                        var mousedownEvent = function(e){
                            alert('mousedown');
                        }
                        return this.bind('click.myPlugin', clickEvent).bind('mousedown.myPlugin', mousedownEvent);
                    }


                    var ajBtn2 = jQuery('#ajBtn2');
                    ajBtn2.myPluginMethod({name:'leon', age:28}, {a:'A'});

    >> 메소드에 파라미터를 전달할때, 위와같이 arguments로 받아도 되고, 명시적으로 파라미터를 넘겨도 된다.
    만약 내 새로운 플러그인에 이미 존재하는 필드와 존재하지 않는 필드들이 혼재되어 있고, 내가 새로 세팅하고자 하는
    필드가 선택적일때는 어떻게 하면 좋을까?

    extend() 메소드를 이용하여, 전달받은 파라미터를 재정의 하면 된다.+
    jQuery.fn.myPluginMethod = function(options){
    var defaultValue = jQuery.extend({},jQuery.fn.myPluginMethod.defaultValue, options);

    console.dir(defaultValue);
    console.log("name : " + defaultValue.name);
    var clickEvent = function(e){
    alert('click!!!');
    };

    var mousedownEvent = function(e){
    alert('mousedown');
    }
    return this.bind('click.myPlugin', clickEvent).bind('mousedown.myPlugin', mousedownEvent);
    }

    jQuery.fn.myPluginMethod.defaultValue = {
        name: "abc",
        sex: "man"
    };



    a. jQuery 외부 플러그인을 가져와서 써보기
    jQuery UI 플러그인을 이용하여 jQuery.ui.button 버튼을 내 페이지에 붙여보고 동작을 부여해 보자.

    첫번째로 css와 jQuery UI 컴포넌트 셋을 http://jqueryui.com/download 에서 다운 받아 프로젝트에 포함 시킨다.
    http://jqueryui.com/download 에 가보면 jQuery UI를 customize하게 선택하여 다운이 가능하다.
    Download Builder 라는 녀석의 도움을 통해 customize된 jquery ui 을 다운 받자.
    (http://jqueryui.com/docs/Getting_Started 에 Download Builder의 사용법이 자세히 나와있다.)

    두번째로 프로젝트에 포함시킨 ui 컴포넌트 셋을 페이지에 import한다 (빌드전 개발 환경을 위한 세팅을 전제로 하고 있으니 . . . 아래와 같은 구성으로 갈구지는 말자;;ㅋ)
    jquery.ui.button.js는 jquery.ui.core.js와 jquery.ui.widget.js 에 dependency가 걸려 있으므로, 
    아래와 같이 import한다.

      <link href="./lib/jquery/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css"/>
      <script src="./lib/jquery/jquery-1.4.2.js"></script>
      <script src="./lib/jquery/ui/jquery.ui.core.js"></script>
      <script src="./lib/jquery/ui/jquery.ui.widget.js"></script>
      <script src="./lib/jquery/ui/jquery.ui.button.js"></script>

    세번째로 jQuery 셀렉터로 선택한 노드에 버튼 플러그인 메소드를 수행하여 버튼을 인스턴싱한다.
    >> 스크립트
      $(document).ready(function() {
    $("#button").button({label:"myButton"});
      });

    >> html
    <div id="button"></div>



    jQuery UI에서 제공하는 버튼의 tutorial은 http://jqueryui.com/demos/button/ 에서 자세히 확인 가능하다. 








    'Web > Javascript' 카테고리의 다른 글

    jQuery widget 에 관하여.  (0) 2010/10/21
    jQuery 간단 스터디 계속 - Class 지향 플러그인 개발등  (0) 2010/10/20
    jQuery에 대한 간단한 스터디 정리  (0) 2010/10/01
    JavaScript Objects Reference  (0) 2010/08/06
    html압축을 통한 웹어플리케이션 performance 향상  (0) 2010/07/27
    Mac(Leopard,SnowLeopard) + Firefox 에서의 liveconnect 오동작  (0) 2010/07/27
    트랙백 0, 댓글 0
    1 ... 39 40 41 42 43 44 45 46 47 ... 110
    TOTAL 16,069 TODAY 57