Dojo学习笔记（一）：Hello Dojo!

欢迎来到Dojo世界！在这篇文章中你将会学习到如何加载Dojo以及探索Dojo的一些核心功能。你还会了解Dojo的基于AMD的模块架构，探索如何加载额外的模块来增加功能到您的Web站点或应用程序，并找出在出错的时如何得到帮助。

让我们开始吧

开始学习Dojo的最简洁方法之一就是通过内容分发网络（CDN）来获取它，这将会让我们起步很快，使用CDN就意味着你的浏览器要接入互联网

这种方法将使我们快速地进入使用Dojo。对于一些产品应用或者大规模开发，我们接下来将介绍其他的一些能发挥更好性能的开发方法。

你需要将你所有的例子放在你的本地网络服务器上，这样就可以在特定的工作环境下浏览你的文件，并能在很多细微之处保证你的工作安全无误。运行这些例子你不需要在你的服务器上增加除了文件服务的其他功能就能出色地完成测试。

本篇教程是为Dojo新手所准备的，如果你已经掌握了1.7版本以前的知识并且想了解新版本更新了什么，你可能需要开始学习 "Modern Dojo" 这篇文章。

为了“引导”Dojo，你得加载 dojo/dojo.js 这个文件并提供它一些配置信息：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Tutorial: Hello Dojo!</title>
</head>
<body><h1 id="greeting">Hello</h1><!-- load Dojo --><script src="//ajax.googleapis.com/ajax/libs/dojo/1.8.1/dojo/dojo.js"data-dojo-config="async: true"></script>
</body>
</html>

以上代码使得Dojo loader(Dojo加载器)能够被网页所运行，Dojo loader 的功能就是让你加载Dojo的modules(模块)。

你也许会疑惑“嘿，代码中的"src"属性少了"http:" ，好吧，这并不为大众所知，但是如果你省略了"URL"的协议，那么浏览器就会猜测页面加载的协议。这就意味着你的页面不管是从"http"或者"https"协议加载的都会正常地运行。如果你不这样做，就会导致你的浏览器在某些"https"环境下弹出警告，这显然不是好的用户体验。如果你在自己的设备上运行这些代码，确保你是在本地网络服务器上运行的，那是因为在"file:"协议下，这些代码不会工作。出于很多原因，你应该始终在网络服务器或者本机的网络服务器上运行Dojo。”

另一个你可能注意到的是"data-dojo-config"属性。这个特殊的HTML5属性是在被加载时用来配置Dojo的，它包含了一系列属性，并且它的样式和功能都像一个" object literal (JavaScript对象字面) " ，只不过没有打开和关闭的大括号标记而已。在这种情况下，我们将介绍在异步模式下运行的Dojo。这是在Dojo1.7引入的新的模式，如果你正在全新的开发，你应该默认使用这种模式。再强调一次，如果你是从老版本（1.7以前）迁移过来的你得先学习 "Modern Dojo" 文章来更好地了解他们的变化。

你可以在 Configuring Dojo with dojoConfig 文章里了解到更多的Dojo的配置内容

我们也将"<script>"标签块放在HTML文档的"body"中，我们可以将它放在"header"中并且效果是一样的，但当在你的应用程序的"header"里的"<script>"块里加载大量代码时，会导致代码在加载时，网页处于渲染状态。这会让用户感觉你的应用程序运行缓慢从而降低用户体验，所以我们一般在文档的"body"结尾处加载Dojo代码。

从Dojo1.7开始，Dojo采用 Asynchronous Module Definition (AMD)/(异步模块定义) 作为标准的JavaScript模块。这就允许Dojo不仅能提供异步模块加载的功能增强，而且使Dojo比以往更加模块化，无需全局变量。Dojo AMD标准同样允许Dojo加载使用其他AMD加载器加载的非Dojo模块。

同早期版本的Dojo对比，早期Dojo会自动加载全部的"base"函数，当运行异步模块的Dojo时(async:true)，Dojo只加载那些被引用的模块，而不加载无用的模块。这就使得应用程序有更好的表现。另外，Dojo的模块被重写使，不需要依赖更多的Dojo，只是按需要在自己的模块引用其他模块，除了"loader(加载器)"没有其他的模块能够自动被加载。这就是经常提到的"baseless"Dojo。

Dojo1.8所有的文章系列都是用的"baseless"Dojo，旨在加载需要加载的模块，使网络应用程序更轻更好。

