`
Flory
  • 浏览: 23518 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

JavaScript多线程编程简介

 
阅读更多

虽然有越来越多的网站在应用AJAX技术进行开发,但是构建一个复杂的AJAX应用仍然是一个难题。造成这些困难的主要原因是什么呢?是与服务器的异步通信问题?还是GUI程序设计问题呢?通常这两项工作都是由桌面程序来完成的,那究竟为何开发一个可以实现同样功能的AJAX应用就这么困难呢?

AJAX 开发中的难题

让我们通过一个简单的例子来认识这个问题。假设你要建立一个树形结构的公告栏系统(BBS),它可以根据用户请求与服务器进行交互,动态加载每篇文章的信息,而不是一次性从服务器载入所有文章信息。每篇文章有四个相关属性:系统中可以作为唯一标识的ID、发贴人姓名、文章内容以及包含其所有子文章ID的数组信息。首先假定有一个名为getArticle()的函数可以加载一篇文章信息。该函数接收的参数是要加载文章的ID,通过它可从服务器获取文章信息。它返回的对象包含与文章相关的四条属性:id,name,content和children。例程如下:

function ( id ) {
var a = getArticle(id);
document.writeln(a.name + "
" + a.content);
}

然而你也许会注意到,重复用同一个文章ID调用此函数,需要与服务器之间进行反复且无益的通信。想要解决这个问题,可以考虑使用函数 getArticleWithCache(),它相当于一个带有缓存能力的getArticle()。在这个例子中,getArticle()返回的数据只是作为一个全局变量被保存下来:

var cache = {};
function getArticleWithCache ( id ) {
if ( !cache[id] ) {
cache[id] = getArticle(id);
}
return cache[id];
}

现在已将读入的文章缓存起来,让我们再来考虑一下函数backgroundLoad(),它应用我们上面提到的缓存机制加载所有文章信息。其用途是,当读者在阅读某篇文章时,从后台预加载它所有子文章。因为文章数据是树状结构的,所以很容易写一个递归的算法来遍历树并且加载所有的文章:

function backgroundLoad ( ids ) {
for ( var i=0; i < ids.length; i++ ) {
var a = getArticleWithCache(ids[i]);
backgroundLoad(a.children);
}
}

backgroundLoad ()函数接收一个ID数组作为参数,然后通过每个ID调用前面定义过的getArticldWithCache()方法,这样就把每个ID对应的文章缓存起来。之后再通过已加载文章的子文章ID数组递归调用backgroundLoad()方法,如此整个文章树就被缓存起来。

分享到:
评论

相关推荐

    JavaScript多线程编程简介.txt

    JavaScript多线程编程简介.txt

    javascript,css3,html5讲义

    《疯狂HTML 5/CSS3/JavaScript讲义...除此之外,本书还系统地介绍了JavaScript编程知识,包括JavaScript基本语法、DOM编程,以及HTML5新增的本地存储、离线应用、JavaScript多线程、客户端通信支持、WebSocket编程等。

    疯狂HTML 5/CSS 3/JavaScript讲义(随书源码)

    《疯狂HTML 5/CSS 3/JavaScript...除此之外,本书还系统地介绍了javascript编程知识,包括javascript基本语法、dom编程,以及html 5新增的本地存储、离线应用、javascript多线程、客户端通信支持、websocket编程等。

    探索XUL内的多线程编程

    本文内容包括:前提条件问题语句yeoldeXUL中的...在本文中,您将了解XUL的多线程功能,并创建一个应用程序,用来通过多线程检索数据。您将使用的是一个能访问Internet上的多个远端数据源的典型IO-绑定应用程序,您将

    包括 Java 集合、JVM、多线程、并发编程、设计模式、SpringBoot、SpringCloud、Java、MyBatis

    2021面试题、Java2021面试题、2022面试题、Java2022面试题、Java面试题、JVM面试题、多线程面试题、并发编程、设计模式面试题、Spring面试题、MyBatis面试题、ZooKeepe面试题r、Dubbo面试题、Elasticsearch面试题、...

    2022java面试题、JVM面试题、多线程面试题、并发编程、Redis面试题、MySQL面试题、Java2022面试题

    2022java面试题、JVM面试题、多线程面试题、并发编程、Redis面试题、MySQL面试题、Java2022面试题、Netty面试题、Elasticsearch面试题、Tomcat面试题、Dubbo面试题、Kafka面试题、Linux面试题、2021面试题、java面试...

    HTML5+CSS3+JavaScript

    本书是一本介绍HTML 5、CSS 3和JavaScript开发的实用图书。全书可分 为4个部分。 ... 第二部分:详细地介绍了CSS 3的绝大部分常用选择器、属性,...应用、多线程、跨文档消息通信、WebSocket编程等知识,这些内容既覆盖了

    javascript异步编程的六种方式总结

    那么如何让程序像人类一样可以多线程工作呢?以下为几种异步编程方式的总结,希望与君共勉。 回调函数 事件监听 发布订阅模式 Promise Generator (ES6) async (ES7) 异步编程传统的解决方案:回调函数和事件...

    疯狂HTML 5+CSS 3+JavaScript讲义(第2版)+源代码

    第18章 Web Worker多线程API 588 18.1 使用Worker创建多线程 589 18.2 与Worker线程进行数据交换 591 18.3 Worker线程嵌套 594 18.4 使用SharedWorker创建共享线程 597 18.5 Promise 603 18.6 本章小结 611 ...

    疯狂HTML5\CSS3\JavaScript讲义-源代码

    李刚 疯狂HTML5CSS3JavaScript讲义的源代码 第一部分 第1章 HTML 5简介 ... 第二部分 第6章 级联样式单与CSS选择器 ... 第17章 使用Worker创建多线程 第18章 客户端通信 第四部分 第19章 HTML 5的疯狂俄罗斯方块

    跟我学习javascript解决异步编程异常方案

    一、JavaScript异步编程的两个核心难点 异步I/O、事件驱动使得单线程的JavaScript得以在不阻塞UI的情况下执行网络、文件访问功能,且使之在后端实现了较高的性能。然而异步风格也引来了一些麻烦,其中比较核心的问题...

    快手编程集成帮助

    快手( AAuto Quicker ) 简介 AAuto是专用于桌面软件快速开发的新一代混合型编程语言, 兼具动态、静态语言优势,语法更可兼容大部分流行语言,学习成本低,开发速度快,并...提供可视化开发环境,轻松支持多线程开发。

    基于 JavaScript 电梯调度算法【100010979】

    开发环境:Chrome + Subline Text 开发语言:JavaScript 1.学习调度算法 2.通过实现电梯调度,体会操作系统调度过程 3.学习特定环境下多线程编程方法

    疯狂HTML 5_CSS 3_JavaScript讲义_part1

    除此之外,本书还系统地介绍了JavaScript编程知识,包括JavaScript基本语法、DOM编程,以及HTML 5新增的本地存储、离线应用、JavaScript多线程、客户端通信支持、WebSocket编程等。 本书的定位是一本前端开发的...

    疯狂HTML 5_CSS 3_JavaScript讲义_part2

    除此之外,本书还系统地介绍了JavaScript编程知识,包括JavaScript基本语法、DOM编程,以及HTML 5新增的本地存储、离线应用、JavaScript多线程、客户端通信支持、WebSocket编程等。 本书的定位是一本前端开发的...

    突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述

    在 HTML5 中引入的工作线程使得浏览器端的 Javascript 引擎可以并发地执行 Javascript 代码,从而实现了对浏览器端多线程编程的良好支持。 Javascript中的多线程 – WebWorker HTML5 中的 Web Worker 可以分为两种...

    理解javascript异步编程

    JavaScript的执行环境是单线程的,单线程的好处是执行环境简单,不用去考虑诸如资源同步,死锁等多线程阻塞式编程等所需要面对的恼人的问题。但带来的坏处是当一个任务执行时间较长时,后面的任务会等待很长时间。在...

    actor-js:探索以Actor模型的样式实现API的潜在好处,即使在单线程编程环境(如Javascript)中也是如此

    探索以Actor模型的样式实现API的潜在好处,即使在单线程编程环境(如Javascript)中也是如此。 去做 演员系统ActorSystem createSystem&#40;&#41; system.actorOf(IActorFactory) -&gt; ActorRef 演员Actor actor....

    Web设计原理与编程技术.rar

    第九章 Java的多线程机制; 第十章 JAVA网络程序设计; 第十一章 CGI技术; 第十二章 JSP技术概述; 第十三章 JSP运行和开发环境; 第十四章 JSP语法; 第十五章 JSP与JavaBean; 第十六章 JSP访问数据库;

    Javascript异步编程详解

    Javascript语言将任务的执行模式分成两种:同步...你可能知道,Javascript语言的执行环境是"单线程"(singlethread)。所谓"单线程",就是指一次只能完成一件任务。如果有多个任务,就必须排队,前面一个任务完成,再

Global site tag (gtag.js) - Google Analytics