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 >     
    
    
<!--   装入Dojo 基本库  -->
    
< 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 >

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

 配置 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 查找常见的错误信息。


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


本文转自左洸博客园博客,原文链接:http://www.cnblogs.com/myqiao/archive/2009/05/14/1456952.html,如需转载请自行联系原作者


目录
相关文章
|
5月前
|
开发框架 小程序 JavaScript
基于mpvue框架的小程序项目搭建入门教程一
基于mpvue框架的小程序项目搭建入门教程一
113 0
|
11天前
|
Android开发
windowbuilder如何使用
windowbuilder如何使用
|
9月前
|
存储 JSON 监控
01-Httprunner-简介、安装及基本使用
01-Httprunner-简介、安装及基本使用
|
9月前
|
C#
如何使用MASA.Blazor
如何使用MASA.Blazor
80 0
|
11月前
|
存储 中间件 Python
Scrapy框架快速入门
Scrapy框架快速入门
|
前端开发
Boostrap快速入门
Boostrap快速入门
64 0
|
移动开发 JavaScript 前端开发
Three.js 入门指南
Three.js 是一个 JavaScript 库,用于在 Web 浏览器中创建 3D Web 图形。
366 0
Three.js 入门指南
|
编解码 移动开发 资源调度
ReactNative入门教程-项目结构解析及HelloWorld
ReactNative入门教程-项目结构解析及HelloWorld
191 0
ReactNative入门教程-项目结构解析及HelloWorld
|
前端开发 JavaScript 编译器
Bootstrap入门学习(一)——简介、下载
Bootstrap入门学习(一)——简介、下载
142 0
Bootstrap入门学习(一)——简介、下载
|
资源调度 前端开发
Gatsby 入门示例
Gatsby 初始化项目
248 0