CDN的使用

CDN是很容易获取的。我们在文章的例子里都是使用的CDN，因为这意味着你可以直接复制代码并不需要做任何改动就可以让他们为你服务。但它们也有以下缺点：

  • 由于性能的原因，它们都是压缩的版本，这就意味着每个模块都是最小最优化的,在网络上传输地更有效率。这就带来一个问题，很难去调试
  • 它们需要用户连接到公共网络才能使用你的应用程序，在很多情况下不实用。
  • 它还要加载你自己的模块
  • 如果你想将你的应用程序投入生产，你将得大大益于一个针对特定应用程序和目标浏览器的压缩版Dojo，这样你就不能获得同样大小又适用于所有CDN的压缩版Dojo

还有一些其他的文章在不同方面介绍了CDN带来的挑战。查看 Creating Builds , Using Custom Modules with a CDN ,以及 Configuring Dojo with dojoConfig 。

如果你想成为一个卓越的开发者，你应该下载Dojo的源代码并且安装在你本地服务器上。为了使你的demo程序能够在你本地设备上运行，你还得将包含demo代码的文件夹与Dojo源代码文件夹放在同一目录下。如下图：

然后修改加载Dojo的路径：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Tutorial: Hello Dojo!</title>
</head>
<body><h1 id="greeting">Hello</h1><!-- load Dojo --><script src="../dojo/dojo.js"data-dojo-config="async: true"></script>
</body>
</html>

定义和引用模块

Dojo中的模块被分成不同的代码块以方便单独调用。他们通过字符串被标识，这些字符串跟文件路径很像。举个例子，my/module/id 就是Dojo1.7以及更新版本的module identifier (MID)模块标识符。实际上，这些标识符是用来映射JavaScript文件的，像"my/module/id"加载模块的请求就会触发loader(加载器)加载定义在路径"my/module/id.js"中的模块。

还有一些更加复杂的方式来映射模块和文件，但使用简单的路径结构方式是所有方式中最典型的。

为了使定义和请求的模块能够正确地在你的应用程序中运行， two global functions are provided by the loader :.require()是用来加载一个或更多模块的，define()用来定义一个模块。这两个函数通常带有两个参数：一系列需要加载的MID，和一个回调函数，这个回调函数在所有MID加载完成后就会执行。

通过简单的例子就很容易解释了，首先让我们定义一个模块：

// 文件在 demo/myModule.js里 (这就定义了一个"demo/myModule"模块):define([//这个模块需要引用 dojo/dom 模块，这里就需要加入它"dojo/dom"
], function(dom){//当所有依赖的模块都加载完毕后，这个方法就会执行从而定义dome/myModule模块//dojo/dom作为第一个参数加入这个函数中，其后的依赖项会紧接这加入作为后续参数var oldText = {};//这里返回的对象就是这个模块所要定义的值return {setText: function(id, text){var node = dom.byId(id);oldText[id] = node.innerHTML;node.innerHTML = text;},restoreText: function(id){var node = dom.byId(id);node.innerHTML = oldText[id];delete oldText[id];}};
});

 这个demo模块有一个依赖模块(dojo/dom)，模块的返回值是一个对象，对象拥有setText和restoreText两个方法。

因为我们正在通过CDN使用Dojo，但我们想从本地加载我们自定义的模块，我们就得修改配置来改变加载模块的方法。要不然Dojo加载器就会认为我们自定义的模块在CDN上。关于这些深入的介绍在 Using Custom Modules with a CDN 这篇文章里,现在我们只需要知道它是如下工作的：

<script>//除了data-dojo-config标签，我们在加载dojo.js之前创建一个dojoConfig对象//他们功能上是完全一致的，它只不过比前者更容易读取大的配置文件var dojoConfig = {async: true,//这里的代码注册了demo包的正确路径，这样我们就可以在CDN上加载Dojo的同时加载本地自定义模块packages: [{name: "demo",location: location.pathname.replace(/\/[^/]*$/, '')}]};
</script>

 如果你在你自己的服务器上安装了源代码，就不需要做这一步了。

既然我们已经创建了自己的模块并且更改了Dojo的配置，我们就可以加载并利用它做些什么了：

//引用我们创建的模块
require(["demo/myModule"], function(myModule){//利用我们的模块改变问候的文本myModule.setText("greeting", "Hello Dojo!");//几秒钟后，恢复文本到原来的状态setTimeout(function(){myModule.restoreText("greeting");}, 3000);
});

