Dojo学习笔记（一）：Hello Dojo

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

<!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>

文件目录结构如下：

备注：

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

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

2、定义AMD模块

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

/**
 * 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

<!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加载完成后再执行。

<!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、添加动画效果

<!DOCTYPE html>
<html>
<head>
    <Meta charset="UTF-8">
    <title>添加动画效果</title>
</head>
<body>
<script data-dojo-config="isDebug:1,'dojo/fx',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包配置：

var dojoConfig = {
    async: true,baseUrl: '.',packages: [
        'dojo','dijit','dojox','demo'
    ]
};

Dojo学习笔记（一）：Hello Dojo

猜你在找的Dojo相关文章