深入 HTML5 Web Worker 应用实践：多线程编程（3）工作线程（Web Worker）应用与实践1
|
- UID
- 1066743
|
深入 HTML5 Web Worker 应用实践：多线程编程（3）工作线程（Web Worker）应用与实践1
应用场景一：使用工作线程做后台数值（算法）计算工作线程最简单的应用就是用来做后台计算，而这种计算并不会中断前台用户的操作。下面我们提供了一个工作线程的代码片段，用来执行一个相对来说比较复杂的任务：计算两个非常大的数字的最小公倍数和最大公约数。
在这个例子中，我们在主页面中创建一个后台工作线程，并且向这个工作线程分配任务（即传递两个特别大的数字），当工作线程执行完这个任务时，便向主页面程序返回计算结果，而在这个过程中，主页面不需要等待这个耗时的操作，可以继续进行其它的行为或任务。
我们把这个应用场景分为两个主要部分，一个是主页面，可以包含主 JavaScript 应用入口，用户其它操作 UI 等。另外一个是后台工作线程脚本，即用来执行计算任务。代码片段如下：
清单 12. 主程序页面代码1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <!DOCTYPE HTML>
<html>
<head>
<title>
Background Worker Application Example 1: Complicated Number Computation
</title>
</head>
<body>
<div>
The least common multiple and greatest common divisor is:
<p id="computation_results">please wait, computing … </p>
</div>
<script>
var worker = new Worker('numberworker.js');
worker.postMessage("{first:347734080,second:3423744400}");
worker.onmessage = function (event)
{
document.getElementById(' computation_result').textContent = event.data;
};
</script>
</body>
</html>
|
清单 13. 后台工作线程代码1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
| /**
* This worker is used to calculate
* the least common multiple
* and the greatest common divisor
*/
onmessage = function (event)
{
var first=event.data.first;
var second=event.data.second;
calculate(first,second);
};
/*
* calculate the least common multiple
* and the greatest common divisor
*/
function calculate(first,second) {
//do the calculation work
var common_divisor=divisor(first,second);
var common_multiple=multiple(first,second);
postMessage("Work done! " +
"The least common multiple is "+common_divisor
+" and the greatest common divisor is "+common_multiple);
}
/**
* calculate the greatest common divisor
* @param number
* @param number
* @return
*/
function divisor(a, b) {
if (a % b == 0) {
return b;
} else {
return divisor(b, a % b);
}
}
/**
* calculate the least common multiple
* @param number
* @param number
* @return
*/
function multiple( a, b) {
var multiple = 0;
multiple = a * b / divisor(a, b);
return multiple;
}
|
在主程序页面中，我们使用 Worker()构造函数创建一个新的工作线程，它会返回一个代表此线程本身的线程对象。接下来我们使用这个线程对象与后台脚本进行通信。线程对象有两个主要事件处理器：postMessage 和 onmessage 。postMessage 用来向后台脚本发送消息，onmessage 用以接收从后台脚本中传递过来的消息。
在后台工作线程代码片段中，我们定一个两个 JavaScript 函数，一个是 function divisor：用以计算最大公约数，一个是 function multiple：用以计算最小公倍数。同时工作线程的 onmessage 事件处理器用以接收从主页面中传递过来的数值，然后把这两个数值传递到 function calculate 用以计算。当计算完成后，调用事件处理器 postMessage，把计算结果发送到主页面。 |
|
|
|
|
|
