本文主要就項(xiàng)目中應(yīng)用HTML5&Javascript開發(fā)導(dǎo)航系統(tǒng)時(shí),遇到的問題做一總結(jié)及分享.具體從以下三個(gè)方面進(jìn)行說明:

成都創(chuàng)新互聯(lián)公司主要從事網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、網(wǎng)頁設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)垣曲,十載網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18980820575

1.發(fā)現(xiàn)和解決問題

  導(dǎo)航系統(tǒng)有這么幾個(gè)特點(diǎn):多任務(wù)性,實(shí)時(shí)性,交互性,數(shù)據(jù)多樣性.

  針對(duì)上述特點(diǎn)個(gè)人在進(jìn)行架構(gòu)設(shè)計(jì)時(shí),采用如下解決方案:

  (1)多任務(wù)性:采用HTML5的Webworker解決方案.

   HTML5的webWorkers提供了js的后臺(tái)處理解決方案,它允許將復(fù)雜耗時(shí)的單純js邏輯處理放在瀏覽器后臺(tái)線程中進(jìn)行處理，讓js不阻塞UI線程的渲染。

  (2)實(shí)時(shí)性:主要體現(xiàn)在實(shí)時(shí)渲染. HTML5的Canvas可以解決這個(gè)問題,

   HTML5的Canvas(畫布)可以用來繪制圖形，圖案，允許使用腳本動(dòng)態(tài)渲染點(diǎn)陣圖像。簡(jiǎn)單來說，Canvas就是允許你在HTML5中，使用Javascript去繪制你喜歡的任何圖形，包括文字，圖片、線、點(diǎn)、各種形狀等。這正是導(dǎo)航系統(tǒng)所需要的基礎(chǔ)矢量繪圖功能.

  (3)交互性:主要體現(xiàn)在導(dǎo)航人機(jī)交互界面HMI框架的設(shè)計(jì).項(xiàng)目采用 利用開源類庫zepto來搭建導(dǎo)航HMI框架的方案解決此問題.

   zepto是一個(gè)專為mobile WebKit瀏覽器(如：Safari和Chrome)而開發(fā)的一個(gè)JavaScript類庫.能夠幫助開發(fā)人員簡(jiǎn)單、快速地完成開發(fā)任務(wù)。最重要的是這個(gè)JS類庫，是超輕量級(jí)的，只有5KB.

   HMI框架在設(shè)計(jì)時(shí),主要考慮:

   1)實(shí)現(xiàn)頁面結(jié)構(gòu)和數(shù)據(jù)的分離。

   2)實(shí)現(xiàn)html和js的分離。

   3)減少組件間的耦合，實(shí)現(xiàn)業(yè)務(wù)模塊的組件化，獨(dú)立性。

   4)方便多人并行開發(fā)和測(cè)試。

   基礎(chǔ)框架圖如下:

   該框架實(shí)現(xiàn)了HMI基本功能(包括畫頁的遷移,數(shù)據(jù)的傳遞).框架中,畫頁是基于div設(shè)計(jì)的,即每一個(gè)畫頁使用一個(gè)div來表示,畫頁的遷移過程就是控制div顯示與否的過程.

   開發(fā)人員在制作頁面時(shí),每個(gè)頁面需要制作一個(gè)HTML(內(nèi)部是一個(gè)div)文件和一個(gè)頁面類(js)文件,頁面文件(html)用來描述頁面的構(gòu)成和元素,頁面類(js)用來獲取數(shù)據(jù)，渲染頁面和增加頁面元素的監(jiān)聽.

  (4)數(shù)據(jù)多樣性:主要體現(xiàn)在數(shù)據(jù)格式及數(shù)據(jù)來源的多樣性.

   1)導(dǎo)航用二進(jìn)制數(shù)據(jù)的解析方案

     通常我們使用的導(dǎo)航數(shù)據(jù)都是緊密排列的二進(jìn)制格式數(shù)據(jù),此種數(shù)據(jù),我們采用的解析方案是:使用ArrayBuffer進(jìn)行解析.ArrayBuffer表示二進(jìn)制數(shù)據(jù)的原始緩沖區(qū)，該緩沖區(qū)用于存儲(chǔ)各種類型化數(shù)組的數(shù)據(jù)。實(shí)際應(yīng)用時(shí),將ArrayBuffer傳遞到類型化數(shù)組或 DataView 對(duì)象,來解釋緩沖區(qū)中相關(guān)數(shù)據(jù)類型.

   2)導(dǎo)航用配置文件的解析方案

     配置文件的解析,在Javascript中比較簡(jiǎn)單,直接使用Json進(jìn)行存儲(chǔ)和讀取即可.Json是一種輕量級(jí)的數(shù)據(jù)交換格式,在Javascript中可以將對(duì)象直接轉(zhuǎn)換為Json數(shù)據(jù),也可反向?qū)son轉(zhuǎn)換為對(duì)象.

   3)導(dǎo)航數(shù)據(jù)的本地存儲(chǔ)

     導(dǎo)航數(shù)據(jù)的本地存儲(chǔ)采用HTML5的localStorage特性.localStorage是瀏覽器用于存儲(chǔ)本地?cái)?shù)據(jù)的一個(gè)對(duì)象.其保存的數(shù)據(jù),一般情況下是永久保存的.在應(yīng)用時(shí),我們使用localStorage來保存配置文件和緩存數(shù)據(jù).

  在進(jìn)行架構(gòu)設(shè)計(jì)時(shí),除了考慮上述因素外,還要考慮如下問題:

  (1)導(dǎo)航NaviCore框架設(shè)計(jì)

   在設(shè)計(jì)之初,我們考慮NaviCore框架需具備如下特點(diǎn):

   1)具備Js腳本按需加載特性.

    由于導(dǎo)航系統(tǒng)比較龐大,js腳本必然非常多,腳本之間的引用關(guān)系如果控制不好后期將成為很大問題,為解決此問題,我們采用Js腳本按需加載的解決方案,即當(dāng)某個(gè)腳本js需要使用其他腳本中的數(shù)據(jù)或?qū)ο髸r(shí),采用某種方式(如:像C語言的Include或Java的Import),在文件開頭做一聲明,框架根據(jù)聲明進(jìn)行加載,達(dá)到按需加載的目的.

   2)實(shí)現(xiàn)類的繼承關(guān)系

    Javascript的繼承關(guān)系是通過prototype實(shí)現(xiàn)的,但prototype有一些不足(如:父類的構(gòu)造函數(shù)不是像JAVA中那樣在給子類進(jìn)行實(shí)例化時(shí)執(zhí)行),因此,我們重新設(shè)計(jì)了一套類的繼承模型,實(shí)現(xiàn)了類的繼承,類的構(gòu)造函數(shù)執(zhí)行.

   3)減少模塊間的耦合，增加獨(dú)立性。

    為減少模塊間耦合,增加獨(dú)立性,我們?cè)O(shè)計(jì)了一套事件通知機(jī)制,該機(jī)制支持瀏覽器事件,支持dom對(duì)象綁定,也可以綁定到某一個(gè)類對(duì)象,采用觀測(cè)者模式設(shè)計(jì),大大減少了模塊間的耦合度.

  (2)異常處理

    我們使用Javascript中的try catch處理異常.請(qǐng)大家注意,一定要指定window.onerror錯(cuò)誤處理函數(shù)。這樣可以第一時(shí)間捕捉到程序未捕捉的異常.

