快捷搜索:  as  test  1111  test aNd 8=8  test++aNd+8=8  as++aNd+8=8  as aNd 8=8

伟德国际1949始于英国_酒文化网进入



Dojo 基础库(Dojo Base)是 Dojo 框架的核心,包孕了与 Ajax 利用开拓相关的核心内容,也是 Dojo 核心库(Dojo Core)、Dojo 用户界面库(Dijit)和 Dojo 扩展库(Dojox)的根基。Dojo 基础库中包孕的内容对照多,下面将具体的对此中的各个模块进行先容。与 DOM 查询和操作以及事故处置惩罚相关的内容已经在本系列中的其它文章中进行先容,此处不再赘述。而此中与面向工具相关的内容将在其它文章中进行先容。下面首先先容 Dojo 基础库中包孕的帮助对象措施。

帮助对象措施

在 Ajax 利用开拓中,常常会必要编写一些对象措施来帮助开拓,以削减代码重复。Dojo 基础库中已经为一些开拓中常常会用到的功能供给了帮助措施。应用这些措施前进开拓效率和代码质量。

数组处置惩罚

数组处置惩罚是 Ajax 利用开拓中的常见操作。Dojo 基础库供给了一些措施用来方便的对数组进行处置惩罚,完成一些范例的义务。这些与数组处置惩罚相关的措施的详细阐明如下所示:

dojo.forEach(array, callback, scope):该措施用来遍历数组并对此中的每个元素履行操作。其参数 array表示的是数组,callback表示的是对每个元素所履行操作的 JavaScript 措施,可选的 scope表示的是 callback措施调用时 this所指向的工具。callback措施在被调用时会传入三个参数,分腕表示当前元素、当前元素在数组中的序号以及数组本身。

dojo.every(array, callback, scope):该措施用来判断是否数组的整个元素都满意特定的前提。其三个参数的含义与 dojo.forEach()措施相同。callback措施经由过程返回真假值来声明某个元素是否相符前提。

dojo.some(array, callback, scope):该措施用来判断数组中是否至少有一个元素满意特定的前提。其三个参数和 callback措施的含义与 dojo.every()相同。

dojo.map(array, callback, scope):该措施用来对数组中的每个元素履行操作,并返回一个数组包孕操作的结果。其三个参数的含义与 dojo.forEach()相同。

dojo.filter(array, callback, scope):该措施用来对数组中包孕的元素进行过滤,只保留满意特定前提的元素。其三个参数的含义与 dojo.forEach()相同。callback措施经由过程返回真假值来声明某个元素是否应该被保留。

dojo.indexOf(array, value, fromIndex, findLast):该措施用来在数组中查找指定的元素,假如找到就返回该元素在数组中的序号,否则返回 -1。其参数 array表示数组,value表示要查找的元素值,fromIndex表示查找的肇端序号位置,findLast表示是否从数组末端开始查找。

代码清单 1中给出了上述措施的应用示例。

清单 1. Dojo 基础库数组处置惩罚要领示例

var array = [2, 4, 6, 8, 10];

dojo.forEach(array, function(number, i) {

alert("第" + (i + 1) + "个数是:" + number);

});

var allEven = dojo.every(array, function(number) {

return number % 2 == 0;

});

if (allEven) {

alert("数组中整个是偶数。");

}

var hasTrimerous = dojo.some(array, function(number) {

return number % 3 == 0;

});

if (hasTrimerous) {

alert("数组中包孕 3 的倍数。");

}

var tenTimes = dojo.map(array, function(number) {

return number * 10;

});

alert("数组中所有元素乘以 10:" + tenTimes.join(","));

