文档章节

Dojo 初探

baiyangcao
 baiyangcao
发布于 2017/04/23 21:46
字数 1432
阅读 7
收藏 0
点赞 0
评论 0

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 文件之后,会提供两个可用的全局函数 requiredefine,前者用于引入模块,后者用于定义新的模块, 让我们荡起双桨...啊呸,让我们先从引用模块做起

<!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.jsdom-constrct.js 两个文件

而后是回调函数,回调函数有两个参数 domdomConstruct, 是不是和加载的模块很像呢?没错,他们就是模块加载后返回的对象, 使用这些对象就可以引用在模块中定义的方法了

最后在回调函数中,调用 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 文件中, definerequire 参数相同,一个模块 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, 并调用函数 setTextrestoreText 设置标题文本

等待 DOM 加载完成

一般在开发 Web 程序中,我们需要等待页面 DOM 元素加载完成之后再执行代码, 可以通过一种特殊 AMD 模块实现 —— “插件”,插件的引用方式与其他模块一样, 只不过会在模块标识符的最后加上感叹号(!),Dojo 提供了 dom/domReady 插件, 用于实现 document.ready 事件,在 rquiredefine 中引用插件, 而后回调函数就会在 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'
    ]
};

© 著作权归作者所有

共有 人打赏支持
baiyangcao
粉丝 0
博文 11
码字总数 8082
作品 0
沈阳
程序员
Dojo Mobile 控件初探

你有想过在iPhone或是Android设备浏览器上运行与手机原生程序界面相同的Web程序吗? 你有想过让你的Web应用更适合在手持设备上交互使用吗?如果是,那么你有必要读一下这篇文章。 移动开发是...

红薯
2011/08/23
2K
5
IBM WebSphere Commerce初探

1,IBM WebSphere Commerce 做一个产品,首先得了解它是干什么用的,IBM WebSphere Commerce(以下简称Commerce)是ibm websphere系列下的一个基于b2b,c2c的一个电子商务的中间件产品,Websphe...

拉夫斯基
2015/11/23
30
0
目录:Dojo学习笔记

1.Dojo学习笔记 1.1 引言 Dojo是一个用javascript语言实现的开源DHTML工具包。ArcGIS API便是基于Dojo实现的,如果想用ArcGIS API实现一些复杂的功能,学习Dojo还是很有必要的,现在我们先看...

LoveCarpenter
2016/12/29
0
0
Dojo入门与dojo项目配置方案(一)

何为dojo Toolkit Dojo Toolkit(以下简称dojo)是一个javascript语言实现的、跨浏览器的DHTML(Dynamic HTML)工具包。Dojo ToolKit包括了构建大规模Ajax驱动的web应用程序所需要的一切。所...

tkorays
2014/01/01
0
0
spring dojo EnhancedGrid出不来数据,这怎么办啊?

我的jsp如下: <%@page language="java" isELIgnored="false" contentType="text/html; charset=utf-8" pageEncoding="UTF-8"%>...

wenwen1
2013/01/10
700
0
Dojo 1.9.2 版本发布,支持 IE11

Dojo 1.9.2 版本发布了,此版本增加了bug修复和官方支持现代浏览器。 主要突出的更新有: 支持IE11 支持 W3C 在触屏组件的指针事件API (需要支持IE11 ) 修复了现代浏览器Firefox和Chrome的bug...

oschina
2013/12/11
2.4K
9
JS 基金会发布 Dojo 2.0 ,带来大量改进

2018年5月2日,Dojo团队发布了Dojo第二版(Dojo 2)。Dojo是一种为JavaScript开发人员扩展开发过程提供帮助的工具箱。Dojo 2聚焦于开发人员对构建现代企业应用的需求,是在2007年发布Dojo 1的...

李玉珏
05/11
0
0
Dojo 1.4 正式版发布

在历经两个 RC 版本后,Dojo 1.4 的正式版终于跟大家见面了,该版本在性能和稳定性上都较上一版本有着明显的提升。功能上当然也新增了不少,主要包括如下一些内容: IO Pipeline topics doj...

红薯
2009/12/11
1K
0
dojo 控件样式修改

require(["dojo"], function(dojo){ // Passing only an ID or node returns the computed style object of the node: dojo.style("thinger"); // Passing a node and a style property retu......

幸福的魂魄
2013/12/14
0
0
mootools,jquery,dojo

最近,我开始关注Dojo了,Dojo是一个强大的面向对象JavaScript框架,既然我那么喜欢MooTools,也没理由不喜欢Dojo。与Dojo相比我对MooTools 和 jQuery 是比较熟的。这并不重要,不管使用什么样...

水稻
2015/01/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

实现异步有哪些方法

有哪些方法可以实现异步呢? 方式一:java 线程池 示例: @Test public final void test_ThreadPool() throws InterruptedException { ScheduledThreadPoolExecutor scheduledThre......

黄威
31分钟前
0
0
linux服务器修改mtu值优化cpu

一、jumbo frames 相关 1、什么是jumbo frames Jumbo frames 是指比标准Ethernet Frames长的frame,即比1518/1522 bit大的frames,Jumbo frame的大小是每个设备厂商规定的,不属于IEEE标准;...

六库科技
今天
0
0
牛客网刷题

1. 二维数组中的查找(难度:易) 题目描述 在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序。请完成一个函数,输入...

大不了敲一辈子代码
今天
0
0
linux系统的任务计划、服务管理

linux任务计划cron 在linux下,有时候要在我们不在的时候执行一项命令,或启动一个脚本,可以使用任务计划cron功能。 任务计划要用crontab命令完成 选项: -u 指定某个用户,不加-u表示当前用...

黄昏残影
昨天
0
0
设计模式:单例模式

单例模式的定义是确保某个类在任何情况下都只有一个实例,并且需要提供一个全局的访问点供调用者访问该实例的一种模式。 实现以上模式基于以下必须遵守的两点: 1.构造方法私有化 2.提供一个...

人觉非常君
昨天
0
0
《Linux Perf Master》Edition 0.4 发布

在线阅读:https://riboseyim.gitbook.io/perf 在线阅读:https://www.gitbook.com/book/riboseyim/linux-perf-master/details 百度网盘【pdf、mobi、ePub】:https://pan.baidu.com/s/1C20T......

RiboseYim
昨天
1
0
conda 换源

https://mirrors.tuna.tsinghua.edu.cn/help/anaconda/ conda config --add channels https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/free/conda config --add channels https://mir......

阿豪boy
昨天
1
0
Confluence 6 安装补丁类文件

Atlassian 支持或者 Atlassian 缺陷修复小组可能针对有一些关键问题会提供补丁来解决这些问题,但是这些问题还没有放到下一个更新版本中。这些问题将会使用 Class 类文件同时在官方 Jira bug...

honeymose
昨天
0
0
非常实用的IDEA插件之总结

1、Alibaba Java Coding Guidelines 经过247天的持续研发,阿里巴巴于10月14日在杭州云栖大会上,正式发布众所期待的《阿里巴巴Java开发规约》扫描插件!该插件由阿里巴巴P3C项目组研发。P3C...

Gibbons
昨天
1
0
Tomcat介绍,安装jdk,安装tomcat,配置Tomcat监听80端口

Tomcat介绍 Tomcat是Apache软件基金会(Apache Software Foundation)的Jakarta项目中的一个核心项目,由Apache、Sun和其他一些公司及个人共同开发而成。 java程序写的网站用tomcat+jdk来运行...

TaoXu
昨天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部