龐聰，龍坤，羅棋，杜瑞林

（1.中國(guó)地震局地震研究所，武漢 430071；2.武漢大學(xué)經(jīng)濟(jì)與管理學(xué)院，武漢 430072）

基于JavaScript File API的本地?cái)?shù)據(jù)讀取、處理機(jī)制改進(jìn)

龐聰1，龍坤2，羅棋1，杜瑞林2

（1.中國(guó)地震局地震研究所，武漢 430071；2.武漢大學(xué)經(jīng)濟(jì)與管理學(xué)院，武漢 430072）

隨著Web本地?cái)?shù)據(jù)的日益增多和B/S模式下客戶端數(shù)據(jù)處理的頻繁增加，JavaScript的本地?cái)?shù)據(jù)處理功能也得到拓展和發(fā)展。JavaScript File API雖然實(shí)現(xiàn)本地?cái)?shù)據(jù)的可視化，卻不能用于實(shí)際的計(jì)算。因?yàn)閞esult數(shù)組只是將本地文本數(shù)據(jù)以單字節(jié)的形式保存，在實(shí)際過程中result數(shù)組并沒有實(shí)際用途；利用一系列循環(huán)迭代算法，在File API基礎(chǔ)上進(jìn)行改進(jìn)，最終可以實(shí)現(xiàn)對(duì)本地?cái)?shù)據(jù)的提取以及預(yù)處理，可供以后的實(shí)際計(jì)算。

JavaScript；本地?cái)?shù)據(jù)；文件API；機(jī)制改進(jìn)

0　引言

JavaScript不僅可以對(duì)服務(wù)器端數(shù)據(jù)進(jìn)行讀取、處理，也可以對(duì)用戶交互數(shù)據(jù)進(jìn)行操作。不過在客戶端進(jìn)行數(shù)據(jù)處理一直是JavaScript的短板，尤其是對(duì)本地?cái)?shù)據(jù)文件進(jìn)行讀取、處理計(jì)算等。

本文是在JavaScript File API的基礎(chǔ)上，對(duì)其讀取本地?cái)?shù)據(jù)文件時(shí)產(chǎn)生的單字節(jié)讀取問題進(jìn)行了優(yōu)化處理并對(duì)讀取到的本地?cái)?shù)據(jù)進(jìn)行了簡(jiǎn)單的運(yùn)算，最后驗(yàn)證了數(shù)據(jù)的數(shù)值屬性。

1　File API

1.1FileReader

處理文件的方式曾經(jīng)長(zhǎng)期停留在使用＜input type= “file”＞字段方式的階段。File API不僅支持以往的＜input type=“file”＞方式，還增加了一些可以直接訪問文件的API接口［1］，這是一種在客戶端上訪問數(shù)據(jù)較為安全的方式［2］。

File API提供的FileReader類型可以用來讀取本地文件的數(shù)據(jù)。它是一種異步文件讀取的方式，與XMLHttpRequest功能類似，只不過 XMLHttpRequest讀取的是遠(yuǎn)程服務(wù)器，而不是 FileReader讀取的文件系統(tǒng)。

1.2readAsText

本文采用readAsText方法進(jìn)行文件的讀取，并以純文本的方式將讀取到的文件內(nèi)容保存在一個(gè)result結(jié)果中，它可以是一個(gè)數(shù)組的形式［3］。形式如下：

ReadAsText（file，encoding）；//file表示文件，后面的參數(shù)表示編碼類型

1.3onload觸發(fā)事件

FileReader包含有三個(gè)主要觸發(fā)事件：onprogress、onerror、onload，分別表示在加載新文件時(shí)觸發(fā)、加載錯(cuò)誤時(shí)觸發(fā)、加載完成后觸發(fā)。在實(shí)際應(yīng)用中，load事件采用較多，即當(dāng)讀取到file文件并完整無誤，觸發(fā)reader.onload事件函數(shù)，執(zhí)行函數(shù)內(nèi)部操作。

