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

在網(wǎng)站建設(shè)、成都網(wǎng)站建設(shè)過程中，需要針對客戶的行業(yè)特點、產(chǎn)品特性、目標受眾和市場情況進行定位分析，以確定網(wǎng)站的風(fēng)格、色彩、版式、交互等方面的設(shè)計方向。創(chuàng)新互聯(lián)還需要根據(jù)客戶的需求進行功能模塊的開發(fā)和設(shè)計，包括內(nèi)容管理、前臺展示、用戶權(quán)限管理、數(shù)據(jù)統(tǒng)計和安全保護等功能。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

   (2)異常處理

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

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

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

   1.對于更新頻率較高的過程的分析.

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

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

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

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

   2.對于耗時較長的處理過程的分析.

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

3.分析和總結(jié)

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

當前文章：基于HTML5&Js的在線導(dǎo)航系統(tǒng)架構(gòu)
本文地址：http://www.rwnh.cn/article46/pgcpeg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、企業(yè)建站、App開發(fā)、電子商務(wù)、網(wǎng)站設(shè)計公司、定制網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)