文档章节

Dojo 基础入门(五)

w
 waking999
发布于 2017/05/24 13:32
字数 2403
阅读 6
收藏 0
点赞 0
评论 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
WEB前端工程师编程能力提升成长之路

【背景】 如果你是刚进入WEB前端研发领域,想试试这潭水有多深,看这篇文章吧; 如果你是做了两三年WEB产品前端研发,迷茫找不着提高之路,看这篇文章吧; 如果你是四五年的前端开发高手,没...

web前端03
05/10
0
0
面向对象的JavaScript框架--Dojo

Dojo是一个强大的面向对象JavaScript框架。主要由三大模块组成:Core、Dijit、DojoX。Core提供Ajax,events,packaging,CSS-based querying,animations,JSON等相关操作API。Dijit是一个可更换皮...

匿名
2008/09/05
95.1K
6
Dojo入门与dojo项目配置方案(二)

用了一段时间dojo后,渐渐发现它的强大。越来越喜欢它的一个函数是declare。Declare可以用来创建自定义类,以实现模块化设计。正是这种模块化的思想让dojo开发变得简便。这里面我介绍一个doj...

tkorays
2014/01/05
0
0
10个优秀的JavaScript Web UI库/框架推荐

在进行Web开发时,并非所有的库都适合你的项目,但你仍需要收藏一些Web UI设计相关的库或框架,以在你需要的时候,加快你的开发效率。 本文为你带来10款非常优秀的基于JavaScript的Web UI设计...

阿东2020
2013/07/04
631
3
Dojo学习笔记(五):Dojo的事件机制

1、DOM事件 Dojo 的主要的DOM事件处理机制是dojo/on。Dojo为用户提供了统一的DOM事件机制,通过使用Dojo的dojo/on,用户可以避免各种DOM API的分歧,同时DOJO也预防了内存泄露问题。 页面on....

技术小胖子
2017/11/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

微信小程序Java登录流程(ssm实现具体功能和加解密隐私信息问题解决方案)

文章有不当之处,欢迎指正,如果喜欢微信阅读,你也可以关注我的微信公众号:好好学java,获取优质学习资源。 一、登录流程图 二、小程序客户端 doLogin:function(callback = () =>{}){let ...

公众号_好好学java
36分钟前
0
1
流利阅读笔记28-20180717待学习

“我不干了!” 英国脱欧大臣递交辞呈 雪梨 2018-07-17 1.今日导读 7 月 6 日,英国政府高官齐聚英国首相的官方乡间别墅——契克斯庄园,讨论起草了一份关于英国政府脱欧立场的白皮书。可是没...

aibinxiao
今天
7
0
OSChina 周二乱弹 —— 理解超算排名这个事,竟然超出了很多人的智商

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @-冰冰棒- :分享Ed Sheeran/Beyoncé的单曲《Perfect Duet (with Beyoncé)》 《Perfect Duet (with Beyoncé)》- Ed Sheeran/Beyoncé 手机...

小小编辑
今天
180
7
Android 获取各大音乐平台的真实下载地址

废话 电脑使用谷歌浏览器或者QQ浏览器的时候。。。。。。。说不清楚,还是看图吧 大概意思就是,只要网页上需要播放,只要能播放并且开始播放,这个过程就肯定会请求到相关的音乐资源,然后就...

她叫我小渝
今天
0
0
shell中的函数、shell中的数组、告警系统需求分析

shell中的函数 格式: 格式: function f_name() { command } 函数必须要放在最前面 示例1(用来打印参数) 示例2(用于定义加法) 示例3(用于显示IP) shell中的数组 shell中的数组1 定义数...

Zhouliang6
今天
2
0
用 Scikit-Learn 和 Pandas 学习线性回归

      对于想深入了解线性回归的童鞋,这里给出一个完整的例子,详细学完这个例子,对用scikit-learn来运行线性回归,评估模型不会有什么问题了。 1. 获取数据,定义问题     没有...

wangxuwei
今天
1
0
MAC安装MAVEN

一:下载maven压缩包(Zip或tar可选),解压压缩包 二:打开终端输入:vim ~/.bash_profile(如果找不到该文件新建一个:touch ./bash_profile) 三:输入i 四:输入maven环境变量配置 MAVEN_HO...

WALK_MAN
今天
0
0
33.iptables备份与恢复 firewalld的9个zone以及操作 service的操作

10.19 iptables规则备份和恢复 10.20 firewalld的9个zone 10.21 firewalld关于zone的操作 10.22 firewalld关于service的操作 10.19 iptables规则备份和恢复: ~1. 保存和备份iptables规则 ~2...

王鑫linux
今天
2
0
大数据教程(2.11):keeperalived+nginx高可用集群搭建教程

上一章节博主为大家介绍了目前大型互联网项目的系统架构体系,相信大家应该注意到其中很重要的一块知识nginx技术,在本节博主将为大家分享nginx的相关技术以及配置过程。 一、nginx相关概念 ...

em_aaron
今天
1
1
Apache Directory Studio连接Weblogic内置LDAP

OBIEE默认使用Weblogic内置LDAP管理用户及组。 要整理已存在的用户及组,此前办法是导出安全数据,文本编辑器打开认证文件,使用正则表达式获取用户及组的信息。 后来想到直接用Apache Dire...

wffger
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部