1.4測(cè)試瀏覽器是否支持文件讀取

1.5讀取本地?cái)?shù)據(jù)

觀測(cè)數(shù)據(jù)為10組隨機(jī)小數(shù)，精確到小數(shù)點(diǎn)后兩位，具體數(shù)據(jù)包括：0.01，0.25，0.35，0.25，0.21，0.98，0.67，0.26，0.45，0.87

讀取本地?cái)?shù)據(jù)時(shí)，先要獲取本地文件file的ID，然后調(diào)用FileReader屬性的ReadAsText方法，并在讀取成功時(shí)觸發(fā)function函數(shù)，最后執(zhí)行內(nèi)部的相關(guān)循環(huán)迭代關(guān)系式［4］。具體關(guān)鍵代碼如下：

1.6讀取結(jié)果

上述代碼在Firefox瀏覽器解釋執(zhí)行后，可以得到以下的數(shù)據(jù)結(jié)果：

從上述結(jié)果可以看出，未預(yù)處理過的result數(shù)組元素讀取出來是單字節(jié)符號(hào)，它把數(shù)字、“.”以及單空格當(dāng)作數(shù)組元素。這種讀取方式不能將本地?cái)?shù)據(jù)有效數(shù)組化，不能應(yīng)用到實(shí)際工程運(yùn)算中。

2　修改后的本地?cái)?shù)據(jù)讀取機(jī)制

2.1算法迭代過程

測(cè)試數(shù)據(jù)仍然采用1.5中數(shù)據(jù)。在把空格、小數(shù)點(diǎn)考慮為單字節(jié)數(shù)據(jù)的情況下，每個(gè)數(shù)值類數(shù)據(jù)被分割成5位單字節(jié)數(shù)據(jù)。這里，利用for循環(huán)50次、每5次取余，可實(shí)現(xiàn)數(shù)據(jù)的完整輸出，讀取后的結(jié)果放在數(shù)組shuju2中［5］。關(guān)鍵代碼如下：

2.2本地?cái)?shù)據(jù)讀取結(jié)果

上述代碼在Firefox瀏覽器解釋執(zhí)行后，可以得到以下的數(shù)據(jù)結(jié)果：

從上述結(jié)果可以看出，數(shù)據(jù)結(jié)果與原始的觀測(cè)數(shù)據(jù)一致，沒有出現(xiàn)1.6數(shù)據(jù)結(jié)果的單字節(jié)相隔情況。

2.3驗(yàn)證讀取后的數(shù)據(jù)是否為數(shù)值類型

盡管觀測(cè)數(shù)據(jù)屬于數(shù)值類數(shù)據(jù)，但是經(jīng)過File API讀取且迭代處理過的數(shù)組數(shù)據(jù)是否還是數(shù)值類數(shù)據(jù)就需要進(jìn)一步驗(yàn)證。

驗(yàn)證數(shù)組數(shù)據(jù)是否為數(shù)值類型，一般常用的有兩種方式：if（typeof（x）=="number"）｛｝和直接進(jìn)行數(shù)學(xué)運(yùn)算［6］。采用直接數(shù)學(xué)運(yùn)算的代碼如下：

上述代碼執(zhí)行后的數(shù)據(jù)運(yùn)算結(jié)果如下所示：

3　結(jié)語

本文改進(jìn)了使用JavaScript對(duì)本地文件數(shù)據(jù)異步讀取機(jī)制，真正實(shí)現(xiàn)了對(duì)本地文件數(shù)據(jù)的可操作性讀取，而不是單個(gè)字節(jié)的簡(jiǎn)單顯現(xiàn)，并在最后驗(yàn)證了讀取后的數(shù)組元素為數(shù)值類型。

本次研究仍然處在一些不足：

