最近在学习arcgis javascript api，javascript api是基于Dojo，所以先熟悉一下Dojo。

DOJO常用的：

1，通过dojo.require以类似C编程中#include或者Java中import的方式加载所需的部件
如dojo.require("dojo.parser");dojo.require("dijit.form.Button");
2，跨域自定义模块
Dojo配置，djConfig="baseUrl:'./'"
注册模块的路径，dojo.registerModulePath("dtdg","./dtdg");
加载自定义模块，dojo.require("dtdg.foo");
3，本地工具箱模块
直接加载自定义模块，dojo.require("dtdg.foo");
4，为对象注册事件
dojo.connect();
5，json和字符串之间转换
dojo.fromJson(/*String*/ json);//返回JavaScript对象，json对象
dojo.toJson(/*Object*/ json, /*Boolean*/ prettyPrint);//返回字符串
6，Ajax通信
dojo.xhrGet(/*Object*/ args);dojo.xhrPost(/*Object*/ args);
dojo.xhr(/*String*/ method, /*Object*/ args, /*Boolean?*/ hasBody);
7，本地化
djConfig="dojo.local:'zh'"
8，控件、布局等都在dijit中

介绍

每个流行的工具包中，总有一些异常出彩的闪光点。dojo.connect就是dojo工具包中，与JavaScript事件机制相关的重磅功能。
在JavaScript的使用场景中，我们经常需要侦听某些事件的触发，然后进行相应的（函数）处理。比如最常见的，当点击登录页面的登录节点时，JavaScript能够察觉到，并随之将用户登录信息发送到后台。下面先来看看dojo.connect的参数[http://docs.dojocampus.org/dojo/connect]：

dojo.connect(obj, event, context, method, dontFix);

参数	类型	描述
obj	Object\|null	事件关联的对象。最常见的是DOM node，关联的事件会被委托到DOM事件管理器（除非dontFix为true）；也可以是其他JavaScript Object；或者干脆就是null，这时就是默认为dojo.global （window）。
event	String	上面obj需要关联的事件的名称。比如DOM node的”onclick”之类的。
context	Object\|null	前面两个参数讲的都是关联的“源”，这儿开始就是讲关联的“目标”了。context为后面的method提供了执行上下文环境，相当于method的this。如果context为null且method是一个function，则method会继承event的context。如果method是一个string，则context必须是method的源对象。如果context为null，则默认为dojo.global。
method	String\|Function	当event被触发后调用的目标函数。可以是函数引用，或者context中的函数名称。此method会拿到和事件同样的参数。
dontFix	Boolean	可选项。如果obj参数是DOM node，当设置dontFix为true时，可以阻止关联被委托到DOM事件管理器。（貌似很强大的功能）

从表面上看，dojo.connect就是一个单纯的函数，完成单纯的事件关联功能。但由于支持参数的灵活配置及和其他dojo函数的有机组合，有时候可以造成一些奇妙效果。而探索这些效果并用于解决一些特定的问题，正是技术的魅力所在吧！
这儿很浅显地讨论一些目前能想到的dojo.connect特性。也欢迎有兴趣的同志给出更多的应用场景。

关联事件，不仅仅是DOM Event

当然dojo.connect最常用的地方还是关联DOM Event。但之所以先撇开DOM不谈，一方面是在用惯（烦？）了用dojo.connect关联DOM Event的方式后，对非DOM的事件关联正有新鲜感，另一方面，通过下面的例子，也可以帮助更好地理解上面dojo.connect的参数说明。
首先是一个比较“官方”的例子：

function a(){  console.log("a")
};
function b(){  console.log("b");
}
dojo.connect(null,"a",null,b);
a();

执行结果：a

意思是，只要执行了函数a()，函数b()会同时被调用。这个没有任何实际意义的例子对大家可能不太有吸引力。那下面就举一个context更复杂的实际例子：现在我们有一个页面，上面内嵌了带一个dijit.layout.ContentPane的dijit.layout.TabContainer。content pane里面是页面内容。当点击上面的save按钮时，输入框中的内容就会被保存，且同时在页面上出现保存提示。从需求中可以看到，“出现提示”这个功能是伴随着其他事件的发生而发生的，因此这儿就可以用dojo.connect来实现。代码如下：

<html>  <head>  <title>Test dojo.connect</title>  <link rel="stylesheet" type="text/css" href="js/dojo-1.5.0/dijit/themes/dijit.css" mce_href="js/dojo-1.5.0/dijit/themes/dijit.css"></link>  <link rel="stylesheet" type="text/css" href="js/dojo-1.5.0/dijit/themes/tundra/tundra.css" mce_href="js/dojo-1.5.0/dijit/themes/tundra/tundra.css"></link>  <mce:script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" mce_src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" djConfig="parseOnLoad:false"></mce:script>  <mce:script type="text/javascript"><!--  dojo.require("dojo.parser");  dojo.require("dijit.layout.TabContainer");  dojo.require("dijit.layout.ContentPane");  dojo.addOnLoad(function(){  dojo.declare("Test", [ dijit.layout.ContentPane ], {  postCreate: function(){  dojo.connect(this,"save",null,this.showMsg);  dojo.connect(dojo.byId("save"), "onclick", this, this.save);  },  save:function(){  console.log("save");  },  showMsg:function(){  var node = dojo.byId("showMsg");  node.innerHTML = "You are saving your mostly used dojo object...";  dojo.style(node, "display","block");  }  });  dojo.parser.parse();  });  // --></mce:script>  </head>  <body class="tundra">  <div style="width: 800px; height: 200px">  <div dojoType="dijit.layout.TabContainer" style="width: 100%; height: 100%;">  <div dojoType="Test" title="Space" id="cp">  <div style="background-color:yellow;display:none;" mce_style="background-color:yellow;display:none;" id="showMsg">  </div>  <br/>  Please input your mostly used dojo object:  <br/>  <input type="text" id="text"/>  <br/>  <input type="button" id="save" value="Save" />  </div>  </div>  </div>  </body>
</html>

这儿dojo.connect(this,"save",null,this.showMsg)中，由于save函数属于Test，因此dojo.connect的第一个参数必须指定save的对象是this。第二个参数给定关联的事件为save。第四个参数也需要指定正确的关联目标事件，也就是this中的showMsg函数。还有一种等价的写法就是：dojo.connect(this,"save", this,”showMsg”)。
现在开发者决定在页面上增加一个reset按钮，当点击时，输入框中的内容则会被清楚，同时出现清除内容提示。可以看到，同样是显示提示的需求，我们可以采用与关联save相同的办法将reset与showMsg关联。更多的，为了在不同的事件触发showMsg后会显示不同内容的提示，需要对dojo.connect的参数做一些变动。例子如下：

<html>  <head>  <title>Test Startup</title>  <link rel="stylesheet" type="text/css" href="js/dojo-1.5.0/dijit/themes/dijit.css" mce_href="js/dojo-1.5.0/dijit/themes/dijit.css"></link>  <link rel="stylesheet" type="text/css" href="js/dojo-1.5.0/dijit/themes/tundra/tundra.css" mce_href="js/dojo-1.5.0/dijit/themes/tundra/tundra.css"></link>  <mce:script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" mce_src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" djConfig="parseOnLoad:false"></mce:script>  <mce:script type="text/javascript"><!--  dojo.require("dojo.parser");  dojo.require("dijit.layout.TabContainer");  dojo.require("dijit.layout.ContentPane");  dojo.addOnLoad(function(){  dojo.declare("Test", [ dijit.layout.ContentPane ], {  postCreate: function(){  dojo.connect(this,"save",{"msg":"You are saving your mostly used dojo object..."},this.showMsg);  dojo.connect(this,"reset",{"msg":"Your input is reset"},this.showMsg);  dojo.connect(dojo.byId("save"), "onclick", this, this.save);  dojo.connect(dojo.byId("reset"), "onclick", this, this.reset);  },  save:function(){  console.log("save");  },  reset:function(){  dojo.byId("text").value = "";  },  showMsg:function(){  console.log("showMsg");  var node = dojo.byId("showMsg");  node.innerHTML = this.msg;  dojo.style(node, "display","block");  }  });  dojo.parser.parse();  });  // --></mce:script>  </head>  <body class="tundra">  <div style="width: 800px; height: 200px">  <div dojoType="dijit.layout.TabContainer" style="width: 100%; height: 100%;">  <div dojoType="Test" title="Space" id="cp">  <div style="background-color:yellow;display:none;" mce_style="background-color:yellow;display:none;" id="showMsg">  </div>  <br/>  Please input your mostly used dojo object:  <br/>  <input type="text" id="text"/>  <br/>  <input type="button" id="reset" value="Reset" />  <input type="button" id="save" value="Save" />  </div>  </div>  </div>  </body>
</html>

在最新的dojo.connect(this,"save",{"msg":"You are saving your mostly used dojo object..."},this.showMsg) 中，第三个参数变成了一个自定义对象，并在showMsg中用this取到值后显示相应的提示信息。想象一下如果有很多个按钮的点击事件需要关联showMsg函数，比起在每个事件中直接调用showMsg，像例子中这样集中用dojo.connect进行事件关联，将会大大提高代码的整洁性和可扩展性。更进一步可以将上面的dojo.connect调用改造成：

var list = [  {  func:"save",  msg:"You are saving your mostly used dojo object..."  },  {  func:"reset",  msg:"Your input is reset"  }];
var that = this;
dojo.forEach(list, function(item){  dojo.connect(that, item.func, item, that.showMsg);
});

最后总结一下，dojo.connect在非DOM event的事件关联应用中，也可以扮演关键角色，在实现功能的同时，提高代码的整洁性和可扩展性。

转自：http://blog.csdn.net/eengel/article/details/6416550

http://www.cnblogs.com/gisland/archive/2010/09/03/1816922.html

dojo初解和dojo.connect用法（转）相关推荐

Dojo Charting 控件高级用法
现如今,随着 web2.0 及其相关技术越来越流行,web 矢量图技术也变得越来越重要,尤其是在 web 数据的可视化方面,矢量图技术发挥着不可磨灭的作用.Dojo,一个流行且强大的 web 开发控件 ...
dojo Quick Start/dojo入门手册--开始使用dojo.js
2006年初,dojo还是0.22的时候就很关注它的发展,可一直没有在实际项目中使用.一来是由于文档的缺少,而来是dojo的相关介绍总是让人望而生畏. 到现在都如此,第一个hello world就搞了 ...
Dojo学习笔记(8. dojo.event dojo.event.topic dojo.event.browser)
Dojo学习笔记(8. dojo.event & dojo.event.topic & dojo.event.browser) 模块:dojo.event 终于进入有名的dojo事件处 ...
dojo Quick Start/dojo入门手册--xmlhttp dojo.xhrGet
OK,介绍了简单的DOM操作方法,接下来该到Ajax的传统项目-XmlHttp了.在使用xmlhttp时,需要注意到编码的问题,要让dojo默认绑定为utf-8怎么办呢?很简单,只需要修改一下引入do ...
dojo中的dojo/dom-style
作用:DOM节点获取或设置样式. 用法: // Dojo 1.7+ (AMD) require(["dojo/dom-style"], function(domStyle){dom ...
dojo.publish 和 dojo.subscribe
这俩个函数都与事件紧密相关. -- dojo.subscribe(/*String*/topic, /*Object|null*/context, /*String|Function*/method) ...
dojo 九 effects dojo/_base/fx 和 dojo/fx
官方教程:Dojo Effects 这里讲学习一下dojo如何实现淡入.淡出.滑动等效果. 实现这些特殊的效果有两个包 dojo/_base/fx 和 dojo/fx. dojo/_base/fx 中 ...
Dojo API中文 Dojo内容模块概览，初学者
官网:http://dojotoolkit.org/reference-guide/1.10/dojo/index.html#dojo-dojo的翻译 dojo 内容: dojo dojo/dojo ...
dojo 官方翻译 dojo/_base/array 版本1.10
官方地址:http://dojotoolkit.org/reference-guide/1.10/dojo/_base/array.html#dojo-base-array array模块dojo进行 ...

dojo初解和dojo.connect用法（转）

DOJO常用的：

介绍

关联事件，不仅仅是DOM Event

dojo初解和dojo.connect用法（转）相关推荐

最新文章

热门文章