文档章节

Dojo 基础入门(五)

w
 waking999
发布于 2017/05/24 13:32
字数 2403
阅读 7
收藏 0

1.            Dojo详解

1.1.    通用函数

1.1.1.      dojo.require

在前面的示例中,其实我们已经看到了dojo.require的使用。它是用来声明将要使用的dojo的组件类型。类似Java中的import语句。

Dojo是把代码分成模块,在表现形式上是以文件目录结构存在的,类似Java的包概念。而每个模块下的Dojo类文件,就可以理解为类似Java类的概念。一般来说,Dojo中的命名规范也是类似Java的,模块(文件夹)多是小写字母;类文件以大写字母开头;属性、函数是以小写字母开头,单词间用大写字母分隔。

如果某个类是不希望被其他脚本访问的,一般以”_”作为前缀。

有时候类A的定义是放在另一个类B的文件中的,如果希望使用类A,只需要调用dojo.require(类A),就可以使用类B了。比如dijit.form.DropDownButton的定义是放在/dijit/form/Button.js中的, 只要执行dojo.require("dijit.form.Button"),就可以使用它,反到是dojo.require("dijit.form.DropDownButton") 不会起什么做用的。

 

 

1.1.2.      dojo.byId dijit.byId

通过这两个函数的名字可以推断都是通过id来查找,它们的区别在于:dojo.byId是用来查找DOM节点,类似标准DOMdocument.getElementById(id)或者IEdocument.all[id];dijit.byId是返回一个dijit的组件实例,包括dijit._Widget以及它的子类的实例。

1.1.3.      dojo.addOnLoad

dojo.addOnLoad也是在之前的示例遇到过了,它把在定义在该处的脚本执行延迟到整个HTML页面加载后执行。

1.1.4.      dojo.connect

dojo.connectDojo系统中事件响应处理很有用处,用于连接事件处理器(某一个函数)到一个元素或者一个对象,事件可以连接到任何属性或对象元素。

在之前的示例中,就是把一个函数连接到该buttononclick事件属性上去,以达到自定义事件的处理的目的。

除此之外,dojo.connect还可以实现当一个function被调用时另一个function也被调用的功能。比如:

var obj1 = {

f1: function(){

    alert("hello"); 

},

f2: function(){

    alert("world");

}

};

 

dojo.connect(obj1, "f1", obj1, "f2");

 

obj1.f1();

该示例的执行结果将是连续跳出两个分别显示"hello""world"的信息对话框。

1.1.5.      dojo.forEachdojo.query

dojo.forEach是处理循环的一个函数,第一个参数要循环的对象,第二个参数是对循环的对象内部的每一项做处理的函数。一般会和dojo.query配合使用。

dojo.query是用于选择Html中的DOM节点,第一个参数是要选择节点的特性,可以是标签名、ID和样式类中的一种,第二个参数是要选择的范围。

// 按标签名查找类似标准DOMdocument.getElementsByTagName("IMG");不区分大小写
console.dir(dojo.query("img"));   .
//
按样式类查

console.dir(dojo.query(".offToSeeTheWij"));   
//
id类似标准 DOM document.getElementById("widget123");

//或者dojo.byId("widget123")
console.dir(dojo.query("#widget123"));

 

所以经典的dojo.forEachdojo.query配合如:

dojo.forEach(
    dojo.query("select", document),
    function(selectTag) {
        selectTag.disabled = true;
    }
);

或者简化为

dojo.query("select", document).forEach(
    function(selectTag) {
        selectTag.disabled = true;
    }
);

 

 

1.2.    自定义类

1.2.1.      类声明以及继承

Dojo的每个类是通过dojo.declare语句声明的,以及dojo.provide声明为可被其他外部类引用的公共类。Dojo的声明方式如下:

dojo.provide("ClassName");

 

dojo.declare("ClassName",

SuperClassName,

{

/*class body*/

});

需要注意的有以下几点:

1.       文件名与类名须一致。

2.       "ClassName"是以字符串类型存在的,被双引号包围;SuperClassName是以对象类型存在的,没有双引号,如果该类没有父类,则SuperClassName参数赋值为null

3.       为了避免命名冲突,类名前加以模块名,即为全路径。形似dijit.form.Button,表明是定义在根目录/dijit/form/下的Button.js文件。

4.       在类定义体内,可以定义若干变量和方法,定义之间用逗号分隔。类似:

v1: ""

,v2:null,

,constructor : function(){

}

,f1 : function(name){

   alert("Hello "+name);

}

其中比较特殊的一个函数,名为constructor,是该类的构造函数,在用new操作创建新对象时被调用。

