Encapsulando componentes de la interfaz de usuario con jQuery

Question

Estoy creando una aplicación que implica la creación de varios "widgets" UI únicos, y tengo problemas para encontrar una buena práctica para encapsular la lógica detrás de estos componentes de la interfaz de usuario con jQuery. Estos son en su mayoría componentes únicos que no se reutilizan en varios lugares de la aplicación.

He estado experimentando con el lowpro plugin, y si bien permite más o menos lo que quiero, siento que voy en contra de "la manera jQuery" al usarlo.

Para proporcionar un contexto, aquí hay un extracto abreviado de algo que escribí usando lowpro. Es una lista ordenable en la que otros elementos pueden convertirse en drogas. Cuando se inicializa vacío, muestra un marcador de posición.

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); 
} 

en cuenta que tengo un poco de estado pasando aquí, y algunos métodos de instancia que me gustaría poder hacer privada, etc Por lo tanto, cualquier pros jQuery por ahí que me puede decir cómo se haría esto sin depender de algo como lowpro que quizás convierta a Javsacript en algo que no debería ser? Tengo la sensación de que hay una forma limpia de lograr algo como esto con el Patrón de Módulos que vi mencionado in this thread, pero las piezas no se están uniendo realmente para mí.

Gracias!

Answer 1

Utilice jQuery UI "widget factory". Es lo que usan todos los otros widgets de UI (Accordion, Dialog, etc.).

Hay un tutorial bien, pero un poco confuso here. (Es lo mejor que he encontrado.)

Básicamente, se define el widget de una manera mucho más jQuery, como:

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

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

un guión antes de que el nombre de la función hará que sea privado. También puede ajustar las funciones de control dentro de un objeto y acceder a la variable, si eso es lo que quiere:

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

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

A continuación, sólo "crear" su widget de la misma manera se crea cualquier otro widget de la interfaz de usuario:

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

Gran cantidad de opciones y herramientas jQuery integradas que le permiten crear sus propios widgets. En lugar de hacer de esto un tutorial, le dejaré leer todo sobre usted. ¡Feliz widgeting!