本文主要是介绍Dojo中创建widget方式小结，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
dojo中创建widget的方式总的来说有两种：声明式创建widget、编程式创建widget。编程式创建widget根据srcNode又可分为三种：静态srcNode、动态srcNode、无srcNode。
1. 声明式创建widget，通过在宿主节点上设置dojoType="widgetName"来实现，代码如下所示：
<html>
<head><title>声明式的widget</title><style type="text/css">@import "http://serverapi.arcgisonline.com/jsapi/arcgis/1.5/js/dojo/dijit/themes/tundra/tundra.css";</style><script type="text/javascript">var djConfig={parseOnLoad:true};</script><script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.5"></script><script type="text/javascript">dojo.require("dojo.parser");dojo.require("dijit._Widget");dojo.declare("Counter",[dijit._Widget],{_i:0,buildRendering:function(){this.domNode=dojo.create("button",{innerHTML:this._i});},postCreate:function(){this.connect(this.domNode,"onclick","increment");//不能写成onClick，dijit._Widget具有connect方法},increment:function(){this.domNode.innerHTML = ++this._i;}});</script>
</head>
<body> <span dojoType="Counter"></span><!--此处的span只是为了能够对Counter进行定位，没有其他的作用，把span换成a也可以。在Firefox中调试increment可知，this.domNode是button节点，而不是此处的替代层span。-->
</body>
</html>
2.使用静态的scrNode供编程式的widget定位使用，代码如下所示：
<html>
<head><title>使用静态的scrNode供编程式的widget定位使用</title><style type="text/css">@import "http://serverapi.arcgisonline.com/jsapi/arcgis/1.5/js/dojo/dijit/themes/tundra/tundra.css";</style><script type="text/javascript">var djConfig={parseOnLoad:true};</script><script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.5"></script><script type="text/javascript">dojo.require("dojo.parser");dojo.require("dijit._Widget");dojo.declare("Counter",[dijit._Widget],{_i:0,buildRendering:function(){this.domNode=dojo.create("button",{innerHTML:this._i});},postCreate:function(){this.connect(this.domNode,"onclick","increment");//不能写成onClick，dijit._Widget具有connect方法},increment:function(){this.domNode.innerHTML = ++this._i;}});dojo.addOnLoad(function(){var srcNode = dojo.byId("srcNodeId");var counterWidget = new Counter({},srcNode);// new WidgetName({widget属性散列},srcNode}}); </script>
</head>
<body> <span id="srcNodeId"></span><!--此处的span只是为了能够对Counter进行定位，没有其他的作用，把span换成a也可以。在Firefox中调试increment可知，this.domNode是button节点，而不是此处的替代层span。-->
</body>
</html>
3.动态创建scrNode供编程式的widget定位使用，代码如下所示：
<html>
<head><title>动态创建scrNode供编程式的widget定位使用</title><style type="text/css">@import "http://serverapi.arcgisonline.com/jsapi/arcgis/1.5/js/dojo/dijit/themes/tundra/tundra.css";</style><script type="text/javascript">var djConfig={parseOnLoad:true};</script><script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.5"></script><script type="text/javascript">dojo.require("dojo.parser");dojo.require("dijit._Widget");dojo.declare("Counter",[dijit._Widget],{_i:0,buildRendering:function(){this.domNode=dojo.create("button",{innerHTML:this._i});},postCreate:function(){this.connect(this.domNode,"onclick","increment");//不能写成onClick，dijit._Widget具有connect方法},increment:function(){this.domNode.innerHTML = ++this._i;}});dojo.addOnLoad(function(){var srcNode = dojo.create("span");//dojo.create("elementTagName",{DOM属性散列})dojo.body().appendChild(srcNode);var counterWidget = new Counter({},srcNode);// new WidgetName({widget属性散列},srcNode}/*此处动态创建的span只是为了能够对Counter进行定位，没有其他的作用，把span换成a也可以。在Firefox中调试increment可知，this.domNode是button节点，而不是此处的替代层span*/}); </script>
</head>
<body> </body>
</html>
4.编程式创建widget，不设置小部件的srcNode，代码如下所示：
<html>
<head><title>编程式创建widget，不设置小部件的srcNode</title><style type="text/css">@import "http://serverapi.arcgisonline.com/jsapi/arcgis/1.5/js/dojo/dijit/themes/tundra/tundra.css";</style><script type="text/javascript">var djConfig={parseOnLoad:true};</script><script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.5"></script><script type="text/javascript">dojo.require("dojo.parser");dojo.require("dijit._Widget");dojo.declare("Counter",[dijit._Widget],{_i:0,buildRendering:function(){this.domNode=dojo.create("button",{innerHTML:this._i});},postCreate:function(){this.connect(this.domNode,"onclick","increment");//不能写成onClick，dijit._Widget具有connect方法},increment:function(){this.domNode.innerHTML = ++this._i;}});dojo.addOnLoad(function(){var counterWidget = new Counter({});// new WidgetName({widget属性散列},srcNode}counterWidget.placeAt(dojo.body());//placeAt是dijit._Widget中的函数，将创建的widget放到了body中，而且没有使用srcNode}); </script>
</head>
<body> </body>
</html>
以上前三种都是用了srcNode进行定位，需要特别注意的是,srcNode仅仅是用来进行对widget进行定位，千万不要将widget.domNode与srcNode等价起来，二者不同，widget.domNode是widget自身的dom节点，而srcNode只是相当于widget的占位符。但也并不是所有的小部件都必须创建“替代层”。一些小部件，其在页面中的位置对其功能没有任何影响。例如dijit.Tooltip、dijit.TooltipDialog与dijit.Dialog等。因为这类型的小部件的显示位置与其在DOM结构中的相对位置没有必然的关系，因此在一般情况下，Dojo会默认把这些小部件插入到页面DOM结构最后面的位置。
这篇关于Dojo中创建widget方式小结的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