1.2.2.      类放置路径

一般来说,自定义的类放在自定义的模块内,这样的话易于管理,可以与Dojo的标准库代码分离。有两种方式:

1.       其中最简单的方式就是直接在Dojo根目录下,即与dojo,dijit平行的目录下,建立我们自己的模块(目录)结构,比如com/ibm/app,在该目录下创建类文件,比如ClassA,这样在其他脚本引用的时候使用dojo.require(“com.ibm.app.ClassA”)就可以了。

2.       上述的方法毕竟还有点拖泥带水,还需要放在Dojo根目录下。还有一种更脱离Dojo目录的定义方式,就是把模块放到脱离Dojo根目录的其他路径,比如与Dojo根目录的上级目录下,即创建一个与Dojo根目录平行的目录,比如说myowndojo/com/ibm/app,只要在其他脚本使用的地方调用dojo.registerModulePath("com","../../myowndojo/com")dojo.require(“com.ibm.app.ClassA”)即可。在dojo.registerModulePath的第二个参数中"../../"表示的是myowndojodojo.js文件的相对路径。

 

1.3.    Dojo组件

1.3.1.      概念简介

所谓Dojo组件,在Dojo里的概念名称是Widget,Dojo封装的常用组件一般放在dijit目录下,所有的Dojo组件都是从dijit._Widget以及其子类继承得到的,当然也有的类从dijit._Templated, dijit._Container, dijit._Contained等多重继承的来的。

这些组件大多都有对应于Html页面的组件,比如dijit.form.Button对应button, dijit.form.ComboBox对应select等。当然也有若干组件是封装好的常用Html页面元素,比如dijit.layout.TabContainer用于标签页间切换,dijit.layout.AccordionContainer提供了类似Outlook导航面板功能,这些都极大的丰富了页面展现的能力以及降低了重新开发的需要。

 

1.3.2.      组件生命周期

组件的生命周期指的是某一个组件从创建到销毁的存续阶段。理解在各个阶段被调用的函数有助于自定义组件或继承组件的功能扩展。

l         constructor()

构造函数,在使用new操作时被调用,发生在参数被混合进组件实例之前,主要用于状态、属性的初始化。

l         参数被混合进组件实例:

如果使用标签化实现或编程实现来实例化一个组件类的时候,传入参数,比如<button dojoType="dijit.form.Button" iconClass ="">new dijit.form.Button({iconClass: ""}),该阶段没有关联特殊的函数,但我们可以使用传入的这些参数值。

l         postMixInProperties():

该函数会在该组件对应DOM节点创建前被调用。如果希望在展现前增加或修改实例的属性可以在子类里override它。

l         buildRendering():

dijit._Templated里提供的一个默认函数,用于处理组件涉及到的模板文件或模板定义串的展现。比如,在Dojo模板中,会有dojoAttachPoint这样的属性定义需要被传值,该属性的处理就是在buildRendering中。如果希望使用一套自定义的模板系统的解析,可以考虑对该函数的覆盖。

l         postCreate():

被自定义组件经常使用的一个函数。执行该函数时,组件实例已经展现完成,但是请注意在containerNode下的内容还没有实现。这是构建组件的最后一个可被覆盖的函数。

l         startup():

在建立了一个父组件后,还需要添加若干子组件(这里的子组件不是表示继承关系,而是表示包含关系),并希望全部加载后一起展现时,就可以调用该函数。

一个关于该函数的最佳实践就是即使没有子组件,也对一个组件新建实例调用该函数,

l         destroy():

组件实例的销毁,占用资源的释放。包括该组件的DOM节点,类似C语言里的析构函数。dijit._Widget提供了多个以destroy为前缀的方法,如destroyRecursive()用于某组件以及其内部包含的子组件(这里的子组件含义同startup处的说明)的销毁。

小提示:

在某个函数需要覆盖的所有情况下,都继承执行父类的该函数,形如: 

postCreate: function() {
   // do my stuff, then...
   this.inherited("postCreate", arguments);
}

   

1.4.    XMLHttpRequest(XHR)

XMLHTTP request对象是Ajax请求/响应交互中一个基础的概念,不必刷新页面就可以取回后台数据。Dojo提供了一系列封装的函数,提供统一的API实现Ajax的异步交互功能。一些比较重要的函数是dojo.xhrXXX格式的Http方法调用(此处的XXX可以是Get,Post,Put,Delete),下面以dojo.xhrGet为例进行分析。

