1、Dojo学习地址

Dojo 下载：

http://dojotoolkit.org/download/

Dojo参考文档

http://dojotoolkit.org/reference-guide/1.10/dojo/

Dojo API：

http://dojotoolkit.org/api/

2、Dojo 快速开始

2.1 Dojo引入：

<body>

<h1 id="greeting">Hello</h1>

<!-- load Dojo -->

<script src="../../dojo-release-1.11.2-src/dojo/dojo.js"

data-dojo-config="async: true"></script>

</body>

引入dojo.js与引入其它的javascript脚本是一样的。但是引入dojo时，有两种模式：同步、异步。异步模式是按需加载，同步方式时一次性加载。

在指定加载方式时，可以有两种指定方式：编程式、声明式。上面的例子是一个声明式，下面来一个编程式：

<!-- set Dojo configuration, load Dojo -->

<script>

dojoConfig= {

has: {

"dojo-firebug": true

},

parseOnLoad: false,

foo: "bar",

async: true

};

</script>

<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>

<script>

// Require the registry, parser, Dialog, and wait for domReady

require(["dijit/registry", "dojo/parser", "dojo/json", "dojo/_base/config", "dijit/Dialog", "dojo/domReady!"]

, function(registry, parser, JSON, config) {

// Explicitly parse the page

parser.parse();

// Find the dialog

var dialog = registry.byId("dialog");

// Set the content equal to what dojo.config is

dialog.set("content", "<pre>" + JSON.stringify(config, null, "\t") + "```");

// Show the dialog

dialog.show();

});

</script>

<!-- and later in the page -->

<div id="dialog" data-dojo-type="dijit/Dialog" data-dojo-props="title: 'dojoConfig / dojo/_base/config'"></div>

详情参见：

https://dojotoolkit.org/documentation/tutorials/1.10/dojo_config/index.html

2.2 指定dojo模块位置

引入dojo.js后，就要加载各种模块进行开发了。那么dojo的各个模块的位置在哪呢？

在使用dojo时，有一个全局配置dojoConfig，它有各个属性，需要了解一下。在了解各个配置项之前，先来了解一下dojo的目录：

dojo: 基本的dojo模块包。

dojox：dojox的扩展模块包。

dijit：提供的各种widget包。

themes：主题包。

util：工具包。

ex：这个是我自己加上的，是用于放置自定义模块目录的。

每个目录下的放置的都是一些模块，在dojo中，每个模块都是一个javascript文件：

下面简单的描述一下dojoConfig的配置项：

·baseUrl：指定加载各模块时基于哪个位置。·packages：是一个数组。数组中每一项都指定一个包名。

Name代表包名。location代表包的位置，是相对于baseUrl的。

例如上面例子中指定的，那么要加载dom模块。

写法是require([‘dojo/dom’],function(dom){});

在加载时，根据模块名称：dojo/dom，依据packages将dojo换成.，再拼接上baseUrl就成了：”../../dojo-release-1.11.2-src/dojo/./dom.js”。如果要加载“dijit/Dialog”，最终会解析成：”../../dojo-release-1.11.2-src/dojo/../dijit/Dialog.js”。

·async: 是配置是否采用异步加载模块的方式

·parseOnLoad：是否启用自动解析。这个属性下面会说明。

想要了解更多配置项，可以参考：

https://dojotoolkit.org/documentation/tutorials/1.10/dojo_config/index.html

2.3 模块加载require：

引入dojo.js后，就创建了两个全局的函数：require,define：

require是用于加载指定的module。

<script type="text/javascript" src="../../dojo-release-1.11.2-src/dojo/dojo.js" data-dojo-config="async: true"></script>

<script type="text/javascript">

console.log(require);

console.log(define);

require(["dojo/main", "dojo/on", "dojo/_base/array"], function(main, on, array){

console.log(main);

console.log(on);

console.log(array);

});

</script>

Define 则是定义Dojo模块用的。

require、define 详情参见：

https://dojotoolkit.org/documentation/tutorials/1.10/modules/index.html

在一个模块的js文件中，最终都要返回一个值（一个对象、一个function等）。譬如：dojo/dom模块提供的是一个对象，这个对象有三个方法：

