《JavaScript多线程编程简介》由会员分享，可在线阅读，更多相关《JavaScript多线程编程简介（6页珍藏版）》请在金锄头文库上搜索。
1、虽然有越来越多的网站在应用 AJAX 技术进行开发，但是构建一个复杂的 AJAX 应用仍然是一个难题。造成这些困难的主要原因是什么呢？是与服务器的异步通信问题？还是 GUI 程序设计问题呢？通常这两项工作都是由桌面程序来完成的，那究竟为何开发一个可以实现同样功能的 AJAX 应用就这么困难呢？AJAX 开发中的难题让我们通过一个简单的例子来认识这个问题。假设你要建立一个树形结构的公告栏系统(BBS)，它可以根据用户请求与服务器进行交互，动态加载每篇文章的信息，而不是一次性从服务器载入所有文章信息。每篇文章有四个相关属性：系统中可以作为唯一标识的 ID、发贴人姓名、文章内容以及包含其所有子文章
2、ID 的数组信息。首先假定有一个名为 getArticle()的函数可以加载一篇文章信息。该函数接收的参数是要加载文章的 ID，通过它可从服务器获取文章信息。它返回的对象包含与文章相关的四条属性：id，name，content 和 children。例程如下：function ( id ) var a = getArticle(id);document.writeln(a.name + “ + a.content); 然而你也许会注意到，重复用同一个文章 ID 调用此函数，需要与服务器之间进行反复且无益的通信。想要解决这个问题，可以考虑使用函数 getArticleWithCache()，它相
3、当于一个带有缓存能力的getArticle()。在这个例子中，getArticle()返回的数据只是作为一个全局变量被保存下来：var cache = ;function getArticleWithCache ( id ) if ( !cacheid ) cacheid = getArticle(id);return cacheid; 现在已将读入的文章缓存起来，让我们再来考虑一下函数 backgroundLoad()，它应用我们上面提到的缓存机制加载所有文章信息。其用途是，当读者在阅读某篇文章时，从后台预加载它所有子文章。因为文章数据是树状结构的，所以很容易写一个递归的算法来遍历树并且加载
4、所有的文章：function backgroundLoad ( ids ) for ( var i=0; i Concurrent.Thread.create(function()var i = 0;while ( 1 ) document.body.innerHTML += i+ + “;);执行这个程序将会顺序显示从 0 开始的数字，它们一个接一个出现，你可以滚屏来看它。现在让我们来仔细研究一下代码，他应用 while(1)条件制造了一个不会中止的循环，通常情况下，象这样不断使用一个并且是唯一一个线程的 JavaScript 程序会导致浏览器看起来象冻结了一样，自然也就不会允许你滚屏。那么
5、为什么上面的这段程序允许你这么做呢？关键之处在于 while(1)上面的那条Concurrent.Thread.create()语句，这是这个库提供的一个方法，它可以创建一个新线程。被当做参数传入的函数在这个新线程里执行，让我们对程序做如下微调：function f ( i )while ( 1 ) document.body.innerHTML += i+ + “;Concurrent.Thread.create(f, 0);Concurrent.Thread.create(f, 100000);在这个程序里有个新函数 f()可以重复显示数字，它是在程序段起始定义的，接着以 f()为参数调用
6、了两次 create()方法，传给 create()方法的第二个参数将会不加修改地传给 f()。执行这个程序，先会看到一些从 0 开始的小数，接着是一些从 100,000 开始的大数，然后又是接着前面小数顺序的数字。你可以观察到程序在交替显示小数和大数，这说明两个线程在同时运行。让我来展示 Concurrent.Thread 的另外一个用法。上面的例子调用 create()方法来创建新线程。不调用库里的任何 APIs 也有可能实现这个目的。例如，前面那个例子可以这样写：var i = 1;while ( 1 ) document.body.innerHTML += i+ + “;在 scrip
7、t 标签内，很简单地用 JavaScript 写了一个无穷循环。你应该注意到标签内的 type 属性，那里是一个很陌生的值(text/x- script.multithreaded-js)，如果这个属性被放在 script 标签内，那么 Concurrent.Thread 就会在一个新的线程内执行标签之间的程序。你应当记住一点，在本例一样，必须将 Concurrent.Thread 库包含进来。有了 Concurrent.Thread，就有可能自如的将执行环境在线程之间进行切换，即使你的程序很长、连续性很强。我们可以简要地讨论下如何执行这种操作。简言之，需要进行代码转换。粗略地讲，首先要把传递
8、给 create()的函数转换成一个字符串，接着改写直至它可以被分批分次执行。然后这些程序可以依照调度程序逐步执行。调度程序负责协调多线程，换句话说，它可以在适当的时候做出调整以便每一个修改后的函数都会得到同等机会运行。 Concurrent.Thread 实际上并没有创建新的线程，仅仅是在原本单线程的基础上模拟了一个多线程环境。虽然转换后的函数看起来是运行在不同的线程内，但是实际上只有一个线程在做这所有的事情。在转换后的函数内执行同步通信仍然会造成浏览器冻结，你也许会认为以前的那些问题根本就没有解决。不过你不必耽心，Concurrent.Thread 提供了一个应用 JavaScript 的
9、异步通信方式实现的定制通信库，它被设计成当一个线程在等待服务器的响应时允许其它线程运行。这个通信库存于 Concurrent.Thread.Http 下。它的用法如下所示：var req = Concurrent.Thread.Http.get(url, “Accept“, “*“);if (req.status = 200) alert(req.responseText); else alert(req.statusText);get()方法，就像它的名字暗示的那样，可以通过 HTTP 的 GET 方法获得指定 URL 的内容，它将目标URL 作为第一个参数，将一个代表 HTTP 请求头的数
10、组作为可选的第二个参数。get()方法与服务器交互，当得到服务器的响应后就返回一个 XMLHttpRequest 对象作为返回值。当 get()方法返回时，已经收到了服务器响应，所以就没必要再用回调函数接收结果。自然，也不必再耽心当程序等待服务器的响应时浏览器冻结的情况了。另外，还有一个 post()方法可以用来发送数据到服务器：var req = Concurrent.Thread.Http.post(url, “key1=val1alert(req.statusText);post()方法将目的 URL 作为第一个参数，要发送的内容作为第二个参数。像 get()方法那样，你也可以将请求头作
11、为可选的第三个参数。如果你用这个通信库实现了第一个例子当中的 getArticle()方法，那么你很快就能应用文章开头示例的那种简单的方法写出 getArticleWithCache(),backgroundLoad ()以及其它调用了getArticle()方法的函数了。即使是那版 backgroundLoad()正在读文章数据，照例还有另外一个线程可以对用户请求做出响应，浏览器因此也不会冻结。现在，你能理解在 JavaScript 中应用多线程有多实用了？想了解更多我向你介绍了一个可以在 JavaScript 中应用多线程的库：Concurrent.Thread。这篇文章的内容只是很初级的
12、东西，如果你想更深入的了解，我推荐您去看 the tutorial。它提供有关Concurrent.Thread 用法的更多内容，并列出了可供高级用户使用的文档，是最适合起步的材料。访问他们的网站也不错，那里提供更多信息。有关作者Daisuke Maki：从 International Christian 大学文科学院自然科学分部毕业后（取得文学学士学位） ，又在 Electro-Communications 大学的研究生院信息专业攻读硕士学位。擅长 Web 开发和应用JavaScript 的 AJAX。他开发了 Concurrent.Thread。2006 财政年度在日本信息技术促进机构（IPA）指导的项目 Explatory Software Project 中应用了这个设计。目前已经拥有一个工学硕士学位的他正在 Electro-Communications 大学的研究生院注册攻读博士学位。
