Dojo(1.7.2) AMD Demo

程序员文章站 2022-05-30 09:58:49

...

搞了搞Dojo，尝试使用其AMD（ Asynchronous Module Definition ）机制做了一个demo。

小试一下，仅体会到继承，防命名冲突这些好处，水平有限，仅作参考（为求简单，用了1.6以前版本的写法，而没用define那种）。

demo实现如下功能，对grid的数据分别提供4个button做加减乘除，结果摆到另一个grid。值为负值的标记为红色，如下图：

Dojo(1.7.2) AMD Demo

博客分类： web前端 dojoAMDdemo

我的思路为：

1. 定义一个commonFunctions，封装一些公用的方法，就是将其作为一个父类。

2. 为加减乘除四个button分别定义一个module，模拟4个功能模块。

3. 把store的构建也做成一个模块，其实没必要，装装B而已。

注意的是，dojo 的AMD 对js文件命名是有要求的，模块所声明的名字必须与文件名相匹配，类比java构建一个public类。

给出本demo的目录结构：
Dojo(1.7.2) AMD Demo

博客分类： web前端 dojoAMDdemo

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/

demo.zip (6.5 KB)
下载次数: 5

查看图片附件

Dojo(1.7.2) AMD Demo

基于DX12终极版打造 AMD公布RDNA2光线追踪Demo：硬件加速

AMD预告《21号机库》技术Demo：演示RX 6900 XT光追+特效全开

Dojo(1.7.2) AMD Demo

拒绝撕裂卡顿：AMD全新DEMO展示FreeSync 2 HDR视觉效果

基于DX12终极版打造 AMD公布RDNA2光线追踪Demo：硬件加速

AMD预告《21号机库》技术Demo：演示RX 6900 XT光追+特效全开