最近复用十几年前的一个项目，里面用到了dojo框架，so总结一下这个框架的一些重要的知识点

简介

Dojo的全称是Dojo Toolkit，始创于2004年，是当时各种蓬勃发展的JS工具包中的佼佼者。Dojo 为富互联网应用程序(RIA) 的开发提供了完整的端到端的解决方案，包括核心的 JavaScript 库，简单易用的小部件（Widget）系统和一个测试框架。

Dojo特性

Dojo Toolkit 的特性可以分到 4 个不同部分。这种划分使得开发人员可以将库大小保持到最小，确保应用程序性能不受大量 JavaScript 库下载的影响。例如，如果您只需要 Ajax 支持性能，您只需要包含 base 包；不需要包含扩展的 Dijit UI 组件。

Base

Base 包提供 Dojo Toolkit 的基础，包括一些功能，比如 DOM 使用函数、CSS3 基于选择器的 DOM 查询、事件处理、基本的动画、以及 Dojo 基于类的面向对象特性。

Core

Core 包包含一些 Base 中没有包含的附加特性。通常，这些特性不像 Base 中的特性那样频繁使用；因此，它们单独加载减轻 Base 包的负担。从这一点上来讲，Core 包提供一些实际有用的组件，包括高级动画拖放、I/O、数据管理、国际化（i18n）、浏览器历史管理。

Dijit

Dijit 包包含 Dojo 小部件和组件的扩展 UI 库。这些小部件的一些示例包括对话框、日历、调色板、工具提示和树。它也包括一些表单控件，这比标准 HTML 表单控件提供更多的功能，还有一些完整的布局管理选项。

DojoX

Dojo eXtensions (DojoX) 包含工具箱的各个子项目。位于 DojoX 中的大多数是实验特性，但是也有一些稳定组件和特性。

DOM操作方法

dojo.byId

dojo.byId 函数使您可以通过 id 属性选择一个 DOM 节点。该函数是标准document.getElementById 函数的一个别名，但是显然简短易书写。

dojo.query

虽然dojo.byId可以方便的根据id来获取一个DOM节点，但是根据id获取每一个元素几乎是不可能的，因为id是唯一标识。如果一次想获取几个元素，我们可以通过dojo.query方法。

dojo.body

dojo.body方法返回document的body元素

dojo.addOnLoad

现在我们想在window.onload里面处理一点东西，就像Ext.onReady，这个东西在dojo里叫做dojo.addOnLoad。

dojo.create

dojo.create方法创建一个元素

dojo.destroy

dojo.destroy方法会从父元素中删除该元素，并删掉该元素的所有子元素

dojo.empty

dojo.empty方法将删除掉所有子元素

dojo.forEach

dojo.forEach方法允许为数组或NodeList定义一个迭代器，来访问数组或NodeList中的每一项，并提供相应的操作。这个方法会忽略返回值，并且是不支持break的。

事件处理

dojo使用connect方法为DOM添加事件处理函数。

<script type="text/javascript">function btnClick() {alert("我被点击了");}var btn = dojo.byId("btn");dojo.connect(btn, "onclick", btnClick);
</script>

如果需要移除一个事件，则需要调用dojo.disconnect方法，这个方法需要一个dojo.connect方法的返回值作为参数：

var handle = dojo.connect(btn, "onclick", btnClick);
dojo.disconnect(handle);

订阅/发布

这是dojo很值得关注的一个功能，它使得各个dojo组件可以方便的交互。这个功能使用起来很方便：

