HTML5 WebApp part4:使用 Web Workers 来加速您的移动 Web 应用程序(下) ...
清单 4. loadDeals
函数
var deals = []; var sections = []; var dealDetails = {}; var dealsUrl = "http://deals.ebay.com/feeds/xml"; function loadDeals(){ var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if (this.readyState == 4 && this.status == 200){ var i = 0; var j = 0; var dealsXml = this.responseXML.firstChild; var childNode = {}; for (i=0; i <p>清单 4 展示了 <code>loadDeals</code> 函数,以及应用程序中使用的全局变量。您使用了一个 deals 数组和一个 sections 数组。它们是相关交易的附加组(例如,<code>Deals under $10</code>)。还有一个名为 <code>dealDetails</code> 的映射,其键是 Item IDs(来自于交易数据),其值是从 eBay Shopping <a title="API" href="http://www.31358.cn/api/">API</a> 获取的详细信息。 </p> <p>您首先调用一个代理,该代理又将调用 eBay Daily Deals REST <a title="API" href="http://www.31358.cn/api/">API</a>。这将把交易列表作为一个 XML 文档提供给您。您解析用于进行 Ajax 调用的 XMLHttpRequest 对象的 <code>onreadystatechange</code> 函数中的文档。您还使用其他两个函数,<code>parseDeal</code> 和 <code>parseSection</code>,来将 XML 节点解析为更易于使用的 JavaScript 对象,但由于它们只是令人厌烦的 XML 解析函数,因此我在这里没有包括它们。最后,在解析了 XML 后,您还使用了另外两个函数,<code>createDealUi</code> 和 <code>createSectionUi</code>,来修改 DOM。此时,这个 UI 如 图 1 所示。 </p> <p><a href="http://www.31358.cn/wp-content/uploads/2011/12/image0012.jpg"><img src="/static/imghw/default1.png" data-src="http://www.31358.cn/wp-content/uploads/2011/12/image001_thumb3.jpg" class="lazy" style="max-width:90%" title="image001" alt="image001" border="0" style="max-width:90%"></a> </p> <p>如果您返回 清单 4,就会注意到在加载主交易之后,您对这些交易的每个部分都调用了 <code>loadDetails</code> 函数。在这个函数中,您通过使用 eBay Shopping API 加载每个交易的附加细节 — 但前提是浏览器支持 Web Workers。清单 5 展示了 <code>loadDetails</code> 函数。 </p> <p><a name="l5"><b>清单 5. 预取交易细节</b></a></p> <pre class="brush:php;toolbar:false">function loadDetails(items){ if (!!window.Worker){ items.forEach(function(item){ var xmlStr = null; if (window.<a title="localStorage" href="http://www.31358.cn/localtorage/">localStorage</a>){ xmlStr = <a title="localStorage" href="http://www.31358.cn/localtorage/">localStorage</a>.getItem(item.itemId); } if (xmlStr){ var itemDetails = parseFromXml(xmlStr); dealDetails[itemDetails.id] = itemDetails; } else { var worker = new Worker("details.js"); worker.onmessage = function(message){ var responseXmlStr =message.data.responseXml; var itemDetails=parseFromXml(responseXmlStr); if (window.localStorage){ localStorage.setItem( itemDetails.id, responseXmlStr); } dealDetails[itemDetails.id] = itemDetails; }; worker.postMessage(item.itemId); } }); } }
在 loadDetails
中,您首先检查全局作用域(window
对象)中的 Worker
函数。如果该函数不在那里,那么无需做任何事。反之,您首先检查 XML 的 localStorage
以获取这个交易的细节。这是移动 Web 应用程序常用的本地缓存策略,本系列第 2 部分.详细介绍过这种策略。
如果 XML 位于本地,那么您在 parseFromXml
函数中解析它并将交易细节添加到 dealDetails
对象。反之,则衍生一个 Web Worker 并使用 postMessage
向其发送 Item ID。当这个 Worker 检索到数据并将数据发布回主线程后,您解析 XML,将结果添加到 dealDetails
,然后将 XML 存储到 localStorage
中。清单 6 展示了这个 Worker 脚本:details.js。
importScripts("common.js"); onmessage = function(message){ var itemId = message.data; var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if (this.readyState == 4 && this.status == 200){ postMessage({responseXml: this.responseText}); } }; var urlStr = generateUrl(itemId); xhr.open("GET", "proxy?url=" + escape(urlStr)); xhr.send(null); }
这个 Worker 脚本非常简单。您使用 Ajax 调用代理,该代理又调用 eBay Shopping API。当您收到来自代理的 XML
后,使用一个 JavaScript 对象文字(object literal)将其发送回主线程。注意,即使您能够使用来自一个 Worker 的 XMLHttpRequest
,但所有信息都将返回它的 responseText
属性,而不是它的 responseXml
属性。这是因为这个 Worker 脚本范围内没有 JavaScript DOM 解析器。注意,generateUrl
函数来自 common.js 文件(见 清单 7)。您使用 importScripts
函数导入 common.js 文件。
function generateUrl(itemId){ var appId = "YOUR APP ID GOES HERE"; return "http://open.api.ebay.com/shopping?callname=GetSingleItem&"+ "responseencoding=XML&appid=" + appId + "&siteid=0&version=665" +"&ItemID=" + itemId; }
现在,您已经知道如何(为支持 Web Workers 的浏览器)填充交易细节,我们返回 图 1 研究一下如何在应用程序中使用这种方法。注意,每笔交易旁边都有一个 Show Details 按钮,单击该按钮修改这个 UI,如 图 2 所示。
这个 UI 将在您调用 showDetails
函数时显示。清单 8 展示了这个函数。
function showDetails(id){ var el = $(id); if (el.style.display == "block"){ el.style.display = "none"; } else { el.style.display = "block"; if (!el.innerHTML){ var details = dealDetails[id]; if (details){ var ui = createDetailUi(details); el.appendChild(ui); } else { var itemId = id; var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if (this.readyState == 4 && this.status == 200){ var itemDetails = parseFromXml(this.responseText); if (window.localStorage){ localStorage.setItem( itemDetails.id, this.responseText); } dealDetails[id] = itemDetails; var ui = createDetailUi(itemDetails); el.appendChild(ui); } }; var urlStr = generateUrl(id); xhr.open("GET", "proxy?url=" + escape(urlStr)); xhr.send(null); } } } }
您收到了即将显示的交易的 ID 并切换是否显示它。当该函数第一次调用时,它将检查细节是否已经存储到 dealDetails 映射中。如果浏览器支持 Web Workers,那么这些细节已经存储且它的 UI 已经创建并添加到 DOM 中。如果这些细节还没有加载,或者,如果浏览器不支持 Workers,那么您需要执行一个 Ajax 调用来加载此数据。这就是这个应用程序无论在有无 Workers 时都同样能正常工作的原因。这意味着,如果 Workers 受到支持,那么数据就已被加载且 UI 将立即响应。如果没有 Workers,UI 仍将加载,只是需要花费几秒钟时间。
对于 Web 开发人员来说,Web Workers 听起来就像一种外来的新技术。但是,如本文所述,它们是非常实用的应用程序。这对于移动 Web 应用程序来说尤其正确。这些 Workers 可用于预取数据或执行其他预先操作,从而提供一个更加实时的 UI。这对于需要通过网速可能较慢的网络加载数据的移动 Web 应用程序来说尤其正确。结合使用这种技术和缓存策略,您的应用程序的快捷反应将使您的用户感到惊喜!

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











H5 프로젝트를 실행하려면 다음 단계가 필요합니다. Web Server, Node.js, 개발 도구 등과 같은 필요한 도구 설치. 개발 환경 구축, 프로젝트 폴더 작성, 프로젝트 초기화 및 코드 작성. 개발 서버를 시작하고 명령 줄을 사용하여 명령을 실행하십시오. 브라우저에서 프로젝트를 미리보고 개발 서버 URL을 입력하십시오. 프로젝트 게시, 코드 최적화, 프로젝트 배포 및 웹 서버 구성을 설정하십시오.

H5 Page 프로덕션은 HTML5, CSS3 및 JavaScript와 같은 기술을 사용하여 크로스 플랫폼 호환 웹 페이지의 생성을 말합니다. 핵심은 브라우저의 구문 분석 코드, 렌더링 구조, 스타일 및 대화식 기능에 있습니다. 일반적인 기술에는 애니메이션 효과, 반응 형 디자인 및 데이터 상호 작용이 포함됩니다. 오류를 피하려면 개발자를 디버깅해야합니다. 성능 최적화 및 모범 사례에는 이미지 형식 최적화, 요청 감소 및 코드 사양 등이 포함됩니다. 로딩 속도 및 코드 품질을 향상시킵니다.

H5 클릭 아이콘을 생성하는 단계에는 다음이 포함됩니다. 이미지 편집 소프트웨어에서 정사각형 소스 이미지 준비. H5 편집기에 상호 작용을 추가하고 클릭 이벤트를 설정하십시오. 전체 아이콘을 덮는 핫스팟을 만듭니다. 페이지로 점프하거나 애니메이션 트리거링과 같은 클릭 이벤트의 동작을 설정하십시오. h5 문서를 HTML, CSS 및 JavaScript 파일로 내보내십시오. 내보내는 파일을 웹 사이트 또는 기타 플랫폼에 배포하십시오.

H5 (HTML5)는 마케팅 캠페인 페이지, 제품 디스플레이 페이지 및 기업 프로모션 마이크로 웨스 사이트와 같은 가벼운 응용 프로그램에 적합합니다. 그것의 장점은 교차 성형 및 풍부한 상호 작용에있어 있지만, 그 한계는 복잡한 상호 작용 및 애니메이션, 로컬 리소스 액세스 및 오프라인 기능에 있습니다.

h5referstohtml5, apivotaltechnologyinwebdevelopment.1) html5introducesnewelements 및 dynamicwebapplications.2) itsupp ortsmultimediawithoutplugins, enovannangeserexperienceacrossdevices.3) SemanticLementsImproveContentsTructUreAndSeo.4) H5'Srespo

