部分Dojo常用函数简介(一)——Javascript基础扩展函数2011-04-15 20:44:38| 分类:dojo | 标签:dojo函数foo xhrget hitch|字号订阅
每个Ajax 框架都对Javascript 做了扩展,提供了很多常用函数,增强了Javascript 的开发效率。在这里将对部分Dojo 中的常用函数做简单的介绍。由于Dojo的常用函数较多,也为方便大家阅读,将这些常用函数分为了五个类别分别进行介绍。本文将介绍第一部分的内容:Javascript基础扩展函数。
* 本系列博文的绝大多数内容来自于对https://www.sodocs.net/doc/199798470.html,上的dojo reference guide文档的翻译,在此也特别感谢文档的翻译者们:Fei Jia, Zhu Xiao Wen, Li Wen Bing, Zhang Jun, Hu Kuang, Huang Wei, Wu Min Qi, Mo Ying, Cheng Fu, Zhong Si Qi
dojo.hitch
dojo.hitch是一个优雅的函数。它会返回一个在指定作用域下执行指定语句的函数。通过调用这个函数,你可以很好地控制函数地执行,特别是在涉及到异步操作的时候。比如下面的例子:
view plaincopy to clipboardprint?
1var myObj = {
2foo: "bar",
3method: function(someArg){
4console.log(this.foo+" "+data);
5}
6};
7dojo.xhrGet({
8url: "/something.php",
9load: myObj.method
10});
var myObj = { foo: "bar", method: function(someArg){ console.log(this.foo+" "+data); } }; dojo.xhrGet({ url: "/something.php", load: myObj.method });
上面的例子无法正确的运行。你只会得到一个语义模糊的错误提示,比如:foo是一些变量未定义的错误。原因是,在如上例这样异步的回调函数中,当你赋给它一个关联表的时候,你改变了”foo”的作用域 .它的作用域不再关联到最初生成它的对象,xhr的参数对象上。要解决这个问题,你可以使用hitch来强制这个函数保留它原来的作用域。正确的写法应该
是像这样:
view plaincopy to clipboardprint?
11var myObj = {
12foo: "bar",
13method: function(data){
14console.log(this.foo+" "+data);
15}
16};
17dojo.xhrGet({
18url: "/something.php",
19load: dojo.hitch(myObj, "method")
20});
var myObj = { foo: "bar", method: function(data){ console.log(this.foo+" "+data); } }; dojo.xhrGet({ url: "/something.php", load: dojo.hitch(myObj, "method") });
dojo.hitch需要两个参数,第一个参数指明了函数调用的关联作用域,第二个参数为一个函数对象或第一个对象中的成员函数名。
(注:关于dojo.xhrGet,请参见后续的AjaxIO部分)
dojo.partial
你是否想过要控制传递给函数的参数?举例来说,你是否有过这样的需求,设定传递给函数的第一个参数为已定义的值,而其它的参数仍然是可变化的。dojo提供了一种方式可以满足这种需求。和dojo.hitch类似,dojo.partial也是一个返回值为函数的函数。它所做的是让你可以用预定义的值锁定函数的前几个参数。这是一个非常强大的功能,特别是当你需要传入对象引用或者其它类似的给数据存储的通知函数。
下面就是一个使用partial的示例:
view plaincopy to clipboardprint?
21var dataLoaded = function(someFirstParam, data, ioargs){};
22var args = {
23url: "foo",
24load: dataLoaded
25};
26dojo.xhrGet(args);
var dataLoaded = function(someFirstParam, data, ioargs){}; var args = { url: "foo", load:
dataLoaded }; dojo.xhrGet(args);
那么,当xhrGet函数返回的时候它会调用dataLoaded函数,但是xhrGet的load函数期待的参数结构应该是:load(data, ioargs)。那么在dataLoaded的第一个参数已经确定为"someFirstParam"的情况下,我们如何去保证xhrGet对于参数的要求能得到满足?对,使用dojo.partial!看看你可以如何用dojo.partial来做:
view plaincopy to clipboardprint?
27var dataLoaded = function(someFirstParam, data, ioargs){};
28var args = {
29url: "foo",
30load: dojo.partial(dataLoaded, "firstValue");
31};
32dojo.xhrGet(args);
var dataLoaded = function(someFirstParam, data, ioargs){}; var args = { url: "foo", load: dojo.partial(dataLoaded, "firstValue"); }; dojo.xhrGet(args);
它所做的是创建一个新的函数,这个函数封装了dataLoaded函数并且指定了第一个参数"firstValue"。需要注意的是,dojo.partial允许你指定多个参数,因此你可以定义任意数量的参数作为函数固定前置的参数。
dojo.isString, dojo.isArray, dojo.isFunction,
dojo.isObject, dojo.isArrayLike, dojo.isAlien
顾名思义,这几个函数都是用来判断给定的参数是否是特定的类型,是的话返回true,否则返回false。
dojo.isString:判断给定参数是否是字符串
dojo.isArray:判断一个对象是不是一个真正的数组。注意,dojo.isArray检查的是所传的值是不是由当前框架(frame)里的Array构造函数所创建的实例。如果一个数组来自于一个不同的框架,它就不是当前框架的数组,所以dojo.isArray会返回false。另外,arguments 对象并不是一个数组。你可以用dojo.isArrayLike(value)来检测这些类似数组的对象。
dojo.isFunction: 检查所传参数是不是一个函数对象。注意,这对于由dojo.declare 所创建的类(的构造函数)也一样有效。一个常见的模式是,得到一个字符串形式的类名全称,你
可以用dojo.isFunction来判断是否需要将其转换为一个函数:
view plaincopy to clipboardprint?
33// 需要动态地使用一个类
34var thing = "dijit.Dialog";
35// 先检查它是不是一个函数
36if(!dojo.isFunction(thing)){
37thing = dojo.getObject(thing);
38}
39var dialog = new thing({ title:"bar" });
// 需要动态地使用一个类var thing = "dijit.Dialog"; // 先检查它是不是一个函数
if(!dojo.isFunction(thing)){ thing = dojo.getObject(thing); } var dialog = new
thing({ title:"bar" });
当然,你也可以用dojo.isString 来做类似的事情。
dojo.isAlien用于检查所传参数是不是一个内建函数。
dojo.isObject用于检查所传参数是不是一个对象。
以上就是部分Dojo对于JavaScript的基础扩展函数,在下一部分中,会介绍Dojo对面向对象(OO)及包机制(package system)部分的一些常用函数。
部分Dojo常用函数简介(二)——面向对象(OO)及包机制(package system)
2011-04-15 20:46:04| 分类:dojo | 标签:dojo require mixin对象函数|字号订阅
每个Ajax 框架都对Javascript 做了扩展,提供了很多常用函数,增强了Javascript 的开发效率。在这里将对部分Dojo 中的常用函数做简单的介绍。由于Dojo的常用函数较多,也为方便大家阅读,将这些常用函数分为了五个类别分别进行介绍。本文将介绍第二部分的内容:面向对象(OO)及包机制(package system)常用函数。
* 本系列博文的绝大多数内容来自于对https://www.sodocs.net/doc/199798470.html,上的dojo reference guide文档的翻译,在此也特别感谢文档的翻译者们:Fei Jia, Zhu Xiao Wen, Li Wen Bing, Zhang Jun, Hu Kuang, Huang Wei, Wu Min Qi, Mo Ying, Cheng Fu, Zhong Si Qi
dojo.require
如果你想使用Dojo作为你的开发工具包,那么dojo.require是你必须要熟练掌握的。Dojo 采用了与Java语言类似的命名空间(namespace)、包(package)机制,Dojo的代码都被切分为各个模块存储在各个的包中,如果你需要用到Dojo中的某个模块,那么就需要首先调用dojo.require("modulename")来预先加载该模块,否则的话,script将会抛错提示"dojo.some not defined"。
dojo.require接收一个字符串参数,该参数为要进行加载的模块名。下面是一个简单的示例:
view plaincopy to clipboardprint?
1// 加载dojo/fx.js:
2dojo.require("dojo.fx");
3// 加载dojox/widget/Toaster.js:
4dojo.require("dojox.widget.Toaster");
// 加载dojo/fx.js: dojo.require("dojo.fx"); // 加载dojox/widget/Toaster.js:
dojo.require("dojox.widget.Toaster");
另外,由于各个模块之间有相互依赖性存在,用户想逐个判断并加载所有需要的模块是件很困难的事情,因此,dojo.require也提供了一些很不错的特性:
?自动载入所有依赖的模块:
例如,dijit.form.NumberTextBox 需要引用dojo.number ,那么当你使用
dijit.form.NumberTextBox时,则不需要再次声明引用dojo.number模块。
?预防多次载入:
当某个模块已经载入,再次声明引用相同模块,dojo.require会直接返回,而不会再次加载相同的模块。
?通过自定义打包机制快速载入所需模块:
用户可以通过dojo提供的打包机制构建定制化的dojo包,以快速载入模块。你可以通过定制化将会多次使用的模块预加载到dojo中,而由于dojo.require()的预防多次加载机制,你也不需要对代码进行修改。
那么你可能会问,那我是不是需要通过require机制来先载入dojo.require呢?答案当然是不。顶层dojo包中的所有函数都是自动加载的(如dojo.query(),dojo.byId(),等等)。这
些都是dojo的核心方法,都会在dojo引用中被频繁使用。就如同Java中的https://www.sodocs.net/doc/199798470.html,ng包,无需显式声明加载。
dojo.provide
与dojo.require相对应,dojo.provide是用于提供dojo模块名的函数。每一个Dojo类都必须在源代码文件开始处提供至少一个dojo.provide(),并和文件名相匹配. 例如在
"Js/dojo/foo.js"文件中,在调用任何"dojo.require()"前必须先添加
"dojo.provide('dojo.foo');" 。
下面的代码示例假设对应my/module.js 源文件,请注意dojo.provide的调用始终在dojo.require之前。
view plaincopy to clipboardprint?
5dojo.provide("my.module");
6dojo.require("dojo.io.script");
7//dojo.provide 确保my.module被创建为JavaScript对象以方便的进行属性赋值https://www.sodocs.net/doc/199798470.html, = "my module";
dojo.provide("my.module"); dojo.require("dojo.io.script"); //dojo.provide 确保my.module
被创建为JavaScript对象以方便的进行属性赋值https://www.sodocs.net/doc/199798470.html, = "my module";
注意,同一个文件中可以有多个dojo.provide,但在build脚本中一般只使用一个dojo.privide()以正确匹配文件名。
dojo.declare
JavaScript和Java不一样,它没有一个类系统,但是Dojo提供了一套模拟Java的类系统的机制:dojo.declare。
dojo.declare 接受如下的三个参数:
className: 字符串,可以为null,声明的类的名称,这个类名会被用作创建的构造子的全局名称,如果不指明名称,该类将被认为是匿名的(从V1.4开始),如果指明了名称,那么名字会被存储在创建的原型的属性”declaredClass”中。
superclass:一个对象或对象数组,也可以为null(没有基类),声明了该类的基类,当为该参数为数组时,说明该类有多个基类。
props:一个对象,此对象所有的属性将混入到被创建的原型中。
另外,通过将一个属性命名为”constructor”,你可以为创建的对象实例增加一个初始化函数。例子:
9dojo.declare("my.Thinger", null, {
10constructor: function(/* Object */args){
11dojo.safeMixin(this, args);
12}
13});
dojo.declare("my.Thinger", null, { constructor: function(/* Object
*/args){ dojo.safeMixin(this, args); } });
这里我们声明了一个不继承任何类的简单的类,名为my.Thinger 。该类最终含有一个名为constructor 的构造函数。
你可以这样创建一个my.Thinger 实例:
view plaincopy to clipboardprint?
14dojo.declare("my.Thinger", null, {
15count: 100,
16constructor: function(args){
17dojo.safeMixin(this, args);
18}
19});
20var thing1 = new my.Thinger();
21var thing2 = new my.Thinger({ count:200 });
22console.log(thing1.count, thing2.count);
dojo.declare("my.Thinger", null, { count: 100, constructor:
function(args){ dojo.safeMixin(this, args); } }); var thing1 = new my.Thinger(); var thing2 = new my.Thinger({ count:200 }); console.log(thing1.count, thing2.count);
dojo.mixin
dojo.mixin用于将对象混合在一起。所谓mixin(混入)是将两个对象从右到左组合起来,覆盖最左边的对象,并且返回混入后的对象给用户。Dojo的这个mixin非常类似于dojo.extend ,但它只能用于对象,而不像extend显式地扩展一个对象的原型
(object.prototype)。
mixin函数修改的是列表中第一个对象,将第二个对象(及以后所有对象)混入到第一个对象中。
23var a = { b:"c", d:"e" };
24dojo.mixin(a, { d:"f", g:"h" });
25console.log(a); // b:c, d:f, g:h
var a = { b:"c", d:"e" }; dojo.mixin(a, { d:"f", g:"h" }); console.log(a); // b:c, d:f, g:h
如果您希望创建一个全新的混合对象,有如下几种做法:第一种,用dojo.clone克隆现有对象,然后再混入:
view plaincopy to clipboardprint?
26var newObject = dojo.mixin(dojo.clone(a), b);
var newObject = dojo.mixin(dojo.clone(a), b);
另一种做法是,可以用一个空对象作为第一个参数,然后将其他对象混入到这个空对象里面。您可以不断重复这个过程:
view plaincopy to clipboardprint?
27var newObject = dojo.mixin({}, b);
28dojo.mixin(newObject, c);
29dojo.mixin(newObject, dojo.mixin(e, f));
30// 可以继续不断混入
var newObject = dojo.mixin({}, b); dojo.mixin(newObject, c); dojo.mixin(newObject,
dojo.mixin(e, f)); // 可以继续不断混入
只要记住作为第一个参数的对象实例总是会被改写,并且越右面的对象,其优先级越高。dojo.extend
dojo extend 的工作原理十分类似dojo.mixin, 区别在于它会直接作用于一个对象的原型(prototype)之上。和mixin一样,dojo.extend将其参数最右侧的对象的成员直接合并进入第一个参数的对象。
我们可以利用extend方法来扩展一个现有类的功能:
view plaincopy to clipboardprint?
31dojo.require("dijit.TitlePane");
32dojo.extend(dijit.TitlePane, {
33randomAttribute:"value"
34});
dojo.require("dijit.TitlePane"); dojo.extend(dijit.TitlePane, { randomAttribute:"value" }); dojo.exists
dojo.exists用于检查一个字符串中利用点号’.’分隔的所有对象是否存在,例如A.B.C 。dojo.exists 是一个很方便的方法,特别是在需要检测一个较长的对象路径时。它接受一个字符串作为它的第一个参数,该方法将试图沿着此字符串所表示的路径去检测此路径上所含的对象是否存在。第二个参数是可选的,可以设定一个对象作为前面所设的字符串所表示的路径的根。如果忽略第二个参数,则它将会默认使用全局对象作为根来进行检索。字符串中每个被’.’分隔的部分都会被检测是否定义过,只有当该路径上所有对象都存在时此方法才会返回true。
dojo.exists 的第一个参数是一个字符串表示要检测的对象路径,第二个参数是可选参数,是作为搜索该对象路径的根对象。返回值为一个boolean值。
view plaincopy to clipboardprint?
35// 检测一个控件是否存在
36var widgetType = "form.Button";
37var myNamespace = docs;
38if( dojo.exists(widgetType, myNamespace) ){
39console.log( "There's a docs.form.Button available");
40}else if( dojo.exists(widgetType, dijit) ){
41console.log( "Dijits form.Button class is available");
42}else{
43console.log( "No form.Button classes are available");
44}
// 检测一个控件是否存在var widgetType = "form.Button"; var myNamespace = docs;
if( dojo.exists(widgetType, myNamespace) ){ console.log( "There's a docs.form.Button available"); }else if( dojo.exists(widgetType, dijit) ){ console.log( "Dijits form.Button class is available"); }else{ console.log( "No form.Button classes are available"); }
dojo.clone
用于克隆对象或DOM节点,该函数返回一个克隆后的新对象。
view plaincopy to clipboardprint?
45// 克隆对象
46var obj = { a:"b", c:"d" };
47var thing = dojo.clone(obj);
48// 克隆数组
49var newarray = dojo.clone(["a","b","c"]);
// 克隆对象var obj = { a:"b", c:"d" }; var thing = dojo.clone(obj); // 克隆数组var newarray = dojo.clone(["a","b","c"]);
以上就是部分Dojo的面向对象(OO)及包机制(package system)常用函数,在下一部分中,会介绍关于页面生命周期及DOM相关的一些常用函数。
部分Dojo常用函数简介(三)——页面生命周期及DOM相关常用函数
2011-04-15 20:48:23| 分类:dojo | 标签:dojo节点dom函数query|字号订阅
每个Ajax 框架都对Javascript 做了扩展,提供了很多常用函数,增强了Javascript 的开发效率。在这里将对部分Dojo 中的常用函数做简单的介绍。由于Dojo的常用函数较多,也为方便大家阅读,将这些常用函数分为了五个类别分别进行介绍。本文将介绍第三部分的内容:页面生命周期及DOM相关常用函数。
* 本系列博文的绝大多数内容来自于对https://www.sodocs.net/doc/199798470.html,上的dojo reference guide文档的翻译,在此也特别感谢文档的翻译者们:Fei Jia, Zhu Xiao Wen, Li Wen Bing, Zhang Jun, Hu Kuang, Huang Wei, Wu Min Qi, Mo Ying, Cheng Fu, Zhong Si Qi
dojo.addOnLoad
如果想用好dojo,必须熟悉Dojo.addOnLoad,它提供了一种机制使作为参数传入该函数的语句及其他函数可以在整个页面的DOM加载完成之后运行。常见的一种情况是:
view plaincopy to clipboardprint?
1 3document.musicPrefs.other.value = "Afrobeat"; 4} 5// -->
6