[jQuery] Widget

출처 : http://devx.tistory.com/262

 

새로 맡게 된 프로젝트가 jQuery UI를 사용하여서 jQuery UI 코드를 살펴보게 되어서 정리해보았다. 먼저, 사용자 정의 위젯을 만들기 위해서는  jquery.ui.widget.js의 $.widget()을 호출해야 한다.

$.widet()은 팩토리 메소드로 새로 생성할 위젯의 이름과 위젯의 프로퍼티 함수를 정의한 객체를 인자로 받아서 생성된다. 커스텀 위젯을 생성하는 방법은 다음과 같다.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

$.widget("ui.mywidget",{     // 위젯에서 사용할 옵션들을 정의한다.     options:{key:value,...},       // 커스텀 위젯을 생성하기위한 코드를 정의한다.     _create:function(){         // 커스텀 위젯 코드 안에서는 위젯의 element를         // this.element로 위젯의 옵션을 this.options로         // 접근할 수 있다.         if( this.options.hidden ){             this.element.hide();         }     },       _doSomething: function(event) {         // 커스텀 위젯의 코드를 수행한 후 위젯에 정의된         // 이벤트를 퍼트리기 위해서 _trigger()를 사용할         // 수 있다.         this._trigger("close", event, {item:closedItem});     },       // 위젯을 제거하기 위한 코드를 정의한다.     // ※ 위젯이 추가된 element가 삭제될 때도 호출     destroy: function() {         this.element.removeAttr('some-...');           // $.Widget.prototype에 직접 접근하여서 오버라이딩된         // 메소드를 호출할 수도 있다.         // ※ $.Widget.prototype. methodToOverride         //              .apply(this, arguments);         $.Widget.prototype.destroy.apply( this, arguments);     } });

$.widget()으로 생성되는 위젯은 jquery.ui.widget.js에 정의되어 있는 $.Widget을 상속받게 되는데 $.Widgt에서 기본적으로 제공해주는 기능들은 다음과 같다.

1. options: 기본 옵션으로 disabled 옵션을 제공하며 option(String key[, String value])를 사용하여 값을 설정하거나 얻어오는 기능을 제공한다.
2. enable()/disable():  option의 disabled 값을 true/false로 설정한다. 값 변경에 따른 동작은 위젯에서 따로 구현해줘야 한다.
3. _trigger(type, event, uiHash): 이벤트를 발생시켜주는 메소드로 options로 넘겨진 callback 함수를 호출해준다.

$.widget()의 코드는 다음과 같이 구성되어 있다.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99

/**  * 커스텀 위젯을 생성해주는 팩토리 메소드이다.  * ※ 쉬운 설명을 위해서 ui.progressbar 위젯을 예로 들겠다.  *  * @param {String} name 커스텀 위젯의 이름을 받는다.  *   - 예) ui.progressbar  * @param {Object} base 위젯의 기본이 될 Object를 받는다.  *   - 기존의 widget을 상속받아서 사용하기 위해서 사용된다.  *   - 예) $.widget("ui.draggable", $.ui.mouse, {...});  * @param {Object} prototype 커스텀 위젯을 정의한 코드  */ $.widget = function( name, base, prototype ) {     /*      * name에서 namespace를 분리한다.      * 예) name이 ui.progressbar 였다면      *   - namespace: ui      *   - name: progressbar      *   - fullName: ui-progressbar      */     var namespace = name.split( "." )[ 0 ],         fullName;     name = name.split( "." )[ 1 ];     fullName = namespace + "-" + name;       /*      * base가 따로 주어지지 않은 경우 $.Widget을 상속받게한다.      */     if ( !prototype ) {         prototype = base;         base = $.Widget;     }       /*      * sizzle의 filters에 커스텀 위젯을 등록한다.      * - 예) $(":ui-progressbar")와 같은 코드가 호출되는 경우      *     progressbar 위젯이 설치된 엘리먼트들을 리턴하게      *     된다.      * - jQuery에서 Sizzle 코드는 다음과 같이 사용된다.      *   jQuery.find = Sizzle;      *   jQuery.expr = Sizzle.selectors;      *   jQuery.expr[":"] = jQuery.expr.filters;      * - Sizle의 filters 관련코드는 아래의 링크에서 확인      *   https://github.com/jquery/sizzle/wiki      */     $.expr[ ":" ][ fullName ] = function( elem ) {         return !!$.data( elem, name );     };       /*      * 위젯의 namespace가 없는 경우 namespace를 생성한다.      * - ui.progressbar라면 ui namespace      */     $[ namespace ] = $[ namespace ] || {};       /*      * 위젯을 생성하기 위한 생성자를 만든다.      * - $.ui.progressbar를 생성한다.      */     $[ namespace ][ name ] = function( options, element ) {         // 단순 상속을 위해서 호출되는 경우에는 초기화를         // 생략하기 위해서 체크된다.         if ( arguments.length ) {             this._createWidget( options, element );         }     };       /*      * base에 정의되어 있는 객체(instance) 변경을 할      * 가능성이 있으므로 인스턴스화 시켜서 상속받는다.      */     var basePrototype = new base();     basePrototype.options = $.extend( true, {},             basePrototype.options );       /*      * basePrototype과 위젯의 정보들(namespace, name,      * prefix, baseclass)을 상속받는 커스텀 위젯을 생성한다.      */     $[ namespace ][ name ].prototype = $.extend( true,         basePrototype,         {             namespace: namespace,             widgetName: name,             widgetEventPrefix: $[ namespace ][ name ].                 prototype.widgetEventPrefix || name,             widgetBaseClass: fullName         }, prototype );       /*      * 위젯을 생성하거나 위젯의 함수를 호출할 수 있게      * 해준다. ui.progressbar를 기존으로 보면 다음과 같다.      *      * 1. $.progressbar()를 호출하여서 progressbar를      *   생성한다.      * 2. $.progressbar("value")와 같이 progressbar의      *   public 메소드를 호출할 수 있게 해준다.      */     $.widget.bridge( name, $[ namespace ][ name ] ); };

관련자료:

• jQuery UI developer guide
• Sizzle document
• jQuery’s Data method
• Sizzle의 pseudo selector를 사용한 jQuery hidden selector
• 설명을 위해 사용한 progressbar 위젯