对以前项目中用到的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

dojo 总结的更多相关文章

  1. AngularJs2与AMD加载器(dojo requirejs)集成

    现在是西太平洋时间凌晨,这个问题我鼓捣了一天,都没时间学英语了,英语太差,相信第二天我也看不懂了,直接看结果就行. 核心原理就是require在AngularJs2编译过程中是关键字,而在浏览器里面运 ...

  2. Dojo前端开发框架与jQuery前端开发框架,对比分析总结

    最近Dojo和jQuery双双发布了最新的1.8版本,有着相同版本号的两个Javascript库也有许多核心的相同之处:相同的资源加载机制AMD.相同的选择器 引擎Sizzle等.作为业界知名的Jav ...

  3. Dojo: Quick Start

      1.Dojo学习地址 2.Dojo快速开始 2.1.Dojo引入 2.2.指定Dojo模块的位置 2.3.模块加载require 3.查找Dom节点 3.1.根据id查找dom节点 3.2.根据c ...

  4. js库之dojo

    使用dojo源代码 1.下载Dojo 2.dojo目录结构如下 demo/ myModule.js dojo/ dijit/ dojox/ util/ hellodojo.html 3.引入dojo. ...

  5. dojo.require()的相关理解

    Dojo 提供了一个非常强大的javascript控件库. 在使用dojo之前,用户基本上不需要具备任何基础知识. 你可以用script远程链接到dojo(dojo.js), 也可以把dojo.js下 ...

  6. dojo tree edit的使用[前端]

    var store = new mydata.JsonRestStore({ target: "<%=ResolveUrl("~/uieditserver.ashx" ...

  7. 【原创】(AMD)JavaScript模块化开发(dojo)

    AMD原理等在这里就不进行说明了,作者也是菜鸟一枚,只是对自己的一个实例进行说明,如有错误,望指出. 首先,先推荐一篇AMD方面的文章,有兴趣的可以参考:http://efe.baidu.com/bl ...

  8. 开始学习Dojo

    学习:Dojo入门简易教程 Dojo Toolkit 简介 Dojo 于 2004 年创建,使开发 DHTML 和 JavaScript web 应用程序开发流程更为容易,隐藏了很多现代 web 浏览 ...

  9. understand dojo/domReady!

    require(["dojo/dom", "dojo/domReady!"], function(dom){ dom.byId("helloworld ...

  10. 一起来学习DOJO吧--序

    DOJO的官方站点http://dojotoolkit.org/ DOJO是一套完整的javascript解决方案,从UI到类库都提供了全覆盖的支持. DOJO是一套很重的框架,在运用到项目中前请谨慎 ...

随机推荐

  1. Linux嵌入式系统与硬件平台的关系

    一. Linux嵌入式系统 操作系统是一种在计算机上运行的软件,它的主要任务是管理计算机上的系统资源,为用户提供使用计算机及其外部设备的接口.它存在的目的是为了管理所有硬件资源,并且提供应用软件一个合 ...

  2. Coder-Strike 2014 - Finals (online edition, Div. 2) C题

    C. Online Meeting time limit per test 1 second memory limit per test 256 megabytes input standard in ...

  3. 旨在脱离后端环境的前端开发套件 - IDT Server篇

    IDT,一个基于Nodejs的,旨在脱离后端环境的前端开发套件,目的就是能让前端开发完全脱离后端的环境,无论后端是什么模板引擎(主流),都能应付自如. IDT主要包括两大部分:Server + Bui ...

  4. JavaScript 堆内存分析新工具 OneHeap

    OneHeap 关注于运行中的 JavaScript 内存信息的展示,用可视化的方式还原了 HeapGraph,有助于理解 v8 内存管理. 背景 JavaScript 运行过程中的大部分数据都保存在 ...

  5. 在 Java EE 组件中使用 Camel Routes

    摘要:你可以通过集成 Camel 和 WildFly 应用服务器(使用 WildFly-Camel 子系统)在 Java EE 组件中开始使用 Apache Camel Routes. [编者按]作者 ...

  6. Manacher算法 O(n) 求最长回文子串

    转自:http://bbs.dlut.edu.cn/bbstcon.php?board=Competition&gid=23474 其实原文说得是比较清楚的,只是英文的,我这里写一份中文的吧. ...

  7. HDU 3790 最短路径问题(SPFA || Dijkstra )

    题目链接 题意 : 中文题不详述. 思路 :无论是SPFA还是Dijkstra都在更新最短路的那个地方直接将花费更新了就行,还有别忘了判重边,话说因为忘了判重边WA了一次. #include < ...

  8. (1)opengl-nehe 4种框架

    http://www.yakergong.net/nehe/ 这个网站还是opengl方面比较权威的,作者叫nehe 这东西估计是要先装个ndk,然后才能运行代码 先睡觉! 以下内容参考自http:/ ...

  9. 【poj3243-Clever Y】高次同余方程-拓展BabyStepGiantStep

    http://poj.org/problem?id=3243 题意:给定X,Z,K,求一个最小的Y满足XY mod Z = K. 关于拓展BSGS的详细解释我写了一篇博文:http://www.cnb ...

  10. 用httpPost对JSON发送和接收的例子

    HTTPPost发送JSON: private static final String APPLICATION_JSON = "application/json";         ...