Dojo学习笔记（一）：Hello Dojo

于 2017-11-16 18:42:00 发布
阅读量145 收藏 1
点赞数
原文链接：https://yq.aliyun.com/articles/514348
版权

1、开始，创建hellodojo.html文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
< html >
< head >
     < meta  charset = "utf-8" >
     < title >Hello Dojo</ title >
</ head >
< body >
< h1  id = "greeting" >Hello</ h1 >
<!-- load Dojo -->
< script  src = "dojo/dojo.js"     data-dojo-config = "async: true" ></ script >
< script >
     require([
         'dojo/dom',
         'dojo/dom-construct'
     ], function (dom, domConstruct) {
         var greetingNode = dom.byId('greeting');
         domConstruct.place('< i > Dojo!</ i >', greetingNode);
     });
</ script >
</ body >
</ html >

文件目录结构如下：

wKiom1NGWmSBYYGQAABRS693JUY330.jpg

备注：

   （1）dojo/dom和dojo/dom-construct是Dojo操作HTML DOM最基本的两个模块。

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


2、定义AMD模块

1、创建模块demo/myModule.js，内容如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/**
  * Created by Admin on 14-4-10.
  */
define([
     // 在依赖列表中，这个模块需要引用 dojo/dom 模块
     'dojo/dom'
],  function (dom){
     //当所有依赖的模块都加载完毕后，这个方法就会执行从而定义dome/myModule模块
     //dojo/dom作为第一个参数加入这个函数中，其后的依赖项会紧接这加入作为后续参数
     var  oldText = {};
     //这里返回的对象就是这个模块所要定义的值
    //这个myModule模块有一个依赖模块(dojo/dom)，模块的返回值是一个对象，对象拥有setText和restoreText两个方法。
     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];
         }
     };
});


在前台引用hellodojo.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
< html >
< head >
     < meta  charset = "utf-8" >
     < title >Hello Dojo</ title >
</ head >
< body >
< h1  id = "greeting" >Hello</ h1 >
<!-- 配置Dojo -->
< script >
     //使用dojoConfig代替data-dojo-config标签，dojoConfig必须在在加载dojo.js之前创建
     //dojoConfig和data-dojo-config功能上是完全一致的，它只不过比前者更容易读取大的配置文件
     var dojoConfig = {
         async: true,
         //这里的代码注册了demo包的正确路径，这样我们就可以在CDN上加载Dojo的同时加载本地自定义模块
         packages: [{
             name: "demo",
             location: location.pathname.replace(/\/[^/]*$/, '') + '/demo'
         }]
     };
</ script >
<!-- 加载Dojo -->
< script  src = "dojo/dojo.js" ></ script >
< script >
     //引用我们创建的模块
     require([
         'demo/myModule'
     ], function (myModule) {
         //利用我们的模块改变问候的文本
         myModule.setText('greeting', 'Hello Dojo!');
         //几秒钟后，恢复文本到原来的状态
         setTimeout(function () {
             myModule.restoreText('greeting');
         }, 3000);
     });
</ script >
</ body >
</ html >


3、等待DOM

   若Dojo代码不是放在Body最后，那么可以加入延迟，等待HTML DOM加载完成后再执行。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
< html >
< head >
     < meta  charset = "UTF-8" >
     < title >等待DOM</ title >
</ head >
< body >
< script  data-dojo-config = "isDebug:1, async:1"  src = "dojo/dojo.js" ></ script >
< script >
     require([
         'dojo/dom',
         'dojo/domReady!'
     ], function (dom) {
         var greeting = dom.byId('greeting');
         greeting.innerHTML += ' from Dojo!';
     });
</ script >
< h1  id = "greeting" >Hello</ h1 >
</ body >
</ html >

   Dojo提供了许多插件（Plugin），可以像其他模块一样被引用，但他们的特定功能只有在模块标识符的结尾加上感叹号后才会被激活。在DOM ready事件完成后，Dojo提供了dojo/domReady插件，将这个插件包含在任何含有require和define调用的参数里，直到所有的DOM准备无误回调函数才会运行。

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

   思考：若去掉'dojo/domReady!'，执行结果是什么？


4、添加动画效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
< html >
< head >
     < meta  charset = "UTF-8" >
     < title >添加动画效果</ title >
</ head >
< body >
< script  data-dojo-config = "isDebug:1, async:1"  src = "dojo/dojo.js" ></ script >
< script >
     require([
         'dojo/dom',
         'dojo/fx',
         'dojo/domReady!'
     ], function (dom, fx) {
         var greeting = dom.byId('greeting');
         greeting.innerHTML += ' from Dojo!';
         //调用动画方法
         fx.slideTo({
             node: greeting,
             top: 100,
             left: 200
         }).play();
     });
