data-dojo-id, dijit/registry.byId() and dojo/dom.byId()

冷不防 2022-08-25 09:19 177阅读 0赞

registry.byId 和 dom.byId 经常混淆, 尤其是初次使用者。

registry.byId 应当用于： 当你想直接引用某个部件的JavaScript对象以及访问这个部件的方法时。

dom.byId 应当用于：当你想直接访问一个DOM节点。

下面这个ContentPane部件有一个id属性(标准HTML属性)以及一个data-dojo-id属性(dojo 特有id属性):

<div id="myDivId"
         data-dojo-type="dijit/layout/ContentPane"
         data-dojo-id="myDojoId">
       Hello Everyone!
    </div>

<div id="myDivId" data-dojo-type="dijit/layout/ContentPane" data-dojo-id="myDojoId"> Hello Everyone! </div>

### dom.byId() ###

dom.byId()和我们经常使用的document.getElementById()在访问DOM节点的div标签时没有区别: 都是通过标签的id属性值。

例如：

dom.byId("myDivId").style.height = '300px';

用来设置高度。

### registry.byId() ###

registry.byId() 有一点不同。首先，用data-dojo-type声明的节点或者dojo编程实现的部件被dojo解析后才能使用registry.byId() 。这时，id作为一个参数, 返回值是一个对象，这个对象当data-dojo-type被解析转换成dijit部件时由dojo创建。这样，你就可以改变部件的dojo属性，或者调用其中定义的方法 (在这个例子里，我们能调用ContentPane的方法)。例如，通过set(“content”, value)方法，设置ContentPane内容。

registry.byId("myDivId").set("content", "Hello World!");

你也可以像上面我们使用dom.byId() 那样改变其样式，通过ContentPane的domNode属性。 (事实上，domNode定义的比继承树高，所以每个dijit部件都有domNode。非常方便！例如

myContentPane = registry.byId("myDivId");
    myContentPane.domNode.style.height = '300px';
    myContentPane.set("content", "Hello World!");

myContentPane = registry.byId("myDivId"); myContentPane.domNode.style.height = '300px'; myContentPane.set("content", "Hello World!");

### data-dojo-id (dojo 1.6之前是jsId) ###

HTML 属性data-dojo-id通过自动创建一个全局JavaScript变量，节省你在使用过程中的很多步骤(这是由dojo parser实现的)。这个变量包含的对象和registry.byId()返回的对象相同。无论你给data-dojo-id这个属性什么值，都会变为全局变量名，所以，要当心保留字，还要当心两个部件使用相同data-dojo-id！既然Content Pane有一个data-dojo-id 属性值“myDojoId”，那么我可以稍微简化一下上面的代码，移除registry.byId()，使用data-dojo-id属性作为变量名：

myDojoId.domNode.style.height = '300px';
    myDojoId.set("content", "Hello World!");

myDojoId.domNode.style.height = '300px'; myDojoId.set("content", "Hello World!");

属性data-dojo-id不是必须，在这里只是为了使用方便。

注意：如果有两个相同data-dojo-id，那么起作用的是最后那个，而不是返回一个包含这两个部件的数组。所以要避免相同，否则会很难发现错误。