笑着学习笔记Dojo入门

 

笑着-胖胖兰学习笔记Dojo入门

一，Dojo简介

Dojo是一个采用JS来实现的，封装了大量的常用功能的工具包，是一份DHTML Toolkit。Dojo采用了Ajax技术来实现客户端与服务器端的异步通信，从而实现无刷新页面情况下，客户端界面的快速反应。增强客户端界面的友好度。

 

二， Dojo的优点

第一，     提供了常用的功能的封装。

第二，     采用Ajax，从而具有了WEB2.0中Ajax的优点，可以使客户端页面事件及时得到反映，使得客户在使用服务器端提供的服务的时候，就好像是在使用本地应用程序一样。

第三，     Dojo的书写风格更加的面向对象。我们可以采用类似Java,.Net的类的风格来学习，是用它。

 

三， 需要了解的几个概念

1. RIA（Rich Interface Applications，富界面应用，俗称胖客户端）。RIA 具有的桌面应用程序的特点包括：在消息确认和格式编排方面提供互动用户界面；在无刷新页面之下提供快捷的界面响应时间；提供通用的用户界面特性如拖放式（drag and drop）以及在线和离线操作能力。

 

2. Ajax（Asynchronous JavaScript and XML，异步JavaScript和XML），它是指一种创建交互式网页应用的网页开发技术。优点：异步处理，通信数据少；缺点：在动态更新页面的情况下，用户无法回到前一个页面状态。

 

3. DOM（Document Object Model，对象文档模型），它将网页中的各个元素都看作一个个对象，从而使网页中的元素也可以被计算机语言获取或者编辑。 例如Javascript就可以利用HTML DOM动态的修改网页。

 

4. JSON（JavaScript Object Natation），它是一种轻量级的数据交换格式，非常适合于服务器与 JavaScript 的交互 ）JSON 已经是 JavaScript 标准的一部分。目前，主流的浏览器对 JSON 支持都非常完善。应用 JSON，我们可以从 XML 的解析中摆脱出来，对那些应用 Ajax 的 Web 2.0 网站来说，JSON 确实是目前最灵活的轻量级方案

 

 

四， Dojo常用包

Dojo 提供了上百个包，这些包分别放入三个一级命名空间：Dojo，Dijit和 DojoX 。其中：

1．Dojo 是核心功能包

2．Dijit 中存放的是 Dojo 所有的Widget 组件，

3．DojoX 则是一些扩展或试验功能，DojoX 中的试验功能在成熟之后有可能在后续版本中移入到 Dojo 或 Dijit 命名空间中。

 

Dojo常用的包如下：

dojo.io           不同的IO传输方式。script、IFrame等等；

   dojo.dnd          拖放功能的辅助API；

   dojo.string       字符串处理（修整、转换为大写、编码、esacpe、填充（pad）等等）；

   dojo.date         日期格式的解析；

   dojo.event        事件驱动的API，支持主题/队列的功能；

   dojo.back         用来撤销用户操作的栈管理器；

   dojo.rpc          后端服务（例如理解JSON语法的Web服务）通信；

   dojo.colors       颜色工具包；

   dojo.data         Dojo的统一数据访问接口，可以方便地读取XML、JSON 等不同格式的数据文件；

   dojo.fx           基本动画效果库；

   dojo.regexp       正则表达式处理函数库；

   dijit.forms       表单控件相关的Widget库；

   dijit.layout      页面布局Widget库；

   dijit.popup       以弹出窗口方式使用Widget；

   dojox.charting    各种统计图表的工具包；

   dojox.collections 集合数据结构（List、Query、Set、Stack、Dictionary...）；

   dojox.encoding    实现加密功能的API（Blowfish、MD5、Rijndael、SHA...）；

   dojox.math        数学函数（曲线、点、矩阵）；

   dojo.reflect      提供反射功能的函数库；

   dojox.storage     将数据保存在本地存储中（例如，在浏览器中利用Flash的本地存储来实现）；

   dojox.xml         XML解析工具包；

 

 

五， Dojo的使用

Dojo是采用JS来实现的，所以使用Dojo的时候，只要把dojo.js作为普通的js模块儿引入进来就可以了。另外，Dojo提供了djConfig对象来控制自己的一些基本的行为。基本使用原则如下：

1．  将djConfig对象定义到一个单独的js文件中（当然也可以直接写到html，jsp中，跟普通的js对象没有不同）以下为djConfig的默认设定

<script type="text/javascript"> var djConfig = { IsDebug: false, debugContainerId: "", bindEncoding: "", allowQueryConfig: false, baseScriptUri: "", parseWidgets: true searchIds: [], baseRelativePath: "", libraryScriptUri: "", iePreventClobber: false, ieClobberMinimal: true, preventBackButtonFix: true, }; </script>

