Dojo入门:初识Dojo

Dojo的全称是Dojo Toolkit,始创于2004年,是当前各种蓬勃发展的JS工具包中的佼佼者。Dojo 为富互联网应用程序(RIA) 的开发提供了完整的端到端的解决方案,包括核心的 JavaScript 库,简单易用的小部件(Widget)系统和一个测试框架,此外,Dojo 的开源开发社区还在不停地为它提供新的功能。

 

Dojo特性

Dojo Toolkit 的特性可以分到 4 个不同部分。这种划分使得开发人员可以将库大小保持到最小,确保应用程序性能不受大量 JavaScript 库下载的影响。例如,如果您只需要 Ajax 支持性能,您只需要包含 base 包;不需要包含扩展的 Dijit UI 组件,在本系列中稍后您将学习更多关于 Dojo 加载不同模块的方法。

Base
Base 包提供 Dojo Toolkit 的基础,包括一些功能,比如 DOM 使用函数、CSS3 基于选择器的 DOM 查询、事件处理、基本的动画、以及 Dojo 基于类的面向对象特性。本文主要介绍 Base。
Core
Core 包包含一些 Base 中没有包含的附加特性。通常,这些特性不像 Base 中的特性那样频繁使用;因此,它们单独加载减轻 Base 包的负担。从这一点上来讲,Core 包提供一些实际有用的组件,包括高级动画拖放、I/O、数据管理、国际化(i18n)、浏览器历史管理。Core 包不再本文范围之内。
Dijit
Dijit 包包含 Dojo 小部件和组件的扩展 UI 库。这些小部件的一些示例包括对话框、日历、调色板、工具提示和树。它也包括一些表单控件,这比标准 HTML 表单控件提供更多的功能,还有一些完整的布局管理选项。本系列的第 3 部分将深入介绍 Dijit 特性。
DojoX
Dojo eXtensions (DojoX) 包含工具箱的各个子项目。位于 DojoX 中的大多数是实验特性,但是也有一些稳定组件和特性。

 

下载Dojo

和其它JS工具包一样,Dojo不需要特别的环境和配置。你只需下载就能够使用。

它的下载地址:http://dojotoolkit.org/download/

如果你不想下载到本地,还可以通过CDN来获取,在你的页面中加入以下代码:

<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js"></script>

 

CDN的缺点是当CDN的环境不稳定的时候,引用的文件可能不会正确的加载,所以建议将文件下载到本地,这样才能保证您网站的正确访问。

 

Say Hello World

为了检验我们下载的Dojo工具包是否正确,按照惯例,我们来写一个Dojo版的Helloworld程序。我们要实现的功能是在页面中动态的输出Hello World字符串。

首先需要新建一个页面,并添加dojo的引用。

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

在页面中加入以下JS代码:

        dojo.addOnLoad(function () {
            dojo.create("div", { innerHTML: "Hello world!" }, dojo.body());
        });

 

OK, 在浏览器中打开这个页面,查看运行效果:

 

下面是整个页面的代码,复制前请确保dojo.js的路径是否正确。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Dojo版Heloworld</title>
</head>
<body>
    <h1>
        Dojo版Heloworld</h1>
    <script type="text/javascript" src="resources/dojo/dojo.js"></script>
    <script type="text/javascript">
        dojo.addOnLoad(function () {
            dojo.create("div", { innerHTML: "Hello world!" }, dojo.body());
        });
    </script>
</body>
</html>

 

 

如果认为此文对您有帮助,别忘了支持一下哦!

作者:齐飞

来源:http://youring2.cnblogs.com/

声明:本博客原创文字只代表本人工作中在某一时间内总结的观点或结论,与本人所在单位没有直接利益关系。非商业,未授权,贴子请以现状保留,转载时必须保留此段声明,且在文章页面明显位置给出原文连接。

转载:http://www.cnblogs.com/youring2/archive/2012/06/09/2542860.html

时间: 2024-09-27 23:00:03

Dojo入门:初识Dojo的相关文章

Dojo入门:dojo中的事件处理

JS为DOM添加事件 在原生的环境下,为DOM添加事件处理函数有多种方法: <input type="button" name="btn" value="点击-" id="btn" onclick="btnClick" /> 或者使用以下方法: <input type="button" name="btn" value="点击-"

Hello dojo入门