使用我们自定义的模块，这些代码轻松地将<h1 id="greeting">元素改变为"Hello Dojo!",过3秒后再将它还原为原来的内容。注意我们不需在require里引用所有的子级依赖，加载器将自动地加载需要的所有子级依赖，直到所有引用加载完毕。

进一步学习定义和引用Dojo的模块，参考文章： Defining Modules

等待DOM

要完成网络应用程序前最常见的事情之一就是在执行代码前确保浏览器的DOM是可用的。在Dojo1.7以及更新版本的异步模型中，DOM检查被一个叫"plugin"的特殊AMD模型所完成。Plugin可以像其他模块一样被引用，但他们的特定功能只有在模块标识符的结尾加上感叹号后才会被激活。在DOM ready事件完成后，Dojo提供了dojo/domReady插件，将这个插件包含在任何含有require和define调用的参数里，直到所有的DOM准备无误回调函数才会运行：

require(["dojo/dom", "dojo/domReady!"], function(dom){var greeting = dom.byId("greeting");greeting.innerHTML += " from Dojo!";
});

 以上的例子在"gressting"节点上添加文本，这种行为只会在DOM加载完毕后准确地执行一次。再一次强调，注意模块标示符结尾加上"!"，如果没有感叹号，dojo/domReady模块就跟其他模块一样。

更多关于DOM操作功能请参考 Dojo DOM Functions

添加动画效果

现在我们可以在我们的例子中增加一些动画效果。可以加载到页面里增叫动画效果的模块是dojo/fx，让我们利用dojo/fx中的slideTo方法为greeting节点增叫一个滑动效果：

require(["dojo/dom", "dojo/fx", "dojo/domReady!"], function(dom, fx){var greeting = dom.byId("greeting");greeting.innerHTML += " from Dojo!";//调用动画方法fx.slideTo({top: 100,left: 200,node: greeting}).play();
});

 你可以发现，我们又添加了dojo/fx模块，然后我们使用这个模块给greeting节点增加了动画。当地一次使用AMD的时候，你也许会错误地认为MID数组(["dojo/dom","dojo/fx","dojo/domReady!"])和回调函数的参数(function(dom,fx))没任何关系。然而，他们确实有关系。当回调函数获取参数时，模块会以同样的顺序作为数组传入进去。因为dojo/domReady!并没有有意义的返回值，所以我们我们不需要为它添加用于返回的参数。 不要错误认为只是你不需要使用那个值，JavaScript或者Dojo就会自动计算它。要知道，任何返回不需要使用的值模块都得放在数组的最后。举个例子，下面的做法就是错误的：

require(["dojo/dom", "dojo/domReady!", "dojo/fx"], function(dom, fx){//并不是你想象的那样，fx会映射dojo/domReady!,而不是dojo/fx
});

 更多的特效和动画信息可以参考 Dojo Effects 和 Animations

如何进一步学习Dojo?

学习Dojo ToolKit和添加一个标签以及引用模块一样简单，但功能及其广泛和强大的Dojo意味着我们只能勉强掌握Dojo表面的皮毛。依据你的需求，我们提供了一系列不同方向的文章：

  • 如果你以前使用过Dojo并且想进一步了解带有"AMD"和"baseless"的Dojo世界，以及Dojo其他改进的地方，你需要参考 Modern Dojo 文章。
  • 如果你的兴趣是在你既有的静态网页或服务驱动网站页面上添加特效和动画效果，你需要阅读 Using dojo/query ， Events with Dojo ， effects 和 animations 这些文章。
  • 如果你想添加Ajax功能到你的网站， Ajax with Dojo 将会是不错的选择。
  • 如果你打算为你的网站或应用程序整合一套丰富的部件库，你可以看依稀 Creating Template-based Widgets 并通过 tutorial series on Dijit widgets 强化知识。
  • 如果你想了解更多关于构建复杂的网络应用程序和Dojo强大的实用功能，向 Core Concepts 看齐吧。
  • 如果你的目标是移动应用程序，快跟着 Getting Started with dojox/mobile 开始吧。

无论你想要什么结果，Dojo提供了业界领先的开放源代码工具，可以帮助您完成您的项目在较短的时间以惊人的结果。我们期待着看到你了！



