Dojo 基础入门(二)

最新推荐文章于 2024-04-24 09:27:42 发布
最新推荐文章于 2024-04-24 09:27:42 发布
阅读量2k 收藏 1
点赞数
文章标签： dojo function import 编程 html div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kswaking/article/details/2232662
版权

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容器中用以显示。

 
kswaking
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Dojo基础资料
10-22
Dojo基础及练习，很好的入门材料.分三部分: fundamental,Interface及Developing skill
Dojo 基础入门(一)
05-24 184
摘要 本文介绍了Dojo的基本相关信息，并通过一些简单示例让大家对Dojo有一个初步的感性认识。之后介绍了开发环境的准备以及在开发过程中需要具备的概念。 由于新版本的Dojo对以前的0.4版本上做了重大变革，而现有的很多资源还是基于原有版本进行介绍的，这难免会引起初学者的困惑。本文尽量...
Dojo 基础入门(五)
05-24 124
1. Dojo详解 1.1. 通用函数 1.1.1. dojo.require 在前面的示例中，其实我们已经看到了dojo.require的使用。它是用来声明将要使用的dojo的组件类型。类似Java中的import语句。 Dojo是把代码...
Dojo 基础入门(三)
05-24 66
1. 开发环境准备 1.1. 开发环境 Dojo本身是由Javascript编写而成的，所以基于Dojo的扩展也是Javascript语言。目前，存在着一些支持Javascript语法高亮的编辑器，如UltraEdit, Notepad等。如果只是单纯的客户...
Dojo 基础入门(四)
05-24 75
1. 数据 1.1. 了解dojo.data dojo.data提供了封装的标准的数据存取API，作为统一的数据访问层而存在。所有的数据都是item或者item的属性。Dojo.data提供了一个基本的ItemFileReadStore类来读取JSON格式数...
dojo基础知识
08-01
学习dojo过程中的一些基础只是整理，适合入门看。
dojo基础知识内容简介
10-18
dojo基础知识，主要用于介绍一些dojo入门的内容
dojo入门系列教程.rar
04-14
dojo入门系列教程,包含入门简介,在javascript基础上介绍dojo的语法特色,ajax的dojo包装---xhr框架的编程要点, Dojo 事件机制.以及对dojo最具特色的web UI设计的全面介绍.
dojo：Dojo 1-Dojo 1工具包核心库
02-28
道场这是Dojo 1 Toolkit的基础软件包。 在保持不变的同时，新的开发主要集中在现代Dojo上。 请或者如果您需要更详细的技术状态和概述，请访问 。 该程序包有时被称为“核心”，它包含最普遍适用的子程序包和模块。 ...
HTML中的文档声明
小卡酷谋的博客
04-22 1021
浏览器都开始采纳新标准，但存在一个问题就是如何保证旧的网页还能继续浏览，在标准出来以前，很多页面都是根据旧的渲染方法编写的，如果用的标准来渲染，将导致页面显示异常。书写文档声明原因是不同版本所支持的 HTML 元素类型是不同的，我需要告诉浏览器以哪一种文档类型方式来解析当前的这个 HTML 文件。模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置高度，子元素设置一个百分比的高度是无效的。为保持浏览器渲染的兼容性，使以前的页面能够正常浏览，浏览器都保留了旧的渲染方法（如：微软的。
Web前端开发之HTML_3
zx1026409886的博客
04-23 823
表单在Web网页中用来给用户填写信息，从而采集用户信息，使网页具有交互功能。所有的用户输入内容的地方都用表单来写，如登录注册、搜索框。表单是由容器和控件组成的，一个表单一般应包含用户填写信息的输入框，按钮等，这些输入框、按钮叫做控件，表单就是容器，它能够容纳各种各样的控件。
用html写一个旋转菜单
最新发布
liulang68的博客
04-24 280
【代码】用html写一个旋转菜单。
用html画一个四叶草
liulang68的博客
04-20 983
以上是部分代码，需要请看主页加联系方式。
HTML 入门
lvshihao_的博客
04-16 1080
全称：Internet Engineering Task Force（国际互联网工程任务组），成立于1985年底，是一个权威 的互联网技术标准化组织，主要负责互联网相关技术规范的研发和制定，当前绝大多数国际互联网技术标准均出自IETF。全称：World Wide Web Consortium（万维网联盟），创建于1994年，是目前Web技术领域，最具影响力的技术标准机构。超文本：暂且简单理解为 “超级的文本”，和普通文本比，内容更丰富。注意：文档声明，必须在网页的第一行，且在 html 标签的外侧。
高频前端面试题汇总之HTML篇
qq_51685537的博客
04-18 657
不同的渲染模式会影响浏览器对 CSS 代码甚⾄ JavaScript 脚本的解析。它必须声明在HTML⽂档的第⼀⾏。浏览器渲染页面的两种模式（可通过document.compatMode获取，比如，语雀官网的文档类型是。
用html写一个有趣的动态背景
liulang68的博客
04-20 450
【代码】用html写一个有趣的动态背景。
html的输入框类型
xiaohua0708day的博客
04-18 386
请注意，不是所有的浏览器都支持所有类型的输入框，某些较新或不太常见的类型可能需要在较新版本的浏览器中才能正确显示和工作。用户不可见的字段，通常用于存储不需要用户输入但需要随表单提交的数据。用于输入电子邮件地址，某些浏览器会进行格式验证。用于输入URL地址，某些浏览器会进行格式验证。用于输入数字，通常带有上下箭头以增减数值。用于输入电话号码，不进行特定格式的验证。用于输入密码，输入的内容会被掩码处理。用于搜索字段，通常显示为圆角的输入框。用于重置表单中的所有字段到初始值。用于一组选项中选择一个。
html--玫瑰
stqer的博客
04-19 547
【代码】html--玫瑰。
dojo request get 接收 html
06-06
require(["dojo/request"], function(request){ request.get("http://example.com/mypage.html", { handleAs: "text" }).then(function(response){ console.log(response); // 打印 HTML 响应 }, function...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值