dojo 1.10 学习日记-Hello Dojo！

来源：互联网发布：淘宝网宝宝学步鞋编辑：程序博客网时间：2024/05/21 12:39

源网页：http://dojotoolkit.org/documentation/tutorials/1.10/hello_dojo/index.html

1. Getting Started

新建temp.html，代码如下：

<!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></body></html>

这里写图片描述
发现网页打开得实在太慢了，所以从官网上下载了源码，解压后将dijit、dojo、dojox、util四个文件copy到temp.html相同目录下新建的文件夹dojoSource中来，再修改引用路径：

<script src="dojoSource/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>

运行结果

2. Defining AMD Modules

在文件夹demo中新建myModule.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];        }    };});

这里define的参数为模块的id，callback函数中的返回值为setText和restoreText，然后更新temp.html：

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>Tutorial: Hello Dojo!</title></head><body>    <h1 id="greeting">Hello</h1>    <script src="dojoSource/dojo/dojo.js"></script>    <script>        var dojoConfig = {            async: true,            packages: [{                name: "demo",                location: location.pathname.replace(/\/[^/]*$/, '') + '/demo'            }]        };    </script>    <script>        require([            'demo/myModule'        ], function (myModule) {            myModule.setText('greeting', 'Hello Dojo!');            setTimeout(function () {                myModule.restoreText('greeting');            }, 3000);        });    </script></body></html>

运行后3秒，网页中的“Hello Dojo!”变成了“Hello”，这里我在加载了dojo之后才配置了本地的myModule模块。

3. Waiting for the DOM

为确保在执行代码时浏览器的DOM可获取，通过plugin模块dojo/domReady，这样即使把script部分放到<h1>的前面，也需要等待DOM加载完成后才会执行该部分：

<body>    <script src="dojoSource/dojo/dojo.js" data-dojo-config="async: true"></script>    <script>        require([            'dojo/dom',            'dojo/domReady!'        ], function (dom, domConstruct) {            var greetingNode = dom.byId('greeting');            greeting.innerHTML += ' from Dojo!';        });    </script>    <h1 id="greeting">Hello</h1></body>

4. Adding Visual Effects

使用dojo/fx模块，为greeting添加滑动效果：

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>Tutorial: Hello Dojo!</title></head><body>    <h1 id="greeting">Hello</h1>    <script src="dojoSource/dojo/dojo.js"></script>    <script>        require([            'dojo/dom',            'dojo/fx',            'dojo/domReady!'            ], function (dom,fx){                var node=dom.byId("greeting");                node.innerHTML+=' from Dojo!';                fx.slideTo({                    node:greeting,                    top:100,                    left:200                }).play();            });    </script></body></html>

滑动后的效果如下：
这里写图片描述

0 0