<input type="text" name="txtMessage" value="" id="txtMessage" />
<input type="button" name="btn" value="发布…" id="btnPublish" />
<script type="text/javascript">dojo.addOnLoad(function () {//订阅MesagePublish主题dojo.subscribe("MessagePublish", function (msg) {alert(msg);});var btnPublish = dojo.byId("btnPublish");dojo.connect(btnPublish, "onclick", function () {//发布主题dojo.publish("MessagePublish", dojo.byId("txtMessage").value);});});
</script>

如要取消一个订阅，需要使用dojo.unsubscribe方法，这个方法需要一个由dojo.subscribe返回的句柄，其处理方式和dojo.connect、dojo.disconnect 的方式一样。

xmlhttp dojo.xhrGet

发出一个xmlhttp请求

function sayHello() {dojo.xhrGet({url: "http://localhost/hello/sayHello.jsp",handleAs: "text",load: function(responseText){alert(responseText);dojo.byId("divHello").innerHTML = responseText;},error: function(response){alert("Error");}});
}
dojo.connect(btn,"onclick",sayHello);

handleAs 把获取的内容作为text/html ；load 成功时的回调函数；error 失败时的回调函数

传入参数

var params = {username:'Mark',id:'105'
}
dojo.xhrGet({url: "http://localhost/hello/sayHello.jsp",content:params,//...
});

注意那个content参数，你要传入的参数是个关联数组/object，dojo会自动把参数解析出来，要使用post方法？ dojo.xhrGet ---> dojo.xhrPost ，其他的还有，dojo.xhrPut、dojo.xhrDelete。

dojo.hitch

既然用到了xmlhttp，一个常见的问题就是回调函数的scope/context。在prototype、mootools里我们常用Function.bind，在dojo中，做相同事情的东西叫做dojo.hitch。

var handler = {name:'Mark',execute1: function(){dojo.xhrGet({url: "http://localhost/hello/sayHello.jsp",handleAs: "text",error: function(text){console.dir(this);alert(this.name);//输出undefined,这里的this表示当前io参数}//...});},load: function(text){alert(this.name);},execute2: function(){dojo.xhrGet({url: "http://localhost/hello/sayHello.jsp",handleAs: "text",error: dojo.hitch(this,"load") //输出Mark//error: dojo.hitch(this,this.load); //与上一句相同,知道为什么要用方法名字而不是引用了吧?省去了长长的一串this.xxx//...});}
}

面向对象

（1）定义Class

dojo.declare("Customer",null,{constructor:function(name){this.name = name;},say:function(){alert("Hello " + this.name);},getDiscount:function(){alert("Discount is 1.0");}
});
var customer1 = new Customer("Mark");
customer1.say();

（2）继承

dojo.declare("VIP",Customer,{getDiscount:function(){alert("Discount is 0.8");}
});
var vip = new VIP("Mark");
vip.say();
vip.getDiscount();

（3）this.inherited方法调用父类

dojo.declare("VIP",Customer,{getDiscount:function(){this.inherited(arguments);//this.inherited("getDiscount",arguments);}
});

（4）关于构造函数　

constructor:function(args){var args = args || {};this.name = args.name;this.age = args.age;
}

（5）多继承,mixin　　

dojo.declare("Customer",null,{say:function(){alert("Hello Customer");},getDiscount:function(){alert("Discount in Customer");}
});
dojo.declare("MixinClass",null,{say:function(){alert("Hello mixin");},foo:function(){alert("foo in MixinClass");}
});
dojo.declare("VIP",[Customer,MixinClass],{
});
var vip = new VIP();
vip.getDiscount();
vip.foo();
vip.say();//输出"Hello MixinClass"

子类自动获得父类和mixin的所有方法，后面的mixin的同名方法覆盖前面的方法。

package机制

（1）dojo.require

dojo.require就是引入相应路径文件下的js文件。现在我们假设要用project/dojo-lib/dojo/string.js

dojo中的顶层目录就是dojo.js所在目录的上一层,即"project/dojo-lib/"，而dojo.js放在project/dojo-lib/dojo/dojo.js 所以我们就这样:

dojo.require("dojo.string");

（2）dojo.provide

要自己编写一个package怎么办，那就利用dojo.provide。比如要写在：project/dojo-lib/com/javaeye/fyting/Package1.js 那么在对应的Package1.js中第一行需要这样写:

dojo.provide("com.javaeye.fyting.Package1");

（3）dojo.registerModulePath

那要是我写的js文件不想和dojo放在一起怎么办呢，那就用registerModulePath。假设要放在：

project/js/com/javaeye/fyting/Package2.js

Package2.js和上面的Package1.js一样的写法，不需要作特殊变化，就这样就行：

dojo.provide("com.javaeye.fyting.Package2");

在使用时，需要指名这个Package2.js所在的位置，
dojo.registerModulePath("com","../../js/com");
只需要注意这里的相对路径是相对dojo.js来的。

我们假设所有以com.javaeye开头的js都放在一起，而com.microsoft的放在另外的地方，为了防止冲突，可以这样:
dojo.registerModulePath("com.javaeye","../../js/com/javaeye");
dojo.registerModulePath("com.microsoft","../../javascript/com/microsoft");

dojo框架的基本认识相关推荐

如臂使指——Dojo框架下让浮动窗口跟随鼠标而动
介绍在web应用的很多场合,需要让浮动窗口跟随鼠标而动.比如这儿举的一个例子:当用户选中网页上一段内容时,弹出工具条让用户进行标记.可以想象一下,有一个在线看书的应用,支持读者在阅读的时候随时做笔记 ...
Dojo：不容忽视的RIA框架
2019独角兽企业重金招聘Python工程师标准>>> Dojo:不容忽视的RIA框架作者王沛发布于 2010年12月9日领域语言 & 开发主题 Dojo , ...
dojo/request模块整体架构解析
总体说明做前端当然少不了ajax的使用,使用dojo的童鞋都知道dojo是基于模块化管理的前端框架,其中对ajax的处理位于dojo/request模块.一般情况下我们使用ajax请求只需要引入do ...
dojo/aspect源码解析
dojo/aspect模块是dojo框架中对于AOP的实现.关于AOP的详细解释请读者另行查看其它资料,这里简单复习一下AOP中的基本概念: 切面(Aspect):其实就是共有功能的实现.如日志切面. ...
dojo 加载自定义module的路径问题
因为最近想学学ArcGIS API for JavaScript ,翻了下ESRI的官网guide,发现其是基于dojo框架的,看了两页实在看不懂,于是先来熟悉下dojo框架.人蠢不能怪社会%> ...
Dojo学习笔记一: 认识Dojo
打算利用一些时间系统并且略深层次的学习一下Dojo这个框架,一个基于JavaScript脚本语言的集合. Dojo不但提供各式各样的Javascript标准库方法,还包含了功能丰富的 ...
【dojo】dojo.ready(dojo.addOnLoad) “前传”
最近的项目中使用了dojo框架,每个页面中大量使用了 dojo.ready 来完成页面初始化的工作.但因为某种原因,需要在所有的 dojo.ready 之前做一些事. 对于 dojo 1.6 以前(包 ...
php顶级框架,诗意的边缘：PHP顶级框架Zend Framework开发实战
<诗意的边缘:PHP顶级框架Zend Framework开发实战> 前言第1部分开发前的准备工作第1章创建开发环境2 1.1 配置开发环境3 1.1.1 Windows系统下XA ...
Ajax应用开发：实践者指南
目前的Web应用开发基本上都是围绕富互联网应用(Rich Internet Application,RIA)展开.RIA的实现技术有很多种:Ajax.Flash.JavaFX和Sliverlight等 ...

dojo框架的基本认识

简介