JavaScript DOJO使用总结

对以前项目中用到的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"> djConfig = { parseOnLoad: true, isDebug: true}; </script> <!-- now load dojo.js; note no djConfig attribute --> <script type="text/javascript" src="Scripts/Dojo/dojo/dojo.js"> </script> 形式2 <script type="text/javascript" src="Scripts/Dojo/dojo/dojo.js" djConfig="parseOnLoad: true, isDebug:true"> </script> 注意 如果写成 <script type="text/javascript" src="Scripts/Dojo/dojo/dojo.js"/>形式不能正常工作
引用使用的库 Dijit和CSS 只有在使用了dijit时才用	<% #if DEBUG %>         <style type="text/css">                @import "Scripts/Dojo/dijit/themes/tundra/tundra.css";                @import "Scripts/Dojo/dojo/resources/dojo.css";         </style>         <script type="text/javascript" src="Scripts/Dojo/dojo/dojo.js" djconfig="parseOnLoad: true, isDebug:true">         </script>         <script type="text/javascript">                dojo.require("dojo.parser");                dojo.require("dijit.dijit-all"); //开发状态下包含所有dijit              </script>         <% #else %>         <%--这个是发布目录，执行Scripts\Dojo\util\buildscripts\my.bat 即创建出来--%>         <style type="text/css">                @import "Scripts/Dox/dijit/themes/tundra/tundra.css";                @import "Scripts/Dox/dojo/resources/dojo.css";         </style>         <script type="text/javascript" src="Scripts/Dox/dojo/dojo.js" djconfig="parseOnLoad: true">         </script>         <script type="text/javascript">                dojo.require("dojo.parser");                dojo.require("dijit.dijit"); </script> <% #endif %>
Dijit使用 [HTML标签扩展形式]	<div class="formContainer" dojotype="dijit.layout.TabContainer">                <div dojotype="dijit.layout.ContentPane" title="Personal Data">                      <label for="first_name">                             First Name:</label>                      <input type="text" name="first_name" id="first_name" dojotype="dijit.form.ValidationTextBox"                             trim="true" propercase="true" required="true" size="30" invalidmessage="You must enter your first name" /><br />         。。。

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帮助[需要在线状态下安装]；打包工具等

推荐资料

http://dojotoolkit.org/

http://www.dojocn.com/

mastering dojo http://www.pragprog.com 站点可以下载例子代码，本书有中文版本“精通Dojo”

该书对Dojo的方方面面进行了介绍

电子书也可以在http://ppurl.com上下载

参考实例

http://jsfkit.codeplex.com