HTML5和Javascript的线程嵌套分析
html代码：
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>使用线程单层嵌套实现从生成的随机数中挑选5的倍数</title>
<script type="text/javascript">
var worker = new Worker("script.js");
worker.postMessage("");
worker.onmessage = function(event) { // 从线程中取得计算结果
if(event.data!="")
{
var j; //行号
var k; //列号
var tr;
var td;
var intArray=event.data.split(";");
var table=document.getElementById("table");
for(var i=0;i<intArray.length;i++)
{
j=parseInt(i/10,0);
k=i%10;
if(k==0) { //该行不存在
tr=document.createElement("tr"); //添加行
tr.id="tr"+j;
tr.style.backgroundColor="orange";
table.appendChild(tr);
}
else { //该行已存在
tr=document.getElementById("tr"+j);
}
td=document.createElement("td");//添加列
tr.appendChild(td);
td.innerHTML=intArray[j*10+k];//设置该列内容
if((intArray[j*10+k])%2==0){//如果所选的整数技能被5整除也能被2整除
td.style.backgroundColor="red";//设置该列背景色
}
td.style.color="black ";//设置该列字体颜色
td.width="30"; //设置列宽
}
}
};
</script>
</head>
<body>
<h1>使用线程单层嵌套实现从生成的随机数中挑选5的倍数</h1>
<table id="table">
</table>
</body>script.js代码：
onmessage=function(event){
var intArray=new Array(100); //随机数组
//生成100个随机数
for(var i=0;i<100;i++)
intArray[i]=parseInt(Math.random()*100);
var worker;
//创建子线程
worker=new Worker("worker.js");
//把随机数组提交给子线程进行挑选工作
worker.postMessage(JSON.stringify(intArray));
worker.onmessage = function(event) {
//把挑选结果返回主页面
postMessage(event.data);
}
}worker.js代码：
onmessage = function(event) {
var intArray= JSON.parse(event.data); //还原整数数组
var returnStr;
returnStr="";
for(var i=0;i<intArray.length;i++)
{
if(parseInt(intArray[i])%5==0) //能否被5整除
{
if(returnStr!="")
returnStr+=";";
returnStr+=intArray[i]; //将能被5整除的数字拼接成字符串
}
}
postMessage(returnStr); //返回拼接字符串
close(); //关闭子线程
}代码解析：
这是一个使用Web Workers实现的多线程嵌套的示例。让我逐行讲解每个文件的实现：
HTML文件解析
<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>使用线程单层嵌套实现从生成的随机数中挑选5的倍数</title> <script type="text/javascript">
创建主线程，在HTML中定义JavaScript代码
var worker = new Worker("script.js");创建第一个Worker线程（主线程的子线程），加载script.js文件
worker.postMessage("");向子线程发送空消息，触发子线程开始工作
worker.onmessage = function(event) { // 从线程中取得计算结果监听子线程返回的消息事件
if(event.data!="") { var j; //行号 var k; //列号 var tr; var td; var intArray=event.data.split(";");将接收到的字符串数据（用;分隔）转换为数组
var table=document.getElementById("table"); for(var i=0;i<intArray.length;i++) { j=parseInt(i/10,0); // 计算行号，每行10个数据 k=i%10; // 计算列号计算每个数据在表格中的位置
if(k==0) { //该行不存在 tr=document.createElement("tr"); //添加行 tr.id="tr"+j; tr.style.backgroundColor="orange"; table.appendChild(tr); } else { //该行已存在 tr=document.getElementById("tr"+j); }如果是新行的第一列(k==0)，创建新的表格行；否则获取已存在的行
td=document.createElement("td");//添加列 tr.appendChild(td); td.innerHTML=intArray[j*10+k];//设置该列内容创建单元格并设置内容
if((intArray[j*10+k])%2==0){//如果所选的整数也能被2整除
td.style.backgroundColor="red";//设置该列背景色
}
td.style.color="black ";//设置该列字体颜色
td.width="30"; //设置列宽
}
}
};script.js（中间层Worker）解析
onmessage=function(event){监听主线程发送的消息
var intArray=new Array(100); //随机数组 //生成100个随机数 for(var i=0;i<100;i++) intArray[i]=parseInt(Math.random()*100);
生成100个0-99之间的随机整数
var worker; //创建子线程 worker=new Worker("worker.js"); //把随机数组提交给子线程进行挑选工作 worker.postMessage(JSON.stringify(intArray));创建嵌套的Worker线程，将随机数组转换为JSON字符串后发送
worker.onmessage = function(event) { //把挑选结果返回主页面 postMessage(event.data); } }监听子线程的返回结果，并转发给主线程
worker.js（最内层Worker）解析
onmessage = function(event) { var intArray= JSON.parse(event.data); //还原整数数接收JSON字符串并解析回JavaScript数组
var returnStr; returnStr=""; for(var i=0;i<intArray.length;i++) { if(parseInt(intArray[i])%5==0) //能否被5整除 { if(returnStr!="") returnStr+=";"; returnStr+=intArray[i]; //将能被5整除的数字拼接成字符串 } }遍历数组，筛选出能被5整除的数，用分号拼接成字符串
postMessage(returnStr); //返回拼接字符串 close(); //关闭子线程
将结果返回给父线程（script.js），然后关闭自身
整体流程
主线程创建worker1（script.js）
worker1生成100个随机数
worker1创建worker2（worker.js）并传递随机数
worker2筛选5的倍数，返回结果给worker1
worker1将结果转发给主线程
主线程在表格中显示结果，并将能被2整除的数标红
这是一个典型的Web Workers多线程嵌套应用，实现了数据的多级处理。