`

Dojo 基础入门(二)

    博客分类：
  • dojo
DojoCSS编程脚本HTML 
阅读更多
1.            简单示例
我们对任何事物的了解都是从感性认识开始的，所以在这里我们也用一个经典的“Hello world！”示例来表现Dojo的使用。

1.1.    页面样式




很简单，页面上一个按钮，点击按钮后，跳出一个显示Hello World信息的对话框。

1.2.    代码分析
<html>

    <head>

        <title>Hello World</title>



        <style type="text/css">

            @import "../dojoroot/dojo1.0.2/dijit/themes/tundra/tundra.css";

            @import "../dojoroot/dojo1.0.2/dojo/resources/dojo.css"

        </style> <!--(1)-->

   

        <script type="text/javascript" src="../dojoroot/dojo1.0.2/"

                djConfig="parseOnLoad: true, isDebug: true"></script><!--(2)-->

               

       

        <script type="text/javascript">

            dojo.require("dojo.parser"); <!--(3)-->

            dojo.require("dijit.form.Button"); <!--(4)-->

           

           

        </script>

       

       

        <script type="text/javascript">    

           

            dojo.addOnLoad(function(){

                dojo.connect(dojo.byId('helloBtn'),

                'onclick',

                function(){

                    alert("Hello world!");

                }

                )

            });<!--(5)-->  

           

           

        </script> 

    </head>

   

    <body class="tundra">

            <button dojoType="dijit.form.Button" id="helloBtn">Say Hello</button><!--(6)-->

    </body>

</html>


(1) <style type="text/css">

            @import "../scripts/dojo-1.0.2/dijit/themes/tundra/tundra.css";

            @import "../scripts/dojo-1.0.2/dojo/resources/dojo.css"

        </style>

引入css样式表的定义文件，示例使用的是dojo自带的css样式。可替换成我们自定义的样式文件。

(2) <script type="text/javascript" src="../scripts/dojo-1.0.2/dojo/dojo.js"

                djConfig="parseOnLoad: true, isDebug: true"></script>

①     确定dojo.js文件的相对路径，由此确定使用dojo的方式编程，这是必需的。

②     djConfig="parseOnLoad: true" 与(3)中的 dojo.require("dojo.parser");一起配合来使页面能使用Dojo的解析架构。

③     djConfig是Dojo内置的一个全局对象，可以通过它来控制Dojo的行为。在本示例中，isDebug是djConfig的一个属性，设置是否为debug模式，如果为真，则console.debug的输出有效，这在开发时很有用，在发布时建议设置为false。

(4) dojo.require("dijit.form.Button");声明将要使用的dojo的组件类型。类似Java中的import语句

(5) <script type="text/javascript">    

           

            dojo.addOnLoad(function(){

                dojo.connect(dojo.byId('helloBtn'),

                'onclick',

                function(){

                    alert("Hello world!");

                }

                )

            });

           

           

        </script>

① dojo.addOnLoad表示在HTML页面加载后执行脚本程序

② dojo.connect用于连接事件处理器（某一个函数）到一个元素或者一个对象。

(6) <button dojoType="dijit.form.Button" id="helloBtn">Say Hello</button>这是在页面中定义一个要使用的按钮控件，由dojoType属性指明可复用到的dojo组件类型是dijit.form.Button

1.3.    实现方式
1.3.1.      标签式实现
在页面中声明组件的方式可以像上面的示例一样，直接在标签中用dojoType对应的属性值来表明该组件对应的类型以及可实现的功能。

除此之外还有另一种实现方式，编程实现。

1.3.2.      编程实现
标签式实现需要在页面开发的时候，就要确定组件的类型、传入的参数，编程方式与之相比较就具有了更大的灵活性，参数可以动态生成以及页面与业务逻辑分离等多种好处。

下面我们用编程方式来举例来实现之前Hello World页面同样的功能。      

<html>

    <head>

        <title>Hello World</title>



        <style type="text/css">

            @import "../dojoroot/dojo1.0.2/dijit/themes/tundra/tundra.css";

            @import "../dojoroot/dojo1.0.2/dojo/resources/dojo.css"

        </style> <!--(1)-->

   

        <script type="text/javascript" src="../dojoroot/dojo1.0.2/"

                djConfig="parseOnLoad: true, isDebug: true"></script><!--(2)-->

               

       

        <script type="text/javascript">

            dojo.require("dojo.parser"); <!--(3)-->

            dojo.require("dijit.form.Button"); <!--(4)-->

           

           

        </script>

       

       

        <script type="text/javascript">    

            function constructHelloBtn(){

                var btnOutDiv=dojo.byId("btnOutDiv");

               

                helloBtnDiv=document.createElement("div");

                var helloBtn=new dijit.form.Button({id:"helloBtn",label:"Say Hello"},helloBtnDiv);

               

                btnOutDiv.appendChild(helloBtn.domNode);

               

                return helloBtn;

            }  

           

           

            dojo.addOnLoad(function(){<!--(5)-->

               

                var helloBtn=constructHelloBtn();   <!--(7)-->

               

                dojo.connect(dojo.byId('helloBtn'),

                'onclick',

                function(){

                    alert("Hello world!");

                }

                )

            });

           

           

        </script> 

    </head>

   

    <body class="tundra">

            <div id="btnOutDiv"></div><!--(6)-->

    </body>

</html>


标识(1)(2)(3)(4)的形式、含义与之前完全一致，这里不再赘述。我们把关注点主要集中在(5)(6)(7)上。

先看(6)，标签式实现要确定该组件的dojoType,以及参数，比如id。而编程方式实现只是定义一个html div组件作为将来放置动态生成的dojo组件的外层容器,唯一的id是为了将来查找该div做准备。

(5)处还是dojo.addOnLoad函数，表示在HTML页面加载时执行脚本程序，与之前代码不同的是，多了var helloBtn=constructHelloBtn();语句来构建一个按钮组件的实例。深入到自定义的constructHelloBtn()函数内部，我们可以看到，首先查找到在(6)处定义的div容器，之后新建一个dijit.form.Button的实例,其中设置id,label参数。这里是简单实现，我们可以想见其他诸如参数从某个配置文件动态读取后传入的方式。最后是把生成的该组件实例放入到外层div容器中用以显示。

分享到：
| Dojo 基础入门(一)
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    dojo快速入门文档

    ### Dojo 快速入门知识点详解 #### 一、Dojo 概览 Dojo 是一个功能强大且灵活的开源 JavaScript 库，主要用于构建高性能的富客户端 Web 应用程序。Dojo 提供了一系列工具和组件，使得开发者能够轻松创建交互式 Web...

    dojo权威入门教程

    在学习Dojo前，首先要理解JavaScript的基础知识，包括变量、数据类型、函数、对象和DOM操作。Dojo的核心在于它的模块系统，通过AMD（异步模块定义）模式，可以实现模块的异步加载和依赖管理，这是Dojo区别于其他...

    dojo快速入门(中文版)

    《dojo快速入门(中文版)》 dojo Toolkit是一个开源的JavaScript工具包，旨在简化Web应用的构建过程，提供高效且设计精良的API。它的轻量级特性（约26kb）和强大的功能集使得dojo在各种项目中都能灵活运用。核心功能...

    图书：Dojo入门

    《Dojo入门》这本书主要介绍了Dojo JavaScript库的使用，帮助初学者快速掌握这个强大的前端开发工具。Dojo是一个开源的JavaScript框架，旨在提供一站式的解决方案，包括UI组件、数据管理、动画效果、Ajax交互等功能...

    dojo入门实例介绍

    首先，理解Dojo的基础架构至关重要。Dojo采用AMD（Asynchronous Module Definition）模块化加载机制，允许开发者按需加载所需模块，提高页面性能。`require`函数是AMD的核心，用于加载依赖的模块。例如： ```...

    dojo技术入门ysk

    ### Dojo技术入门知识点概述 #### 一、Dojo简介 Dojo是一个开源的JavaScript工具包，主要用于构建富互联网应用（Rich Internet Applications, RIA）。它具有轻量级且易于安装的特点，在Web 2.0时代，随着Ajax技术...

    Dojo快速入门教程

    ### Dojo快速入门教程 Dojo 是一个功能强大的面向对象 JavaScript 框架，它能够帮助开发者构建高性能、跨平台的 Web 应用程序。本教程将详细介绍 Dojo 的核心概念、基本用法以及如何利用 Dojo 开发 Web 应用。 ###...

    dojo入门系列教程.rar

    dojo入门系列教程,包含入门简介,在javascript基础上介绍dojo的语法特色,ajax的dojo包装---xhr框架的编程要点, Dojo 事件机制.以及对dojo最具特色的web UI设计的全面介绍.

    dojo1.8.chm+dojo1.11中文入门pdf

    Dojo 1.11版本在此基础上进一步优化了性能和兼容性，同时增加了新的功能和API。中文入门手册可能会介绍如何使用Dojo的Dijit框架创建可复用的UI组件，Dijit提供了一系列预定义的UI控件，如按钮、表单、对话框等，它们...

    dojo控件的使用和入门心得

    ### Dojo控件的使用和入门心得 #### Dojo简介及其优势 Dojo是一个功能强大的JavaScript框架，专门设计用于简化富互联网应用（RIA）的开发。作为一种DHTML Toolkit，Dojo封装了大量的常用功能，旨在提高前端开发...

    arcgis for js离线部署及dojo框架的入门

    在上面的配置中，我们首先指定了dojo的基础URL，然后定义了一个名为"js"的包，并指定了其所在的位置。在这里，我们可以根据需要添加更多的包和配置项。 Dojo框架入门 Dojo是一个流行的JavaScript框架，能够帮助...

    Dojo Developer Guide （dojo 开发 指南）

    4. **小部件工具包**：Dojo 中最活跃的部分是小部件工具包，它包含了一个基于模板的小部件构建系统、声明式解析器（可以在页面中放置小部件而无需编写 JavaScript 代码），以及一组基础组件，用于解决常见的 Web ...

    dojo例子 各方法的用法

    在这个"dojo例子 各方法的用法"的压缩包中，我们很可能会找到关于如何使用Dojo库的各种示例，包括"HelloWorld"这样的基础入门教程以及其他复杂功能的演示。 首先，让我们了解一下Dojo的核心概念。Dojo的基础模块`...

    DOJO权威指南

    学习DOJO的入门书籍，从基础开始深入讲解DOJO使用和原理

    Dojo之Widget标签开发 - 我为人人，人人为我 - BlogJava

    在Widget开发中，通常会声明一个新的Widget类，继承自Dojo的基础Widget类，如`dijit/_WidgetBase`。 2. **templateString或templatePath**: Widget的HTML结构通常由模板字符串（templateString）或模板路径...

    Dojo的一些学习资料

    "Dojo快速入门.pdf"可能会介绍Dojo的安装、配置过程，快速上手的方法，以及Dijit组件的初步使用。最后，"dojo组件的使用.pdf"将深入讲解Dijit的各种组件，如何配置、自定义以及在实际项目中应用它们。 通过这些学习...

    技术基础：从头开始学习 Dojo

    1. **Base**：基础包提供了 Dojo Toolkit 的基石，包括 DOM 操作、CSS3 选择器、事件处理、基本动画以及基于类的面向对象特性。Base 包的目的是使开发者能快速入门，提供必要的功能，如 DOM 查询和事件绑定。 2. **...

    geting started with dojo

    ### Dojo 入门教程概览 #### 一、课程目标与内容介绍 - **课程目标**：本课程旨在帮助初学者快速掌握 Dojo 框架的基本使用方法，并能够运用该框架进行基本的 Web 开发工作。 - **课程内容**： - 第一天主要介绍 ...

Magicbox
Global site tag (gtag.js) - Google Analytics