</ script >
< h1  id = "greeting" >Hello</ h1 >
</ body >
</ html >

   当回调函数获取参数时，模块会以同样的顺序作为数组传入进去。因为dojo/domReady!并没有有意义的返回值，所以我们我们不需要为它添加用于返回的参数。


5、更新Dojo源代码配置

   项目结构如下：

demo/

   myModule.js

dojo/

dijit/

dojox/

hellodojo.html

   更新Dojo包配置：

1
2
3
4
5
6
7
8
9
10
var  dojoConfig = {
     async:  true ,
     baseUrl:  '.' ,
     packages: [
         'dojo' ,
         'dijit' ,
         'dojox' ,
         'demo'
     ]
};





     本文转自stock0991 51CTO博客，原文链接：http://blog.51cto.com/qing0991/1393515，如需转载请自行联系原作者















weixin_33690367
关注
Dojo 学习笔记入门篇：第一个 Dojo 示例（使用 Dojo JS）
TechNovaX的博客
09-25 206
这是一个简单的 Dojo 示例，它演示了如何使用 Dojo JS 创建一个基本的 Web 应用程序。你可以从 Dojo 的官方网站下载最新版本的 Dojo，然后将其引入到你的 HTML 文件中。假设你已经完成了这一步骤，我们可以开始编写我们的第一个 Dojo 示例了。在本篇学习笔记中，我们将介绍如何使用 Dojo JS 创建一个简单的示例。Dojo 是一个功能强大且灵活的 JavaScript 框架，它提供了许多工具和功能，帮助开发人员构建现代化的 Web 应用程序。这是我们将在示例中使用的输出容器。
Jetty+Dojo+Tomcat的Comet学习笔记-HelloWorld
Garfier的专栏
10-15 1万+
编程环境及配置：Eclipse3.3 + tomcat 6.0 + dojo + jetty 6.1.9主要讲讲jetty。“Jetty 是一个开源的servlet容器，它为基于Java的web内容，例如JSP和servlet提供运行环境。Jetty是使用Java语言编写的，它的 API以一组JAR包的形式发布。开发人员可以将Jetty容器实例化成一个对象，可以迅速为一些独立运行（stand-alone）的Java应用提供 网络和web连接。”Jetty里面含有实现comet技术的包。通过在Ecli
dojo.js dojo核心文件，一款很好用的javascript库文件
10-21
dojo核心文件，一款很好用的javascript库文件
Dojo学习笔记（一）
黑鸟酱
08-30 187
创建一个HelloWorld级别的Dojo 表单Demo有一下几个步骤: 在&lt;head&gt;部分添加标准的Dojo首部（路径根据自己本地目录修改） &lt;style type="text/css"&gt; @import "../lib/dojoroot/dijit/themes/tundra/tundra.css"; @import "../l...
Dojo入门Hello World！
我的博客
06-03 1734
本文的目的是为Dojo的入门者提供一个起点。每一个步骤都是为了尽可能多的介绍Dojo，但也不可能非常详尽，描述的太详尽反而会把入门用户搞糊涂了。如果需要了解本文中提到的概念，请查看底部指向其他资源的链接。入门要求很明显，第一步是你需要Dojo！你可以从 http://dojotoolkit.org/downloads 下载最新的稳定版本.第二步，你需要一个Web服务器.无论是连网服务器或者
Dojo入门：Hello Dojo!
Developer
06-22 672
Dojo的全称是Dojo Toolkit，始创于2004年，是当前各种蓬勃发展的JS工具包中的佼佼者。Dojo 为富互联网应用程序(RIA) 的开发提供了完整的端到端的解决方案，包括核心的 JavaScript 库，简单易用的小部件（Widget）系统和一个测试框架，此外，Dojo 的开源开发社区还在不停地为它提供新的功能。
Dojo学习笔记（一）：Hello Dojo!
weixin_30577801的博客
02-01 146
欢迎来到Dojo世界！在这篇文章中你将会学习到如何加载Dojo以及探索Dojo的一些核心功能。你还会了解Dojo的基于AMD的模块架构，探索如何加载额外的模块来增加功能到您的Web站点或应用程序，并找出在出错的时如何得到帮助。 让我们开始吧 开始学习Dojo的最简洁方法之一就是通过内容分发网络（CDN）来获取它，这将会让我们起步很快，使用CDN就意味着你的浏览器要接入互联网 这...
dojo学习笔记
03-18
### Dojo学习笔记详解 #### 一、Dojo基本概念 Dojo是一个强大的JavaScript库，旨在简化复杂的Web应用程序开发过程。它由三个主要部分组成：`dojo`、`dijit`和`dojox`。 1. **Dojo基础**： - **概述**：Dojo的...
神奇的JQuery学习[基础学习笔记].pdf
12-12
JQuery学习基础学习笔记为我们提供了一个全面认识和了解JQuery的机会，JQuery是一个快速、小巧且功能丰富的JavaScript库。它简化了HTML文档遍历和事件处理、DOM操作、动画以及Ajax交互，从而加速了web开发过程。 ...
the book of dojo
08-19
《The Book of Dojo》是一份详尽的官方指南，旨在为用户提供全面深入的Dojo框架学习资料。本书覆盖了从安装配置到高级开发的所有必要知识点，是Dojo框架学习的绝佳参考资料。 #### 二、快速安装 在《The Book of ...
Dojo -- Getting Started篇之Hello Dojo!
Sam_Deep_Thinking
10-19 869
一直都想尝试使用dojo，毕竟它是众多JavaScript高手眼中的”瑰宝”。本文是dojo系列的第一篇，会介绍一下dojo的搭建和编写两个简单的hello word程序。   下载dojo 在网络通畅的情况下，可以用最简单的方式使用dojo，如下： Tutorial: Hello Dojo! Hello <scriptsrc="//ajax.g
Dojo 1.6 最新官方教程: Hello Dojo!
热门推荐
Dojo中文博客
03-22 2万+
 Hello Dojo作者：Sam Foster译者：ZhuXiaoWen原文：http://dojotoolkit.org/documentation/tutorials/1.6/hello_dojo/欢迎使用Dojo! 在本教程中，我们将从最基础的部分——一个简单的HTML页面开始。当本教程结束的时候，我们就已将Dojo加载到页面中，并且开始使用一些核心函数了。为了给您提供更为丰富的学习体验，我们还将简单介绍Dojo的模块化架构，并讨论如何载入依赖模块。难度：初学者Dojo版本：1.6让我们开始吧～我们
