实战Dojo工具包

）。支持基于标记的 应用开发（例如：XAML、XUL） • dojo.xml、dojo.dom：帮助你处理DOM的辅助函数，以及其他的XML辅助函数。我们将在这 个例子中使用dojo.dom。 • dojo.style：CSS功能，例如访问 style的大小、与浏览器的盒模型配合工作，以及更多的功 能。 这确实是一个很长的列表，然而这个列表仍然未能公正地体现这个框架所做的工作。如果你使用 Dojo，在开始编写一些基础的代码之前，最好先在框架中搜索一下这些功能，很可能别的某个人已经为 你完成了这些功能！ 你很快会发现，如果你想要建造任何严肃的Ajax应用，Dojo能够为你提供大量的帮助。它可以帮助 你从 hack少量的onclick事件，升级到编写具有专业品质的JavaScript应用。 3 设置和配置Dojo 通常你是如何设置和配置一个JavaScript库的呢？你是不是简单地将JavaScript文件拷贝过来，放 在 Web服务器上，然后通过 3.2 动态加载package 以编程的方式请求 package，使得它们可以为你所用，这不是很好的事情吗？我的意思是说，我们在其他 语言中一直都是这样做的。我们在 C中使用include，在Java中使用import，在Perl中使用use，在Ruby中 使用require。 Dojo团队也想要这样做，他们将这个功能加入了平台中。如果你需要使用一个尚未下载的package，你只 需要这样做：请求这个package！ 在我们的例子中，我们将请求拖放、事件系统和fx这 3个package： 对 require方法的调用将会动态获取那些package所需的JavaScript代码，并且将它们加载进页面中。 你也可以编写你自己package，并且也可以加载你的名字空间。每个包中有一些元数据来告诉请求加载器它真 正需要什么。 例如，这里是包含有拖放package的元数据的__package__.js文件： dojo.hostenv.conditionalLoadModule({ common: ["dojo.dnd.DragAndDrop"], browser: ["dojo.dnd.HtmlDragAndDrop"] }); dojo.hostenv.moduleLoaded("dojo.dnd.*"); 你将会注意到，依赖于宿主环境，在运行时可以加载不同的源文件。如果你不是在一个浏览器中运行 Dojo，你就不需要加载HtmlDragAndDrop的源文件。 3.3 定制的创建 动态地延迟加载（lazily loading）需要的JavaScript代码是很棒的，但是开发完成之后，你可能想要 创建一个JavaScript文件，里面包含所有你的应用所需要的代码。 很幸运，Dojo有一个创建系统，可以帮助你来做这件事。你需要下载源文件，并且从这里开始工作。源 文件保存在Subversion中，代码库在：http://svn.dojotoolkit.org/dojo/trunk/（从项目的HEAD分支中获 取）。 我们可以讨论如何制作定制的创建，但是我们先将它放在一边，回到我们的应用上来。 4 应用：旅行路线编辑器 现在我们已经知道如何设置Dojo了，我们来使用它，将它的一些package使用在一个真实的应用中。这 个页面是一个旅行路线编辑器，你可以使用它来： • 为你的旅程添加和删除天 • 在每一天中添加和删除要访问的站点。 • 在不同的天之间拖放站点。 所有的这些活动将在一个Ajax界面中完成。一个页面，很多操作。这个页面是整个过程中的第二步，在 这里用户已经选择了站点并且完成了初始的放置。 屏幕看起来像是这样： 我们来开发这些功能。 5 DOM和 HTML效果 我们首先应该做什么呢？似乎应该是开发在路线中添加新的一天的功能。为了做这件事，我们需要建造新 的一天所需的HTML，包括它的标题、一个空的集合（因为还没有为它添加站点）等等。 我们能够使用DOM来建造这些，但是如果我们能够只做一个拷贝，这将变得更加容易。为了做这件事，我 们可以在HTML中加入一个空的表格，但是不显示它。 这是一组包含列表的div，模板代码的作用是作为一个占位符（例如 EMPTY DAY，而不是天号的标题，以 及特殊的id，用来在程序中获取）： 5.1 处理DOM 为了创建新的一天，我们需要为上面那段 HTML制作一个拷贝，并且将它放置在文档中的正确位置。 为了完成这个工作，我们可以使用一些Dojo的辅助方法： • dojo.byId：我确信你输入 document.getElementById()的次数比你参加宴会的次数还要多。这个 简单的辅助方法不仅使你少输入一些字符，而且使你既可以传入一个文本id，也可以传入一个节 点本身。这是一种实用主义的做法，它意味着你可以忘记你拥有的实际上是什么，它照样可以工 作。有些读者可能会想到这看起来有点像Prototype中的函数$(id)，的确如此。为何Dojo没有 决定使用一个更短的名称，例如$呢？因为他们并不想污染名字空间。$用起来很棒，但是如果别 人也定义了$，并且定义略有不同，那么会怎样？这样就会有问题了。$()函数有另外一个很好的 特征，它可以接受多个id/节点，并且返回它们。你可以在Dojo中使用dojo.byIdArray()来做相 同的事情。将“dojo.”放在大多数调用之前的原因是Dojo通过 package的语义来保证我们不会 遇到这种类型的冲突。 • dojo.dom.insertBefore(newElement, elementBefore); dojo.dom拥有大量的dom辅助方法，可 以帮助你更好地处理DOM（DOM处理在Ajax开发中不是一件痛苦的事情吗？）我们使用这个功能 来将新的一天放置在上一天（unused-sites）之前。 AddDay()方法完整的代码如下所示。这里有一点冗余，因为它必须要重置新的天号的id，增加总共的天 数，等等： function addDay() { var lastDay = dojo.byId("unused-sites"); var emptyDayTemplate = dojo.byId("empty-new-day"); numberOfDays++; // we have one more day now var newDay = emptyDayTemplate.cloneNode(true); newDay.id = "fullday-" + numberOfDays; // set the title newDay.childNodes[1].childNodes[1].nodeValue = "day " + numberOfDays; // set the new ol id var ol = newDay.childNodes[3]; ol.id = "day-" + numberOfDays; // set the new empty li id var li = ol.childNodes[1]; li.id = "empty-day-" + numberOfDays; setupDayForDND(newDay); // drag and drop explained later dojo.dom.insertBefore(newDay, lastDay); dojo.fx.wipeIn(newDay, 500); // effect below } 你可以看到大量 标准 excel标准偏差excel标准偏差函数exl标准差函数国标检验抽样标准表免费下载红头文件格式标准下载 的DOM方法，例如node.cloneNode(true)，正是这个调用拷贝了空的一天的模板，然 后我们更新其中的字段。我们传递 true标志告诉DOM需要拷贝节点中的节点，进行深度遍历。 还有哪些其他的dojo.dom辅助方法？ 你也许能够从名称上判断出这些跨浏览器的辅助方法是做什么的： • dojo.dom.isNode • dojo.dom.getTagName • dojo.dom.firstElement • dojo.dom.lastElement • dojo.dom.nextElement • dojo.dom.prevElement • dojo.dom.moveChildren (srcNode, destNode, trim) • dojo.dom.copyChildren (srcNode, destNode, trim) • dojo.dom.removeChildren(node) • dojo.dom.replaceChildren(node, newChild) • dojo.dom.removeNode(node) • dojo.dom.getAncestors • dojo.dom.getAncestorsByTag • dojo.dom.innerXML • dojo.dom.createDocumentFromText • dojo.dom.prependChild • dojo.dom.insertAfter • dojo.dom.insertAtPosition • dojo.dom.textContent: 实现了DOM Level 3的属性 5.2 Dojo的 HTML效果 我们使用dojo.dom来加入新的一天，但是仅仅这样做还不够好。我们并不想使用户的视线移动，我们想 在文档改变的地方，同时显示这个变化。 Script.aculo.us因为它的killer级的效果库而广为人知，但是很多人并不知道 Dojo也有自己的效果库。 我们选择使用dojo.lfx.wipeIn()来处理这个节点，使得产生的效果好象是将百叶窗关上。 然而我们不必将它擦去。也许你更加喜欢一种淡入/淡出/隐藏的渐变效果、一种幻灯片播放的效果、一种 颜色渐变/高亮的效果、或者一种向外/向内的爆炸效果？Dojo支持所有这些效果，并且它们都使用一行代码 即可完成，并且还支持为效果添加回调函数的能力。 这些效果可能看起来不过是像口红一样的点缀，无关大局，但是它们为你的应用增添了光泽，使得你的用 户发出“喔”的一声赞叹，并且它们对于改善应用的可用性也大有帮助。 尽管如此，还要记住一个警告，就是你不要想将页面上的所有操作方式都推翻。如果我们这样做，人们会 认为我们是 Flash开发者。 6 使用dojo.io.bind()的Ajax远程调用 我们来为这个应用添加一些Ajax功能。我们想要使用户以一种响应迅速的方式删除天和站点。我们不需 要页面的刷新，我们仅仅想要愉快地在用户界面上处理天和站点。 然而，我们不能仅仅从屏幕上删除元素，而不告诉后端，否则天/站点将仍然存在于后端的状态中。 这意味着我们应该遵循一个通用的模式： • 通过 DOM来动态改变用户界面 • 发送 Ajax请求到后端，告诉后端发生的这个变化（例如，为这个用户删除了第 5天） 这里是我们用来删除天的高层函数： function deleteDay(removeDay) { if (confirm('Are you sure you want to delete this entire day?')) { // get the actual li site node from the remove button var day = removeDay.parentNode.parentNode.parentNode; fadeAndRemove(day); // call the back-end remoteDeleteDay(day); return true; } else { return false; } } 我们确信这个用户想要除去这一天（而不是不小心点击了鼠标），然后我们取消了这一天。 6.1.1 淡出和移除 首先我们通过函数 fadeAndRemove(day)优雅地从用户界面中除去了这一天： function fadeAndRemove(e) { dojo.lfx.fadeHide(e,1000,dojo.lfx.easeIn, function(nodes) { dojo.lang.forEach(nodes, dom.removeNode); } ).play(); } 这里再次展示了dojo.dom和 dojo.fx的组合使用。我们请求 Dojo来淡出指定的元素（在这里是天），并 且为它传递一个回调函数，当淡出完成后调用。那个闭包得到了指定的节点，当调用完成时，fadeHide函数 很好地为你除去了这个节点。forEach方法展示了可以通过 dojo.lang来使用的迭代器的用法。 新的dojo.lfx包有一个新的dojo.lfx.propertyAnimation方法，允许你传递很多属性，以一种简单的方 式来定制动画的效果。 例如，要实现一个简单的淡入效果，你可以使用： dojo.lfx.fadeIn(node, 200, dojo.lfx.easeOut, callback).play(); 在更低的层次你可以这样来写： dojo.lfx.propertyAnimation(node, [ { property: opacity, start: 0, end: 1 } ], 200).play(); 现在你可以添加越来越多的属性到数组中，以创造各种生动有趣的动画效果。 6.1.2 使用XMLHttpRequest来告诉服务器发生了什么 remoteDeleteDay()调用通过 Dojo来（可能）使用XMLHttpRequest与服务器通信。 当人们在谈论Ajax的时候，你常常会看到大量关于如何实现 XMLHttpRequest对象的跨浏览器封装的例行 讨论，以及像“4”那样奇怪的状态代码。 Dojo为你承担了所有这些工作，为你提供了一个非常清晰的API（译者注：因此你不需要再重新发明轮 子），看起来像是这样： dojo.io.bind({ url: "http://path/to/server", load: function(type, data, evt) { … do something onload …}, error: function(type, error) { … handle an error … }, mimetype: "text/plain" // and many more options! }); 基本上，所有的远程调用都要通过一个dojo.io.bind()方法调用。这个方法作的工作比你能想到的还要 多： • 如果选择了XMLHttpRequest，Dojo将为给定的浏览器找到那个对象。 • 使用关键字：transport: “X”来明确使用XMLHttpRequest，或者IFrameIO、或者... • 99%的时间你可以将这些工作完全留给 Dojo来处理，Dojo将会为你找到最佳的解决 方案 气瓶 现场处置方案 .pdf气瓶 现场处置方案 .doc见习基地管理方案.doc关于群访事件的化解方案建筑工地扬尘治理专项方案下载 ！ • 如果浏览器不支持XHR，Dojo可以降级使用一个隐藏的iframe来实现远程调用。 • 支持XHR对象的缓存 • 使用关键字：useCache: true • 支持制作书签的能力 • 使用关键字：changeURL: true（使用一个自动的值）或者使用“ajaxian”作为你自己的 值 • 支持浏览器的 Back/Forward按钮 • 使用关键字：backButton: code, forwardButton: code。例如，在我们的书 Pragmatic Ajax（译者注：中文版名为《Ajax修炼之道》，电子工业出版社出版）中，我们使用了这 个例子： backButton: function() { saveCityState(); cleanCityState(); }, forwardButton: function() { setupCityState(); } • 你可以使用XHR来提交一个表单 • 使用关键字：formNode: dojo.byId('yourFormId') • 支持上传整个文件。首先，你需要确信已经加载了iframe的支持 （dojo.require("dojo.io.IframeIO")），随后告诉Dojo上传的这个文件。 file: { name: "upload.txt", contentType: "plain/text", content: "look ma! no form node!" } 不过，为了完成 remoteDeleteDay()，你只需要使用一个简单的dojo.io.bind()调用，它会访问你所选择 的后端 URL，这个 URL应该是一个理解你正在做什么的 Web服务。 对于load: handler你无须做很多工作，因为在这里我们不会基于任何返回的信息来改变 UI。然而，在 error: 这部分你可能需要撤销你刚才所作的变化，用一个error消息告诉用户这一天不能被删除（使用一个 从服务器返回的消息）。 7 拖放操作 Web用户对于在这种媒体上实现的拖放操作不是很习惯。因为这个原因，我们需要对于提供支持拖放功能 的界面保持谨慎，也许需要提供一个可以不单独依赖拖放操作的界面。 提供拖放支持可以使得一些任务更加容易使用。在我们的应用中，用户可以在路线中可视化地移动站点， 而不是必须要进入一些编辑模式来将它们从奇怪的列表中移动。 为 dojo配置拖放功能实际上要比你可能想象的更加容易。我们将通过3个阶段来完成这件工作： 1. 连接day元素，告诉系统什么可以拖拽，什么可以放置拖拽的元素。 2. 给定某一天，连接它的子元素。 3. 告诉浏览器来做这个连接 7.1.1 连接所有的天 最初的函数将遍历所有的天，告诉每一天准备好放置站点，然后将所有的站点设置为可拖拽的对象。一旦 天被设置好了，也会配置未使用的站点区域（unused sites area）。 function enableSiteMoving() { for (var d=1; d <= numberOfDays; d++) { var dl = dojo.byId("day-" + d); setupDayForDND(dl); var lis = dl.getElementsByTagName("li"); for(var x=0; x 记录 混凝土 养护记录下载土方回填监理旁站记录免费下载集备记录下载集备记录下载集备记录下载 （log）某个函数的每一次调用，你可以获取这个函数对象，与实现记录所需的 代码相连接。 在我们这里，我们想要连接拖拽的目标。当你将站点放置到天的列表中后，我们配置了onDrop()函数来 完成需要的处理。当站点被放置下来，我们使用Dojo Effects的 package来除去移走的站点。我们检查这一 天先前是否是空的，如果它是空的，就将注释“empty...”删掉。然后我们调用Ajax函数 remoteMoveSiteOntop()来告诉服务器这次移动，将移动节点的id传递进来。 我们为列表中的节点选择了特殊的ID，格式为“siteid-occurance”，这使得我们在后端可以确切地知 道前端发生了什么事情。 function setupDayForDND(dl) { var dt = new dojo.dnd.HtmlDropTarget(dl, ["daylist"]); dojo.event.connect(dt, "onDrop", function(e) { dojo.fx.wipeIn(e.dragObject.domNode.id, 300); checkEmptyDay(dl.id.substring(3)); remoteMoveSiteOntop(e.dragObject.domNode.id, e.target.id); }); } 7.1.3 onLoad 如果你想要将一些东西加载进浏览器，在DOM加载完成后，你通常会这样设置onLoad处理函数： 或者： window.onload = function() { … } 这在一些场合是适用的，但是如果多于一个库使用这种方法呢？你就会遇到冲突，在后面设置 window.onload处理函数的库将会胜出，而设置在前面的那个处理函数中的代码永远也不会被调用。 为了解决这个问题，你可以很方便地使用Dojo的辅助函数： dojo.addOnLoad(function() { enableSiteMoving(); }); addOnLoad将确保所有以这种方式添加的函数将会被排队，并且都将会被调用。 addOnLoad还有另外一种调用风格，dojo.addOnLoad(object, ‘functionName’)。这将调用传递进来的 对象上的指定的functionName。 8 结论 希望你现在已经体验了这个支持Ajax、具有拖放功能的界面，这里无需刷新页面来完成大量的编辑功能。 我们肤浅地展示了Dojo作为一个完整的工具包所能为你提供的功能。我希望你去深入考察一下这个库， 深入理解当我们在进行严肃的JavaScript开发时需要些什么支持。 如果你仅仅想要 hack几个事件处理函数，Dojo也许并不适合你。然而，如果你想要开发专业级的应用， 不妨试一下Dojo，在这里丑陋烦琐的工作已经由聪明的JavaScript开发者帮你完成了。 我还建议你从 Dojo的代码库中check out出 widget工具包，将这些代码作为一个很棒的基于标记的开发 （markup based development）的例子。 9 作者简历 Dion是领先的Ajax社区 Ajaxian.com，以及受欢迎的播客站点“Audible Ajax”的共同创始人。 他是Pragmatic出版社新出版的“Pragmatic Ajax”的合著者之一。 他是openxource.com、onjava.com、TheServerSide.com等网站企业 Java主题的专栏作家，他的 blog在 almaer.com/blog。他乐于为各种技术交流活动写作和发表演讲，例如JavaOne、JavaPolis、TheServerSide 座谈会，以及No Fluff Just Stuff座谈会。他是JCP专家组的成员，也是开源社区的积极参与者。 1 简介 2 Dojo工具包：JavaScript开发的水槽（Kitchen Sink） 3 设置和配置Dojo 3.1 选择正确的Dojo创建 3.2 动态加载package 3.3 定制的创建 4 应用：旅行路线编辑器 5 DOM和HTML效果 5.1 处理DOM 5.2 Dojo的HTML效果 6 使用dojo.io.bind()的Ajax远程调用 6.1.1 淡出和移除 6.1.2 使用XMLHttpRequest来告诉服务器发生了什么 7 拖放操作 7.1.1 连接所有的天 7.1.2 连接单个的天 7.1.3 onLoad 8 结论 9 作者简历