查看某个模块的详情可以查看dojo官方提供的API：

https://dojotoolkit.org/api/

3、查找DOM节点

3.1 根据id查找dom节点

dom.byId(id, document) 。它其实就相当于document.getElementById(id)

3.2 根据css选择器查找节点

dojo/query 可以用来查找多个dom节点，返回一个NodeList。查找节点时，可以通过!来指定相应的选择器引擎。使用sizzle引擎，这个引擎也是jquery使用的引擎。

3.3 查找widget

registry.byId

4、Event 注册监听器

使用require/define引入dojo/on后，就可以使用on来注册事件监听器了。

require([“dojo/on”], function(on){

on(btn,”click”,function(){

//xxxx

});

});

5、声明式使用Dojo

在dojo中，有两种使用方式：编程式、声明式。编程式，就是使用JavaScript去创建对象，查找节点、绑定事件等。声明式则是在HTML元素上使用data-dojo-type属性来声明对象，绑定事件等。

譬如要创建一个Button，如果使用编程方式，就是要：

Require([“dijit/form/Button”,”dojo/on”], function(Button,on){

var btn= new Button();

on(btn,”click”,function(){

//xxxx

});

});

如果使用声明方式创建Button并绑定click成了：

data-dojo-type：指定创建的对象的类型。

data-dojo-props：指定创建对象时使用的option。

声明方式是如何工作的呢？

在Dojo中，有这样一个模块：dojo/parser，它就是用来解析声明方式，创建对象（包括widget），绑定方法的。Parser.parse() 是用来解析页面的; 如果在dojoConfig中配置了parseOnLoad为false，就需要手动的调用该方法来解析页面。

从上面的demo中，也可以看出可以通过<script type=”dojo/on” />来注册监听器。其实在Dojo中，可以使用script来做很我事呢：

·dojo/on 使用它，就相当于调用了on(target, eventType, eventHandler).

target：就是 包括该<script />的那个HTML上data-dojo-type指定的那个类型的对象。

eventType：是通过script的data-dojo-event来指定的。

eventHandler：就是<script >中间的部分。这会被封装成一个Function。该function的参数，可以通过data-dojo-args来指定。

·dojo/method 使用它可以重写对象的方法。

使用它时，如果指定了data-dojo-event，则该脚本片段对应的方法，会在创建对象后执行一次。如果指定了data-dojo-event，则认为是重写了该类的由data-dojo-event指定的方法。方法参数仍然是用data-dojo-args来表示。

·dojo/aspect：相当于使用了dojo/aspect。Dojo提供的面向切面编程的方式。

·dojo/watch ：参见Dojo文档

·dojo/connect：参见Dojo文档。

有关声明式使用Dojo的方式，可以参见文档：

https://dojotoolkit.org/documentation/tutorials/1.10/declarative/index.html

作为一个Dojo初学者，了解这么多已经足够使用Dojo、维护Dojo项目了。如果想对Dojo有更深入的了解，可以根据Dojo官方文档来学习。