dojo.xhrGet( { 
       
        url: "../data.json", //(1)
       
        handleAs: "json",  //(2) 

      
        
      
        timeout: 5000, //(3) 
       

      
        
      
        // The LOAD function will be called on a successful response.
       
        load: function(responseObject, ioArgs) { //(4)
       
               return responseObject;        
       
},
       

      
        
      
        // The ERROR function will be called in an error case.
       
        error: function(response, ioArgs) { // (5)
       
          console.error("HTTP status code: ", ioArgs.xhr.status); 
       
          return response;          }
       
        });
       

 

(1)url,表示请求的地址,可以是文件,也可以请求流;

(2) handleAs,表示处理格式,这里的值是"json",表示处理的是json格式,还有一种是text格式;

(3) timeout, 以毫秒为单位,表示请求的持续时间;

(4) load()函数,第一参数responseObject表示通过请求得到的json转换成的对象格式。换句话说,load函数是异步加载并得到数据后的执行。

(5) error() 异常处理函数,特别的ioArgs是一个包含若干有用属性在内的对象。

 

本文转载自:http://blog.csdn.net/kswaking/article/details/2232679

共有 人打赏支持
w
粉丝 0
博文 23
码字总数 0
作品 0
澳大利亚
私信 提问
Dojo入门与dojo项目配置方案(一)

何为dojo Toolkit Dojo Toolkit(以下简称dojo)是一个javascript语言实现的、跨浏览器的DHTML(Dynamic HTML)工具包。Dojo ToolKit包括了构建大规模Ajax驱动的web应用程序所需要的一切。所...

tkorays
2014/01/01
0
0
Dojo Mobile 1.7 入门

最新版的移动 Web 开发框架 Dojo Mobile 1.7,是 Dojo Toolkit 的一个扩展。本文将使您了解如何从主干网址下载 Dojo 1.7,以及如何在您的应用程序中使用 Dojo Mobile。您还将探索它提供的各种...

IBMdW
2012/12/18
4K
8
深入浅出 Javascript API(一)--基本框架

Javascript API是ArcGIS Server 9.3新增的一套API框架,为创建WebGIS应用提供了轻量级的解决方法,在客户端利用ags所提供的服务,就能实现地图应用和地理功能。 还记得ArcIMS Blueviewer示例...

文艺小青年
2017/03/02
0
0
手把手教你Dojo入门

如果仅仅是为了练习Dojo,或者进行测试,可以参考下面的步骤。下面的文件均是在Windows下测试 需要的工具 1 Tomcat服务器:下载地址 选择适合自己的机器型号,即可 2 Dojo的工具包:下载地址 ...

青夜之衫
2017/12/04
0
0
全面认识 Node.js

1. 了解 Node.js 从 Java 开发人员的视角了解什么是 Node.js(什么不是 Node.js),以及其工作原理和益处。然后,看看使用 Node 开发的 Web 应用程序是什么样的。 阅读: 面向 Java 开发人员的...

IBMdW
2012/09/17
2.5K
1

没有更多内容

加载失败,请刷新页面

加载更多

可自定义扩展底部列表对话框ListBottomSheetDialogFragment

因为需要,为了方便,构建了一个可以自定义扩展的底部列表对话框,可以应付大部分场景。 效果图如下: 1.默认实现: 2.自定义列表实现 3.自定义头部和列表实现 一.可实现功能 1.默认可实现通...

明月春秋
28分钟前
1
0
数据库---增删改查

增:insert into 表名(列名1,列名2) values(‘列值1’,‘列值2’) 多行数据处理:insert into 表名(列名1,列名2) select ‘列值1’,‘列值2’ union select ‘列值1.1’,‘列值2.2...

森林之下
29分钟前
2
0
分布式/集群下session共享方案汇总

除去那些对容器依赖特别高的方案(如: 基于Tomcat的memcached-session-manager / tomcat-redis-session-manager,基于Jetty的jetty-nosql-memcache / jetty-session-redis ),自己整理了下...

哥本哈根的小哥
55分钟前
2
0
Vue中的缩写:v-bind、v-on

v-bind 缩写:: 预期:any (with argument) | Object (without argument) 参数:attrOrProp (optional) 修饰符: .prop - 被用于绑定 DOM 属性。 .camel - (2.1.0+) 将 kebab-case 特性名转换......

文文1
今天
2
0
epoll中使用

1、一个线程epoll_wait时,另一个线程调用epoll_ctl是安全的。 2、使用edge触发,在socket有数据到来后,不收取数据,再次调用epoll_ctl将socket加入,仍会触发下一次动作。 asio用该方法来发...

gelare
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部