1 前言

1.1 传统JS前台编程方式

传统的前台编程模式如下

<HTML> <HEAD> <!—这里引入<a href="/tag/yemian/" target="_blank" class="keywords">页面</a>依赖的元素，<a href="/tag/baokuo/" target="_blank" class="keywords">包括</a>JS <a href="/tag/wenjian/" target="_blank" class="keywords">文件</a> </HEAD> <BODY> <!—<a href="/tag/yemian/" target="_blank" class="keywords">页面</a>HTML元素--> <SCRIPT> <!—<a href="/tag/yonghu/" target="_blank" class="keywords">用户</a>自己的脚本<a href="/tag/daima/" target="_blank" class="keywords">代码</a>--> </SCRIPT> </BODY>@H_<a href="/tag/301/" target="_blank" class="keywords">301</a>_8@</p> <p>可以看出，传统的<a href="/tag/qiantai/" target="_blank" class="keywords">前台</a>编程方式是面向过程的，不便于扩展于重用。在一个复杂的BS项目中，如果能够把抽象出界面中的某些具备共性的区域，把他们的行为（<a href="/tag/baokuo/" target="_blank" class="keywords">包括</a>界面元素，界面事件，以及数据）封装起来将大大前端的开发效率。</p> <h2>1.2 Dojo简介</h2> <p>Dojo是一个工具箱，其定义了如下三大模块</p> <p><strong>1）各式各样的JS标准库<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a></strong></p> <p>这些标准库<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a>包罗万象并考虑了浏览器兼容性以及<a href="/tag/xingneng/" target="_blank" class="keywords">性能</a>，在dojo框架下建议使用这些库<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>可以<a href="/tag/pingbi/" target="_blank" class="keywords">屏蔽</a>浏览器的差异</p> <p><strong>2）一应俱全的Web组件<a href="/tag/baokuo/" target="_blank" class="keywords">包括</a>基本组件（dijit）以及扩展（dojox）</strong></p> <p>在web组件方面，可以把Dojo的Web组件看成一个<a href="/tag/qiantai/" target="_blank" class="keywords">前台</a><a href="/tag/biaoqian/" target="_blank" class="keywords">标签</a>，<a href="/tag/yemian/" target="_blank" class="keywords">页面</a>加载完毕后dojo将会<a href="/tag/diaoyong/" target="_blank" class="keywords">调用</a>dojo.parser模块的parse<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a>扫描但前<a href="/tag/yemian/" target="_blank" class="keywords">页面</a>中所有具备dojotype<a href="/tag/shuxing/" target="_blank" class="keywords">属性</a>的DIV<a href="/tag/biaoqian/" target="_blank" class="keywords">标签</a>，把它们parse成对应的web组件。这得一提的是这些组件全部是基于面向对象的思想设计，非常便于扩展，<a href="/tag/yonghu/" target="_blank" class="keywords">用户</a>在外部可以通过<a href="/tag/zhongdingxiang/" target="_blank" class="keywords">重定向</a>基类的<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a>，注入自己的界面行为，或者干脆通过继承来重载，覆盖<a href="/tag/fulei/" target="_blank" class="keywords">父类</a>的<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a>定义自己的组件。</p> <h2>1.3 基本概念介绍</h2> <p>面向对象的思想已经深入人心。而Dojo的web组件也基于面向对象的思想，所以在进一步介绍web组件之前，需要介绍一下JS的面向对象特性。</p> <h3>1.3.1 闭包</h3> <p>闭包本质上就是数据与包含数据的作用域的结合体。请看下例</p> <p><textarea cols="50" rows="15" name="code" class="javascript">function foo () { var x = 10; return function bar() { alert(x); } } var x = 5; var barRef = foo(); barRef();//结果为10@H_<a href="/tag/301/" target="_blank" class="keywords">301</a>_8@</p> <h3>1.3.2 this关键字</h3> <p>This指的是当前<a href="/tag/daima/" target="_blank" class="keywords">代码</a>的<a href="/tag/diaoyong/" target="_blank" class="keywords">调用</a>者</p> <p><strong>例子1）</strong></p> <p><textarea cols="50" rows="15" name="code" class="javascript"><mce:script type="text/javascript"></mce:script>@H_<a href="/tag/301/" target="_blank" class="keywords">301</a>_8@</p> <p>单独运行在<a href="/tag/yemian/" target="_blank" class="keywords">页面</a>中的JS<a href="/tag/daima/" target="_blank" class="keywords">代码</a>的this指的是window对象</p> <p><strong>例子2-1）</strong></p> <p><textarea cols="50" rows="15" name="code" class="xhtml"><select id =”sel” onchange=”test();”><OPTION>1</OPTION><OPTION>2</OPTION></select> <mce:script type="text/javascript"></mce:script>@H_<a href="/tag/301/" target="_blank" class="keywords">301</a>_8@</p> <p><strong>例子2-2）</strong></p> <p><textarea cols="50" rows="15" name="code" class="javascript"><select id =”sel” onchange=”test();”><OPTION>1</OPTION><OPTION>2</OPTION></select> <mce:script type="text/javascript"></mce:script>@H_<a href="/tag/301/" target="_blank" class="keywords">301</a>_8@</p> <p>由于onchange事件可以看成select的<a href="/tag/shuxing/" target="_blank" class="keywords">属性</a>，因此可以认为是select<a href="/tag/diaoyong/" target="_blank" class="keywords">调用</a>了onchange，所以事件响应<a href="/tag/daima/" target="_blank" class="keywords">代码</a>中的this 就是该DOM节点</p> <p><strong>例子3）</strong></p> <p><textarea cols="50" rows="15" name="code" class="xhtml"><mce:script type="text/javascript"></mce:script>@H_<a href="/tag/301/" target="_blank" class="keywords">301</a>_8@</p> <p>这个例子比较明显,由于是a<a href="/tag/diaoyong/" target="_blank" class="keywords">调用</a>了a.b所以在<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>中。this就是a对象</p> <h3>1.3.3 apply<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>的使用</h3> <p>在JavaScript中，一个<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>其实是一个对象，任何一个<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>都有一个apply<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a>，</p> <p>apply<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a>JScript参考中的说明：应用某一对象的一个<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a>，用另一个对象替换当前对象。apply([thisObj[,argArray]])</p> <p>apply([thisObj[,argArray]])中的参数为数组集合。下面来看看apply的具体应用</p> <p><textarea cols="50" rows="15" name="code" class="javascript">// simple apply demo function simpleApplyDemo(arg) { window.alert(arg); } function handleSPA(arg) { simpleApplyDemo.apply(this,arguments); }@H_<a href="/tag/301/" target="_blank" class="keywords">301</a>_8@</p> <p>从上面简单的例子可以看出，apply可以把当前的参数传递给另外一个<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>的参数中，从而<a href="/tag/diaoyong/" target="_blank" class="keywords">调用</a>另一个<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>的应用。</p> <p>apply还有一个技巧在里面，就是用apply应用另一个<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>（类）以后，当前的<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>（类）就具备了另一个<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>（类）的<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a>或者是<a href="/tag/shuxing/" target="_blank" class="keywords">属性</a>，这也可以称之为“继承”。看下面示例。</p> <p><textarea cols="50" rows="15" name="code" class="javascript">// advanced apply demo function adApplyDemo(x) { return ("this is never-online,BlueDestiny '" + x + "' demo"); } function handleAdApplyDemo(obj,fname,before) { var oldFunc = obj[fname]; obj[fname] = function() { return oldFunc.apply(this,before(arguments)); }; } function hellowordFunc(args) { args[0] = "hello " + args[0]; return args; } function applyBefore() { alert(adApplyDemo("world")); } function applyAfter() { handleAdApplyDemo(this,"adApplyDemo",hellowordFunc); alert(adApplyDemo("world")); // Hello world! }@H_<a href="/tag/301/" target="_blank" class="keywords">301</a>_8@</p> <h3>1.3.4 基于apply的dojo.hitch</h3> <p>如果直接这么写obj.onclick=functiona(arguments1,arguments2){…..};</p> <p>我们会发现在functiona中，this就是触发click事件的Dom节点了</p> <p>所以在我们的组件<a href="/tag/daima/" target="_blank" class="keywords">代码</a>中，经常出现如下<a href="/tag/daima/" target="_blank" class="keywords">代码</a>this.connect(obj,‘click’,dojo.hitch(this,functiona,arguments1,arguments2));这样functiona中的this和组件<a href="/tag/daima/" target="_blank" class="keywords">代码</a>中的this保持一致，也就可以访问组件类中的<a href="/tag/shuxing/" target="_blank" class="keywords">属性</a>以及<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a>了</p> <p>我们看一下dojo.hitch的<a href="/tag/daima/" target="_blank" class="keywords">代码</a>会发现如下片断</p> <p>return function(){ return scope[method].apply(scope,arguments || []); }; // Function，可见它正是利用了apply的特性实现了作用域的变更。</p> <p>dojo.hitch参数表为，第一个参数为作用域，第二个参数为<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>对象，从第三个参数起就是第二个参数所对应<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>的参数表</p> <h3>1.3.5 前<a href="/tag/houtai/" target="_blank" class="keywords">后台</a>交互XmlHttpRequest</h3> <p>现代浏览器都<a href="/tag/zhichi/" target="_blank" class="keywords">支持</a>XmlHttpRequest,XmlHttpRequest的<a href="/tag/diaoyong/" target="_blank" class="keywords">调用</a>都是异步的也就是说这样的<a href="/tag/diaoyong/" target="_blank" class="keywords">调用</a>都无需<a href="/tag/yemian/" target="_blank" class="keywords">页面</a>进行<a href="/tag/tiaozhuan/" target="_blank" class="keywords">跳转</a>的。dojo再其上封装了dojo.xhr类。dojo的web组件接受json（javascript object notion）数据。所以使用dojo组件无需考虑<a href="/tag/houtai/" target="_blank" class="keywords">后台</a>的具体实现，只要<a href="/tag/houtai/" target="_blank" class="keywords">后台</a>能够提供异步请求机制，并且能够返回Json即可。在BME R4版本中，基于structs2以及jsonlib开发了异步请求action机制，<a href="/tag/diaoyong/" target="_blank" class="keywords">调用</a>这些action，BMER4版本定义了如下<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a></p> <p><textarea cols="50" rows="15" name="code" class="javascript">ajax.callQueryInterface = function(url/*异步action<a href="/tag/mingcheng/" target="_blank" class="keywords">名称</a>*/,inData/*对象参数*/){ var tmpData = dojo.toJson(inData); //将对象转为Json格式字符串 var ret; var msg; dojo.xhrPost({//dojo封装的xmlHttprequest<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a> url: url,content:{ "data":tmpData },timeout: 1000,error: function() {//<a href="/tag/cuowu/" target="_blank" class="keywords">错误</a>处理<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a> ret = "-1"; msg=Message.getString("P405237800"); },load:function (response) {//处理返回 ret = dojo.fromJson(response); 。。。。。。。。。。。。。。。。。。 return ret; };@H_<a href="/tag/301/" target="_blank" class="keywords">301</a>_8@</p> <h1>2 组件开发介绍</h1> <h2>2.1 dojo.declare</h2> <p>dojo把与实现类声明和继承有关的大量细节都封装到一个<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a>中，这个<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a>就是dojo.declare，这个<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a><a href="/tag/baokuo/" target="_blank" class="keywords">包括</a>三个参数</p> <p>dojo.declare(/*String*/className,//要创建的构造<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a><a href="/tag/mingcheng/" target="_blank" class="keywords">名称</a></p> <p>/*Function|Function[]*/superCalss,//要继承的超类构造<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>，如果是构造<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>数组则是多重继承</p> <p>/*Object*/ //对象中的参数定义)</p> <h2>2.2 一个简单的基于dojo开发的web组件----Hellow World</h2> <p><textarea cols="50" rows="15" name="code" class="javascript">dojo.provide("bmc.widget.HelloWorld"); dojo.require("dijit.layout.ContentPane"); dojo.declare( " bmc.widget.HelloWorld",dijit.layout.ContentPane,{ postCreate: function(){ this.inherited(arguments); var html = 'This is a hello word widget!<BR><INPUT type = button value="alert"/>'; var paneDiv = document.createElement('div'); paneDiv.innerHTML = html; var button = paneDiv. getElementsByTagName('INPUT')[0] dojo.place(paneDiv,this.containerNode,'first'); this.dataForm = this.containerNode.getElementsByTagName('FORM')[0]; dojo.connect(button,'click',this.alertHellow)); },alertHellow : function() { alert('hello'); } });@H_<a href="/tag/301/" target="_blank" class="keywords">301</a>_8@</p> <p>Html<a href="/tag/yemian/" target="_blank" class="keywords">页面</a></p> <p><textarea cols="50" rows="15" name="code" class="xhtml"><div class='<a href="/tag/Box/" target="_blank" class="keywords">Box</a>' dojoType=" bmc.widget.HelloWorld"> </div>@H_<a href="/tag/301/" target="_blank" class="keywords">301</a>_8@</p> <p>这个例子中使用this.connect绑定dom事件一是这个<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a>不会破坏原来已有的事件<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a>，如果button原来已有click响应<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>，则这个操作将会把dojo.hitch(this,this.alertHellow)这个<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>的动作追加到原来的操作后面，同时在<a href="/tag/duixiangxiaohui/" target="_blank" class="keywords">对象销毁</a>的时候（<a href="/tag/yemian/" target="_blank" class="keywords">页面</a><a href="/tag/tiaozhuan/" target="_blank" class="keywords">跳转</a>，刷新），凡是被connect的<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>都会去绑定，可以防止IE的内存泄露。</p> <p>这个例子中也使用了dojo.hitch，这个<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a>可以改变<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>的作用域，如果不使用dojo.htich则alertHellow<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>中的this指向这个按钮，如果通过dojo.hitch作用，则这个<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>种的this 指向这个组件的实例。通过这个机制，可以完全实现组件内部界面操作的封装。</p> <p>postCreate是<a href="/tag/fulei/" target="_blank" class="keywords">父类</a>dijit.layout.ContentPane的<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a>，通过执行this.inherited(arguments);，<a href="/tag/fulei/" target="_blank" class="keywords">父类</a>的<a href="/tag/daima/" target="_blank" class="keywords">代码</a>会被执行。如果没有这个<a href="/tag/diaoyong/" target="_blank" class="keywords">调用</a>，<a href="/tag/fulei/" target="_blank" class="keywords">父类</a>的<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a>就被覆盖了。</p> <h2>2.3 HelloWord<a href="/tag/shengji/" target="_blank" class="keywords">升级</a>，<a href="/tag/zhichi/" target="_blank" class="keywords">支持</a>数据传入的表单</h2> <p><textarea cols="50" rows="15" name="code" class="javascript">dojo.provide("bmc.widget.HelloWorld"); dojo.require("dijit.layout.ContentPane"); dojo.declare( " bmc.widget.HelloWorld",{ data: null,postCreate: function(){ this.inherited(arguments); var html = '<FORM><INPUT name = "a" /><INPUT name = "b" /><INPUT type="button" value="test" /></FORM>'; var paneDiv = document.createElement('div'); paneDiv.innerHTML = html; var button = paneDiv. getElementsByTagName('INPUT')[2] dojo.place(paneDiv,'first'); this.dataForm = this.containerNode.getElementsByTagName('FORM')[0]; dojo.connect(button,this.setData)); },setData: function() { if (this.data) { var _this = this; dojo.forEach(this.dataForm.elements,function(item) { if (!item.name) { return; } item.value = _this.data[item.name]; }); } } });@H_<a href="/tag/301/" target="_blank" class="keywords">301</a>_8@</p> <p><a href="/tag/HTMLdaima/" target="_blank" class="keywords">HTML代码</a></p> <p><textarea cols="50" rows="15" name="code" class="xhtml">var datatest = {}; datatest.a = 1; datatest.b = 2; <div class='<a href="/tag/Box/" target="_blank" class="keywords">Box</a>' dojoType="dijit.layout.HelloWorld" data="datatest"> </div>@H_<a href="/tag/301/" target="_blank" class="keywords">301</a>_8@</p> <p>点击test</p> <p>这个<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a>中使用dojo.forEach遍历表单元素。在function(item)</p> <p> {</p> <p> }</p> <p>中this指向的不是组件实例，所以之前用一个变量_this存储了this</p> <h2>2.4 总结</h2> <p>通过以上介绍，我们可以得出如下结论</p> <p>1) Dojo是是一个纯Javascript库，<a href="/tag/houtai/" target="_blank" class="keywords">后台</a>只要提供相应的接口能够将数据以Json的格式<a href="/tag/shuchu/" target="_blank" class="keywords">输出</a>给<a href="/tag/qiantai/" target="_blank" class="keywords">前台</a>即可；</p> <p>2) Dojo自身定义了完整的<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>库，<a href="/tag/pingbi/" target="_blank" class="keywords">屏蔽</a>了浏览器的差异；</p> <p>3) Dojo自身定义界面组件库，其组件<a href="/tag/daima/" target="_blank" class="keywords">代码</a>采用了面向对象的思想，便于继承以及扩展；只要组件库丰富；</p> <p>4) 当对前端界面联动需求较为复杂的时候，基于dojo的<a href="/tag/yemian/" target="_blank" class="keywords">页面</a>组件将是首选，因为其可以将界面中某一个具有共性的区域抽象出来，封装这一区域的界面行为以及数据，可以用搭积木的方式完成复杂<a href="/tag/yemian/" target="_blank" class="keywords">页面</a>的开发。</p></div> <div class="topcard-tags"></div> <ul class="list-group"> <li class="list-group-item"><a href="/dojo/291813.html" title="dojo1.2 grid内存泄漏问题以及对话框的一个BUG">上一篇：dojo1.2 grid内存泄漏问题以及对</a><a href="/dojo/291811.html" title="dojo tree 最终版,包含前面的所有功能，并进一步重构了代码,这里直接贴代码，不再做解释" class="text-muted pull-right">下一篇：dojo tree 最终版,包含前面的所有功</a> </li> </ul> </div> </div> </div>  <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-4605373693034661" data-ad-slot="9144498553"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div> </div> </div> <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <div class="title"><h1>猜你在找的Dojo相关文章</h1></div> <div class="list_con"> <a href="/dojo/730057.html" title="dojo/Deferred类和dojo/promise类的使用"><div class="title">dojo/Deferred类和dojo/promise类的使用</div> <div class="summary">参考博客：https://blog.csdn.net/blog_szhao/article/details/50220181 　　　 ...</div> <time class="summary">作者：前端之家时间：2020-08-01</time> </a> </div> <div class="list_con"> <a href="/dojo/730056.html" title="设置查询以搜索dojo数据网格的所有字段"><div class="title">设置查询以搜索dojo数据网格的所有字段</div> <div class="summary">我有一个包含多个字段的Dojo DataGrid.我目前正在设置查询一次搜索一个字段,如下所示： gr...</div> <time class="summary">作者：前端之家时间：2020-08-01</time> </a> </div> <div class="list_con"> <a href="/dojo/730055.html" title="dojo – 为JsonRestStore设置HTTP Accept标头"><div class="title">dojo – 为JsonRestStore设置HTTP Accept标头</div> <div class="summary">我正在使用JsonRestStore,但想为它添加一个自定义Accept标头.最好的方法是什么？这与diji...</div> <time class="summary">作者：前端之家时间：2020-08-01</time> </a> </div> <div class="list_con"> <a href="/dojo/730054.html" title="dojo.query不适用于包含波形符(〜)字符的属性选择器"><div class="title">dojo.query不适用于包含波形符(〜)字符的属性选择器</div> <div class="summary">我需要选择一个给定其URL的链接节点.使用属性选择器的效果非常好,除了少数几个url有tilda的...</div> <time class="summary">作者：前端之家时间：2020-08-01</time> </a> </div> <div class="list_con"> <a href="/dojo/730053.html" title="带有JSONREST问题的Dojo增强型网格"><div class="title">带有JSONREST问题的Dojo增强型网格</div> <div class="summary">我正在尝试使用Dojo JSONREST的增强网格,我遇到了一些问题. 我一直在寻找一些例子,但无法弄...</div> <time class="summary">作者：前端之家时间：2020-08-01</time> </a> </div> <div style="border-bottom: 1px solid #f4f4f4;margin-top:20px;"> <ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-fr-2o+fp-dx-wx" data-ad-client="ca-pub-4605373693034661" data-ad-slot="4561116489"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div><div class="list_con"> <a href="/dojo/730051.html" title="什么时候会发布Dojo 2.0？"><div class="title">什么时候会发布Dojo 2.0？</div> <div class="summary">我使用过Dojo 1.0,但我有一些与版本相关的问题： >什么时候会发布Dojo 2.0？ >也是最...</div> <time class="summary">作者：前端之家时间：2020-08-01</time> </a> </div> <div class="list_con"> <a href="/dojo/730050.html" title="dojo中的setSelected()DataGrid使前一个选择活动,即使对于带有selectionMode =“single”的网格也是如此"><div class="title">dojo中的setSelected()DataGrid使前一个选择活动,即使对于带有selectionMode =“single”的网格也是如此</div> <div class="summary">我有一个dojox.grid.DataGrid,我想以编程方式选择一行.我正在使用setSelected()这样做,它第...</div> <time class="summary">作者：前端之家时间：2020-08-01</time> </a> </div> <div class="list_con"> <a href="/dojo/730049.html" title="dojo – 如何从dijit.form.Select中获取选项文本？"><div class="title">dojo – 如何从dijit.form.Select中获取选项文本？</div> <div class="summary">我的页面上有一个dijit.form.Select： <c:set var="qualId" value="${prev...</div> <time class="summary">作者：前端之家时间：2020-08-01</time> </a> </div> <div class="list_con"> <a href="/dojo/730048.html" title="如何检查dojo.datagrid加载完成？"><div class="title">如何检查dojo.datagrid加载完成？</div> <div class="summary">参见英文答案 > How to determine if a dojo grid has finished loading? ...</div> <time class="summary">作者：前端之家时间：2020-08-01</time> </a> </div> <div class="list_con"> <a href="/dojo/730047.html" title="dojo – 扩展dijit.Tree中的所有节点"><div class="title">dojo – 扩展dijit.Tree中的所有节点</div> <div class="summary">有没有一种很好的方法来扩展/关闭dijit.Tree中的所有可扩展节点？对于那些寻找答案的人,请...</div> <time class="summary">作者：前端之家时间：2020-08-01</time> </a> </div> <div style="border-bottom: 1px solid #f4f4f4;margin-top:20px;"> <ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-fr-2o+fp-dx-wx" data-ad-client="ca-pub-4605373693034661" data-ad-slot="4561116489"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div></div> </div> </div> </div>   <div class="col-sm-12 col-md-12 col-lg-3">  <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <label class="main-content-label ">编程分类</label> <div class="cate mt-20"><a href="/html/" title="HTML">HTML</a><a href="/html5/" title="HTML5">HTML5</a><a href="/js/" title="JavaScript">JavaScript</a><a href="/css/" title="CSS">CSS</a><a href="/jquery/" title="jQuery">jQuery</a><a href="/bootstrap/" title="Bootstrap">Bootstrap</a><a href="/angularjs/" title="Angularjs">Angularjs</a><a href="/typescript/" title="TypeScript">TypeScript</a><a href="/vue/" title="Vue">Vue</a><a href="/dojo/" title="Dojo">Dojo</a><a href="/json/" title="Json">Json</a><a href="/electron/" title="Electron">Electron</a><a href="/nodejs/" title="Node.js">Node.js</a><a href="/extjs/" title="extjs">extjs</a><a href="/express/" title="Express ">Express </a><a href="/xml/" title="XML">XML</a><a href="/es6/" title="ES6">ES6</a><a href="/ajax/" title="Ajax">Ajax</a><a href="/flash/" title="Flash">Flash</a><a href="/unity/" title="Unity">Unity</a><a href="/react/" title="React">React</a><a href="/flex/" title="Flex">Flex</a><a href="/antdesign/" title="Ant Design">Ant Design</a><a href="/webfrontend/" title="Web前端">Web前端</a><a href="/weapp/" title="微信小程序">微信小程序</a><a href="/wxmp/" title="微信公众号">微信公众号</a><div class="clearfix"></div> </div> </div> </div> </div>   <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card">  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4605373693034661" data-ad-slot="7756441254" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div>   <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <label class="main-content-label ">最新文章</label> <ul class="n-list"><li><a href="/dojo/730057.html" title="dojo/Deferred类和dojo/promise类的使用" target="_blank">• dojo/Deferred类和dojo/pr</a></li> <li><a href="/dojo/730056.html" title="设置查询以搜索dojo数据网格的所有字段" target="_blank">• 设置查询以搜索dojo数据网</a></li> <li><a href="/dojo/730055.html" title="dojo – 为JsonRestStore设置HTTP Accept标头" target="_blank">• dojo – 为JsonRestStore设</a></li> <li><a href="/dojo/730054.html" title="dojo.query不适用于包含波形符(〜)字符的属性选择器" target="_blank">• dojo.query不适用于包含波</a></li> <li><a href="/dojo/730053.html" title="带有JSONREST问题的Dojo增强型网格" target="_blank">• 带有JSONREST问题的Dojo增</a></li> <li><a href="/dojo/730052.html" title="dojo – 动态隐藏dgrid中的列" target="_blank">• dojo – 动态隐藏dgrid中的</a></li> <li><a href="/dojo/730051.html" title="什么时候会发布Dojo 2.0？" target="_blank">• 什么时候会发布Dojo 2.0？</a></li> <li><a href="/dojo/730050.html" title="dojo中的setSelected()DataGrid使前一个选择活动,即使对于带有selectionMode =“single”的网格也是如此" target="_blank">• dojo中的setSelected()Dat</a></li> <li><a href="/dojo/730049.html" title="dojo – 如何从dijit.form.Select中获取选项文本？" target="_blank">• dojo – 如何从dijit.form</a></li> <li><a href="/dojo/730048.html" title="如何检查dojo.datagrid加载完成？" target="_blank">• 如何检查dojo.datagrid加载</a></li> </ul> </div> </div> </div>   <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <label class="main-content-label ">热门标签 <span class="pull-right tx-12"> <a href="/all" target="_blank">更多 ►</a></span> </label> <div class="topcard-tags"><a href="/tag/guanbiyangao/" title="关闭广告" target="_blank">关闭广告</a><a href="/tag/danduheaders/" title="单独headers" target="_blank">单独headers</a><a href="/tag/fengzhuangdaima/" title="封装代码" target="_blank">封装代码</a><a href="/tag/tishicuowu/" title="提示错误" target="_blank">提示错误</a><a href="/tag/zhengshuzhengze/" title="整数正则" target="_blank">整数正则</a><a href="/tag/fei0kaitou/" title="非0开头" target="_blank">非0开头</a><a href="/tag/tiaoye/" title="跳页" target="_blank">跳页</a><a href="/tag/chuyema/" title="出页码" target="_blank">出页码</a><a href="/tag/antdtable/" title="antd table" target="_blank">antd table</a><a href="/tag/tishiURLweizhuce/" title="提示URL未注册" target="_blank">提示URL未注册</a><a href="/tag/gongzhonghaozhifu/" title="公众号支付" target="_blank">公众号支付</a><a href="/tag/vuehashmoshi/" title="vue hash模式" target="_blank">vue hash模式</a><a href="/tag/iSlider/" title="iSlider" target="_blank">iSlider</a><a href="/tag/chepaijianpan/" title="车牌键盘" target="_blank">车牌键盘</a><a href="/tag/xunhuantupian/" title="循环图片" target="_blank">循环图片</a><a href="/tag/echartsshuangzhexian/" title="echarts 双折线" target="_blank">echarts 双折</a><a href="/tag/zuoyoubuju/" title="左右布局" target="_blank">左右布局</a><a href="/tag/DllPlugin/" title="DllPlugin" target="_blank">DllPlugin</a><a href="/tag/duixiangchuangjian/" title="对象创建" target="_blank">对象创建</a><a href="/tag/daziyouxi/" title="打字游戏" target="_blank">打字游戏</a><a href="/tag/quanxuan/" title="圈选" target="_blank">圈选</a><a href="/tag/lianglan/" title="两栏" target="_blank">两栏</a><a href="/tag/yunhanshu/" title="云函数" target="_blank">云函数</a><a href="/tag/mengban/" title="蒙版" target="_blank">蒙版</a><a href="/tag/ES2020/" title="ES2020" target="_blank">ES2020</a><a href="/tag/chuchuang/" title="橱窗" target="_blank">橱窗</a><a href="/tag/wufenggundonglunbo/" title="无缝滚动轮播" target="_blank">无缝滚动轮播</a><a href="/tag/sekuaipengzhuang/" title="色块碰撞" target="_blank">色块碰撞</a><a href="/tag/zujianxiaohui/" title="组件销毁" target="_blank">组件销毁</a><a href="/tag/wendangcaozuo/" title="文档操作" target="_blank">文档操作</a></div> </div> </div> </div>   <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card">  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4605373693034661" data-ad-slot="7756441254" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div>  </div>  </div> </div> <footer id="footer"> <div class="container"> <div class="row hidden-xs"> <dl class="col-sm-6 site-link"> <dt>最近更新</dt><dd><a href="/win11/1005328.html" title="小米手机重装系统价格多少?专业维修服务详解" target="_blank">· 小米手机重装系统价格多少?专业维修服务详解</a><span class="text-muted pull-right">02-05</span></dd> <dd><a href="/win11/1005327.html" title="手把手教你重装电脑系统,让你的电脑焕然一新!" target="_blank">· 手把手教你重装电脑系统,让你的电脑焕然一新!</a><span class="text-muted pull-right">02-05</span></dd> <dd><a href="/win11/1005326.html" title="教你一步步重装XP系统,让你的电脑重获新生" target="_blank">· 教你一步步重装XP系统,让你的电脑重获新生</a><span class="text-muted pull-right">02-05</span></dd> <dd><a href="/win11/1005325.html" title="从备份到上网:一步步教你重装电脑系统" target="_blank">· 从备份到上网:一步步教你重装电脑系统</a><span class="text-muted pull-right">02-05</span></dd> <dd><a href="/win11/1005324.html" title="Sony笔记本电脑一键重装系统详细图文教程" target="_blank">· Sony笔记本电脑一键重装系统详细图文教程</a><span class="text-muted pull-right">02-05</span></dd> <dd><a href="/win11/1005323.html" title="Lenovo笔记本重装系统超详细教程，小白也能轻松上手" target="_blank">· Lenovo笔记本重装系统超详细教程，小白也能轻松...</a><span class="text-muted pull-right">02-05</span></dd> <dd><a href="/win11/1005322.html" title="联想笔记本一键重装Win10系统详细教程" target="_blank">· 联想笔记本一键重装Win10系统详细教程</a><span class="text-muted pull-right">02-05</span></dd> <dd><a href="/win11/1005321.html" title="电脑系统故障无需愁,专业维修店帮你重装旧貌换新颜" target="_blank">· 电脑系统故障无需愁,专业维修店帮你重装旧貌换新...</a><span class="text-muted pull-right">02-05</span></dd> <dd><a href="/win11/1005320.html" title="联想笔记本一键重装Win10系统图文教程，小白也能轻松搞定！" target="_blank">· 联想笔记本一键重装Win10系统图文教程，小白也能...</a><span class="text-muted pull-right">02-05</span></dd> <dd><a href="/win11/1005319.html" title="笔记本重装系统图文教程：从光盘启动一步到位" target="_blank">· 笔记本重装系统图文教程：从光盘启动一步到位</a><span class="text-muted pull-right">02-05</span></dd> </dl> <dl class="col-sm-4 site-link"> <dt>好站推荐</dt><dd> <a href="https://www.runoob.com" title="菜鸟教程(www.runoob.com)提供了编程的基础技术教程, 介绍了HTML、CSS、Javascript、Python，Java，Ruby，C，PHP , MySQL等各种编程语言的基础知识。同时本站中也提供了大量的在线实例，通过实例，您可以更好的学习编程。" target="_blank">菜鸟教程</a></dd><dd> <a href="https://www.jb51.cc" title="编程之家(www.jb51.cc)是成立于2017年面向全球中文开发者的技术内容分享平台。提供编程导航、编程问答、编程博文、编程百科、编程教程、编程工具、编程实例等开发者最需要的编程技术内容与开发工具支持，与你一起学习编程，相信编程改变未来！" target="_blank">编程之家</a></dd><dd> <a href="" title="前端之家 f2er.com 前端开发人员所需学习知识手册。" target="_blank">前端之家</a></dd></dl> <dl class="col-sm-2 site-link"> <dt>商务合作</dt> <dd><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=76874919&site=qq&menu=yes">联系我们</a></dd> </dl> </div> <div class="copyright"> Copyright © 2019 前端之家. 当前版本 V7.0.16<br> <span class="ml5">前端之家版权所有 <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">闽ICP备13020303号-10</a></span> </div> </div> </footer> <script type="text/javascript" src="/js/base.js"></script> </body> </html>

基于Dojo的JavaScriptWeb客户端界面控件开发

1 前言

1.1 传统JS前台编程方式