Dojo: Quick Start的更多相关文章

  1. dojo.js --dojo Quick Start/dojo入门手册1

    我看了http://www.cnblogs.com/mylem/archive/2009/11/11/1600984.html这篇博客以后 ,就开始设计自己的代码,其实很多解释都是在我的代码里,所以就 ...

  2. Using dojo/query（翻译）

    In this tutorial, we will learn about DOM querying and how the dojo/query module allows you to easil ...

  3. 开始使用DOJO（翻译）

    http://dojotoolkit.org/documentation/tutorials/1.10/start/index.html 我怎么开始学习DOJO?文档在哪?我如何获取支持和培训?我应该 ...

  4. Configuring Dojo with dojoConfig - The Dojo Toolkit

    转载自Dojo官网 Configuring Dojo with dojoConfig The dojoConfig object (formerly djConfig) allows you to s ...

  5. Dojo Style Guide

    Contents: General Quick Reference Naming Conventions Specific Naming Conventions Files Variables Lay ...

  6. [算法]——快速排序（Quick Sort）

    顾名思义,快速排序(quick sort)速度十分快,时间复杂度为O(nlogn).虽然从此角度讲,也有很多排序算法如归并排序.堆排序甚至希尔排序等,都能达到如此快速,但是快速排序使用更加广泛,以至于 ...

  7. AngularJs2与AMD加载器(dojo requirejs)集成

    现在是西太平洋时间凌晨,这个问题我鼓捣了一天,都没时间学英语了,英语太差,相信第二天我也看不懂了,直接看结果就行. 核心原理就是require在AngularJs2编译过程中是关键字,而在浏览器里面运 ...

  8. Dojo前端开发框架与jQuery前端开发框架，对比分析总结

    最近Dojo和jQuery双双发布了最新的1.8版本,有着相同版本号的两个Javascript库也有许多核心的相同之处:相同的资源加载机制AMD.相同的选择器 引擎Sizzle等.作为业界知名的Jav ...

  9. Quick Cocos （2.2.5plus）CoinFlip解析（MenuScene display AdBar二次封装）

    转载自:http://cn.cocos2d-x.org/tutorial/show?id=1621 从Samples中找到CoinFlip文件夹,复制其中的 res 和 script 文件夹覆盖新建工 ...

随机推荐

  1. ABP源码分析九：后台工作任务

    文主要说明ABP中后台工作者模块(BackgroundWorker)的实现方式,和后台工作模块(BackgroundJob).ABP通过BackgroundWorkerManager来管理Backgr ...

  2. WCF学习之旅—WCF服务的WAS寄宿（十二）

    上接    WCF学习之旅—WCF服务部署到IIS7.5(九) WCF学习之旅—WCF服务部署到应用程序(十) WCF学习之旅—WCF服务的Windows 服务程序寄宿(十一) 八.WAS宿主 IIS ...

  3. 应用OpenMP的一个简单的设计模式

    小喵的唠叨话:最近很久没写博客了,一是因为之前写的LSoftmax后馈一直没有成功,所以在等作者的源码.二是最近没什么想写的东西.前两天,在预处理图片的时候,发现处理200w张图片,跑了一晚上也才处理 ...

  4. 解析大型.NET ERP系统 单据编码功能实现

    单据编码是ERP系统中必备的功能,用于生成各种单据的流水号,常常借助于日期时间等字符来生成一个唯一的单据号码.从软件的角度来说,就是为生成数据表的主键值(参考编号),从用户的角度来说,就是给业务单据制 ...

  5. H5拍照应用开发经历的那些坑儿

    一.项目简介 1.1.项目背景:这是一个在移动终端创新应用的项目,用户在浏览器端(微信/手Q)即可完成与金秀贤的合影,希望通过这样一种趣味体验,引发用户的分享与转发的热潮. 1.2.系统要求:ios6 ...

  6. awk命令简介

    awk是一个强大的文本分析工具,相对于grep的查找,sed的编辑,awk在其对数据分析并生成报告时,显得尤为强大.简单来说awk就是把文件逐行的读入,以空格为默认分隔符将每行切片,切开的部分再进行各 ...

  7. ASP.NET Core中的依赖注入（2）：依赖注入（DI）

    IoC主要体现了这样一种设计思想:通过将一组通用流程的控制从应用转移到框架之中以实现对流程的复用,同时采用"好莱坞原则"是应用程序以被动的方式实现对流程的定制.我们可以采用若干设计 ...

  8. Oracle数据库异机升级

    环境: A机:RHEL5.5 + Oracle 10.2.0.4 B机:RHEL5.5 需求: A机10.2.0.4数据库,在B机升级到11.2.0.4,应用最新PSU补丁程序. 目录: 一. 确认是 ...

  9. MySQL用户管理

    主要总结MySQL进行用户管理的基本实现,包含MySQL登录,添加用户,删除用户,为用户分配权限,移除某用户的权限,修改密码,查看权限等基本操作,所有命令均亲测实现.本博文是本人的劳动成果所得,在博客 ...

  10. 使用Design包实现QQ动画侧滑效果和滑动菜单导航

    Google在2015的IO大会上,给我们带来了更加详细的Material Design设计规范,同时,也给我们带来了全新的Android Design Support Library,在这个supp ...