Tengo un montón de pequeños fragmentos de HTML que me gustaría reutilizar en varias páginas y he buscado varias formas de hacerlo. Se me ocurrió la siguiente solución que usa un objeto de función javascript para crear el elemento e insertarlo en la página. Aquí hay un ejemplo:

 <div id="id"></div> <script>var v = function(divid){ var el = document.getElementById(id); el.innerHTML="<input type=\"button\" onclick=\"alert(\"hello world\"/>";}</script>

Este es solo un simple ejemplo artificial. El script crea un botón y lo coloca en el div y le asigna una función. En un ejemplo real, el javascript sería un archivo separado y la función podría crear varios elementos HTML que interactúan entre sí.

Luego llevé esto más allá y agregué parámetros de objeto. Aquí está el HTML:

 <div id="btndiv">{"button":"Click","message":"clicked"}</div> <script>var v = new PopButton(id);</script>

Esto es fácil de leer en una página HTML donde agrego el elemento de bloque y luego el objeto se crea en su lugar. El código del objeto del widget se ve así:

 function PopButton(btndiv) { this.div = document.getElementById(btndiv); var jasontext = this.div.innerText; var jason = null; try { jason = JSON.parse(jasontext); } catch(e) { jason = {"button":"Click","message":"clicked"}; } var h = "<button type=\"button\" id=\""+btndiv+"btn\""; h += " onclick=\"PopButtonClicked("+btndiv+"msg)\">"+jason.button+"</button>"; h += "<div id=\""+btndiv+"msg\" style=\"display:none\">"+jason.message+"</div>"; this.div.innerHTML = h; } function PopButtonClicked(msgel) { if(msgel.style.display === "none") { msgel.style.display = "block"; } else { msgel.style.display = "none"; } }

En otras palabras, utilizo el texto interno para enviar parámetros al objeto javascript y luego lo reemplazo con el HTML que conforma el widget.

Este es solo un ejemplo simple para mostrar el paso de parámetros. Se pueden crear widgets más complejos con esta técnica, pero no estoy satisfecho con el paso de parámetros. En mi implementación, si JSON.parse() encuentra un error, se descarta todo el parámetro y se establece un valor predeterminado.

¿Hay alguna forma de pasar parámetros que permitan parámetros opcionales? Por ejemplo, si analicé el texto interno con solo '{"button":"clickme"}' y no incluí la parte de "mensaje" que no generaría un error si hiciera referencia a 'jason.message'.

Gracias de antemano.