¿Cómo puedo diseñar un control personalizado en Javascript (posiblemente usando jQuery)

Question

Me gustaría crear un control personalizado en javascript. El objetivo es crear un bloque de construcción que tenga métodos, propiedades y eventos y convertirlo en un div.

Un ejemplo de uno de estos controles sería un calendario. Se convertiría en un div, tendría propiedades que definirían cómo se muestra y qué fecha se selecciona o resalta, tendría métodos para cambiar el mes actual o para seleccionar una fecha y se generarían eventos cuando se hace clic en un día o el mes actual es cambiado por una entrada del usuario.

Puedo pensar en muchas formas de implementar esto y no estoy seguro de cuál es la mejor manera. Me parece recordar que es malo aumentar los elementos DOM con propiedades y métodos, así que lo descarté. Un plugin jQuery parece una buena idea, sin embargo no estoy seguro si es apropiado crear un plugin para todos y cada método de mi control tendría por lo que entonces podría utilizarlo como:

$('#control').method1(); 
$('#control').method2(); 

Y si lo hago use jQuery, ¿dónde almaceno los datos privados de mi control?

Otra idea que obtuve fue crear un nuevo tipo de objeto que tendría una referencia a un div en el que podría representar sus elementos.

Entonces, ¿cuál es la forma preferida de hacerlo? Si puedo, me gustaría hacer esto como un complemento jQuery, pero necesitaría guías sobre cómo crear métodos y dónde almacenar datos privados. He marcado en Plugins/Authoring en el sitio web de jQuery y no ayudó mucho en este sentido.

Answer 1

1. you can start by reading this, un simple plugin de jQuery tutorial
2. you can also get lots of idea on this site, un tutorial sobre los widgets jQuery UI.

Como punto de partida, el primer sitio ofrece este fragmento como un esqueleto para el desarrollo del plugin:

//You need an anonymous function to wrap around your function to avoid conflict 
(function($){ 

    //Attach this new method to jQuery 
    $.fn.extend({ 

    //This is where you write your plugin's name 
    pluginname: function() { 

     //Iterate over the current set of matched elements 
     return this.each(function() { 
      //code to be inserted here 
     }); 
    } 
    }); 

//pass jQuery to the function, 
//So that we will able to use any valid Javascript variable name 
//to replace "$" SIGN. But, we'll stick to $ (I like dollar sign:))  
})(jQuery); 

Answer 2

Al escribir plugins jQuery, por lo general exponen métodos a través de los argumentos opcionales para la función del complemento

Por ejemplo:

$("#id").myplugin('method1'); 

datos de Almacenamiento es bastante simple. Simplemente decida si desea conservar esos datos en el DOM o en la memoria. En este último caso, debe crear un objeto al que pueda acceder su complemento.

(function($) { 

    var data; 
    $.fn.extend({ 

     myplugin: function(args) { 
      if (args === 'init') { 
       data = {}; 
       data.prop1 = val; 
      } 
      if (args === 'method1') 
       alert(data.prop1);   
     } 

    }); 

})(JQuery); 

Si desea mantener los datos en el DOM, deberá añadir un atributo (s) a su div contenedor con los datos que desea persistir.

(function($) { 

    $.fn.extend({ 

     myplugin: function(args) { 
      if (args === 'init') { 
       $(this).attr('data') = val; 
      } 
      if (args === 'method1') 
       alert($(this).attr('data')); 
     } 

    }); 

})(JQuery);