Dojo 基础入门(二)

最新推荐文章于 2017-02-27 13:19:56 发布

hanshuai123

最新推荐文章于 2017-02-27 13:19:56 发布

阅读量96

点赞数

分类专栏： dojo 文章标签： Dojo CSS 编程脚本 HTML

dojo 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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> 

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

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

<script type="text/javascript">

dojo.require("dojo.parser"); 

dojo.require("dijit.form.Button"); 

</script>

<script type="text/javascript">

dojo.addOnLoad(function(){

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

'onclick',

function(){

alert("Hello world!");

}

)

});

</script>

</head>

<body class="tundra">

<button dojoType="dijit.form.Button" id="helloBtn">Say Hello</button>

</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> 

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

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

<script type="text/javascript">

dojo.require("dojo.parser"); 

dojo.require("dijit.form.Button"); 

</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(){

var helloBtn=constructHelloBtn(); 

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

'onclick',

function(){

alert("Hello world!");

}

)

});

</script>

</head>

<body class="tundra">

<div id="btnOutDiv"></div>

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