dojo学习笔记

### Dojo学习笔记详解 #### 一、Dojo基本概念 Dojo是一个强大的JavaScript库，旨在简化复杂的Web应用程序开发过程。它由三个主要部分组成：`dojo`、`dijit`和`dojox`。 1. **Dojo基础**： - **概述**：Dojo的核心库提供了构建其他功能的基础，它包括大约50个JavaScript脚本及若干资源，这些资源主要用于处理浏览器间的差异性、实现JavaScript模块化、扩展JavaScript核心库、增强W3C DOM API、支持远程脚本编程、提供拖拽功能、数据存储API以及本地化和国际化等功能。 - **重要性**：这部分是Dojo的核心，所有的其他功能都是基于这部分实现的，因此理解这部分对于掌握Dojo至关重要。 2. **Dijit**： - **概述**：Dijit是一个基于Dojo的小部件框架，它包含了一系列预构建的用户界面组件，如TAB、TREE等，这些组件极大地简化了复杂用户界面的开发工作。 - **优势**：Dijit使得开发者能够轻松创建可复用且高度定制化的用户界面组件，减少了编写代码的工作量，并且提高了代码的重用性和维护性。 3. **DojoX**： - **概述**：DojoX是Dojo的扩展库，它包含了大量的附加功能，从表格小部件到绘图库等，如ENHANCEDGRID、2D/3D图形、图表等。 - **用途**：DojoX为开发者提供了更多的可能性，使其能够根据项目的特定需求选择合适的扩展功能，进一步增强了Dojo的应用范围。 #### 二、Dojo常用方法介绍 1. **dojo.require**： - **用途**：用于按需加载JavaScript文件，这是Dojo的一个重要特性。 - **语法**：`dojo.require("模块名称");` - **示例**：`dojo.require("dijit.form.Button");` 2. **dojo.addOnLoad**： - **用途**：确保指定的脚本程序在HTML页面加载完成后执行。 - **语法**：`dojo.addOnLoad(function(){ /* 代码 */ });` 3. **dojo.byId**： - **用途**：通过DOM ID获取DOM对象。 - **语法**：`dojo.byId("元素ID");` 4. **dijit.byId**： - **用途**：通过ID获取Dijit UI组件。 - **语法**：`dijit.byId("组件ID");` - **区别**：`dijit.byId`用于获取Dijit组件，而`dojo.byId`用于获取DOM元素，二者针对的对象类型不同。 5. **dojo.forEach**： - **用途**：循环遍历数组中的元素。 - **语法**：`dojo.forEach(array, function(item){ /* 处理每个item */ });` 6. **dojo.connect**： - **用途**：用于连接事件处理器到一个元素或对象。 - **语法**：`dojo.connect(element, eventName, handler);` - **示例**：`dojo.connect(dojo.byId('helloBtn'), 'onclick', function(){ alert("Hello world!"); });` #### 三、Dojo的使用步骤 1. **引入CSS样式表**： - **代码**： ```html <style type="text/css"> @import "js/dijit/themes/tundra/tundra.css"; @import "js/dojo/resources/dojo.css"; </style> ``` - **说明**：这里引入了Dojo自带的CSS样式表，可以替换为自定义的样式表。 2. **引入Dojo.js文件**： - **代码**： ```html <script type="text/javascript" src="js/dojo/dojo.js" djConfig="parseOnLoad:true,isDebug:true"></script> ``` - **说明**：`djConfig`是Dojo内置的一个全局对象，用于配置Dojo的行为。这里的`parseOnLoad`设置为`true`表示在页面加载完成后自动解析Dojo组件；`isDebug`设置为`true`表示开启调试模式。 3. **声明Dojo组件类型**： - **代码**： ```javascript dojo.require("dijit.form.Button"); ``` - **说明**：通过`dojo.require`声明将要使用的Dojo组件类型，类似于Java中的`import`语句。 4. **页面调用小组件**： - **代码**： ```html <button dojoType="dijit.form.Button" id="helloBtn">Say Hello</button> ``` - **说明**：通过`dojoType`属性指定组件类型，这样就可以在页面中使用Dojo提供的组件了。 #### 四、Dojo常用高级组件的使用 1. **URL固定的STORE**： - **ItemFileReadStore**：只读数据存储。 - **用途**：用于加载固定URL上的数据。 - **示例**： ```javascript var jsonStore = new dojo.data.ItemFileReadStore({ url: "../testData/grid.json" }); ``` - **ItemFileWriteStore**：可读写数据存储。 - **用途**：用于加载并允许修改固定URL上的数据。 - **示例**： ```javascript var jsonStore = new dojo.data.ItemFileWriteStore({ url: "../testData/grid.json" }); ``` 2. **DataGrid的常用属性与方法**： - **Datagrid的属性**： - **示例**： ```html <table dojoType="dojox.grid.DataGrid" jsid="grid" store="jsonStore" query="{status: 'open'}"> <thead> <tr> <th field="name">Name</th> <th field="description">Description</th> </tr> </thead> </table> ``` - **说明**：通过`store`属性指定数据源，`query`属性用于过滤显示的数据。 通过上述内容的学习，我们可以更好地理解和应用Dojo的各种特性，从而更高效地开发出功能丰富且用户体验良好的Web应用程序。