本系列文章翻译至Dojo官网，旨在学习Dojo并提高英语阅读能力，有翻译错误的地方请多指正！谢谢

转载于:https://www.cnblogs.com/ruowind/archive/2013/02/01/2889594.html

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/378914.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

转：我眼中的Visual Studio 2010架构工具

转：我眼中的Visual Studio 2010架构工具

来自&#xff1a;http://www.cnblogs.com/wayfarer/archive/2010/07/30/1788398.html我眼中的Visual Studio 2010架构工具影响架构质量的是构建体系架构的思想、原则、实践与架构师的经验&#xff0c;绝不是工具。即使是最优秀的架构工具&#xff0c;也不可能像倚天宝剑一般——…
阅读更多...
VMware创建Ubuntu操作系统到网络配置详细流程

VMware创建Ubuntu操作系统到网络配置详细流程

一、创建虚拟机 Ubuntu下载链接 1&#xff0c;看个人需求了&#xff0c;有更高的版本&#xff0c;下载Ubuntu镜像 2&#xff0c;VMware官网随便下载即可 3&#xff0c;创建新的虚拟机 4&#xff0c;自定义 5&#xff0c;默认即可 6&#xff0c;稍后安装操作系统 7&#xf…
阅读更多...
djiango配置mysql_数据库MySQL相关环境配置以及数据库与Go的连接

djiango配置mysql_数据库MySQL相关环境配置以及数据库与Go的连接

Linux下安装好MySQL后&#xff0c;Windows安装可视化工具navicatLinux下MySQL与Windows下navicat进行连接:安装的过程很是揪心&#xff0c;各种查网站、大致把坑都写了出来&#xff1a;1、在Linux下的mysql语句中&#xff0c;mysql> select host,user,authentication_string…
阅读更多...
缓冲文件系统(fopen/fread/fwrite)和非缓冲文件系统(open/read/write)

缓冲文件系统(fopen/fread/fwrite)和非缓冲文件系统(open/read/write)

open&#xff1a;系统调用&#xff0c;返回的是文件描述符&#xff0c;即文件句柄&#xff0c;是文件在文件描述副表里的索引。 fopen&#xff1a;C语言库函数&#xff0c;返回的是一个指向文件结构的指针。fopen是ANSI C标准中的C语言库函数&#xff0c;在不同的操作系统中应…
阅读更多...
java 继承示例_Java中的继承类型以及示例

java 继承示例_Java中的继承类型以及示例

java 继承示例Prerequisite: Inheritance and its implementation in Java 先决条件&#xff1a; 继承及其在Java中的实现 Java中的继承类型 (Type of inheritance in Java) In Java programming, there are following types of the inheritances, 在Java编程中&#xff0c;有…
阅读更多...
基于HtmlParser的网络爬虫

基于HtmlParser的网络爬虫

一、 目标 获取网页中的超链接及链接名&#xff0c;如从http://www.hao123.com/开始&#xff0c;抓取所有hao123链接到的超链接&#xff0c;再以获取到的链接网页为目标&#xff0c;获取它所链接到的网页。 二、环境及开发工具 环境&#xff1a;Java 工具&#xff1a;MyEclip…
阅读更多...
VMware下Ubuntu无法全屏显示问题

VMware下Ubuntu无法全屏显示问题

一、运行Ubuntu的时候无法全屏显示&#xff0c;如图所示下载VMware Tools 二、之后将下载的文件拷贝到home文件夹下 三、解压该压缩包 由于该压缩包是.tar.gz结尾的故压缩命令&#xff1a;tar -zxvf VMwareTools-10.2.5-8068393.tar.gz&#xff0c;当然各版本有可能不一样&am…
阅读更多...
AMQP RabbitMQ

AMQP RabbitMQ

转载&#xff1a;http://blog.ftofficer.com/2010/03/translation-rabbitmq-python-rabbits-and-warrens/官方介绍&#xff1a;http://www.rabbitmq.com/erlang-client-user-guide.html开始吧AMQP当中有四个概念非常重要&#xff1a;虚拟主机&#xff08;virtual host&#xff…
阅读更多...
fsync与fflush的关系和区别

fsync与fflush的关系和区别

read/write/fsync与fread/fwrite/fflush的关系和区别 read/write/fsync&#xff1a; linux底层操作&#xff1b; 内核调用&#xff0c; 涉及到进程上下文的切换&#xff0c;即用户态到核心态的转换&#xff0c;这是个比较消耗性能的操作。 fread/fwrite/fflush&#xff1a;…
阅读更多...
lumanager mysql密码_LuManager单独安装mysqli

