特色栏目： python 批处理 net编程 Javascript Php Asp Css Html5 Android seo centos

Dojo入门：Hello Dojo!

来源：互联网收集：自由互联发布时间：2021-06-15

Dojo的全称是Dojo Toolkit，始创于2004年，是当前各种蓬勃发展的JS工具包中的佼佼者。 Dojo 为富互联网应用程序(RIA) 的开发提供了完整的端到端的解决方案，包括核心的 JavaScript 库，简单易

Dojo的全称是Dojo Toolkit，始创于2004年，是当前各种蓬勃发展的JS工具包中的佼佼者。Dojo 为富互联网应用程序(RIA) 的开发提供了完整的端到端的解决方案，包括核心的 JavaScript 库，简单易用的小部件（Widget）系统和一个测试框架，此外，Dojo 的开源开发社区还在不停地为它提供新的功能。

Dojo特性

Dojo Toolkit 的特性可以分到 4 个不同部分。这种划分使得开发人员可以将库大小保持到最小，确保应用程序性能不受大量 JavaScript 库下载的影响。例如，如果您只需要 Ajax 支持性能，您只需要包含 base 包；不需要包含扩展的 Dijit UI 组件，在本系列中稍后您将学习更多关于 Dojo 加载不同模块的方法。

Base

Base 包提供 Dojo Toolkit 的基础，包括一些功能，比如 DOM 使用函数、CSS3 基于选择器的 DOM 查询、事件处理、基本的动画、以及 Dojo 基于类的面向对象特性。本文主要介绍 Base。

Core

Core 包包含一些 Base 中没有包含的附加特性。通常，这些特性不像 Base 中的特性那样频繁使用；因此，它们单独加载减轻 Base 包的负担。从这一点上来讲，Core 包提供一些实际有用的组件，包括高级动画拖放、I/O、数据管理、国际化（i18n）、浏览器历史管理。Core 包不再本文范围之内。

Dijit

Dijit 包包含 Dojo 小部件和组件的扩展 UI 库。这些小部件的一些示例包括对话框、日历、调色板、工具提示和树。它也包括一些表单控件，这比标准 HTML 表单控件提供更多的功能，还有一些完整的布局管理选项。本系列的第 3 部分将深入介绍 Dijit 特性。

DojoX

Dojo eXtensions (DojoX) 包含工具箱的各个子项目。位于 DojoX 中的大多数是实验特性，但是也有一些稳定组件和特性。

下载Dojo

和其它JS工具包一样，Dojo不需要特别的环境和配置。你只需下载就能够使用。

它的下载地址：http://dojotoolkit.org/download/

如果你不想下载到本地，还可以通过CDN来获取，在你的页面中加入以下代码：

CDN的缺点是当CDN的环境不稳定的时候，引用的文件可能不会正确的加载，所以建议将文件下载到本地，这样才能保证您网站的正确访问。

Hello Dojo!

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Tutorial: Hello Dojo!</title>
</head>
<body>
    <h1 id="greeting">Hello</h1>
    <!-- load Dojo -->
    <script src="http://img.558idc.com/uploadfile/allimg/210615/2012223196-2.jpg"
            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>

带有动画效果的例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Tutorial: Hello Dojo!</title>
</head>
<body>
    <h1 id="greeting">Hello</h1>
    <!-- load Dojo -->
    <script src="http://img.558idc.com/uploadfile/allimg/210615/2012223196-2.jpg"
            data-dojo-config="async: true"></script>
 
    <script>
       require([
    'dojo/dom',
    'dojo/fx',
    'dojo/domReady!'
], function (dom, fx) {
    // The piece we had before...
    var greeting = dom.byId('greeting');
    greeting.innerHTML += ' from Dojo!';
 
    // ...but now, with an animation!
    fx.slideTo({
        node: greeting,
        top: 100,
        left: 200
    }).play();
});
    </script>
</body>
</html>

上一篇：dojo小例子（19）EnhancedGrid分页描述description调整
下一篇：dojo小例子（18）为dojox.form.Uploader增加Tooltip功能

Dojo入门：Hello Dojo!

Dojo特性

下载Dojo

Hello Dojo!

相关文章