javascript - Degradación agraciada con Dijit

dojo unobtrusive-javascript

Question

He sido un usuario de dojo (núcleo) desde hace unos años. Construyendo mis propios widgets encima del espacio del dojo; descuidando dijit y dojox. Trabajando en mi propio mundo. Eso tenía sus ventajas, pero tenía la sensación de que estaba reinventando la rueda mientras construía otro panel con pestañas, carrusel o cuadro de diálogo. Así que decidí usar dijit.

Con mis propios widgets, he establecido algunas reglas básicas:

1. Un widget debe degradarse con gracia [cuando no se carga js] para accesibilidad y SEO
2. No debe haber rediseños después de cargar js (que siempre se incluye en la página después de todo html, justo antes de la etiqueta final del cuerpo)
3. No JS en línea (las secuencias de comandos deben estar separadas de HTML)

Problema :

Dijit tiene dos formas de ser instanciado: de manera declarativa y programática. De cualquier manera, parece romper una de las reglas.

a. Instanciación declarativa :

Se ve algo así como:

<div dojoType="MyFirstWidget">
  <ul>
    <li dojoAttachPoint="counter">0</li>
    <li><a dojoAttachEvent="_updateCounter" href="#">Update</a></li>
  </ul>

  <script type="dojo/connect" event="onClick" args="evt">
    console.log("This will execute after of the Button dijit''s onClick method has been called.");
  </script>
</div>

Como puede ver, esto claramente rompe la tercera regla (no js en línea).

segundo. Instanciación programática :

dojo.require("dijit._Widget");
dojo.require("dijit._Templated");

dojo.declare("MyFirstWidget", [dijit._Widget, dijit._Templated], {
  templateString: "<div class=''awesome''>0</div>",

  postCreate: function() {
    console.log("postCreate");
  }
});

(new MyFirstWidget()).placeAt(dojo.body());

Y de esta manera, las reglas 1 y 2 están rotas. (1) Sin accesibilidad o valor SEO (2) Una vez que se establece la plantilla, el navegador tendrá que volver a dibujar la página completa.

Pregunta: ¿ es posible (y práctico) usar dijit, y seguir las reglas?

Answer 1

Sí, es posible y práctico. Sin embargo, su regla # 2 hace que sea bastante difícil usar cualquier Dijits preconstruido de fábrica, ya que están diseñados para conectarse a un nodo y reconstruirlo con un "estilo Dojo". Podrías solucionarlo diseñando el nodo para que parezca el resultado final, pero puede parecer más problemático de lo que vale, pero sería la única manera de seguir esta regla y aún así usar algunos de los componentes necesarios (que son difícil de hacer usted mismo) como FilteringSelect.

Principalmente por # 2, recomendaría que no use * dijit._Templated *. Simplemente use * dijit._Widget *, y en lugar de tener HTML interno, solo conéctelo al HTML existente en su documento.

Tal vez puedas doblar el n. ° 2 y permitir que se modifique y rediseñe, pero no tanto como para cambiar el aspecto del DOM a un motor de búsqueda o lector de voz.

Nunca hago # 3 yo mismo, así que espero que no sea difícil.

Para el # 1, depende del widget. Puede usar un navegador estándar seleccionar y actualizarlo con Dojo a un filtro de selección.