（1）計(jì)算機(jī)配置影響執(zhí)行效率。JavaScript的執(zhí)行是建立在瀏覽器運(yùn)行基礎(chǔ)上的，而瀏覽器的運(yùn)行速度是與運(yùn)行計(jì)算機(jī)配置息息相關(guān)的，高性能多核心配置的計(jì)算機(jī)在數(shù)據(jù)處理速度方面明顯更勝一籌［7］。

（2）觀測(cè)數(shù)據(jù)量較小。本次研究只采用了10個(gè)數(shù)據(jù)量，這是比較小的。在實(shí)際應(yīng)用中，一般都是百萬級(jí)別以上的海量數(shù)據(jù)，尤其在云存儲(chǔ)、云計(jì)算高速發(fā)展的今天。較大的數(shù)據(jù)量會(huì)影響JavaScript的運(yùn)行速度，甚至造成卡死狀態(tài)。

（3）File API發(fā)展不足。文件接口技術(shù)的發(fā)展仍然處于初步發(fā)展階段，除了支持txt文件外，還支持jpg等圖片，甚至有些doc文檔。但是功能只包括文件的顯示，并不能用于文件修改/數(shù)據(jù)處理。

JavaScript在工程應(yīng)用方面還有很大的發(fā)展空間，尤其是在計(jì)算領(lǐng)域還需要我們進(jìn)一步的深入研究，將它從WebApp、網(wǎng)站輔助構(gòu)建拓展到Web計(jì)算中去。

［1］David A.Patterson，John L.Hennessy.計(jì)算機(jī)組成與設(shè)計(jì)：硬件/軟件接口［M］.北京：機(jī)械工業(yè)出版社，2011：135.

［2］Nicholas C.Zakas.JavaScript高級(jí)程序設(shè)計(jì)［M］.北京：人民郵電出版社，2012：689-696.

［3］Loiane Groner.學(xué)習(xí)JavaScript數(shù)據(jù)結(jié)構(gòu)與算法［M］.北京：人民郵電出版社，2015：19-32.

［4］Adam Freeman.HTML5權(quán)威指南［M］.人民郵電出版社.2014：86.

［5］單東林，張曉菲，魏然.鋒利的jQuery［M］.北京：人民郵電出版社.2012：1-3.

［6］Douglas.JavaScript語言精粹［M］.北京：電子工業(yè)出版社.2009：53.

［7］Zakas N C.高性能JavaScript［M］.北京：電子工業(yè)出版社，2010：100.

Improvement of Local Data Reading and Processing Mechanism Based on File API JavaScript

PANG Cong1，LONG Kun2，LUO Qi1，DU Rui-lin1
（1.Institute of Seismology，CEA，Wuhan 430071；2.School of Economics and Management，Wuhan University，Wuhan 430072）

With the increasing number of Web local data and the frequent increase of B/S mode，the local data processing function of JavaScript has been expanded and developed.File API JavaScript to achieve the visualization of the local data，but cannot be used for the actual calculation.Due to the array result only local text data is saved in the form of single byte，in the actual process of array result and no practical use.Uses a series of cyclic iterative algorithm，makes improvement based on File API，and achieves later calculation of local data extraction and pretreatment.

JavaScript；Local Data；File API；Mechanism Improvement

1007-1423（2016）27-0040-03DOI：10.3969/j.issn.1007-1423.2016.27.010

龐聰（1992-），男，湖北棗陽人，在讀碩士研究生，研究方向?yàn)镴avaScript技術(shù)、WebApp設(shè)計(jì)

龍坤（1993-），男，重慶秀山人，本科在讀，研究方向?yàn)殡娮由虅?wù)、Web技術(shù)

羅棋（1990-），男，湖北天門人，在讀碩士研究生，研究方向?yàn)閿?shù)據(jù)處理

杜瑞林（1970-），男，本科，研究員，研究方向?yàn)榇蟮販y(cè)量與地球動(dòng)力學(xué)

7-05

2016-09-16