搞了搞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
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
<%@page language="java" contentType="text/html; charset=gb2312"
pageEncoding="gb2312"%>
<%
String contextPath = request.getContextPath();
%>
Dojo AMD
+ plus
- minus
* multiplication
/ division
Column A
Column B
Column C
Column D
Column E
Column F
Type
Column A
Column B
Column C
Column D
Column E
Column F
提供下载好了，只包含js文件以及一个jsp，dojo的到官网下载：http://download.dojotoolkit.org/release-1.7.2/