예, H5 페이지 제작은 HTML, CSS 및 JavaScript와 같은 핵심 기술을 포함하는 프론트 엔드 개발을위한 중요한 구현 방법입니다. 개발자는 & lt; canvas & gt; 그래픽을 그리거나 상호 작용 동작을 제어하기 위해 JavaScript를 사용하는 태그.

H5 팝업 창 생성 단계 : 1. 트리거링 메소드를 결정합니다 (클릭, 시간, 종료, 스크롤); 2. 디자인 컨텐츠 (제목, 텍스트, 액션 버튼); 3. 세트 스타일 (크기, 색상, 글꼴, 배경); 4. 코드 구현 (HTML, CSS, JavaScript); 5. 테스트 및 배포.

H5는 독립형 프로그래밍 언어가 아니라 최신 웹 애플리케이션을 구축하기위한 HTML5, CSS3 및 JavaScript 모음입니다. 1. HTML5는 웹 페이지 구조와 컨텐츠를 정의하고 새로운 태그와 API를 제공합니다. 2. CSS3은 스타일과 레이아웃을 제어하고 애니메이션과 같은 새로운 기능을 소개합니다. 3. JavaScript는 동적 상호 작용을 구현하고 DOM 작업 및 비동기 요청을 통해 기능을 향상시킵니다.
