用Dijit优雅退化 [英] Graceful degradation with Dijit

问题描述

几年前，我一直是一个dojo（核心）用户。在dojo空间上建立自己的小部件;忽视dijit和dojox。在我自己的世界工作。这有它的优点，但我不断感觉到，我正在重建轮子，同时建立另一个标签面板，旋转木马或对话框。所以我决定使用dijit。

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

1. 一个小部件必须优雅地降级[当没有js被加载]的可访问性和SEO


2. js之后不应该重新绘制（这总是包含在页面全部html，就在body结束标签之前）


3. 没有内联JS（脚本必须与HTML分开）

问题：

Dijit有两种实例化方式：声明式和编程式。无论哪种方式似乎违反了其中一个规则。

a。 声明式实例化：

看起来像：

 < div dojoType =MyFirstWidget> 
< ul> 
< li dojoAttachPoint =counter> 0< / li> 
< li>< a dojoAttachEvent =_ updateCounterhref =＃>更新< / a>< / li> 
< / ul> 
 
< script type =dojo / connectevent =onClickargs =evt> 
 console.log（这将在Button dijit的onClick方法被调用之后执行。）; 
< / 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破了（1）无法访问或SEO值（2）设置模板后，浏览器将需要重绘整个页面。

问题：使用dijit是可能的（实际的），还是遵循规则？

解决方案

是的，这是可能的实际的。但是，您的规则＃2使得使用任何预先构建的Dijit开箱即用非常困难，因为它们被设计为附加到节点并用Dojo样式重建它。您可以通过将节点设计为最终结果来实现，但这似乎比它的价值更麻烦，但它将是遵循此规则并仍然使用某些必要组件的唯一方法（即很难做到自己）像FilteringSelect。

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

也许你可以弯曲＃2，并允许要修改和修改，但并不太多，它会改变DOM对搜索引擎或语音阅读器的看法。

我从来没有做过3希望这不应该是困难的。

对于＃1，这取决于小部件。您可以使用标准浏览器将Dojo升级到FilteringSelect。

I've been a dojo (core) user for a few years now. Building my own widgets atop the dojo space; neglecting dijit and dojox. Working in my own world. That had it's advantages, but I kept having the feeling that I'm reinventing the wheel while building yet another tabbed panel, carousel or dialog box. So I've decided to use dijit.

With my own widgets, I've set some basic rules:

1. A widget must degrade gracefully [when no js is loaded] for accessibility and SEO
2. There should be no redraws after the js is loaded (which is always included on the page after all html, just before the body end-tag)
3. No inline JS (scripts must be separate from HTML)

Problem:

Dijit has two ways of being instantiated: declaratively and programmatically. Either way seems to break one of the rules.

a. Declarative instantiation:

Looks either something like:

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

As you can see, this clearly breaks the 3rd rule (no inline js).

b. Programmatic instantiation:

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

And this way, rules 1 & 2 are broken. (1) No accessibility or SEO value (2) Once the template is set, the browser will need to redraw the entire page.

Question: is it possible (and practical) to use dijit, and still follow the rules?

解决方案

Yes, it is both possible and practical. However, your rule #2 makes it pretty difficult to use any pre-built Dijits out of the box since they are designed to attach to a node and rebuild it with a "Dojo style". You could get around that by styling the node to look like the final result - but that may seem to be more trouble than it's worth, but it would be the only way to follow this rule and still use some of the necessary compnents (that are hard to do yourself) like FilteringSelect.

Mainly because of #2, I would recommend that you not use *dijit._Templated*. Just use *dijit._Widget*, and instead of having internal HTML, just attach to the existing HTML in your document.

Maybe you can bend #2, and allow it to be modifed and restyled, but not so much that it changes what the DOM looks like to a search engine or a speech reader.

I never do #3 myself, so hopefully that shouldn't be hard.

For #1 it depends on the widget. You can use a standard browser select and upgrade that with Dojo to a FilteringSelect.

这篇关于用Dijit优雅退化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！