Dojo QuickStart 快速入门教程 (2) 基本框架

下载库

首先，下载 Dojo 库：http://www.dojotoolkit.org/downloads

放了方便测试，我将文件将解压到 Web Server 的 "js/dojotoolkit" 文件夹中，如果你愿意，也可以缀上版本号。最后的目录结构应该像下图这样：

明确 dojo.js 文件的路径非常重要。只要 dojo.js 能被正确装入页面，package system 会自动处理对相关模块的引用和依赖。

The Dojo Book，提供了大量的指南和教程，更深入的介绍了获得各种 dojo 不同版本的方式。

也可以从 Google 的公用库引入脚本，如下：http://ajax.googleapis.com/ajax/libs/dojo/1.3.1/dojo/dojo.xd.js

基本框架
下面是一个 dojo 程序的基本框架：

<! DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd" >
< html >
     < head >
         < title > Dojo Toolkit Test Page </ title >

     
     < script type ="text/javascript" src ="js/dojotoolkit/dojo/dojo.js"
        djConfig ="parseOnLoad:true, isDebug:true" >
       </ script >

     < script type ="text/javascript" >
    /* 其他的脚本程序 */
     </ script >

     < style type ="text/css" >
    /* 样式表在这 */
     </ style >

     </ head >
     < body > <!-- 页面内容

-->
         < h1 id ="testHeading" > Dojo 基本框架 </ h1 >
         < div id ="contentNode" >
         < p > 一些内容 </ p >
     </ div >
     </ body >

</ html >

版权声明：本博客文章如非特别注明，均为原创，作者保留所有权利！欢迎转载，转载请注明作者左洸和出处BlogJava

配置 Dojo 启动参数
dojo在装入时应该进行参数配置，两个最重要的参数是 parseOnLoad 和 isDebug 。第一个参数确定是否在页面装入时解析 dojo 组件和内置标签；第二参数打开或关闭调试信息。有两种配置方式：
第一种方式在 <script> 标签中配置，如下：

< script type ="text/javascript" src ="js/dojotoolkit/dojo/dojo.js"
djConfig ="parseOnLoad:true, isDebug:true" >
</ script >

第二种方式在 dojo.js 装入之前，建立一个全局变量 djConfig，如下：

< script type ="text/javascript" >
    var djConfig = {
        isDebug:true,
        parseOnLoad:true
    };
</ script >
< script type ="text/javascript" src ="js/dojotoolkit/dojo/dojo.js" ></ script >

两种方式有同样的效果。

如何开始？
由于各种版本的浏览器对页面装入 "ready" 状态有不同的定义，所以 Dojo 提供了一个 dojo.addOnLoad 函数，程序从这里面开始，如下代码：

// 某个函数
    var init = function(){
        console.log("I run after the page is ready.");
    };
        //ready 后运行上面的函数
    dojo.addOnLoad(init);

    // 这是另一种形式，用匿名函数
    dojo.addOnLoad(function(){
        console.log("I also run, but second. ");
    });

重要提示：不要用 <body onLoad="someFunc"> 和 window.onload=someFunc 开始你的函数，而应该使用 dojo.addOnLoad(someFunc)

更多
通过 dojo.require() 函数，package system 会自动装入所有你需要的代码。下面的例子将装入一个 Button 和一个 TitlePane，系统会自动找到他们的代码，如下：

dojo.require( " dijit.form.Button " );
    dojo.require( " dijit.TitlePane " );
    dojo.addOnLoad( function () {
        dojo.byId("testHeading").innerHTML = "We're on our way!";
        console.log("onLoad fires after require() is done");
    } );

每个模块都有自己的 dojo.require() 参数，你可以从 Dijit API pages 找到他们

继续
在上面的例子中，我们第一次用了 dojo.byId() 函数，通过 id 来选择元素，并改变了元素的 innerHTML 值。后面我们将了解选择器。
将上面的代码放到框架中的“其他脚本程序”位置处，然后运行，如果你看到了： "We're on our way"，恭喜！
如果出现了错误，可以从 FAQ 查找常见的错误信息。

//==========================================

Dojo QuickStart 快速入门教程 (2) 基本框架

你可能感兴趣的:(Dojo QuickStart 快速入门教程 (2) 基本框架)