Изящная деградация с Dijit

Question

Я уже несколько лет являюсь пользователем dojo (core). Построение собственных виджетов на пространстве додзё; пренебрегая dijit и dojox. Работа в моем собственном мире. Это имело свои преимущества, но у меня было ощущение, что я изобретаю колесо, создавая еще одну панель с вкладками, карусель или диалоговое окно. Поэтому я решил использовать диджит.

С моих собственных виджетов, я установил некоторые основные правила:

1. Виджет должен ухудшать грациозно [когда нет JS не загружен] для обеспечения доступности и SEO
2. Там не должно быть никаких перерисовки после JS загружается (который всегда включен на странице после того, как все HTML, непосредственно перед телом закрывающего тега)
3. Нет инлайн JS (сценарии должны быть отделены от HTML)

Задача:

У Dijit есть два способа создания: декларативно и программно. В любом случае, похоже, нарушается одно из правил.

a. декларативная конкретизация:

выглядит как что-то вроде:

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

Как вы можете видеть, это явно нарушает 3-е правила (нет встроенного JS).

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

И таким образом, правила 1 & 2 сломаны. (1) Отсутствие доступа или значение SEO (2) После того, как шаблон установлен, браузеру необходимо будет перерисовать всю страницу.

Вопрос: Возможно ли (и практично) использовать dijit и по-прежнему следовать правилам?

Answer 1

Да, это возможно и практично. Однако ваше правило №2 довольно сложно использовать любые готовые Dijits из коробки, так как они предназначены для присоединения к узлу и перестраивают его с помощью стиля Dojo. Вы можете обойти это, уложив узел в конечный результат, но это может показаться большим количеством проблем, чем это стоит, но это был бы единственный способ следовать этому правилу и по-прежнему использовать некоторые из необходимых компонентов (которые трудно сделать сами), например FilteringSelect.

Главным образом из-за # 2, я бы рекомендовал вам не использование * dijit._Templated *. Просто используйте * dijit._Widget *, а вместо внутреннего HTML просто присоедините к существующему HTML в своем документе.

Возможно, вы можете согнуть # 2 и разрешить его модификацию и рестайлинг, но не настолько, чтобы он менял то, что DOM выглядит как поисковая система или речевой ридер.

Я никогда не делаю # 3 себя, поэтому надеюсь, что не должно быть трудно.

За # 1 это зависит от виджета. Вы можете использовать стандартный выбор и обновление браузера, с помощью Dojo в FilteringSelect.