经过了解几种Ajax框架,最后选择了Dojo框架.因为Ext不稳定,GWT觉得太浪费时间. 一:下载Dojo,地址是:http://dojotoolkit.org/downloads 二:做开发,当然要工具库的 API 帮助文档,就在下载地址的其它菜单中. 三:入门程序 Hello Dojo .一个简单的入门,可以增加兴趣与信心,同时,对 Dojo 有了简单的了解. 在 MyEclipse 中新建工程 ToDojo : 在 WebRoot 中新建一个文件夹 dojoroot ,把 Dojo 相关

手把手教你Dojo入门

如果仅仅是为了练习Dojo,或者进行测试,可以参考下面的步骤.下面的文件均是在Windows下测试 需要的工具 1 Tomcat服务器:下载地址 选择适合自己的机器型号,即可 2 Dojo的工具包:下载地址  由于dojo toolkit没有测试页面,所以推荐下载下面的那个SDK的 3 浏览器 博主使用的是chrome 接下来就可以配置文件了. 首先是Tomcat Tomcat,直接解压缩就可以了. bin文件夹下面有个startup.bat,双击就可以运行.双击shutdown.bat停止服务

掌握Dojo工具包,第1部分:Dojo入门简介

伴随 Web 2.0, Ajax 和 RIA 的热潮,各种 Ajax 开发工具包如雨后春笋般蓬勃发展,Dojo 正是这些工具包中的佼佼者.Dojo 为富互联网应用程序(RIA) 的开发提供了完整的端到端的解决方案,包括核心的 JavaScript 库,简单易用的小部件(Widget)系统和一个测试框架,此外,Dojo 的开源开发社区还在不停地为它提供新的功能. Dojo 是一个 JavaScript 实现的开源 DHTML 工具包.它是在几个项目捐助基础上建立起来的(nWidgets,f(m),

Dojo入门:DOM操作

作为一款功能齐全的js工具包,dojo提供了统一的DOM操作方法. dojo.byId dojo.byId 函数使您可以通过 id 属性选择一个 DOM 节点.该函数是标准 document.getElementById 函数的一个别名,但是显然简短易书写.   dojo.query 虽然dojo.byId可以方便的根据id来获取一个DOM节点,但是根据id获取每一个元素几乎是不可能的,因为id是唯一标识.如果一次想获取几个元素,我们可以通过dojo.query方法. dojo.query 函数

Dojo学习笔记 4. dojo.string &amp;amp; dojo.lang

模块:dojo.string.common / dojo.string dojo.string.common 和 dojo.string 是一样的,只要require其中一个就可以使用以下方法 dojo.string.trim 去掉字符串的空白 Usage Example: s = " abc ";dojo.string.trim(s); //will return "abc"dojo.string.trim(s, 0); //will return "a

Dojo学习笔记8.dojo.event &amp;amp; dojo.event.topic &amp;amp; dojo.event.browser

模块:dojo.event 终于进入有名的dojo事件处理系统的学习了,学习前建议读者先去补习一下AOP的相关知识 dojo.event.connect 绑定指定的方法到指定的对象的方法上 Usage Example: 简单绑定1 function doOnClick1() { alert("Clicked!"); } dojo.event.connect(dojo.byId("inputTest"),"onclick","doOnCl

使用DataChart绑定Dojo Grid与Dojo Chart来实现更新

本文将介绍一种实现此场景的方法,通过使用 DataChart 绑定 Dojo Grid 与 Dojo Chart 来实现这一需求.在文章开始前,我们先来介绍一下下文中将要使用的 Dojo 插件: DataChart(dojox.charting.DataChart)是 Chart2D 的一个扩展,它使用 Dojo Store 作为数据的存储结构.DataChart 会监听 Dojo Store 的'onSet'事件,每当 Dojo Store 中的数据发生变化时,DataChart 会http:

Dojo入门:增强的Ajax功能

随着Web技术的发展,RIA似乎已经成了主流,Ajax也随之成了不可或缺的部分.Ajax是异步的javascript和Xml,虽然现在很多交互的数据格式都不再严格的采用XML,但这种异步的操作却越来越流行了.目前主流的JS工具包都包含了Ajax的功能,dojo也有自己的Ajax框架XHR. XHR框架 XHR框架是dojo对ajax支持的一组方法,允许想服务器端发出get.post.put.delete请求,这些方法包括: xhrGet xhrPost xhrPut xhrDelete 所有这些