lumanager mysql密码_LuManager单独安装mysqli

首先确定你正在使用的php版本以及php.ini的位置&#xff0c;LuManager自带了几个版本。如果是默认安装&#xff0c;应该是5.2.17。php.ini的位置应该是在/usr/local/php_fcgi/lib/php.ini要确定这些信息&#xff0c;可以自己编写一个 info.phpphpinfo();?>把文件存放到网站…
阅读更多...
数据库系统数据库管理系统_数据库管理系统介绍

数据库系统数据库管理系统_数据库管理系统介绍

数据库系统数据库管理系统数据库 (Database) A database is a collection of related data. In database any user can efficiently access the data which users want to retrieve. It can be anything from a simple collection of roll numbers, names, addresses and phone…
阅读更多...
vba将select的值直接赋给变量

vba将select的值直接赋给变量

strSql ""strSql strSql & " select max(number) from dbo.#DATA" & vbCrLfrss.Open strSql, cnn numb rss.Fields(0)rss.Close转载于:https://www.cnblogs.com/zigewb/archive/2013/02/06/2900645.html
阅读更多...
set_exception_handler 自定义异常处理

set_exception_handler 自定义异常处理

刚才已经说过了set_error_handler这个函数&#xff0c;作用就是自定义错误处理&#xff0c; 那么现在就来简单的说一下set_exception_handler&#xff0c;看名字我们就能发现&#xff0c;这说的是自定义异常处理。 呵呵&#xff0c;我聪明吧&#xff1f;来&#xff0c;先看一下…
阅读更多...
如何获取ubuntu源码包里面的源码进行编译

如何获取ubuntu源码包里面的源码进行编译

如何获取ubuntu源码包里面的源码进行编译 1、在获取源码包之前&#xff0c;确保在软件源配置文件 /etc/apt/sources.list中添加了deb-src项 2、使用如下命令获取xxx源码包的详细信息: sudo apt-cache showsrc xxx 这用来查询当前镜像站点中是否有该源码包。 3、源码包中通常…
阅读更多...
Python基础教程（第3版）小笔记

Python基础教程（第3版）小笔记

111
阅读更多...
python 示例_带有示例的Python字典popitem（）方法

python 示例_带有示例的Python字典popitem（）方法

python 示例字典popitem()方法 (Dictionary popitem() Method) popitem() method is used to remove random/last inserted item from the dictionary. popitem()方法用于从字典中删除随机/最后插入的项目。 Before the Python version 3.7, it removes random item and from …
阅读更多...
优化算法的意义，之二。

优化算法的意义，之二。

前一篇分析了求质数的两个算法&#xff0c;在代码执行效率和系统开销两方面进行了比较。 这在通信系统的设计和实现中&#xff0c;是非常重要的两点。因为需要同时面对的是巨大的用户群&#xff0c;和复杂的业务应用&#xff0c;通信系统的设计经常要面临鱼与熊掌间的选择。 用…
阅读更多...
srs配置文件分析

srs配置文件分析

配置文件中的每一项都是一个SrsConfDirective对象。 例子&#xff1a;vhost 1、 整个vhost 是一个SrsConfDirective对象。 1.1、名字&#xff1a;std::string name vhost 1.2、参数&#xff1a;std::vectorstd::string args第0个值 defaultVhost 1.3、子SrsConfDirective&a…
阅读更多...
寄存器（CPU工作原理）03 - 零基础入门学习汇编语言08

寄存器（CPU工作原理）03 - 零基础入门学习汇编语言08

第二章&#xff1a;寄存器&#xff08;CPU工作原理&#xff09;03 让编程改变世界 Change the world by program 物理地址 CPU访问内存单元时要给出内存单元的地址。所有的内存单元构成的存储空间是一个一维的线性空间。 我们将这个唯一的地址称为物理地址。 16位结构的CPU…
阅读更多...
判别Linux是CentOs还是Ubuntu的最简单方法

判别Linux是CentOs还是Ubuntu的最简单方法

在终端执行以下两条命令即可 CentOs&#xff1a;yum -help Ubuntu&#xff1a;apt-get -help
阅读更多...
最新文章

Copyright @ 2022~2023