基于JavaScript File API的本地數據讀取、處理機制改進

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

（1.中國地震局地震研究所，武漢 430071；2.武漢大學經濟與管理學院，武漢 430072）

基于JavaScript File API的本地數據讀取、處理機制改進

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

（1.中國地震局地震研究所，武漢 430071；2.武漢大學經濟與管理學院，武漢 430072）

隨著Web本地數據的日益增多和B/S模式下客戶端數據處理的頻繁增加，JavaScript的本地數據處理功能也得到拓展和發展。JavaScript File API雖然實現本地數據的可視化，卻不能用于實際的計算。因為result數組只是將本地文本數據以單字節的形式保存，在實際過程中result數組并沒有實際用途；利用一系列循環迭代算法，在File API基礎上進行改進，最終可以實現對本地數據的提取以及預處理，可供以后的實際計算。

JavaScript；本地數據；文件API；機制改進

0　引言

JavaScript不僅可以對服務器端數據進行讀取、處理，也可以對用戶交互數據進行操作。不過在客戶端進行數據處理一直是JavaScript的短板，尤其是對本地數據文件進行讀取、處理計算等。

本文是在JavaScript File API的基礎上，對其讀取本地數據文件時產生的單字節讀取問題進行了優化處理并對讀取到的本地數據進行了簡單的運算，最后驗證了數據的數值屬性。

1　File API

1.1FileReader

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

File API提供的FileReader類型可以用來讀取本地文件的數據。它是一種異步文件讀取的方式，與XMLHttpRequest功能類似，只不過 XMLHttpRequest讀取的是遠程服務器，而不是 FileReader讀取的文件系統。

1.2readAsText

本文采用readAsText方法進行文件的讀取，并以純文本的方式將讀取到的文件內容保存在一個result結果中，它可以是一個數組的形式［3］。形式如下：

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

1.3onload觸發事件

FileReader包含有三個主要觸發事件：onprogress、onerror、onload，分別表示在加載新文件時觸發、加載錯誤時觸發、加載完成后觸發。在實際應用中，load事件采用較多，即當讀取到file文件并完整無誤，觸發reader.onload事件函數，執行函數內部操作。

1.4測試瀏覽器是否支持文件讀取

1.5讀取本地數據

觀測數據為10組隨機小數，精確到小數點后兩位，具體數據包括：0.01，0.25，0.35，0.25，0.21，0.98，0.67，0.26，0.45，0.87

讀取本地數據時，先要獲取本地文件file的ID，然后調用FileReader屬性的ReadAsText方法，并在讀取成功時觸發function函數，最后執行內部的相關循環迭代關系式［4］。具體關鍵代碼如下：

1.6讀取結果

上述代碼在Firefox瀏覽器解釋執行后，可以得到以下的數據結果：

從上述結果可以看出，未預處理過的result數組元素讀取出來是單字節符號，它把數字、“.”以及單空格當作數組元素。這種讀取方式不能將本地數據有效數組化，不能應用到實際工程運算中。

2　修改后的本地數據讀取機制

2.1算法迭代過程

測試數據仍然采用1.5中數據。在把空格、小數點考慮為單字節數據的情況下，每個數值類數據被分割成5位單字節數據。這里，利用for循環50次、每5次取余，可實現數據的完整輸出，讀取后的結果放在數組shuju2中［5］。關鍵代碼如下：

2.2本地數據讀取結果

上述代碼在Firefox瀏覽器解釋執行后，可以得到以下的數據結果：

從上述結果可以看出，數據結果與原始的觀測數據一致，沒有出現1.6數據結果的單字節相隔情況。

2.3驗證讀取后的數據是否為數值類型

盡管觀測數據屬于數值類數據，但是經過File API讀取且迭代處理過的數組數據是否還是數值類數據就需要進一步驗證。

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

上述代碼執行后的數據運算結果如下所示：

3　結語

本文改進了使用JavaScript對本地文件數據異步讀取機制，真正實現了對本地文件數據的可操作性讀取，而不是單個字節的簡單顯現，并在最后驗證了讀取后的數組元素為數值類型。

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

（1）計算機配置影響執行效率。JavaScript的執行是建立在瀏覽器運行基礎上的，而瀏覽器的運行速度是與運行計算機配置息息相關的，高性能多核心配置的計算機在數據處理速度方面明顯更勝一籌［7］。

（2）觀測數據量較小。本次研究只采用了10個數據量，這是比較小的。在實際應用中，一般都是百萬級別以上的海量數據，尤其在云存儲、云計算高速發展的今天。較大的數據量會影響JavaScript的運行速度，甚至造成卡死狀態。

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

JavaScript在工程應用方面還有很大的發展空間，尤其是在計算領域還需要我們進一步的深入研究，將它從WebApp、網站輔助構建拓展到Web計算中去。

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

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

［3］Loiane Groner.學習JavaScript數據結構與算法［M］.北京：人民郵電出版社，2015：19-32.

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

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

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

［7］Zakas N C.高性能JavaScript［M］.北京：電子工業出版社，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-），男，湖北棗陽人，在讀碩士研究生，研究方向為JavaScript技術、WebApp設計

龍坤（1993-），男，重慶秀山人，本科在讀，研究方向為電子商務、Web技術

羅棋（1990-），男，湖北天門人，在讀碩士研究生，研究方向為數據處理

杜瑞林（1970-），男，本科，研究員，研究方向為大地測量與地球動力學

7-05

2016-09-16