var lessThanFive = dojo.filter(array, function(number) {

return number

在先容完 Dojo 基础库中对数组的处置惩罚要领之后,下面先容对 JavaScript 措施的处置惩罚。

JavaScript 措施处置惩罚

JavaScript 措施被调用的时刻,关键词 this所指向的工具与该措施被调用的要领有关。开拓职员轻易差错的理解 this所指向的工具而造成问题。Dojo 基础库的 dojo.hitch(scope, method)措施返回一个新的 JavaScript 措施。该措施的感化与参数 method所表示的措施相同,不过它包管被调用时 this关键词始终指向的是参数 scope所表示的工具。除了 scope和 method两个参数之外,应用 dojo.hitch()的时刻还可以添加随意率性多的其它参数。这些参数被作为 method措施调用时的参数来应用。这样相称于创建了一个新的措施,并且预先设置了原本措施中一些参数的值。别的一个措施 dojo.partial(method)的感化与 dojo.hitch()类似,只是少了参数 scope,是以不会设置调用时 this关键词所指向的工具。代码清单 2中给出了伟德国际1949始于英国 dojo.hitch()的应用示例。

清单 2. dojo.hitch() 应用示例

var obj = {

name : "Alex",

lang : "中文"

};

var func = dojo.hitch(obj, func伟德国际1949始于英国tion() {

alert(this.name);

});

func();

function sayHello(to, message) {

alert(to + ":" + message + "(" + this.lang + ")");

}

var sayHelloToAlex = dojo.hitch(obj, sayHello, "Alex");

sayHelloToAlex("你好!");

在 代码清单 2中,经由过程调用 dojo.hitch()获得的 func措施在被调用的时刻,其 this关键词指向的工具是 obj,是以 this.name的值是“Alex”。第二次调用 dojo.hitch()的时刻传入了参数“Alex”,把它作为 sayHello措施的第一个参数 to的固定值。这样获得的 sayHelloToAlex措施就只必要传入一个参数 message的值即可。

在先容完 dojo.hitch()之后,下面先容与字符串处置惩罚相关的内容。

字符串处置惩罚

下面先容 Dojo 基础库中与字符串处置惩罚相关的两个措施:dojo.trim()和 dojo.replace()。

dojo.trim(str)用往来交往除字符串首尾的白字符。如 dojo.trim(" Hello World! ")的结果是 "Hello World!",原字符串中首尾的空格被去掉落。

dojo.replace(template, map, pattern)供给了一种简单的字符串模板实现,得当用来天生 HTML 片段和显示给终极用户的消息。参数 template表示的是字符串模板,此中包孕一些占位符。在运行时候,这些占位符被调换成真实的值。参数 map表示的是一个 JavaScript 工具或是措施。假如是 JavaScript 工具的话,其与占位符名称相同的属性的值便是真实值;假如是 JavaScript 措施的话,该措施的调用结果作为占位符的真实值。参数 pattern表示的是占位符的正则表达式模式,默认环境下,占位符是经由过程 {}来表示的。代码清单 3中给出了 dojo.replace()的应用示例。

清单 3. dojo.replace() 应用示例

var data = {

name : "Alex",

address : {

country : "中国",

city : "北京"

}

};

var template = "{name} : {address.country} - {address.city}";

alert(dojo.replace(template, data));

var template2 = "随机数 :{number}";

alert(dojo.replace(template2, function(_, key) {

if (key == "number") {

return Math.random();

}

}));

代码清单 3中给出了 dojo.replace()的两种基础用法。第一种是传入 JavaScript 工具作为模板中占位符真实值的滥觞。在表示属性的时刻,支持用“.”分隔的嵌套表达式。第二种是应用 JavaScript 措施来动态天生真实值。

在先容完与字符串处置惩罚相关的措施之后,下面先容其它的帮助对象措施。

其它措施

Dojo 基础库供给了一些措施用来做类型反省:dojo.isString()、dojo.isArray()、dojo.isFunction()和 dojo.isObject()分手用来判断是否为字符串、数组、措施和工具。dojo.isArrayLike()用来判断是否类似数组。假如一个工具不是字符串和 JavaScript 措施,同时又包孕属性 length,则觉得其类似一个数组,dojo.isArrayLike()返回的结果为 true。dojo.isAlien()用来判断是否为 JavaScript 内置的措施,即由浏览器供给原生实现的措施。

在 Ajax 利用中应用 JSON 是异常普遍的。Dojo 基础库供给了 dojo.toJson()和 dojo.fromJson()用来进行 JSON 字符串和 JSON 工具之间的互相转换。dojo.toJson(obj, prettyPrint)把 JSON 工具转换成 JSON 字符串,其参数 obj表示 JavaScript 工具,prettyPrint表示是否应用代码缩进使得输出加倍美不雅。默认的缩进字符是制表符,可以经由过程 dojo.toJsonIndentStr属性的值进行改动。dojo.fromJson(json)把 JSON 字符串转换成 JSON 工具。在 Ajax 利用中的常见用法是从办事器端获取 JSON 字符串,再经由过程 dojo.fromJson()变成 JSON 工具来应用。

在先容完 Dojo 基础库供给的帮助对象措施之后,下面先容与异步操作相关的 dojo.Deferred。

dojo.Deferred

在 A伟德国际1949始于英国jax 利用中常常必要履行异步操作。对照范例的场景是经由过程 XMLHTTPRequest 来异步的从办事器端获取数据。当数据返回之后,再对其进行处置惩罚。异步操作对付提升 Ajax 利用的用户体验来说是必弗成少的。Dojo 基础库供给了 dojo.Deferred来对异步操作进行抽象。假如一个措施是异步履行的,就可以用一个 dojo.Deferred作为其返回值。对付异步操作,范例的做法是为它添加回调措施。当异步操作完成的时刻,回调措施会被调用来履行特定的处置惩罚逻辑。dojo.Deferred工具供给了 addCallback()、addErrback()和 addBoth()用来添加异步操作的回调措施:此中 addCallback()用来添加异步操作成功完成时的回调措施,addErrback()添加异步操作呈现差错时的回调措施,而 addBoth()添加的回调措施不论异步操作成功照样呈现差错,都邑被调用。这三个措施的参数的含义与 dojo.hitch()的相同。可以经由过程这三个措施来添加随意率性多的回调措施。回调措施按照其被添加的顺序依次串联起来,形成一个链条。当异步操作完成之后,这些回调措施会被依次调用。异步操作的履行结果也会在此链条长进行通报。

对付异步操作的实际履行者来说,当异步操作完成的时刻,不论是成功照样呈现差错,都必要看护调用者,使得对应的回调措施被调用。dojo.Deferred工具的措施 callback()和 errback()分手用来看护调用者异步操作成功完成或呈现差错。调用的时刻可以传入一个参数作为操作的结果或是表示呈现的差错的 JavaScript Error工具。。

下面先容 dojo.Deferred的基础用法。履行异步操作的措施创建并返回一个 dojo.Deferred工具。该措施等待异步操作的完成,并调用此 dojo.Deferred工具的 callback()或 errback()措施。调用者应用该 dojo.Deferred工具的 addCallback()和 addErrback()来添加回调措施。代码清单 4中给出了一个示例。

清单 4. dojo.Deferred 应用示例

function asyncOperation() {

var d = new dojo.Deferred();

window.setTimeout(function() {

var number = Math.random();

if (number > 0.5) {

d.callback(number);

}

else {

d.errback(new Error("不精确的随机数!"));

}

}, 1000);

return d;

}

var d = asyncOperation();

d.addCallback(function(result) {

alert("异步操作完成!结果是:" + result);

return result * 10;

});

d.addCallback(function(result) {

alert("异步操作完成!结果的 10 倍是:" + result);

return result;

});

d.addErrback(function() {

alert("异步操作呈现差错!");

});

如 代码清单 4所示,asyncOperation措施经由过程 window.setTimeout()来模拟了一个异步操作,在等待 1 秒钟之后,该异步操作会根据随机数的值来确定这次调用是成功照样掉败。假如成功,则经由过程 callback()把此随机数的值作为此操作的结果;假如掉败则经由过程 errback()返回一个自定义的 Error工具。异步操作的调用者经由过程回调措施来对不合的结果进行处置惩罚。这里必要留意的一点是,经由过程 addCallback()添加的回调措施,必要供给一个返回值。该返回值会被作为下一个回调措施的输入参数。一样平常的做法是把异步操作的结果直接返回,这样其它回调措施都能获得相同的结果。在 代码清单 4中,为了演示操作结果在回调措施链上的通报性,在上一个回调措施中,返回的是获得的随机数的 10 倍,鄙人一个回调措施中就获得了上一个回调措施更新之后的结果。在很多环境下,开拓职员平日会轻忽这一点,在回调措施中不返回任何结果。在只有一个回调措施的环境下,这不会造成问题。不过假如存在多个回调措施,会造成难以调试的问题。

在有些环境下,可能会必要取消一个正在进行中的异步操作,如中止一个正在进行中的 XMLHTTPRequest 哀求。dojo.Deferred工具的 cancel()措施用来取消异步操作。在创建 dojo.Deferred工具的时刻,可以传入一个参数 canceller。当 cancel()措施被调用的时刻,canceller措施会被调用。当一个异步操作被取消的时刻,吸收差错的回调措施会被调用。

在一个异步操作的履行历程中,也可能履行其它的异步操作。这些操作也可以返回 dojo.Deferred作为结果。多个 dojo.Deferred工具可以经由过程这种要领嵌套起来,形成繁杂的级联布局。

异步操作与同步操作的一个显明不合是编程要领上的。同步操作的结果可以直接应用,而异步操作的结果则必要传入吸收结果的回调措施。有些环境下,一个操作可能是同步履行,也可能是异步履行的。这种编程要领的不合,会使得代码编写起来变得繁杂。经由过程 dojo.Deferred可以对这两种操作进行统一的抽象,使得代码变得简单。代码清单 5中给出了一个应用 dojo.Deferred来统一异步和同步操作的示例。

清单 5. 应用 dojo.Deferred来统一异步和同步操作示例

var cache = {};

function getData(name) {

var d = new dojo.Deferred();

if (typeof cache[name] != "undefined") {

d.callback(cache[name]);

}

else {

dojo.xhrGet({

url : "/data?name=" + encodeURIComponent(name),

load : function(data) {

cache[name] = data;

d.callback(data);

},

error : function(e) {

d.errback(e);

}

});

}

return d;

}

var d = getData("Alex");

d.addCallback(function(data) {

// 应用数据

});

如 代码清单 5所示,获取数据的操作 getData()可能从本地的缓存中获取,也可能从办事器端获取。前者是同步操作,后者是异步操作。经由过程 dojo.Deferred的应用,这两种操作的不合被樊篱起来。

在先容完 dojo.Deferred之后,下面先容应用 Dojo 基础库进行主题宣布和订阅。

主题宣布与订阅

Dojo 中的主题宣布与订阅机制可以觉得是一个全局的事故总线。每个主题用一个字符串来标识。对此主题感兴趣的组件可以订阅此主题。该主题的宣布者会在必要的时刻把与主题相关的数据宣布出来。所有此主题的订阅者会收到看护,响应的逻辑会被自动调用。

订阅主题是经由过程 dojo.subscribe(topic, context, method)措施来完成的。它的参数 topic表示主题的名称,context表示主题处置惩罚逻辑的 JavaScript 措施调用时 this关键词所指向的工具,method表示主题处置惩罚逻辑的 JavaScript 措施。dojo.subscribe()的返回值是这次订阅的标识符,可以将该标识符传入 dojo.unsubscribe()来取消订阅。宣布主题看护是经由过程 dojo.publish(topic, args)来实现的。它的参数 topic是主题的名称,args是与主题相关的数据,类型是一个数组。代码清单 6中给出了应用 Dojo 主题宣布与订阅的示例。

清单 6. Dojo 主题宣布与订阅示例

dojo.subscribe("/com/example/Test", function(message) {

alert(message);

});

dojo.publish("/com/example/Test", ["Hello, Alex."]);

Dojo 的主题宣布与订阅机制应用起来简单方便,而且适用范围很广。然则在应用的时刻要留意下面几点:

不要用它来取代正常的组件之间的消息通报机制。因为主题宣布与订阅在当前页面全局范围内起感化,一种常见的编程模式是应用它替代正常的消息通报机制。比如组件 A 和 B 必要协同事情来完成某项义务,就在组件 B 中经由过程 dojo.subscribe()来订阅某个主题,而在组件 A 中经由过程 dojo.publish()来看护组件 B,并通报一些数据。这样的话,组件 A 和 B 之间的协作关系就只是经由过程一个字符串来表达。假如在利用中大年夜量应用这种模式,会使得不合组件之间的协作关系变得难以掩护。

组件从页面中删除的时刻,经由过程 dojo.unsubscribe()来取消其订阅的所有主题。这样可以避免内存泄露和前进机能。

应用包孕名称空间的主落款称,如 /com/example/package。这样可以避免主落款称之间的冲突。Dojo 内部的主落款称一样平常以 /dojo开首,在自己的利用中的主落款称只管即便不要以 /dojo作为前缀。

dojo.connectPublisher(topic, object, event)是 dojo.connect()和 dojo.publish()的结合体。当特定的事故发生的时刻,会有相关的主题被自动宣布出来。该措施的参数 topic表示宣布出来的主落款称,object表示事故发生的工具,event表示孕育发生的事故。如 dojo.connectPublisher("/com/example/MyTopic", node, "onclick")表示当节点 node被点击的时刻,自动宣布主题 /com/example/MyTopic。

在先容完主题宣布与订阅之后,下面先容 XMLHTTPRequest 相关的内容。

XMLHTTPRequest

Ajax 利用开拓中自然少不了经由过程 XMLHTTPRequest 从办事器端异步的获取数据。Dojo 基础库中供给了一些与 XMLHTTPRequest 相关的措施,为开拓职员樊篱浏览器兼容性的细节。一样平常来说,办事器端供给的是 REST 接口,浏览器可以经由过程 HTTP GET、POST、PUT 和 DELETE 哀求与办事器端通信。Dojo 供给了对这四种 HTTP 措施的支持。首先先容若何发送 HTTP GET 哀求。

dojo.xhrGet

在 Ajax 利用中,HTTP GET 哀求是最常见的,用来从办事器端获取数据。dojo.xhrGet(args)应用 XMLHTTPRequest 来发出 HTTP GET 哀求,其参数 args是一个 JavaScript 工具,此中包孕了与这次哀求相关的信息。该 JavaScript 工具中可以包孕的属性对照多,详细如 表 1所示。

表 1. dojo.xhrGet 可设置设置设备摆设摆设的属性列表

属性

阐明

url

HTTP GET 哀求造访的 URL 地址。

handleAs

表示若何对办事器端返回的数据进行处置惩罚。从办事器端返回的一样平常是文本数据,Dojo 可以对这些文本数据进行必然的处置惩罚。Dojo 供给了一些处置惩罚要领,如 text、json、javascript和 xml等,分腕表示不做任何处置惩罚、经由过程 dojo.fromJson()转换成 JSON 工具、履行 JavaScript 代码和从返回的文本中创建 XML 文档 DOM 工具。该属性的默认值是 text。开拓职员可以根据必要选择相宜的处置惩罚要领。从 Dojo 1.4 开始,开拓职员也可以扩展 Dojo 来添加自己的处置惩罚要领。

sync

表示发出的是同步哀求照样异步哀求。

preventCache

当设置此属性的值为 true的时刻,Dojo 会在 GET 哀求的 URL 后面加上一个惟一的查询参数,使得每次哀求的 URL 都不一样。因为浏览器是经由过程 URL 来缓存哀求的结果的,这样就绕过了浏览器的缓存机制,使得每次哀求都是直接从办事器端获取数据。

content

表示一个 JavaScript 工具,此中包孕的属性和值会呈现在 URL 的查询参数中。

headers

表示一个 JavaScript 工具,此中包孕 HTTP 哀求的头信息。

timeout

表示哀求的超韶光阴,以毫秒为单位。对付同步哀求不适用。

user/password

假如办事器端应用的是 HTTP 基础认证要领的话,用这两个属性值来通报用户名和密码。

load/error/handle

这三个表示的是 HTTP GET 哀求完成之后的回调措施。它们分腕表示哀求成功完成、呈现差错和老是被调用的回调措施。

dojo.xhrGet()措施返回的是 dojo.Deferred工具,是以除了经由过程 load/error/handle属性来设置回调措施之外,还可以经由过程 dojo.Deferred供给的措施来添加回调措施。回调措施被调用时,第一个参数是处置惩罚之后的返回结果,第二个参数包孕了与哀求相应相关的信息,包括 XMLHTTPRequest 工具以及发送哀求时传入的参数等。

dojo.xhrPost 和 dojo.rawXhrPost

dojo.xhrPost(args)和 dojo.rawXhrPost(args)措施用来经由过程 HTTP POST 哀求向办事器端发送数据。这两个措施的参数 args除了可以包孕 表 1中给出的属性之外,还可以包孕 表 2中给出的属性。

表 2. dojo.xhrPost 可设置设置设备摆设摆设的额外属性

属性

阐明

form

当必要提交一个 HTML 表单的时刻,设置此属性的值为表单 DOM 节点工具或是 ID。

postData

表示想要发送到办事器真个随意率性数据。

dojo.xhrPost()对办事器端返回结果的处置惩罚要领与 dojo.xhrGet()相似。这两个措施的返回结果都是 dojo.Deferred工具。

dojo.xhrPut、dojo.rawXhrPut 和 dojo.xhrDelete

dojo.xhrPut()和 dojo.rawXhrPut()用来发送 HTTP PUT 哀求给办事器端。其用法与 dojo.xhrPost()和 dojo.rawXhrPost()相似。在发送哀求的时刻,可以经由过程属性 putData来设置发送给办事器真个内容。

dojo.xhrDelete()用来发送 HTTP DELETE 哀求给办事器端。这个措施用得较少。不过假如办事器端采纳 REST 架构的话,这是必弗成少的一种要领。

这三个措施返回的都是 dojo.Deferred工具。

上面先容了若何发送 HTTP GET、POST、PUT 和 DELETE 哀求,下面阐明若何对哀求返回的结果进行处置惩罚。

扩展 Dojo 对 XMLHTTPRequest 哀求返回结果的处置惩罚

从 Dojo 1.4 开始,开拓职员可以扩展 Dojo 对 XMLHTTPRequest 哀求返回结果的处置惩罚。假如 Ajax 利用的办事器端和浏览器代码之间在数据款式上有着某种固定的协议的话,可以把这部分处置惩罚的逻辑作为对 Dojo 的扩展。代码清单 7中给出了一个示例。

清单 7. 扩展 Dojo 对 XMLHTTPRequest 哀求返回结果的处置惩罚

var templates = {

"simple" : "{name}",

"nolink" : "{name}:{email}"

};

dojo.mixin(dojo.contentHandlers, {

"myTemplate" : function(xhr) {

var result = dojo.fromJson(xhr.responseText);

var templateId = result.templateId;

var data = result.data;

return dojo.replace(templates[templateId], data);

}

});

dojo.xhrGet({

url : "test.json",

handleAs : "myTemplate",

load : function(data) {

alert(data);

},

error : function(e) {

alert("呈现差错。");

}

});

如 代码清单 7所示,经由过程为 dojo.contentHandlers工具添加额外的属性,就可以扩展 Dojo 对 I/O 哀求结果的内容处置惩罚逻辑。这里添加了一个名为 myTemplate的处置惩罚要领,它会从返回的 JSON 工具中提掏出模板的 ID,再使用 dojo.replace()根据返回的 JSON 工具天生出 HTML 片段。在 dojo.xhrGet()的参数中指定属性 handleAs的值为 myTemplate,Dojo 会自动调用对应的处置惩罚逻辑。

I/O 事故看护

从 Dojo 1.4 开始,开拓职员可以经由过程 Dojo 的 主题宣布和订阅机制来监测与 I/O 相关的事故,即可以经由过程 dojo.subscribe()来监听与 I/O 事故相关的特定主题。这些主题的具体信息如 表 3所示。

表 3. I/O 事故相关的主题

主题

阐明

参数

/dojo/io/start

假如当前没有其它正在进行中的 I/O 哀求,并且新的 I/O 哀求被发出的时刻,宣布此主题。

/dojo/io/send

当发出新的 I/O 哀求的时刻,宣布此主题。

第一个参数 dfd表示这次哀求返回的 dojo.Deferred工具。

/dojo/io/load

当 I/O 哀求成功完成的时刻,宣布此主题。

第一个参数 dfd表示这次哀求返回的 dojo.Deferred工具。第二个参数 response表示返回的结果工具。

/dojo/io/error

当 I/O 哀求呈现差错时,宣布此主题。

与 /dojo/io/load相同。

/dojo/io/done

当 I/O 哀求完成的时刻,不论成功照样呈现差错,宣布此主题。

与 /dojo/io/load相同。

/dojo/io/stop

当所有 I/O 哀求都完成的时刻,宣布此主题。

默认环境下,I/O 事故的主题宣布功能是禁用的。可以经由过程设置全局的 Dojo 设置设置设备摆设摆设项 djConfig.ioPublish = true来启用它。

I/O 事故看护的一个好处是可以为 Ajax 利用中的 I/O 哀求添加全局的处置惩罚逻辑。比如利用可能盼望在有 I/O 哀求发出的时刻,显示给用户一些提示信息;而在哀求完成的时刻,去掉落这些提示信息。代码清单 8中给出了一个示例。

清单 8. 应用 I/O 事故主题看护的示例

var messageNode = dojo.byId("message");

dojo.subscribe("/dojo/io/start", function() {

dojo.style(messageNode, "display", "block");

});

dojo.subscribe("/dojo/io/stop", function() {

dojo.style(messageNode, "display", "none");

});

如 代码清单 8,当有 I/O 哀求发出的时刻,显示消息给用户;当 I/O 哀求完成的时刻,暗藏此消息。

帮助措施

在发送 I/O 哀求的时刻可能会必要获取当前页面中的表单数据,或者构造 URL 的查询参数字符串,Dojo 基础库也供给了一些帮助措施来赞助满意这些需求。这些措施的详细阐明见 表 4。

表 4. 与 XMLHTTPRequest 相关的帮助措施

措施

阐明

dojo.fieldToObject(inputNode)

返回表单中字段的值。

dojo.formToObject(formNode)

返回包孕表单中所有字段值的 JavaScript 工具。

dojo.objectToQuery(map)

把一个 JavaScript 工具转换成 URL 查询参数字符串的形式。

dojo.queryToObject(str)

解析 URL 查询参数字符串,并转换成一个 JavaScript 工具。

dojo.formToQuery(formNode)

把表单中所有字段的值转换成 URL 查询参数字符串的形式。

dojo.formToJson(formNode, prettyPrint)

把表单中所有字段的值转换成 JSON 字符串。

在先容完 Dojo 供给的对 XMLHTTPRequest 哀求的支持之后,下面先容 Dojo 的模块化机制。

模块化机制

Dojo 库很宏大年夜,由很多模块组成。为了方便对模块的治理和应用,Dojo 基础库中供给了与模块的声明和应用相关的内容。

Dojo 中的一个模块对应的是文件系统上的一个 JavaScript 文件。这个文件中封装与此模块相关的逻辑。模块可以繁杂,也可以对照简单。每个模块的 JavaScript 文件应该是可以经由过程 URL 进行造访的。每个模块都有一个用来作为标识的名称,在利用范围内应该是惟一的。模块的名称一样平常采纳 com.example.xxx这样的款式。模块的名称会转化成加载其 JavaScript 文件时所用的 URL 路径。模块之间可以相互依附。在一个模块内部,可以经由过程 dojo.require()来声明所依附的模块。Dojo 会认真加载一个模块所依附的其它模块。从机能的方面斟酌,同样的模块不必要重复加载。Dojo 供给了 dojo.provide()用来声明一个模块已经被加载了。一样平常在模块的 JavaScript 文件中应用 dojo.provide()进行声明。

模块名称与其加载路径的对应关系对照简单。只必要把模块名称中的“.”调换成路径分隔符“/”,然后添加在根基 URL 之后就可以了。默认的根基 URL 是包孕 dojo.js的目录所对应的路径。可以经由过程 dojo.baseUrl属性来获取此路径。假如模块的名称不以 dojo作为前缀,则觉得模块的根目录与 dojo.js的父目录平级。假设 dojo.js的路径是 /js/dojo/dojo.js,那么模块 com.example.SampleModule的路径是 /js/com/example/SampleModule.js。Dojo 会考试测验经由过程上面的路径去加载模块的 JavaScript 文件。假如盼望改变默认的模块路径,可以经由过程 dojo.registerModulePath(module, prefix)措施,此中参数 module表示的是模块名称,prefix表示的是模块路径。模块路径可所以绝对的,即以“/”或 http开首;也可所以相对的。相对的模块路径是相对付 dojo.baseUrl来谋略的。比如 dojo.baseUrl的值是 /js/lib/dojo,那么经由过程 dojo.registerModulePath("example", "../../example/")的模块的路径是 /js/example/。假如经由过程 dojo.require("example.test.Sample")声明所依附的模块,Dojo 会考试测验经由过程路径 /js/example/test/Sample.js来加载其 JavaScript 文件。

在模块开拓中,可能会必要引用外部的资本文件,如图片、CSS 文件等。经由过程 dojo.moduleUrl(module, url)可以把模块内一个相对付模块的路径转换成可以实际造访的路径。它的参数 module表示的是模块名称,url是相对付模块的路径,其返回结果是一个 dojo._Url工具。如 dojo.moduleUrl("example", "images/logo.jpg")表示的路径是 /js/example/images/logo.jpg。

在先容完 Dojo 的模块化机制之后,下面先容若何用 Dojo 基础库实现动画效果。

动画效果

在 Ajax 利用中可能会必要应用一些动画效果。适当的应用动画效果,可以赞助向导用户留意力,提升利用的用户体验。比如显示从办事器端获取的近来更新的内容的时刻,可以将内容区域的背景致从黄色渐变到白色,以吸引用户留意最新的内容。Dojo 基础库中包孕了与动画效果相关的根基内容,以及少量简单的动画效果的实现。更多的动画效果被包孕在 dojo.fx和 dojox.fx两个模块中。

dojo.Animation类是 Dojo 中动画效果实现的根基,此中包孕动画效果的定义、节制与相关事故。表 5中给出了 伟德国际1949始于英国dojo.Animation中的属性或措施的阐明。

表 5. dojo.Animation 中的属性或措施的阐明

属性或措施

阐明

duration

以毫秒为单位的动画效果的持续光阴。

repeat

表示动画效果重复播放的次数。

delay

以毫秒为单位的动画效果播放之前的延迟光阴。

rate

以毫秒为单位的动画效果中每帧之间的距离光阴。

easing

表示一个 JavaScript 措施用来调剂播放进度,在适当的时刻加速或减速,以得到更好的用户体验。

play(delay, gotoStart)

播放动画效果。其参数 delay表示播放之前的延迟光阴,gotoStart表示是否从头开始播放。

pause()

停息播放动画效果。

gotoPercent(percent, andPlay)

设置当前动画效果的播放进度。其参数 percent表示进度的百分比,andPlay表示是否急速开始播放。

stop(gotoEnd)

竣事播放动画效果。其参数 gotoEnd表示是否移动动画效果到末端。

status()

返回当前动画效果的状态信息,可能的值有 paused、playing和 stopped,分腕表示动画效果已停息、正在播放和已竣事。

beforeBegin

在动画效果开始播放之前的回调措施。

onBegin

在动画效果开始播放之后的回调措施。

onEnd

在动画效果播放完成之后的回调措施。

onPlay

在动画效果播放之时的回调措施,即 play()措施被调用。

onPause

在动画效果停息播放时的回调措施。

onStop

在动画效果竣事播放时的回调措施。

onAnimate

在动画效果的每一帧被播放时的回调措施。

在 Ajax 利用中的动画效果一样平常是针对节点上 CSS 属性的值来进行的,比如以渐进的要领转变节点的颜色、字体大年夜小和位置等。dojo.animateProperty(args)可以用来方便的实现基于 CSS 属性值的动画效果。该措施的返回结果是一个 dojo.Animation工具。它的参数 args是一个 JavaScript 工具,可以应用 表 5中给出的属性。除此之外,属性 properties是一个包孕要动态改变的 CSS 属性信息的一个 JavaScript 工具,此中包括 CSS 属性的名称、开始值、停止值和单位等。代码清单 9给出了应用 dojo.animateProperty()的示例。

清单 9. 应用 dojo.animateProperty()的示例

dojo.animateProperty({

node : "sample",

rate :   200,

duration : 5000,

properties : {

width : {

start : 100,

end : 400

},

height : {

end : 400

},

backgroundColor : {

start : "yellow",

end : "red"

}

}

}).play();

如 代码清单 9所示,经由过程 dojo.animateProperty()措施同时对节点的宽度、高度和背景颜色添加了动画效果。此中宽度从 100 像素伟德国际1949始于英国变更到 400 像素,高度从当前值变更到 400 像素,背景颜色从黄色变更到血色。在定义单个 CSS 属性的动画效果时,start和 end属性的值假如为空,则应用节点确当前值。这两个属性也吸收 JavaScript 措施作为其值,该措施的调用结果作为动画效果中所应用的值。dojo.animateProperty()措施返回的是 dojo.Animation工具,调用该工具的 play()措施就可以播放此动画效果。

dojo.anim(node, properties, duration, easing, onEnd, delay)措施是 dojo.animateProperty()的一个简单包装,包孕了与动画效果相关的常见属性作为参数。dojo.anim()创建的动画效果会自动开始播放。dojo.fadeIn(args)和 dojo.fadeOut(args)是 Dojo 基础库供给的两个动画效果,分手实现淡入和淡出。它们是经由过程转变节点的 CSS 属性 opacity(不透明度)来实现的。

在先容完实现动画效果之后,下面先容对 Dojo 进行设置设置设备摆设摆设和感化高低文的含义。

设置设置设备摆设摆设与感化高低文

下面先容 Dojo 基础库中两个对照高档的话题。第一个是若何对 Dojo 库的行径进行设置设置设备摆设摆设。

djConfig

经由过程 djConfig这个全局的 JavaScript 工具可以对 Dojo 的一些行径进行设置设置设备摆设摆设。此中的一些设置设置设备摆设摆设项,如 baseUrl和 ioPublish已经在之前先容过了。其它的一些设置设置设备摆设摆设项如 表 6所示。

表 6. djConfig 中的设置设置设备摆设摆设项

属性

阐明

isDebug

默认值为 false。当设为 true的时刻,Dojo 将在运行时输出调试信息。

locale

设置 Dojo 应用的区域设置。默认环境下,Dojo 将从浏览器获取当前用户的区域设置信息。

modulePaths

设置额外的模块路径。这是一个以模块前缀和路径作为属性名称和值的 JavaScript 工具。其感化等同于 dojo.registerModulePath()措施。

afterOnLoad

设置为 true的时刻注解 Dojo 的 JavaScript 文件是在页面加载完成之后才被动态加载的。

在先容了 djConfig中包孕的设置设置设备摆设摆设项之后,下面先容 Dojo 中很多措施的感化高低文。

感化高低文

在 Dojo 基础库中的很多措施都是有自己默认的感化高低文的。 比如应用 dojo.query()进行查询的时刻,假如不指定范围,则默认在当前文档树的全局进行查询。dojo.hitch()假如不指定 this关键词所指向的工具的话,默认应用全局工具。Dojo 把一些全局的工具保存起来,可以在必要的时刻进行切换。dojo.global保存的是全局工具,一样平常是当前页面的 window工具。dojo.doc保存的是文档工具,一样平常是当前页面的 document工具。经由过程 dojo.setContext(globalObject, globalDocument)用来改变 dojo.global和 dojo.doc的值。假如不盼望直接改变上面两个工具的值,而是简单的在新的感化高低文中调用一些措施的话,可以应用 dojo.withGlobal(globalObject, callback, thisObject, cbArguments)和 dojo.withDoc(documentObject, callback, thisObject, cbArguments)。这两个措施分手可以在给定的全局工具(globalObject)或文档工具(documentObject)下调用措施 callback。参数 thisObject和 cbArguments分腕表示措施 callback调用时 this关键词所指向的工具和应用的参数。

在一样平常环境下,利用不必要显式改变 Dojo 默认的感化高低文。一种可能必要改变感化高低文的环境便是对页面上 iframe 中的内容进行操作。经由过程把 dojo.global和 dojo.doc改动成 iframe 中的 window工具和 document工具,会使得接下来对 iframe 中内容的操作变得简单。

在先容完 Dojo 的设置设置设备摆设摆设和感化高低文相关的内容之后,下面先容应用 Dojo 供给的对面向工具编程模式的支持。

面向工具 JavaScript

JavaScript 并不是一种面向工具的编程说话。它与范例的面向工具说话有对照多的差别,比如函数是一等工具,工具的属性可以随意率性改动,没有类的观点而应用原型(prototype)等。JavaScript 说话的这些特征,对付认识面向工具说话的开拓职员来说,是一个不小的寻衅,必要完成一些思维要领上的转变。Dojo 基础库供给了一些面向工具的支持,使得开拓职员能够以认识的要领来应用 JavaScript。

定义 JavaScript 类

在 Dojo 中定义一个 JavaScript 类是很轻易的。dojo.declare(className, superclass, props)可以用来很方便的定义一个 JavaScript 类。该措施的参数 className表示 JavaScript 类的名字,一样平常应用 com.example.MyClass这样的带名称空间的全名,以避免冲突。也可以应用 null来创建一个匿名 JavaScript 类。参数 superclass表示的是该 JavaScript 类的父类。其值可所以 null表示没有父类;可所以单个工具,表示单承袭;也可所以一个工具的数组,表示多承袭。参数 props表示该 JavaScript 类中要包孕的属性,是一个 JavaScript 工具。经由过程 dojo.declare()定义出类之后,就可以经由过程 JavaScript 的 new操作符来创建该类的实例。定义类的时刻假如指定了参数 className的值,则该类是全局可造访的。参数 props表示的 JavaScript 工具中的属性是添加到 JavaScript 类的原型(prototype)中的,是被该类的所有实例共享的。假如在 props工具中包孕数组的时刻要非分特别留意,由于这一个数组工具是被所有的实例共享的。假如不小心的话,可能会造成难以调试的差错。props工具中的属性 constructor表示的是该类的构造措施。

实现了承袭之后,在子类中可能会覆盖父类中的某些措施。在子类的新措施中,可能会必要调用父类中同名措施。经由过程 dojo.declare()定义的 JavaScript 类中的措施,可以应用 this.inherited()来调用父类中的同名措施。一样平常的用法是 this.inherited(arguments),这样就把子类措施调用时的参数也通报给了父类措施。经由过程 isInstanceOf()可以判断工具是否是一个 JavaScript 类的实例。该措施支持多承袭环境下的判断。应该优先斟酌应用该措施,而不是 JavaScript 说话供给的 instanceof操作符。

代码清单 10中给出了 dojo.declare()的示例。

清单 10. dojo.declare() 示例

dojo.declare("com.example.Counter", null, {

constructor : function() {

this.counter = 1;

},

getNext : function() {

return this.counter++;

}

});

var c = new com.example.Counter();

alert(c.getNext());

dojo.declare("com.example.SuperCounter", com.example.Counter, {

increase : function() {

this.counter++;

},

decrease : function() {

this.counter--;

}

});

var sc = new com.example.SuperCounter();

sc.decrease();

alert(sc.getNext());

如 代码清单 10所示,经由过程 dojo.declare()定义了一个 JavaScript 类 com.example.Counter。该类是一个简单的计数器。经由过程其措施 getNext()可以得到下一个数字。接着又定义了 com.example.Counter类的一个子类 com.example.SuperCounter。在子类中添加了两个新的措施。子类的实例既可以调用自己定义的措施,也可以调用父类的措施。这种应用要领与一样平常的面向工具编程说话是类似的。

混入(mixin)

在有些时刻,必要用一个 JavaScript 工具来扩展别的一个 JavaScript 工具的功能,即把一个 JavaScript 工具混入到别的一个工具中。dojo.mixin()措施供给了这样的能力。该措施吸收多个 JavaScript 工具作为参数,并按照参数从右到左的顺序依次混入。第一个参数表示的工具将包孕其它参数工具中的整个属性。对付名称相同的属性,右边参数工具的值将覆盖左边参数工具中对应的值。dojo.mixin()的一个常见用法是处置惩罚选项的默认值。利用一样平常来说会为选项供给默认值,用户则会供给自定义的值。实际应用的值应该是用户供给的值覆盖默认值之后的结果。代码清单 11中给出了 dojo.mixin()的一个示例。

清单 11. dojo.mixin() 示例

var defaultOptions = {

lang : "zh_CN",

maxLength : 100

};

function getOptions(userOptions) {

return dojo.mixin({}, defaultOptions, userOptions);

}

getOptions({

lang : "en"

});

在 代码清单 11中,dojo.mixin()的第一个参数是个新创建的空 JavaScript 工具。这样的好处是返回的结果是一个新创建的工具,不会对已有工具造成无意的改动。

其它措施

除了 dojo.declare()和 dojo.mixin()之外,Dojo 基础库还供给其它几个措施,详细的先容如下。

dojo.extend(constructor, props):该措施把 props中所有的属性和措施都添加到 constructor的原型(prototype)中。这些属性和措施对 constructor的所有实例都是可见的。

dojo.delegate(obj, props):该措施会返回一个新的工具。该工具包孕 props中的属性和措施。当在该工具中找不到某个属性的时刻,会继承在 obj工具中进行查找。

dojo.getObject(name, create, context):该措施用来从 context工具中获取名为 name的属性。name属性支持类似 com.example.abc这样的“.”分隔的形式。假如指定参数 create的值为 true,当属性 name不存在的时刻,会创建该属性并设置其值为空工具。不指定 context工具时默觉得全局工具 dojo.global。

dojo.setObject(name, value, context):在工具 context中创建名称为 name,值为 value的属性。属性 name同样支持“.”分隔的形式。不指定 context工具时默觉得全局工具 dojo.global。

dojo.exists(name, obj):判断工具 obj中是否包孕属性 name。属性 name同样支持“.”分隔的形式。不指定 obj工具时默觉得全局工具 dojo.global。

在先容完与面向工具 JavaScript 相关的内容之后,对 Dojo 基础库的先容就停止了。

总结

要进修 Dojo 框架以及若何在 Ajax 利用中高效的应用 Dojo,Dojo 基础库是一个紧张的根基。Dojo 基础库中包孕的内容都异常实用,应用起来也对照简单。本文具体先容了 Dojo 基础库中所包孕的大年夜部分紧张内容,包括帮助对象措施、dojo.Deferred、主题宣布与订阅、XMLHTTPRequest、模块化机制、动画效果、设置设置设备摆设摆设与感化高低文和面向工具 JavaScript。Dojo 基础库的其它内容会在本系列的其它文章中进行先容。

免责声明:以上内容源自网络,版权归原作者所有,如有侵犯您的原创版权请告知,我们将尽快删除相关内容。

您可能还会对下面的文章感兴趣: