Creando “widgets” de Javascript / HTML compuestos

Lo que me gustaría hacer es poder dinámicamente un bloque de HTML autónomo que tenga propiedades adicionales.

No estoy seguro de cómo llamarlo, ya que “widget” ahora implica que es algo como un estilo o una insignia para poner en tu blog. Estoy hablando de un objeto JS / HTML (/ CSS) reutilizable, personalizable, “compuesto”.

Por ejemplo, un selector de fecha simple.

document.body.appendChild(new DatePicker()); 

Generaría

 
January .... 1 .... 2010 ....

Y tendría propiedades como

 var d = new DatePicker(); d.value = "2010-06-21"; d.name = "the_datepicker"; d.month = 5; d.month = "June"; d.day = 21; d.year = 2010; 

¿Cómo se puede (fácilmente) lograr esto? ¿Cuáles son las mejores prácticas para esta situación?

Me gusta el enfoque de MooTools de hacer esto. Cualquier objeto de JavaScript puede definir un método toElement y puede adjuntar este objeto al DOM utilizando las envolturas de MooTools. Los envoltorios consultarán la propiedad toElement en el objeto y, si existe, el valor de retorno de la llamada a toElement() se agregará al DOM. Para que esto funcione, tendría que usar los envoltorios para adjuntarlos a DOM en lugar de usar appendChild directamente.

 function DatePicker(date) { this.date = date; } DatePicker.prototype.toElement = function() { // return a DOM representation of this object }; var picker = new DatePicker(); 

Aquí hay algunas maneras de usar esto:

 // retrieve the DOM node directly document.body.appendChild(picker.toElement()); // use a wrapper to append, that queries toElement first // DOM is a function like jQuery, that wraps the given DOM // object with additional methods like append for querying toElement. DOM(document.body).append(picker); 

Por supuesto, siempre puede sobrescribir el método nativo de appendChild , sin embargo, no lo recomendaría.

Por el bien de la integridad, así es como lo harías. Use un cierre para aferrarse al método original de appendChild , y reemplácelo con un nuevo método que primero verifique si toElement está definido, y si lo hace, recupera la representación del elemento de ese objeto. De lo contrario, continúe agregando el objeto pasado tal como está.

 (function(original) { Element.prototype.appendChild = function(child) { if('toElement' in child) { original.call(this, child.toElement()); } else { original.call(this, child); } } })(Element.prototype.appendChild); 

Agregue el objeto a DOM como en su ejemplo:

 document.body.appendChild(new DatePicker()); 

Hay un par de opciones diferentes con esto.

Podría “subclasificar” el objeto de elemento, pero eso sería extremadamente ineficiente ya que Javascript pretende ser lo más pequeño posible orientado a objetos. (Además, extender los objetos del host es asco .)

Sin embargo, el enfoque que tomaría sería definir una función to_html en la ‘clase’ de DatePicker .

Este método tomaría teóricamente los atributos del DatePicker de DatePicker y los usaría para crear el HTML.

Y, si mantiene este HTML almacenado en el DatePicker , tendrá una manera fácil de actualizarlo y acceder a su valor según sea necesario en el código.

Es posible que desee revisar knockout.composite – http://danderson00.blogspot.com.au/2012/08/introducing-knockoutcomposite.html