使用 Dijit 进行优雅降级

Question

我成为 dojo（核心）用户已有几年了。在道场空间上构建我自己的小部件；忽略 dijit 和 dojox。在我自己的世界里工作。这有其优点，但我一直有一种感觉，在构建另一个选项卡式面板、轮播或对话框时，我正在重新发明轮子。所以我决定使用 dijit。

对于我自己的小部件，我设置了一些基本的规则：

1. 小部件必须优雅地降级[当没有加载js时]以实现可访问性和SEO
2. 加载js后不应该重绘（这总是包含在页面中的所有 html 之后，就在正文结束标记之前）
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>

如您所见，这显然违反了第三条规则（没有内联js）。

b. 编程实例化：

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 就可以实现。 2 个已损坏。 （1）没有可访问性或SEO价值（2）一旦设置模板，浏览器将需要重绘整个页面。

问题：是否可以（并且实用）使用 dijit，并且仍然遵守规则？

Answer 1

是的，这是可能的，也是可行的。然而，规则 #2 使得开箱即用使用任何预构建的 Dijit 变得非常困难，因为它们被设计为附加到节点并使用“Dojo 风格”重建它。您可以通过将节点样式设置为看起来像最终结果来解决这个问题 - 但这似乎比它的价值更麻烦，但这将是遵循此规则并仍然使用一些必要的组件（即很难自己做）就像 FilteringSelect 一样。

主要是因为#2，我建议您不要使用*dijit._Templated*。只需使用 *dijit._Widget*，而不是使用内部 HTML，只需附加到文档中的现有 HTML。

也许你可以改变#2，并允许对其进行修改和重新设计，但不要太过于改变 DOM 在搜索引擎或语音阅读器中的外观。

我自己从来没有做过#3，所以希望这不难。

对于#1，它取决于小部件。您可以使用标准浏览器选择并将其与 Dojo 一起升级为 FilteringSelect。