Dégradation gracieuse avec Dijit

Question

Je suis un utilisateur dojo (core) depuis quelques années maintenant. Construire mes propres widgets au sommet de l'espace dojo; négliger le dijit et le dojox. Travailler dans mon propre monde. Cela a eu des avantages, mais j'ai toujours eu l'impression de réinventer la roue tout en construisant un autre panneau à onglets, un carrousel ou une boîte de dialogue. J'ai donc décidé d'utiliser dijit.

Avec mes propres widgets, je me suis fixé quelques règles de base :

1. Un widget doit se dégrader gracieusement [lorsqu'aucun js est chargé] pour l'accessibilité et le référencement
2. Il devrait y avoir aucun redessine après le js est chargé (qui est toujours inclus dans la page html après tout, juste avant la fin balise body)
3. Non inline JS (scripts doivent être séparés de HTML)

Problème:

Dijit a deux méthodes d'instanciation: déclarative et par programmation. De toute façon semble rompre l'une des règles.

a. déclarative instanciation:

On dirait soit quelque chose comme:

<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> 

Comme vous pouvez le voir, ce casse clairement la règle 3 (pas js en ligne).

b. instanciation Programmatic:

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

Et ainsi, les règles 1 & 2 sont brisés. (1) Aucune valeur d'accessibilité ou de référencement (SEO) (2) Une fois le modèle défini, le navigateur devra redessiner la page entière.

Question: est-il possible (et pratique) d'utiliser dijit, tout en respectant les règles?

Answer 1

Oui, c'est à la fois possible et pratique. Cependant, votre règle n ° 2 rend très difficile l'utilisation de toutes sortes de Dijits pré-construites, car elles sont conçues pour se connecter à un nœud et le reconstruire avec un "style Dojo". Vous pouvez contourner ce problème en donnant au nœud le même aspect que le résultat final, mais cela peut sembler être plus difficile que cela en vaut la peine, mais ce serait la seule façon de suivre cette règle et d'utiliser certains des composants nécessaires difficile à faire soi-même) comme FilteringSelect.

Principalement en raison de # 2, je recommanderais que vous pas utilisez * dijit._Templated *. Utilisez simplement * dijit._Widget *, et au lieu d'avoir du HTML interne, attachez juste au HTML existant dans votre document.

Peut-être que vous pouvez plier # 2, et lui permettre d'être modifié et redessiné, mais pas tellement que cela change ce que le DOM ressemble à un moteur de recherche ou un lecteur de discours.

Je ne fais jamais le numéro 3 moi-même, donc j'espère que cela ne devrait pas être difficile.

Pour le numéro 1, cela dépend du widget. Vous pouvez utiliser un navigateur standard sélectionner et mettre à jour avec Dojo à un FilteringSelect.