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

Question

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

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

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

Проблема:

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

а. Декларативная реализация:

Выглядит либо что-то вроде:

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

б. Программная реализация:

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.