Dojo初探
Dojo 是一个由 Dojo 基金会开发的 Javascript 工具包，
据说受到 IBM 的永久支持，其包括四个部分： dojo, dijit, dojox, util
dojo: 有时也被称作core，包括一些常用的软件包和模块，
涉及了例如： AJAX， DOM 操作， 面对对象编程，事件，承诺（Promises），
数据存储，拖拽和国际化等类库dijit: 一个扩展的控件包包括其底层类等，完全基于 Dojo core 构建dojox: 基于 Dojo core 和 dijit 构建的大量的包和模块，
这些包和模块的成熟度参差不齐，有些模块很成熟，但也有些模块仍处在实验阶段util: 提供工具包余下的功能，如可构建、测试和文档化的代码
Dojo 第一例
像其他 Js 框架一样，Dojo 可以通过引用本地的 dojo.js 文件使用，
也可以通过 CDNs 使用，在 1.7 版本之前，Dojo 会一次性的加载所有模块，
而在那之后，为了支持开发完全模块化的应用程序，Dojo 使用了基于
Asynchronous Module Definition (AMD)
的模块化架构，可以使模块在需要的时候才被加载，防止了网络资源浪费，提高加载速度。
在我们加载了 dojo.js 文件之后，会提供两个可用的全局函数 require
和 define，前者用于引入模块，后者用于定义新的模块，
让我们荡起双桨...啊呸，让我们先从引用模块做起
<!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.10.4/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('<em> Dojo!</em>', greetingNode);
});
</script>
</body>
</html>
注： 加载
dojo.js时用的地址以//开头，而没有相应的协议名称，如http:，
这表示这个脚本使用和当前页面相同的协议加载
首先，require 函数传入了两个参数，第一个是要加载的模块名称数组，
第二个是模块加载完成之后的回调函数，
先来看模块名称数组，['dojo/dom', 'dojo/dom-construct']，
这里的模块名称其实就是对应要加载的 JS 文件路径，
如果下载 Dojo 包就会发现，其实在 dojo 文件夹下存在 dom.js
和 dom-constrct.js 两个文件
而后是回调函数，回调函数有两个参数 dom 和 domConstruct，
是不是和加载的模块很像呢？没错，他们就是模块加载后返回的对象，
使用这些对象就可以引用在模块中定义的方法了
最后在回调函数中，调用 dom.byId 获取 id='greeting' 的 DOM 节点，
与 document.getElementById 类似，然后使用 domConstruct.place
方法在 greeting 节点后面添加一个 em 节点
自定义 AMD 模块
定义自己的模块可以通过 define 函数，定义自己的模块，
首先要保证 HTML 文件是从 HTTP 服务器加载的，因为有些浏览器的安全策略对
file:/// 协议有很多限制。一个模块其实就是一个 js 文件，如下：
define([
// 列出当前模块所依赖的模块
'dojo/dom'
], function(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/myModule.js 文件中，
define 和 require 参数相同，一个模块 ID 数组和一个回调函数，
define 回调函数的返回值将会作为引入模块时对应的模块值。
蓝后，我们来调用我们刚刚定义的模块， 在当前目录添加如下 html 文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello Dojo!</title>
</head>
<body>
<h1 id="greeting">Hello</h1>
<!-- 配置 Dojo -->
<script>
// 在加载 dojo.js 之前添加 dojoConfig 变量用于配置 dojo
// 其效果与在 script 标签上添加 data-dojo-config 属性一样
var dojoConfig = {
async: true,
// 注册 demo 包的位置，确保能正确加载自定义模块
packages: [{
name: "demo",
location: location.pathname.replace(/\/[^/]*$/, '') + '/demo'
}]
};
</script>
<!-- 加载 Dojo -->
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<script>
require([
'demo/myModule'
], function (myModule) {
myModule.setText('greeting', 'Hello Dojo!');
setTimeout(function () {
myModule.restoreText('greeting');
}, 3000);
});
</script>
</body>
</html>
如上代码引入 demo/myModule 模块，模块返回值复制给 myModule，
并调用函数 setText 与 restoreText 设置标题文本
等待 DOM 加载完成
一般在开发 Web 程序中，我们需要等待页面 DOM 元素加载完成之后再执行代码，
可以通过一种特殊 AMD 模块实现 —— “插件”，插件的引用方式与其他模块一样，
只不过会在模块标识符的最后加上感叹号(!)，Dojo 提供了 dom/domReady 插件，
用于实现 document.ready 事件，在 rquire 或 define 中引用插件，
而后回调函数就会在 DOM 加载完成之后执行
require([
'dojo/dom',
'dojo/domReady!'
], function (dom) {
var greeting = dom.byId('greeting');
greeting.innerHTML += ' from Dojo!';
});
注：
dojo/domReady!后面的感叹号是必须的！！！
当然，如果我们把代码块放到了 body 的最下方加载，就不用使用 dom/Ready!插件了。
对于 dom/Ready 模块，我们并没有用到其返回值，所以，这里将其放到了模块列表的最后，
也没有在回调函数的参数列表中添加相应的引用，对于其他不需要使用返回值的模块也需要这样处理。
使用本地 Dojo 源
之前的例子使用的都是 CDN 来加载 Dojo，同样我们可以引用本地的 Dojo 源，
不过需要稍稍修改一下 dojo 的配置，来引入 dojo 的各个包
var dojoConfig = {
async: true,
baseUrl: '.',
packages: [
'dojo',
'dijit',
'dojox',
'demo'
]
};
Dojo初探的更多相关文章
- Dojo初探之5:dojo的request（请求）操作、请求过程事件绑定和隐藏数据data()操作（基于dojo1.11.2版本）
前言: 上一章详细阐述了dojo的事件绑定操作,本章将讲解dojo的请求操作 注:dojo的请求操作与js和jquery完全不同! 1.dojo的请求 dojo通过request.get()/.put ...
- Dojo初探之4:dojo的event（鼠标/键盘）事件绑定操作（基于dojo1.11.2版本）
前言: 上一章详解了dojo的dom/query操作,本章基于dom/query基础上进行事件绑定操作 dojo的事件 dojo的事件绑定操作分为鼠标和键盘两种进行详解 1.鼠标事件 我们沿用上一章中 ...
- Dojo初探之3:dojo的DOM操作、query操作和domConstruct元素位置操作（基于dojo1.11.2版本）
前言: 前面两章讲了dojo的基本规范和配置,当然这个配置不是必须的,当你有这需求的时候就可以用到dojo的config配置. dojo的所有js都是符合AMD规范进行异步加载的:http://blo ...
- Dojo初探之2:设置dojoConfig详解，dojoConfig参数详解+Dojo中预置自定义AMD模块的四种方式（基于dojo1.11.2）
Dojo中想要加载自定义的AMD模块,需要先设置好这个模块对应的路径,模块的路径就是这个模块的唯一标识符. 一.dojoConfig参数设置详解 var dojoConfig = { baseUrl: ...
- Dojo初探之1：AMD规范，编写符合AMD规范（异步模块加载机制）的模块化JS(其中dojo采用1.11.2版本)
一.AMD规范探索 1.AMD规范(即异步模块加载机制) 我们在接触js的时候,一般都是通过各种function来定义一些方法,让它们帮我们做一些事情,一个js可以包含很多个js,而这些functio ...
- 初探领域驱动设计（2）Repository在DDD中的应用
概述 上一篇我们算是粗略的介绍了一下DDD,我们提到了实体.值类型和领域服务,也稍微讲到了DDD中的分层结构.但这只能算是一个很简单的介绍,并且我们在上篇的末尾还留下了一些问题,其中大家讨论比较多的, ...
- AngularJs2与AMD加载器(dojo requirejs)集成
现在是西太平洋时间凌晨,这个问题我鼓捣了一天,都没时间学英语了,英语太差,相信第二天我也看不懂了,直接看结果就行. 核心原理就是require在AngularJs2编译过程中是关键字,而在浏览器里面运 ...
- CSharpGL(8)使用3D纹理渲染体数据 (Volume Rendering) 初探
CSharpGL(8)使用3D纹理渲染体数据 (Volume Rendering) 初探 2016-08-13 由于CSharpGL一直在更新,现在这个教程已经不适用最新的代码了.CSharpGL源码 ...
- Dojo前端开发框架与jQuery前端开发框架，对比分析总结
最近Dojo和jQuery双双发布了最新的1.8版本,有着相同版本号的两个Javascript库也有许多核心的相同之处:相同的资源加载机制AMD.相同的选择器 引擎Sizzle等.作为业界知名的Jav ...
随机推荐
- java语言描述 猴子吃桃问题（递归和循环写法）
//题目:猴子吃桃问题:猴子第一天摘下若干个桃子,当即吃了一半,还不瘾,又多吃了一个//第二天早上又将剩下的桃子吃掉一半,又多吃了一个//以后每天早上都吃了前一天剩下 的一半零一个.到第10天早上想再 ...
- Jetson tx2 串口通信
主要参考了这篇博客:https://blog.csdn.net/zomb1e0117/article/details/85157014 其中需要注意的是最后的时候cutecom端口需要把设备改为:/d ...
- c++动态库封装及调用（2、windows下动态库创建）
DLL即动态链接库(Dynamic-Link Libaray)的缩写,相当于Linux下的共享对象.Windows系统中大量采用了DLL机制,甚至内核的结构很大程度依赖与DLL机制.Windows下的 ...
- 初识Tarjan
Tarjan,一个十分有用的东西,可以求有向图的强连通分量,复杂度达到O(V+E). Tarjan算法是基于对图深度优先搜索的算法,每个强连通分量为搜索树中的一棵子树.搜索时,把当前搜索树中未处理的节 ...
- 成都Uber优步司机奖励政策（3月22日）
滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...
- 西安Uber优步司机奖励政策（8月10日到8月16日）
1) 工作日(周一到周五)早高峰时间段(7点到9:30点).晚高峰时间段(5点到8点)车费 2.0 倍,每单奖励部分上限35元 例:在高峰时段中,假设行程基本车费为￥15,只要达到奖励前提,最后你将获 ...
- jsp传递参数的四种方法
1.form表单 2.request.setAttribute();和request.getAttribute(); 3.超链接:<a herf="index.jsp"?a= ...
- 使用 Fiddler工具模拟post四种请求数据
post请求主体详解: 对于get请求来说没有请求主体entity-body.对于post请求而言,不会对发送请求的数据格式进行限制,理论上你可以发任意数据,但是服务器能不能处理就是另一回事了.服务器 ...
- JDK11安装后，环境变量的坑
安装了最新的JDK11,安装完后设置环境变量,打开CMD,没生效 检查了3遍,都没发现问题,在PATH中将JAVA设置移到第一也不行 最后偶然发现,在点击如图右下的‘编辑文本’,用文本方式编辑时,发现 ...
- 第七模块：项目实战一 第1章 项目实战：CRM客户关系管理系统开发
01-crm介绍 02-权限系统介绍 03-第一版表结构设计 04-第二版表结构设计 05-orm中创建表结构 06-销售管理系统业务 07-销售管理系统权限信息录入 08-快速实现简单的权限控制的设 ...