2013-06-25 70 views
0

我一直在研究一個單頁應用程序,它包含unicode.org的unihan.txt數據的一部分。它顯示了所有中文字根(簡體字和繁體字),並單擊它們顯示所有中文字符,這些字根根據其筆畫數而定。也可以進行反向查找,如果您輸入中文字符,則會顯示基數和筆畫數。如何在JavaScript數組中存儲大量的SPA靜態數據?

我得到了它的工作方式是導入數據庫,並使用腳本的永碩聯合數據轉換一些數據到兩個JavaScript文件:

data_codep.js(CP [代碼點] = [激進,招])

var cp = new Array(); 

cp[13312]=[10,4]; 
cp[13313]=[10,5]; 
cp[13314]=[10,5]; 
cp[13315]=[20,2]; 
cp[13316]=[20,2]; 
cp[13317]=[40,1]; 
cp[13318]=[40,5]; 
cp[13319]=[50,2]; 
cp[13320]=[50,2]; 
cp[13321]=[50,2]; 
cp[13322]=[50,3]; 
cp[13323]=[50,3]; 
cp[13324]=[50,4]; 
cp[13325]=[50,4]; 
cp[13326]=[50,4]; 
cp[13327]=[50,4]; 
cp[13328]=[50,5]; 
[...] 
(75622 lines, 1.55Mb) 

data_radical_stroke.js(呃[激進] [招] = [代碼點,...])

var uh = new Array(); 
uh[10]=new Array(); 
uh[10][0]=[19968]; 
uh[10][1]=[19969,19970,19971,19972,19973,19974,131072,131073,131074]; 
uh[10][2]=[19975,19976,19977,19978,19979,19980,20112,21316,131075,131076,131077,131078,173824,173825,177984]; 
uh[10][3]=[19981,19982,19983,19984,19985,19986,19987,19991,63847,131079,131080,131081,131082,131083,131084,173826]; 
uh[10][4]=[13312,19988,19989,19990,19992,19993,19994,19995,19996,19997,131085,131086,131087,131088,131089,131090,131091,131092,131093,131094,131095]; 
uh[10][5]=[13313,13314,19998,19999,20000,20001,20002,131096,131097,131098,131100,131102,131103,131104,177985]; 
uh[10][6]=[20003,20004,20005,20029,131105,131106,131107,131108,131110,131111,131112,131114,131115,177986,194560]; 
uh[10][7]=[20006,20007,64112,131116,131117,131118,131120,131121,131122,131123,131124,173827]; 
uh[10][8]=[131125,131126,131128,131130,131131,173828]; 
uh[10][9]=[131133,131134,131135,131136,133410,173829]; 
uh[10][10]=[131137,131138,131139,131140,131141,173830]; 
uh[10][11]=[131142,131143,131144,131146,131147]; 
uh[10][12]=[131148,131149]; 
uh[10][13]=[131150,131151,131152,131153,131154,177987]; 
uh[10][14]=[131155,131156]; 
uh[10][15]=[131157,131159,131160,131161,131162,131163,131165,150735,173831]; 
uh[10][16]=[131158]; 
uh[10][17]=[131167]; 
uh[10][19]=[131168]; 

uh[20]=new Array(); 
uh[20][0]=[20008]; 
uh[20][1]=[20009,131169,131170]; 
[...] 
(4676 lines, 564 kB) 

我只是想看看,如果這個工程,它可以和瀏覽器一起工作Chrome和IE在我的平均臺式電腦上。 data_codep.js在appr中加載。 1.15秒。和appr中的data_radical_stroke.js。 375毫秒。該頁面在appr中加載並執行。 1.85秒它讓我很吃驚。即使呈現數據也幾乎是即時的。

但是,可能並不奇怪,它在iPad1上撞上了Safari。

現在我知道這可能有點多,從瀏覽器要求。當需要時從服務器獲取數據顯然是更有效的機制。 (特別是對於像Node.js這樣的後端)我仍然很好奇這是否能以更好,更有效的方式實現。

我曾經想過加載一個字符串並用正則表達式切割它然後將每個數據片段寫入一個數組,但是使用這個數量的數據會不會花費很長時間?我認爲將它轉換成json文件然後解析它也是一樣的。

這怎麼能用更小的佔地面積完成?

(注:基團具有0所附時,他們有一個傳統的形狀和1時,他們有一個簡化的形狀)

回答

0

當將數據裝載到SPA,我使用the best practice recommended by the Backbone documentation和數據引導到頁面時它會加載,而不是引發大型網絡調用,而當您稍後需要數據時,這種調用會變得更慢。您也可以考慮將數據緩存到本地存儲機制(如果它不經常更改),這是可行的,因爲這兩個文件的大小總體上非常小。

在我看來,獲取數據到所有需要做的點是這樣在你的SPA:

<script>var characterData = JSON.parse(<?php json_encode($data); ?>);</script> 

保持HTTP請求最小化的前期,而裝載儘可能多的數據,你可以進入頁面。 JSON.parse是一種本地方法(回到IE8,我認爲)和it's pretty fast。當然,我建議將它作爲自己的數據加載基準。