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帮助[需要在线状态下安装];打包工具等
推荐资料
mastering dojo http://www.pragprog.com 站点可以下载例子代码,本书有中文版本“精通Dojo”
该书对Dojo的方方面面进行了介绍
电子书也可以在http://ppurl.com上下载
参考实例
dojo 总结的更多相关文章
- AngularJs2与AMD加载器(dojo requirejs)集成
现在是西太平洋时间凌晨,这个问题我鼓捣了一天,都没时间学英语了,英语太差,相信第二天我也看不懂了,直接看结果就行. 核心原理就是require在AngularJs2编译过程中是关键字,而在浏览器里面运 ...
- Dojo前端开发框架与jQuery前端开发框架,对比分析总结
最近Dojo和jQuery双双发布了最新的1.8版本,有着相同版本号的两个Javascript库也有许多核心的相同之处:相同的资源加载机制AMD.相同的选择器 引擎Sizzle等.作为业界知名的Jav ...
- 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 ...
- js库之dojo
使用dojo源代码 1.下载Dojo 2.dojo目录结构如下 demo/ myModule.js dojo/ dijit/ dojox/ util/ hellodojo.html 3.引入dojo. ...
- dojo.require()的相关理解
Dojo 提供了一个非常强大的javascript控件库. 在使用dojo之前,用户基本上不需要具备任何基础知识. 你可以用script远程链接到dojo(dojo.js), 也可以把dojo.js下 ...
- dojo tree edit的使用[前端]
var store = new mydata.JsonRestStore({ target: "<%=ResolveUrl("~/uieditserver.ashx" ...
- 【原创】(AMD)JavaScript模块化开发(dojo)
AMD原理等在这里就不进行说明了,作者也是菜鸟一枚,只是对自己的一个实例进行说明,如有错误,望指出. 首先,先推荐一篇AMD方面的文章,有兴趣的可以参考:http://efe.baidu.com/bl ...
- 开始学习Dojo
学习:Dojo入门简易教程 Dojo Toolkit 简介 Dojo 于 2004 年创建,使开发 DHTML 和 JavaScript web 应用程序开发流程更为容易,隐藏了很多现代 web 浏览 ...
- understand dojo/domReady!
require(["dojo/dom", "dojo/domReady!"], function(dom){ dom.byId("helloworld ...
- 一起来学习DOJO吧--序
DOJO的官方站点http://dojotoolkit.org/ DOJO是一套完整的javascript解决方案,从UI到类库都提供了全覆盖的支持. DOJO是一套很重的框架,在运用到项目中前请谨慎 ...
随机推荐
- Cannot install ubuntu or other linux flavours on citrix Xen server
Citrix Xen sucks! When u try to install linux stuff on its Xen servers, u will get an error complain ...
- A trip through the graphics pipeline 2011 Part 10(翻译)
之前的几篇翻译都烂尾了,这篇希望....能好些,恩,还有往昔呢. ------------------------------------------------------------- primi ...
- ID3d11asynchronous
http://msdn.microsoft.com/en-us/library/windows/desktop/ff476428(v=vs.85).aspx 这东西 该怎么用 ! 照这位兄弟的做就可以 ...
- 使用命令行进行 VS单元测试 MSTest
测试 指定的方法 "D:\Program Files (x86)\Microsoft Visual Studio 9.0\Common7\IDE\MSTest.exe" /test ...
- js中常用数组方法concat join push pop slice splice shift
javascript给我们很多常用的 数组方法,极大方便了我们做程序.下面我们来介绍下常用的集中数组方法. 比如 concat() join() push() pop() unshift() shif ...
- MyEclipse提示键配置、提示快捷键、提示背景色、关键字颜色、代码显示、编...
1.提示键配置 一般默认情况下,Eclipse ,MyEclipse 的代码提示功能是比Microsoft Visual Studio的差很多的,主要是Eclipse ,MyEclipse本身有很多选 ...
- JS控制图片拖动 放大 缩小 旋转 支持滚轮放大缩小 IE有效
<html> <head> <title>图片拖动,放大,缩小,转向</title> <script type="text/ja ...
- HDOJ 1428 漫步校园
漫步校园 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submis ...
- Leetcode: strStr()
Implement strStr(). Returns the index of the first occurrence of needle in haystack, or -1 if needle ...
- poj 3662(经典最短路)
题目链接:http://poj.org/problem?id=3662 思路:这题较多的有两种做法: 方法1:二分枚举最大边长limit,如果图中的边大于limit,则将图中的边当作1,表示免费使用一 ...