DOJO入门(1)-Hello,World!
mint的专栏
12-16 3835
 参考原文地址：http://dojo.jot.com/WikiHome/HelloWorld一、建立一个DOJO的环境然后建立以下的目录树，将dojo的内容全部复制到其中，就象这样:   OK，接下来，新建一个HTML页：      Dojo: Hello World!                二、添加
Dojo入门三种HelloWorld!
一名系统架构师的征途
08-12 3302
学习Dojo有些时间了，也整理了一些资料，先来个最入门级别的。HelloWorld Asp.Net+Dojo   Dojo事件绑定，弹出HelloWorld   <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js"
html dojo1.9
A741841403的专栏
08-23 945
基于HTML5 Widget Dojo开发教程(1.9) 2011-09-08 09:38 佚名 IBM 我要评论(0) 字号：T | T 本文通过例子介绍了基于 HTML5 的 Dojo Widget 的设计思想和实现方式，利用 HTML5 中的 Canvas 特性和 Dojo 的 Widget 机制创建了一个对话框 Widget。 (本文是在前辈的基础上改进的，从老版本升级到新版本1
【Dojo学习之四】Dojo语法
365Marathon
10-16 1911
Dojo的语法，哎，就不解释了，说一下我学习时候遇到的问题的地方 1.关于dojo多方法链接的问题，dojo的强大之处，因为javascript是单线程语言，所以dojo通过自己的方法连接了多个方法 多方法连接 var mineObj = { aMethod: function(){ console.log('running A'
网络安全中的系统信息收集与防护机制探讨
11-17
内容概要：本文档深入介绍了网络安全领域中的系统信息收集方法以及常见的保护措施。主要分为三大板块：获取网络和服务信息的方法、克服CDN和WAF等障碍的技术手段。其中包括对服务厂商、网络架构的理解，对于协议应用、内部网络设备的认识，以及面对各种安全措施如CDN服务、负载均衡器、Web应用防火墙时，如何进行有效的信息搜集。同时推荐了多个相关工具如Masscan、Nmap、Wafw00f及Kali自带动态二进制翻译工具。 适合人群：适合从事网络安全工作的专业人士和技术爱好者，特别是对信息安全有浓厚兴趣的学习者。 使用场景及目标：帮助技术人员提升网络安全领域的实战技能，掌握高效的信息收集技巧，了解并能够对抗多种常见的网络防护技术。 其他说明：文中提供了详细的演示案例和实际操作指导，辅以丰富的外部资源链接支持进一步学习。
基于WPF开发的视频播放器
11-17
基于WPF开发的视频播放器，实现视频的手动添加，播放，暂停，停止，音量，播放速度，以及进度显示。主要采用以下技术： 开发技术：WPF，.Net6.0 开发工具：Visual Studio 2022 具体可参考个人CSDN博客。
中国分地区地级市泰尔指数数据集（2000-2019）.zip
最新发布
11-17
中国分地区地级市泰尔指数数据集（2000-2019）.zip
Dojo学习笔记：模块与包入门
"dojo学习文档，包括模块与包的讲解，适合初学者，详细介绍了如何将Dojo引入Web项目，以及如何使用dojo.require加载所需模块。...通过这份学习笔记，你可以逐步深入Dojo的世界，提升你的JavaScript开发技能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值