搞了搞Dojo，尝试使用其AMD（ Asynchronous Module Definition ）机制做了一个demo。
小试一下，仅体会到继承，防命名冲突这些好处，水平有限，仅作参考（为求简单，用了1.6以前版本的写法，而没用define那种）。
demo实现如下功能，对grid的数据分别提供4个button做加减乘除，结果摆到另一个grid。值为负值的标记为红色，如下图：
我的思路为：
1. 定义一个commonFunctions，封装一些公用的方法，就是将其作为一个父类。
2. 为加减乘除四个button分别定义一个module， 模拟4个功能模块。
3. 把store的构建也做成一个模块，其实没必要，装装B而已。
注意的是，dojo 的AMD 对js文件命名是有要求的，模块所声明的名字必须与文件名相匹配，类比java构建一个public类。
给出本demo的目录结构：
commonFunctions.js：
/**
* 说明：1. dojo.provide 告诉dojo 的装载器，名为my.commonFunctions的模块准备就绪，"commonFunctions"名字必须跟js的文件名一样（迷惑，不太理解其作用，这里我看dojo文档所理解的，但我的dojo版本为1.7.2 〉1.7，其实将其注释掉，程序还是没问题的）
* 2. dojo.declare 声明定义名为my.commonFunctions的模块, "commonFunctions"名字必须跟js的文件名一样
* 3. 其中"my"为js文件路径的一个别名，通过 dojo.registerModulePath("my","[你的webApp根目录]/testAMD")指定，（我的写在testAMD.jsp文件）
*/
dojo.provide('my.commonFunctions');
dojo.declare('my.commonFunctions', null, {
_initialized : {done: false},
_selectedItems: {},
_styleSumRow : function(row)
{
//row.customStyles = 'background-color:yellow;';
for( var r=0; r< this.sumGrid.rowCount; r++ )
{
for( var i=1; i< 7; i++ )
{
var cell = this.sumGrid.views.views[0].getCellNode(r, i);
if( cell )
{
dojo.style(cell, 'backgroundColor', '#ffff00');
dojo.style(cell, 'color', '#0000ff');
if( !isNaN(cell.innerHTML) && cell.innerHTML < 0 )
{
dojo.style(cell, 'color', '#ff0000');
}
}
}
}
},
_refreshToolbar: function(showReset)
{
if( showReset == true )
{
this.resetBtn.set('disabled', false);
this.plusBtn.set('disabled', true);
this.minusBtn.set('disabled', true);
this.multiBtn.set('disabled', true);
this.divisionBtn.set('disabled', true);
} else
{
this.resetBtn.set('disabled', true);
this.plusBtn.set('disabled', false);
this.minusBtn.set('disabled', false);
this.multiBtn.set('disabled', false);
this.divisionBtn.set('disabled', false);
}
},
_onAllCbxClick : function(newVal)
{
for( var rowIndex in this._selectedItems )
{
delete this._selectedItems[rowIndex];
}
if( newVal == true )
{
var arr = this.grid.selection.getSelected();
for( var i=0; i<arr.length; i++ )
{
this._selectedItems[i] = arr[i];
}
}
},
_returnSelectionCase: function()
{
var caseStr = '';
for( var rowIndex in this._selectedItems )
{
if( this._selectedItems.hasOwnProperty(rowIndex) )
{
var rowNum = Number(rowIndex)+1;
caseStr += (rowNum + ', ');
}
}
if( caseStr )
{
caseStr = caseStr.substr(0, caseStr.length-2);
caseStr = 'Row number: ' + caseStr + ' selected.';
}
else
{
caseStr = 'No selected row.';
}
return caseStr;
},
constructor : function()
{
console.log('common functions ready');
},
inti : function()
{
this.grid = dijit.byId('demoGrid');
this.sumGrid = dijit.byId('demoSumGrid');
this.plusBtn = dijit.byId('plusBtn');
this.minusBtn = dijit.byId('minusBtn');
this.multiBtn = dijit.byId('multiBtn');
this.divisionBtn = dijit.byId('divisionBtn');
this.selectionCase = dojo.byId('selectionCase');
if( this._initialized.done == false )
{
dojo.connect(this.sumGrid, 'onStyleRow', this, this._styleSumRow);
dojo.connect(this.grid.selection, 'onSelected', this, function(index)
{
if( !this._selectedItems[index] )
{
this._selectedItems[index] = this.grid.getItem(index);
}
this.selectionCase.innerHTML = this._returnSelectionCase();
}
);
dojo.connect(this.grid.selection, 'onDeselected', this, function(index)
{
delete this._selectedItems[index];
this.selectionCase.innerHTML = this._returnSelectionCase();
}
);
dojo.connect(this.grid.rowSelectCell, 'toggleAllSelection', this, this._onAllCbxClick);
this._initialized.done = true;
}
},
calResultRow : function(result, sumType, decimal)
{
if( !result.num1 )
{
return;
}
if( isNaN(decimal) )
decimal = 100;
// 这里做保留两位小数处理
var sumItem = {
sumType: sumType,
num1: (Math.round(result.num1 * decimal)) / decimal,
num2: (Math.round(result.num2 * decimal)) / decimal,
num3: (Math.round(result.num3 * decimal)) / decimal,
num4: (Math.round(result.num4 * decimal)) / decimal,
num5: (Math.round(result.num5 * decimal)) / decimal,
num6: (Math.round(result.num6 * decimal)) / decimal
};
if( this.sumGrid.store )
{
var item = this.sumGrid.store._getItemByIdentity(sumType);
if( item )
{
this.sumGrid.store.setValue(item, 'num1', sumItem.num1);
this.sumGrid.store.setValue(item, 'num2', sumItem.num2);
this.sumGrid.store.setValue(item, 'num3', sumItem.num3);
this.sumGrid.store.setValue(item, 'num4', sumItem.num4);
this.sumGrid.store.setValue(item, 'num5', sumItem.num5);
this.sumGrid.store.setValue(item, 'num6', sumItem.num6);
} else
{
this.sumGrid.store.newItem(sumItem);
}
}else {
var data = {
identifier: 'sumType',
items: [sumItem]
};
this.sumGrid.setStore(new dojo.data.ItemFileWriteStore({data: data}));
}
//this._refreshToolbar(true);
}
});
plusModule.js
/**
* dojo.require('my.commonFunctions') 声明使用该模块，看dojo.declare的方式表示my.plusModule模块继承于my.commonFunctions
*/
dojo.provide('my.plusModule');
dojo.require('my.commonFunctions');
dojo.declare('my.plusModule', my.commonFunctions, {
constructor : function() {
console.log('plus module is ready.');
},
inti : function()
{
this.inherited(arguments);
dojo.connect(this.plusBtn, 'onClick', this, this.sumCellsValue);
},
sumCellsValue: function()
{
var result = {};
for( var rowIndex in this._selectedItems )
{
var item = this._selectedItems[rowIndex];
result.num1 = result.num1 ? (result.num1 + item['num1'][0]) : item['num1'][0];
result.num2 = result.num2 ? (result.num2 + item['num2'][0]) : item['num2'][0];
result.num3 = result.num3 ? (result.num3 + item['num3'][0]) : item['num3'][0];
result.num4 = result.num4 ? (result.num4 + item['num4'][0]) : item['num4'][0];
result.num5 = result.num5 ? (result.num5 + item['num5'][0]) : item['num5'][0];
result.num6 = result.num6 ? (result.num6 + item['num6'][0]) : item['num6'][0];
}
this.calResultRow(result, '+');
}
});
minusModule.js
/**
*
*/
dojo.provide('my.minusModule');
dojo.require('my.commonFunctions');
dojo.declare('my.minusModule', my.commonFunctions, {
constructor : function()
{
console.log('minus moudle ready');
},
inti : function()
{
this.inherited(arguments);
dojo.connect(this.minusBtn, 'onClick', this, this.minusCellsValue);
},
minusCellsValue: function()
{
var result = {};
for( var rowIndex in this._selectedItems )
{
var item = this._selectedItems[rowIndex];
result.num1 = result.num1 ? (result.num1 - item['num1'][0]) : item['num1'][0];
result.num2 = result.num2 ? (result.num2 - item['num2'][0]) : item['num2'][0];
result.num3 = result.num3 ? (result.num3 - item['num3'][0]) : item['num3'][0];
result.num4 = result.num4 ? (result.num4 - item['num4'][0]) : item['num4'][0];
result.num5 = result.num5 ? (result.num5 - item['num5'][0]) : item['num5'][0];
result.num6 = result.num6 ? (result.num6 - item['num6'][0]) : item['num6'][0];
}
this.calResultRow(result, '-');
}
});
multiModule.js
/**
*
*/
dojo.provide('my.multiModule');
dojo.require('my.commonFunctions');
dojo.declare('my.multiModule', my.commonFunctions, {
constructor : function()
{
console.log('multiplication moudle ready');
},
inti : function()
{
this.inherited(arguments);
dojo.connect(this.multiBtn, 'onClick', this, this.multiCellsValue);
},
multiCellsValue : function()
{
var result = {};
for( var rowIndex in this._selectedItems )
{
var item = this._selectedItems[rowIndex];
result.num1 = result.num1 ? (result.num1 * item['num1'][0]) : item['num1'][0];
result.num2 = result.num2 ? (result.num2 * item['num2'][0]) : item['num2'][0];
result.num3 = result.num3 ? (result.num3 * item['num3'][0]) : item['num3'][0];
result.num4 = result.num4 ? (result.num4 * item['num4'][0]) : item['num4'][0];
result.num5 = result.num5 ? (result.num5 * item['num5'][0]) : item['num5'][0];
result.num6 = result.num6 ? (result.num6 * item['num6'][0]) : item['num6'][0];
}
this.calResultRow(result, '*');
}
});
deviModule.js
/**
*
*/
dojo.provide('my.deviModule');
dojo.require('my.commonFunctions');
dojo.declare('my.deviModule', my.commonFunctions, {
constructor : function()
{
console.log('division moudle ready');
},
inti : function()
{
this.inherited(arguments);
dojo.connect(this.divisionBtn, 'onClick', this, this.diviCellsValue);
},
diviCellsValue : function()
{
var result = {};
for( var rowIndex in this._selectedItems )
{
var item = this._selectedItems[rowIndex];
result.num1 = result.num1 ? (result.num1 / item['num1'][0]) : item['num1'][0];
result.num2 = result.num2 ? (result.num2 / item['num2'][0]) : item['num2'][0];
result.num3 = result.num3 ? (result.num3 / item['num3'][0]) : item['num3'][0];
result.num4 = result.num4 ? (result.num4 / item['num4'][0]) : item['num4'][0];
result.num5 = result.num5 ? (result.num5 / item['num5'][0]) : item['num5'][0];
result.num6 = result.num6 ? (result.num6 / item['num6'][0]) : item['num6'][0];
}
this.calResultRow(result, '/', '100000000');
}
});
storeData.js
dojo.provide('my.storeData');
dojo.declare('my.storeData', null, {
setDemoStore: function()
{
var data = {
identifier: 'id',
items: [
{ id: 1, num1: 12.27, num2: 34.84, num3: 19.24, num4: 77.32, num5: 46.83, num6: 12.45 },
{ id: 2, num1: 43.47, num2: 62.84, num3: 91.68, num4: 38.28, num5: 14.04, num6: 82.35 },
{ id: 3, num1: -37.47, num2: 84.34, num3: -3.03, num4: -37.53, num5: -314.01, num6: -37.76 },
{ id: 4, num1: 84.67, num2: -74.34, num3: 63.25, num4: 27.09, num5: 54.07, num6: 53.32 },
{ id: 5, num1: 283.47, num2: -120.06, num3: 33.45, num4: -37.42, num5: -314.35, num6: -37.64 }
]
};
dijit.byId('demoGrid').setStore(new dojo.data.ItemFileWriteStore({data: data}));
},
constructor : function()
{
console.log('store data custructed');
},
});
testAMD.jsp
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%@page language="java" contentType="text/html; charset=gb2312"
pageEncoding="gb2312"%>
<html>
<head>
<%
String contextPath = request.getContextPath();
%>
<title>Dojo AMD</title>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<link rel="stylesheet" href="<%=contextPath%>/lib/dojo-1.7.2/dojo/resources/dojo.css">
<link rel="stylesheet" href="<%=contextPath%>/lib/dojo-1.7.2/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="<%=contextPath%>/lib/dojo-1.7.2/dojox/grid/resources/Grid.css">
<link rel="stylesheet" href="<%=contextPath%>/lib/dojo-1.7.2/dojox/grid/resources/claroGrid.css">
<link rel="stylesheet" href="<%=contextPath%>/lib/dojo-1.7.2/dojox/grid/enhanced/resources/claro/EnhancedGrid.css">
<link rel="stylesheet" href="<%=contextPath%>/lib/dojo-1.7.2/dojox/grid/enhanced/resources/EnhancedGrid_rtl.css">
<!-- 使用html标记 的dojo声明式组件必须 启用 parseOnLoad：true-->
<script type="text/javascript" src="<%=contextPath%>/lib/dojo-1.7.2/dojo/dojo.js"
djConfig="isDebug:true, parseOnLoad: true">
</script>
<script>
// 声明模块js文件的路径取别名 为“my”
dojo.registerModulePath("my","<%=contextPath%>/testAMD");
dojo.require('dojo.parser');
dojo.require('dijit.form.Button');
dojo.require("dijit.Toolbar");
dojo.require("dojox.grid.DataGrid");
dojo.require("dojox.grid.EnhancedGrid");
dojo.require("dojox.grid.enhanced.plugins.IndirectSelection");
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require('my.storeData');
dojo.require('my.plusModule');
dojo.require('my.minusModule');
dojo.require('my.multiModule');
dojo.require('my.deviModule');
var storeModule = new my.storeData();
var plusModule = new my.plusModule();
var minusModule = new my.minusModule();
var multiModule = new my.multiModule();
var deviModule = new my.deviModule();
dojo.addOnLoad(function(){
storeModule.setDemoStore();
plusModule.inti();
minusModule.inti();
multiModule.inti();
deviModule.inti();
});
</script>
</head>
<body class="claro">
<div>
<div style="margin: 0 auto; text-align: center; position: relative;">
<div dojoType="dijit.Toolbar" region="top" align="left" style="width: 600px; margin: 0 auto; position: relative;" >
<div dojoType="dijit.form.Button"
id="plusBtn" style="position: relative;">
+ plus
</div>
<div dojoType="dijit.form.Button"
id="minusBtn" style="position: relative;">
- minus
</div>
<div dojoType="dijit.form.Button"
id="multiBtn" style="position: relative;">
* multiplication
</div>
<div dojoType="dijit.form.Button"
id="divisionBtn" style="position: relative;">
/ division
</div>
</div>
<table data-dojo-type="dojox.grid.EnhancedGrid" canSort="false" id="demoGrid"
data-dojo-props="plugins:{indirectSelection: {headerSelector:true}}"
style="width: 600px; margin: 0 auto; position: relative;" autoHeight="true">
<colgroup span="1" noscroll="true" />
<colgroup span="6" />
<thead>
<tr>
<th width="120px" field="num1"
headerStyles="text-align:center" cellStyles="text-align:center">
<b>Column A</b>
</th>
<th width="120px" field="num2"
headerStyles="text-align:center" cellStyles="text-align:center">
<b>Column B</b>
</th>
<th width="120px" field="num3"
headerStyles="text-align:center" cellStyles="text-align:center">
<b>Column C</b>
</th>
<th width="120px" field="num4"
headerStyles="text-align:center" cellStyles="text-align:center">
<b>Column D</b>
</th>
<th width="120px" field="num5"
headerStyles="text-align:center" cellStyles="text-align:center">
<b>Column E</b>
</th>
<th width="120px" field="num6"
headerStyles="text-align:center" cellStyles="text-align:center">
<b>Column F</b>
</th>
</tr>
</thead>
</table>
<div id="selectionCase"
style="margin: 0 auto; font-size: 15px; font-weight: bold; width: 600px; text-align: left; padding-top: 6px;">
</div>
<table data-dojo-type="dojox.grid.DataGrid" canSort="false" id="demoSumGrid"
style="margin: 0 auto; position: relative;" autoHeight="true" autoWidth="true">
<thead>
<tr>
<th width="80px" field="sumType"
headerStyles="text-align:center" cellStyles="text-align:center">
<b>Type</b>
</th>
<th width="120px" field="num1"
headerStyles="text-align:center" cellStyles="text-align:center">
<b>Column A</b>
</th>
<th width="120px" field="num2"
headerStyles="text-align:center" cellStyles="text-align:center">
<b>Column B</b>
</th>
<th width="120px" field="num3"
headerStyles="text-align:center" cellStyles="text-align:center">
<b>Column C</b>
</th>
<th width="120px" field="num4"
headerStyles="text-align:center" cellStyles="text-align:center">
<b>Column D</b>
</th>
<th width="120px" field="num5"
headerStyles="text-align:center" cellStyles="text-align:center">
<b>Column E</b>
</th>
<th width="120px" field="num6"
headerStyles="text-align:center" cellStyles="text-align:center">
<b>Column F</b>
</th>
</tr>
</thead>
</table>
</div>
</div>
</body>
</html>
提供下载好了，只包含js文件以及一个jsp，dojo的到官网下载：http://download.dojotoolkit.org/release-1.7.2/
相关推荐
在Dojo 1.7.2版本中，引入了重要的模块化系统AMD（Asynchronous Module Definition），这是一个用于加载JavaScript模块的异步规范。AMD使得开发者能够按照模块化的思路组织代码，提高了代码的可维护性和复用性。它...
"dojo demo 1.7.2" 是Dojo 框架的一个示例集合，旨在帮助开发者更好地理解和应用Dojo 1.7.2 版本的功能。 在Dojo 1.7.2 中，最重要的改进是引入了AMD（Asynchronous Module Definition）模块加载机制。AMD 允许开发...
2. **设置模块化**：利用Dojo的AMD（Asynchronous Module Definition）机制，组织和加载代码模块，提高代码可维护性。 3. **创建全屏组件**：利用Dojo的UI组件，如`dijit/layout/BorderContainer`，创建全屏布局，并...
标题中的"dojo1.8.3官方demo"指的是Dojo Toolkit的1.8.3版本的官方示例代码。这个版本的Dojo发布于2013年，它包含了多个模块，用于处理DOM操作、AJAX通信、动画效果、数据管理以及用户界面构建等。 描述中提到的...
这个“DOJO-DEMO 官网提取版”是基于 DOJO 官方网站在 2013 年 1月的演示示例集合，对于学习和理解 DOJO 的核心概念、API 以及实践应用具有很高的参考价值。 1. **DOJO 概述** DOJO 是由 Dojo Foundation 维护的一...
标题中的"dojo-release-1.7.2.tar.gz"是一个软件发行版本的压缩包，它采用了常见的GNU/Linux和Unix系统中的归档格式".tar.gz"。这种格式是通过先使用tar命令将多个文件和目录打包成一个单一的.tar文件，然后使用gzip...
本实例为dojo官方例子，里面包含了dojo-release-1.10.0版本，本人测试demo1需要在Tomcat服务环境下才能运行，demo2、demo3可以直接点击里面的demo.html首页运行
Dojo 1.7.2 鼓励模块化开发，每个功能都可以封装成独立的模块，通过AMD机制组织和管理，有利于代码的重用和维护。 在`dojo-release-1.7.2`压缩包中，你会找到Dojo框架的所有相关文件，包括源码、文档、示例和资源...
1. **模块化系统**：Dojo 1.9采用了AMD（Asynchronous Module Definition）模块化加载机制，这使得代码组织更加有序，便于维护和按需加载。在demos中，你可以看到如何通过`require`和`define`来组织和加载模块。 2....
**DOJO 学习文档与 Demo** DOJO 是一个开源的 JavaScript 库，它为 Web 开发者提供了丰富的工具和功能，旨在简化前端开发过程，提高应用性能和可访问性。DOJO 框架包括模块化 JavaScript、UI 组件、数据管理、动画...
这篇将深入探讨这两个库，以及它们在dojo-release-1.7.2版本中的集成情况。 首先，Dojo是一个全面的JavaScript工具包，它为开发富互联网应用程序（RIA）提供了丰富的功能。Dojo的核心包括模块系统、DOM操作、事件...
Dojo使用AMD（Asynchronous Module Definition）规范，允许异步加载和组织代码，这对于大型应用来说非常重要。在创建二级下拉菜单时，我们可能需要引入`dijit/Menu`和`dijit/PopupMenu`等模块，这些是Dojo提供的UI...
1. **模块系统**：Dojo使用AMD（Asynchronous Module Definition）模块定义协议，允许异步加载模块。`require`和`define`是两个关键函数，`require`用于加载模块，`define`用于定义模块。 2. **dojo/_base**：这是...
在这个“arcgis dojo官网的一些小demo”压缩包中，我们很可能会找到一些关于如何使用Dojo Grid与ArcGIS结合的示例代码。 首先，我们要理解Dojo Grid的基本概念。Dojo Grid允许用户以表格的形式展示数据，支持排序、...
在AMD环境中，你可以使用`dojo/require`或`dojo.provide`来完成。 在压缩包中的`grammarApp`可能是一个完整的示例应用，包含了创建自定义Dojo Widget的相关代码。这个应用可能演示了如何结合Dojo的Widget机制和其他...
在"dojo0.4.3 demo"这个压缩包中，我们主要可以学习到Dojo 0.4.3版本的一些核心功能和应用实例。 1. **Dojo 模块系统**：Dojo的核心特性之一是它的模块系统（dojo.require），它允许开发者按需加载和组织代码，提高...
9. **Dojo的AMD与CommonJS兼容**：虽然Dojo基于AMD，但它也兼容CommonJS规范，这意味着你可以将Dojo与其他遵循CommonJS的库结合使用。 10. **响应式设计**：Dojo的部件和布局组件支持响应式设计，可以适应不同屏幕...
实例VS2010代码 dojo_iframe无刷新上传文件demo.rar dojo_iframe无刷新上传文件demo.rar dojo_iframe无刷新上传文件demo.rar dojo_iframe无刷新上传文件demo.rar dojo_iframe无刷新上传文件demo.rar
Dojo 1.6版本是在2011年发布，它引入了AMD（Asynchronous Module Definition）模块定义规范，使得模块化开发更加高效。 ### AMD规范 AMD规范是一种在浏览器环境中异步加载和定义JavaScript模块的方式。它允许模块和...