移动商务网页设计与制作教学课件作者魏利华第11章webworker处理线程.ppt

下载文档

0
0
约2.96千字
约 29页
2019-10-14 发布于未知
举报
版权申诉
保障服务

移动商务网页设计与制作教学课件作者魏利华第11章webworker处理线程.ppt

1、本文档共29页，可阅读全部内容。
2、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击这里二次下载。
4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。

第11 章 Web Worker 处理线程 11. 1 Web Worker 概述 11. 2 线程嵌套 11. 3 跨文档消息通信 11. 4 小结返回 11. 1 Web Worker 概述１１.１.１　创建和使用ＷｅｂＷｏｒｋｅｒＷｅｂＷｏｒｋｅｒ是ＨＴＭＬ５中新增的，是用来在Ｗｅｂ应用程序中实现后台处理的一项技术。使用这个ＡＰＩ可以很容易地创建在后台运行的线程（ｗｏｒｋｅｒ），如果将耗时的处理交给后台去运行，其对用户在前台页面中的操作就没有影响了。创建后台线程的步骤很简单。只要在Ｗｏｒｋｅｒ类的构造器中将需要在后台线程中执行的脚本文件的ＵＲＬ作为参数，创建Ｗｏｒｋｅｒ对象就可以了：ｖａｒｗｏｒｋｅｒ＝ｎｅｗＷｏｒｋｅｒ（“ｗｏｒｋｅｒ.ｊｓ”）；下一页返回 11. 1 Web Worker 概述注意：后台线程不能访问页面和窗口对象。另外，提供发送和接受消息来与后台线程互相传递数据。提供Ｗｏｒｋｅｒ对象的ｏｎｍｅｓｓａｇｅ事件句柄可以在后台线程之中接收消息，使用方法如下：ｗｏｒｋｅｒ.ｏｎｍｅｓｓａｇｅ＝ｆｕｎｃｔｉｏｎ（ｅｖｅｎｔ）｛／／处理接收的消息同样，通过获取Ｗｏｒｋｅｒ对象的ｏｎｍｅｓｓａｇｅ事件句柄及ｐｏｓｔＭｅｓｓａｇｅ（）方法，可在后台线程内部进行消息的接收和发送。ＷｅｂＷｏｒｋｅｒ的操作流程如图１１.１所示。上一页下一页返回 11. 1 Web Worker 概述１１.１.２　ＷｅｂＷｏｒｋｅｒ应用实例———求和运算下面来看一个使用后台线程的实例。本实例中，放置了两个文本框，即初始文本框与终极文本框，当用户在该两个文本框中输入数字，然后单击旁边的“计算”按钮时，后台将进行从初始文本框中输入的值到终极文本框中输入的值之间的所有数值的求和运算。假如在初始文本框中输入数字２，在终极文本框中输入数字４，则执行的运算就是２＋３＋４。若在初始文本框中输入的值大于终极文本框中的值，则弹出“提交的运算不符合要求”的提示。上一页下一页返回 11. 1 Web Worker 概述网页文件的代码如下：上一页下一页返回 11. 1 Web Worker 概述上一页下一页返回 11. 1 Web Worker 概述其运行结果如图１１.２所示。上一页返回１１.２　线程嵌套１１.２.１　单层嵌套线程可以嵌套子线程，这样就可以把一个较大的后台线程切分成几个子线程，每个子线程各自完成相对独立的一部分工作。下面通过一个实例来演示一下单层嵌套，在该实例中随机生成了一个整数的数组，并把生成随机数组的工作也放到后台线程中，然后使用一个子线程在随机数组中挑选可以被５整除的数字。最后，在一个表格中输出可以被５整除的数字，并且把输出的既能被５整除也能被２整除的数字的单元格在表格中进行描红处理。同时本实例对数组的传递以及挑选结果的传递均采用ＪＳＯＮ对象来进行转换，以验证是否能在线程之间进行Ｊａｖａｓｃｒｉｐｔ对象的传递工作。下一页返回１１.２　线程嵌套１１.２.２　在多个子线程中进行数据交互要实现子线程与子线程之间的数据交互，大致需要以下几个步骤：（１）先创建发送数据的子线程。（２）执行子线程中的任务，然后把要传递的数据发送给主线程。（３）在主线程接收到子线程传回来的消息时，创建接收数据的子线程，然后把发送数据的子线程中返回的消息传递给接收数据的子线程。（４）执行接收数据子线程中的代码。上一页下一页返回１１.２　线程嵌套接下来看一个在多个子线程中进行数据交互的实例。本例与上节中实例实现的效果相同，同样是随机生成了一个整数的数组，把数组中能被５整除的数字以表格的形式输出，并且对输出的既能被５整除也能被２整除的数字的单元格进行描红处理。（１）ＨＴＭＬ５页面代码如下：上一页下一页返回１１.２　线程嵌套上一页下一页返回１１.２　线程嵌套上一页下一页返回１１.２　线程嵌套（２）单独线程，创建随机数组，ｗｏｒｋｅｒ.ｊｓ代码如下：上一页下一页返回１１.２　线程嵌套（３）主线程，ｓｃｒｉｐｔ.ｊｓ代码如下：上一页下一页返回１１.２　线程嵌套（４）接收数据的子线程，ｗｏｒｋｅｒ２.ｊｓ代码如下：上一页下一页返回１１.２　线程嵌套其运行结果如图１１.４所示。上一页返回１１.３　跨文档消息通信１１.３.１　使用ｐｏｓｔＭｅｓｓａｇｅＡＰＩ要想接受从其他的窗口发过来的信息，就必须对窗口对象的ｍｅｓｓａｇｅ事件进行监视，监视的代码如下：可使用ｗｉｎｄｏｗ对象的ｐｏｓｔＭｅｓｓａｇｅ方法向其他窗口发送信息，该方法的定义如下：下一页返回１１.３　跨文