2.預(yù)見與避免錯(cuò)誤

  在設(shè)計(jì)階段,我們預(yù)計(jì),后期性能問題可能是比較棘手的問題.因此,在設(shè)計(jì)階段專門針對(duì)性能相關(guān)問題點(diǎn)進(jìn)行了分析和設(shè)計(jì).

  1.對(duì)于更新頻率較高的過程的分析.

  (1)Map刷新頻率可能會(huì)很高，這可能會(huì)導(dǎo)致系統(tǒng)負(fù)荷較高.

   采用異步地圖刷新機(jī)制,并控制地圖刷新頻率,保證系統(tǒng)負(fù)荷.

  (2)DG對(duì)聲音文件下載頻率較高,導(dǎo)致網(wǎng)絡(luò)帶寬被長(zhǎng)時(shí)間占用.

   采用聲音文件分類下載機(jī)制,共通聲音文件直接放入安裝包,常用聲音文件緩存到本地的方式減少帶寬占用.

  2.對(duì)于耗時(shí)較長(zhǎng)的處理過程的分析.

  如果主線程中有耗時(shí)較長(zhǎng)的處理過程,則必然會(huì)阻塞UI響應(yīng),影響用戶體驗(yàn).對(duì)此,我們采用在程序執(zhí)行入口加入性能監(jiān)控代碼的方式,保證第一時(shí)間找到問題點(diǎn).對(duì)于耗時(shí)較長(zhǎng)的處理過程,采用Webworker解決方案,將其放入后臺(tái)獨(dú)立線程中進(jìn)行處理.

3.分析和總結(jié)

  本項(xiàng)目總結(jié)的技術(shù)方案和設(shè)計(jì)文檔有:AD架構(gòu)設(shè)計(jì)文檔,概要設(shè)計(jì)文檔,詳細(xì)設(shè)計(jì)文檔,HMI架構(gòu)設(shè)計(jì)方案.

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)cdcxhl.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

當(dāng)前名稱：基于HTML5&Js的在線導(dǎo)航系統(tǒng)架構(gòu)-創(chuàng)新互聯(lián)
文章起源：http://weahome.cn/article/codicg.html