对以前项目中用到的dojo框架进行一个框架式的总结,以备参考学习。
主要组成... 1
开发注意... 3
Dojo代码约定... 3
Dojo形式的脚本库... 4
Dojo Build. 4
Dojo ToolBox. 5
推荐资料... 6
参考实例... 6
主要组成
包括三个部分:
Dojo: 框架核心
Dijit: 基于dojo的UI界面部分,主题使用css控制
Dojox: 其他扩展
Util:打包风格检查等工具[在源代码的发布包中]
页面应用库的步骤
Dojo初始库 |
形式1 <script type="text/javascript"> 形式2 <script type="text/javascript" src="Scripts/Dojo/dojo/dojo.js" djConfig="parseOnLoad: true, isDebug:true"> 注意 如果写成 <script type="text/javascript" src="Scripts/Dojo/dojo/dojo.js"/>形式不能正常工作 |
引用使用的库 Dijit和CSS 只有在使用了dijit时才用 |
<% #if DEBUG %> </script> </script> |
Dijit使用 [HTML标签扩展形式] |
<div class="formContainer" dojotype="dijit.layout.TabContainer"> |
Dojo库的组织思想是按照小的功能块进行组织的,因此可以看到dojo dijit dojox目录下有很多的文件,dojo.js内含的功能包括:浏览器环境属性、语言扩展、异步编程、DOM编程、XHR编程、面向对象和Dojo加载器;其他的功能都在独立的js文件中,如html解析
Dojo/ parser.js 引用这个功能使用dojo.require("dojo.parser") [dojo比较推荐使用HTML标签扩展的形式使用dijit]
开发注意
Ø 如果在本地查看demo文件,在Firefox3中默认不能正确显示,修改方法如下:
Firefox地址栏输入about:config,找到security.fileuri.strict_origin_policy改为false
Ø 开发建议、跟踪
console.dir
console.log error debug
Ø 库
最好使用源代码的脚本库,然后在项目发布时使用dojo的打包系统根据需要打包,以减少js文件的大小
Ø 推荐工具
由于需要跟踪客户端的脚本处理情况,因此浏览器端的工具非常重要
Firefox: FireBug
IE: Developer Toolbar, HttpWatch Professional是个更好的工具
Dojo代码约定
Dojo中的代码文件命名约定
普通的模块是小写字母
如果一个模块定义了一个构造函数,那么它的名字将首字母大写,表示这个模块定义了一个类
少数的脚本和模块的名字永下划线开头,表示私有的,只在内部供其他模块使用,需要时自动加载这些脚本,可以忽略
据此规则,可以看到脚本库的文件类别
Dojo形式的脚本库
/// <reference path="../Intellisense/dojo.aspx"/>
dojo.provide("My.Shape");
dojo.declare(
//the name of the constructor function (class) created...
"My.Shape",
//this is where the superclass (if any) goes...
null,
//this object contains everything to add to the new class's prototype...
{
//default property values can go in prototype...
color: 0,
//here is the single prototype method...
setColor: function (color) {
this.color = color;
}
}
);
以上是Dojo形式的类
Dojo Build
http://www.ibm.com/developerworks/cn/web/0912_shenjc_dojobuild/ 这个是打包的说明
dependencies = {
//Layers属性中每一个对象都指定了如何把多个JavaScript资源合并成一个资源
layers: [
{
name: "dojo.js",
dependencies: [
"dojo.parser",
"dojo.string"
]
},
{
name: "../dijit/dijit.js",
layerDependencies: ["dojo.js"],
dependencies: [
"dijit.dijit",
"dijit.layout.ContentPane",
"dijit.layout.TabContainer",
"dijit.form.ValidationTextBox",
"dijit.form.DateTextBox",
"dijit.Dialog"
]
},
{
//打包的资源文件的文件名,相对于dojo目录
name: "../My/demodojo.js",
//本层依赖的其他资源打包
layerDependencies: [
],
//打包资源包含的模块名
dependencies: [
//指定模块名称后,打包程序自动加载对应的文件并合并
"My.demodojo"
]
}
],
//prefixes一个集合,集合中的每个元素给出了从模块名到模块路径的一个映射[路径名是相对于dojo/的
prefixes: [
//Dojo路径默认包含
["dijit", "../dijit"],
//["dojox", "../dojox"],
["My", "../My"]
]
}
上例是把js文件分别放到dojo.js dijit.js和demodojo.js 三个文件中,这样发布的系统就下载的文件数量就很少了
Dojo ToolBox
官方站点可以下载这个工具,包括API帮助[需要在线状态下安装];打包工具等
推荐资料
mastering dojo http://www.pragprog.com 站点可以下载例子代码,本书有中文版本“精通Dojo”
该书对Dojo的方方面面进行了介绍
电子书也可以在http://ppurl.com上下载