jQuery로 UI 구성 요소 캡슐화

Question

고유 한 여러 UI "위젯"을 만드는 것과 관련된 응용 프로그램을 만들고 있는데 jQuery로 이러한 UI 구성 요소의 논리를 캡슐화하는 데 좋은 방법을 찾지 못했습니다. 이들은 대부분이며 앱에서 여러 곳에서 재사용하지 않는 일회용 구성 요소입니다.

나는 lowpro plugin을 실험 해 왔지만, 내가 원하는 것을 어느 정도 허용하지만, "jQuery 길"을 사용하는 것처럼 느껴진다.

일부 컨텍스트를 제공하기 위해 lowpro를 사용하여 작성한 내용의 일부를 요약하여 보여줍니다. 다른 요소가 마약이 될 수있는 정렬 가능한 목록입니다. 빈 상태로 초기화되면 자리 표시자가 나타납니다.

FieldList = $.klass({ 
    initialize: function() { 
    this.placeholder = $('#get-started-placeholder'); 
    if (this.items().length == 0) { 
     this.deactivateList(); 
    } else { 
     this.activateList(); 
    } 
    }, 

    items: function() { 
    return this.element.children('li:visible'); 
    }, 

    deactivateList: function() { 
    this.element.hide(); 
    this.element.sortable('destroy'); 
    this.placeholder.show(); 
    var instance = this; 
    this.placeholder.droppable({ 
     hoverClass: 'hovered', 
     drop: function(e, ui) { instance.receiveFirstField(ui.helper); } 
    }); 
    }, 

    activateList: function() { 
    this.placeholder.hide(); 
    this.placeholder.droppable('destroy'); 
    this.element.show(); 
    var instance = this; 
    this.element.sortable({ 
     placeholder: 'placeholder', 
     forcePlaceholderSize: false, 
     tolerance: 'pointer', 
     handle: 'h4', 
     opacity: 0.9, 
     zIndex: 90, 
     stop: function(e, ui) { instance.receiveField(ui.item); } 
    }); 
    }, 

    receiveFirstField: function(element) { 
    ... 
    this.activateList(); 
    }, 

    receiveField: function(element) { 
    ... 
    } 
}); 

$(function() { 
    $('ol#fields').attach(FieldList); 
} 

나는 상태의 비트가 여기에 무슨이주의 사항, 그리고 내가 할 수 있으면 좋겠다 일부 인스턴스 메소드 개인 등 그래서, 말해 줄 수 밖에 어떤 jQuery를 전문가들은이 할 거라고하는 방법 Javsacript를 아마도 그렇게해서는 안되는 어떤 것으로 저지시키는 lowpro와 같은 것에 의지하지 않고? 내가 언급 한 모듈 패턴을 가지고 이와 같은 것을 달성 할 수있는 깨끗한 방법이 있다는 느낌이 들지만 in this thread을 언급했지만 그 조각들은 실제로 나를 위해 오지 않습니다.

감사합니다.

Answer 1

jQuery UI "widget factory"을 사용하십시오. 다른 모든 UI 위젯 (아코디언, 대화 상자 등)이 사용하는 것입니다.

괜찮 으면서 약간 혼란스러운 튜토리얼 here이 있습니다. (그것은 내가 찾은 최고의 하나입니다.)

는 기본적으로, 당신처럼, 훨씬 더의 jQuery 방법으로 위젯을 정의 : 함수 이름이 비공개 전에

$.widget("ui.myCustomWidget", { 
    _init: function(){ 
     //initialize your function 
    }, 

    somethingElse: function(){ 
    //do something else here 
    } 
}); 

가 강조.

$('div#myWidget').myCustomWidget(); 

:

var foo = { 
    _init: function(){ 
    //yada yada 
    }, 
    somethingElse: function(){ 
    //do something else here 
    } 
}; 

$.widget("ui.myCustomWidget", foo); 

그런 다음 당신은 당신의 위젯은 다른 UI 위젯을 만들 때와 같은 방법으로 "만드는"만약 당신이 원하는 경우에도, 객체에 위젯 기능을 설정하고 변수에 액세스 할 수 있습니다

자신 만의 위젯을 만들 수있는 수많은 옵션 및 jQuery 도구가 있습니다. 이 튜토리얼을 작성하는 대신, 모든 내용을 직접 읽도록하겠습니다. 행복한 위젯!