zoukankan      html  css  js  c++  java
  • Dojo入门:初识Dojo

     

     

    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来获取,在你的页面中加入以下代码:

    <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js"></script>

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

    Say Hello World

    为了检验我们下载的Dojo工具包是否正确,按照惯例,我们来写一个Dojo版的Helloworld程序。我们要实现的功能是在页面中动态的输出Hello World字符串。

    首先需要新建一个页面,并添加dojo的引用。

    <script type="text/javascript" src="resources/dojo/dojo.js"></script>

    在页面中加入以下JS代码:

            dojo.addOnLoad(function () {
                dojo.create("div", { innerHTML: "Hello world!" }, dojo.body());
            });

    OK, 在浏览器中打开这个页面,查看运行效果:

    下面是整个页面的代码,复制前请确保dojo.js的路径是否正确。

    复制代码
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Dojo版Heloworld</title>
    </head>
    <body>
        <h1>
            Dojo版Heloworld</h1>
        <script type="text/javascript" src="resources/dojo/dojo.js"></script>
        <script type="text/javascript">
            dojo.addOnLoad(function () {
                dojo.create("div", { innerHTML: "Hello world!" }, dojo.body());
            });
        </script>
    </body>
    </html>
    复制代码

    如果认为此文对您有帮助,别忘了支持一下哦!

    声明:本博客原创文字只代表本人工作中在某一时间内总结的观点或结论,与本人所在单位没有直接利益关系。转载时请在文章页面明显位置给出原文链接。
  • 相关阅读:
    利用wikipedia 的API实现对其内容的查询
    Android 无标题 全屏设置
    anroid中ScrollView嵌套ListView
    ListView的不同item加载不同Layout,listviewlayout
    ListView缓存机制
    演化理解 Android 异步加载图片
    【自定义控件】自定义属性
    【自定义控件】组合控件
    【自定义控件】的基本步骤
    ContentResolver如何获取本地媒体文件
  • 原文地址:https://www.cnblogs.com/Jeely/p/11438179.html
Copyright © 2011-2022 走看看