2．  在开发中，首先引用djConfig的定义文件

3．  引入dojo

<script type="text/javascript" src="/yourpath/dojo.js" />

4．  声明需要使用到的包

<script type="text/javascript">      dojo.require("dojo.math");      dojo.require("dojo.io.*");      dojo.require("dojo.widget.*"); </script>

 

5．  使用dojo提供的功能

dojo.io.argsFromMap({a:1,b:2,c:3}); //will return "c=3&b=2&a=1"

6．  通过dojo.query（）来处理Dom等等

7．  使用dojo.addOnLoad()来指定网页初始化时的动作

dojo.addOnLoad(init); //init 是一个函数 dojo.addOnLoad(myObject, init); //init 是myObject 对象的一个方法

 

六， 与服务器交互

dojo.io.bind({ url: "http://localhost/test.html", //要请求的页面地址 mimetype: "text/html", //请求的页面的类型，应该设置为与你请求页面类型对应的 mimetype，默认为 "text/plain" method："GET", //默认为"GET" sync: false, //默认为异步执行 useCache: false, //默认为不使用页面缓存，注意这里的缓存并不是浏览器的缓存，而是Dojo自身所维护的页面缓存 preventCache: false, //默认为启用浏览器缓存，否则将通过自动增加不同的参数来确保浏览器缓存失效 timeoutSeconds: 3000, //3 秒后超时，如果为0 则永不超时 load: function(type, data, evt) { alert(data); }, //type should be "load", data is that we wanted error: function(type, error) { alert(error.message); }, //error is dojo.io.Error timeout: function(type) { alert("请求超时！"); } });

 

七， 事件处理

常用的事件处理（诸如button.onclick())只能绑定一个处理函数，而且解绑的方式比较不太合理

dojo的事件处理       绑定事件处理函数：       (/*Handle*/)dojo.connect = function(/*Object|null*/ obj,                               /*String*/ event,                               /*Object|null*/ context,                               /*String|Function*/ method,                               /*Boolean*/ dontFix)       解绑：dojo.disconnect = function(/*Handle*/ handle)

事件处理例子：

function $(id) { return document.getElementById(id); }  function handler(eventObj) {      console.info("eventType=" + eventObj.type + "; node="                  + eventObj.target.id + "; currentTarget=" + eventObj.currentTarget.id);  }  function handler2(eventObj) { console.info("this is for test"); }  function connect() {      dojo.connect($("book"), "click" , handler);      dojo.connect($("cpp"), "click" , handler);      dojo.connect($("b1"), "mouseover" , handler);      dojo.connect($("b1"), "mousedown" , handler);      dojo.connect($("b1"), "click" , handler);      dojo.connect($("b2"), "click" , handler);      dojo.connect($("b2"), "click" , handler2);      dojo.connect($("b3"), "click" , handler);  }  dojo.addOnLoad(connect);  </script>  <div id="book">  <ol id="cpp">           <li id="b1">C++ primer</li>           <li id="b2">Thinking in C++</li>           <li id="b3">Inside C++ object model</li>  </ol>  </div>

 

 

 

 

 

 

 

用户自定义事件处理例子：

   户自定义事件是指用户指定的函数被调用时触发的“事件”，

   当指定函数被调用时，将促发监听函数被调用。

<script type="text/javascript">     function print(fName, args) {        var message = "In " + fName + "; the arguments are: "        dojo.forEach(args, function(args) {           message += args.toString() + " ";        }) ;        console.log(message);     }     function handler1() { print("handler1", arguments); }     function handler2(a1, a2) { print("handler2", [a1, a2]); }     function userFunction() { print("userFunction", arguments); }     dojo.connect("userFunction", null, "handler1");     dojo.connect("userFunction", null, "handler2");     userFunction(1, 2);   </script>

 

八， 开发自己的Dojo程序模块儿

1．  使用dojo.provide("myNameSpace.myPackage");来声明模块儿

2．  使用dojo.resgisterModulePath(“myNameSpace”, “"../../path”)来引用模块儿

ppl.js文件  一般文件名与package名相同,namespace一般与文件某一父目录名相同。是否必须没有试验过。   dojo.provide("xz.ppl"); dojo.require("dojo.date.locale");   xz.ppl = {//xz为NameSpace  ppl为package         lengthType : {CHAR : 1, BYTE : 2},         checkPPL : function(checkElement, errorMessage) {         } }   ppl.html   dojo.registerModulePath("xz", "../../xzpath"); dojo.require("xz.ppl");

 

九， Dojo API

    http://api.dojotoolkit.org/