JavaScript用Command模式模拟多线程
以前我们解决这样的问题都是针对具体问题写一段代码来模拟多线程的，但是由于往往要对没个线程单独编码，这样的代码十分冗长。学习设计模式的时候就曾经考虑过在javascript中实用command模式来更好的模拟多线程，但是一直没有付诸实施，今天既然想起来了就试试看：
1
<html><head><title>用command模式模拟多线程</title></head><body>
2
<SCRIPT LANGUAGE="JavaScript">
3
<!--
4if (Array.prototype.shift==null)
5
Array.prototype.shift = function (){
6 var rs = this[0];
7 for (var i=1;i<this.length;i++) this[i-1]=this[i]
8 this.length=this.length-1
9 return rs;
10
}
11if (Array.prototype.push==null)
12Array.prototype.push = function (){
13 for (var i=0;i<arguments.length;i++) this[this.length]=arguments[i];
14 return this.length;
15}
16
17var commandList = [];
18var nAction = 0;//控制每次运行多少个动作
19var functionConstructor = function(){}.constructor;
20function executeCommands(){
21 for (var i=0;i<nAction;i++)
22 if (commandList.length>0){
23 var command = commandList.shift();
24 if (command.constructor == functionConstructor)
25 if (command.scheduleTime == null || new Date()-command.scheduleTime>0)
26 command();
27 else
28 commandList.push(command);
29 }
30}
31
32function startNewTask(){
33 var resultTemp = document.getElementById("sampleResult").cloneNode(true);
34 with (resultTemp){
35 id="";style.display="block";style.color=(Math.floor(Math.random()* (1<<23)).toString(16)+"00000").substring(0,6);
36 }
37 document.body.insertBefore(resultTemp,document.body.lastChild);
38 commandList.push(function(){simThread(resultTemp,1);});
39 nAction++;
40}
41
42function simThread(temp,n){
43 if (temp.stop) n--;
44 else temp.innerHTML = temp.innerHTML - (-n);
45 if (n<1000)
46 commandList.push(function(){simThread(temp,++n)});
47 else{
48 var command = function(){document.body.removeChild(temp);;nAction--;};
49 command.scheduleTime = new Date()-(-2000);
50 commandList.push(command);
51 }
52}
53
54window.onload = function(){setInterval("executeCommands()",1);}
55
//-->
56</SCRIPT>
57<button onclick="startNewTask()">开始新线程</button>
58
59<BR><BR>
60<div id=sampleResult onmouseover="this.stop=true" onmouseout="this.stop=false" style="display:none;cursor:hand">0</div>
61</body>
62</html>
<html><head><title>用command模式模拟多线程</title></head><body>2
<SCRIPT LANGUAGE="JavaScript">
3
<!--4
if (Array.prototype.shift==null)5
Array.prototype.shift = function (){
Array.prototype.shift 6
var rs = this[0];7
for (var i=1;i<this.length;i++) this[i-1]=this[i]8
this.length=this.length-19
return rs;10
}11
if (Array.prototype.push==null)12
Array.prototype.push = function (){13
for (var i=0;i<arguments.length;i++) this[this.length]=arguments[i];14
return this.length;15
}16
17
var commandList = [];18
var nAction = 0;//控制每次运行多少个动作19
var functionConstructor = function(){}.constructor;20
function executeCommands(){21
for (var i=0;i<nAction;i++)22
if (commandList.length>0){23
var command = commandList.shift();24
if (command.constructor == functionConstructor)25
if (command.scheduleTime == null || new Date()-command.scheduleTime>0)26
command();27
else28
commandList.push(command);29
}30
}31
32
function startNewTask(){33
var resultTemp = document.getElementById("sampleResult").cloneNode(true);34
with (resultTemp){35
id="";style.display="block";style.color=(Math.floor(Math.random()* (1<<23)).toString(16)+"00000").substring(0,6);36
}37
document.body.insertBefore(resultTemp,document.body.lastChild);38
commandList.push(function(){simThread(resultTemp,1);});39
nAction++;40
}41
42
function simThread(temp,n){43
if (temp.stop) n--;44
else temp.innerHTML = temp.innerHTML - (-n);45
if (n<1000)46
commandList.push(function(){simThread(temp,++n)});47
else{48
var command = function(){document.body.removeChild(temp);;nAction--;};49
command.scheduleTime = new Date()-(-2000);50
commandList.push(command);51
}52
}53
54
window.onload = function(){setInterval("executeCommands()",1);}55
//-->56
</SCRIPT>57
<button onclick="startNewTask()">开始新线程</button>58
59
<BR><BR>60
<div id=sampleResult onmouseover="this.stop=true" onmouseout="this.stop=false" style="display:none;cursor:hand">0</div>61
</body>62
</html> 注意第26行。javascript里面函数也是对象，所以就没有必要把函数调用包装到do或者execute方法里面了，直接用()就可以让函数对象运行起来：
command();
shift和push函数是javascript中array对象的函数，可是IE5居然没有定义，最前面两个函数是为IE5准备的。
在IE和FireFox下面通过
