【導讀】本文首先對現(xiàn)有的單詞記憶軟件進行了市場和技術上的分析；針對最新的Web技術現(xiàn)狀、關鍵技術以及各種配套技術做了詳細介紹；提出了基于最新Web技術構建單詞記憶軟件的需求分析和總體設計。軟件總體實現(xiàn)是圍繞著屬于Web技術的HTML5技術，適應未來軟件開發(fā)技術的方向；數(shù)據(jù)庫的設計來源于NoSQL技術，可以實現(xiàn)更高的性能和開發(fā)效率；，使得單詞記憶軟件的客戶端和服務器端保持了語言的一致性，提高了軟件的代碼復用能力。本章從單詞記憶軟件的現(xiàn)狀，單詞記憶軟件與最新Web技術結合的必要性兩個方面介紹了畢設所涉及到的課題背景和研究方向。新的單詞記憶方法和新的Web技術代替現(xiàn)有的傳統(tǒng)方法和技術，是適應社會發(fā)展的必然趨勢。雖然市場上已經(jīng)出現(xiàn)了部分基于Web技術的單詞記憶軟件，但是他們所使用的技術依然受傳統(tǒng)Web技術能力的制約，不僅無法達到傳統(tǒng)桌面開發(fā)技術軟件的能力，甚至無法發(fā)揮Web本身的技術優(yōu)勢，同時在單詞記憶方法上的優(yōu)勢也不明顯。

　　

【正文】 ，內(nèi)部使用Base64編碼。 數(shù)據(jù)庫的物理設計 客戶端數(shù)據(jù)庫的物理設計客戶端數(shù)據(jù)庫使用客戶端的數(shù)據(jù)庫操作模塊（DB）來對數(shù)據(jù)庫進行增刪查改，客戶端數(shù)據(jù)庫的物理格式為JavaScript的JSON格式，以NoSQL的思想進行保存。生詞本數(shù)據(jù)庫的物理結構如下：MyBook: { //數(shù)據(jù)庫名 hello: 1, //一個單詞，與其是否記憶過的識別標志 what: 1 }單詞書數(shù)據(jù)庫的物理結構如下：Books: { //數(shù)據(jù)庫名 考研大綱詞匯: { //一個單詞書的名稱 abandon: 0, //單詞書中某個單詞的名稱及其是否記憶過的標志 abdomen: 0 }, PETS三級: { abandon: 0, abdomen: 0 } }記憶中數(shù)據(jù)庫的物理結構如下：Learning: { //數(shù)據(jù)庫名 hello: [0,0,1359534394535], //單詞名稱，其復習次數(shù)，下次復習時間等信息 what: [0,0,1359534394535]}選項設置數(shù)據(jù)庫的物理結構如下：Config: { //數(shù)據(jù)庫名 FirstTimeShow: false, //各種選項設置的名稱及其鍵值 CurrentBook: 考研大綱詞匯, StudyCount: 25, RandomStudy: true, ReviewAfterStudy: true, AutoUpload: true } 服務器數(shù)據(jù)庫的物理設計服務器的數(shù)據(jù)庫的物理結構如下：{ hi2t33g:{ //一個隨機標志，用以更快的尋找信息（hash） dqh1 //用戶名項，及其內(nèi)容, password:dqh1, data:some data 1 }, dse342k:{ dqh2, password:dqh2, data:some data 2 }} 服務器數(shù)據(jù)庫的每一個用戶項的索引由一個不重復的隨機值組成，是為了更快的對數(shù)據(jù)進行索引。 本章小結 本章介紹了課題軟件的數(shù)據(jù)庫設計。數(shù)據(jù)庫設計包括客戶端和服務器兩方面，客戶端和服務器都以NoSQL的方式對數(shù)據(jù)庫進行組織，所以ER圖并不簡單等同于傳統(tǒng)ER圖，而關系也只是基本介紹了實體、屬性和關系，并不等價于傳統(tǒng)關系模式數(shù)據(jù)庫的ER關系。 下一張將介紹課題軟件的詳細設計，其中包括算法流程和實現(xiàn)。第六章 軟件詳細設計 本章在課題軟件的概念設計基礎之上，介紹課題軟件的具體算法流程和實現(xiàn)。 詞典模塊（Dict） 字典模塊主要只有兩部分：（1） 字典的初始化。因為程序的字典是以LZMA算法壓縮之后再將二進制數(shù)據(jù)用Base64算法轉換為字符串存儲的，所以這部分的主要目的是載入這部分壓縮后的字符串，然后用Base64轉換回二進制，最后再用LZMA算法解壓縮。本課題軟件的LZMA算法模塊是將開源的libzip的源代碼經(jīng)過開源項目emscripten編譯為JavaScript代碼而得到的。壓縮的效率很高，可以將詞庫壓縮到原來的40%左右大小。主要目的是消耗用戶的CPU時間來節(jié)省網(wǎng)絡流量，提高效率。因為CPU時間和網(wǎng)絡流量時間都會降低用戶體驗，所以采用這種方法在兩者間取得平和，得到最優(yōu)化的時間。字典的初始化因為要用到解壓縮算法，而解壓算法整體來說是比較占用CPU資源的，為了保證程序的流暢度，所以字典的初始化是采用了后臺的多線程工人技術。（2） 字典的取值。字典的取值，會根據(jù)一個單詞，找到其音標、詞義和例句，如果沒找到，會返回一個JavaScript語言中的未定義值（undefined）。字典模塊的實現(xiàn)：詞典模塊實現(xiàn)的主要技術難度體現(xiàn)在解壓縮所使用的LZMA算法上。LZMA算法針對的是二進制文件，但是在JavaScript中是不能直接表示二進制流信息的，所以在進入LZMA的函數(shù)之前要將數(shù)據(jù)轉換為整型數(shù)組的形式。雖然JavaScript運行這種算法的效率整體不高，不過因為可以多線程的處理，可以再兩秒鐘之內(nèi)就完成載入。 對話框模塊（MessageBox） 對話框模塊的主要目的是代替JavaScript中提供的alert和confirm函數(shù)。 alert函數(shù)是彈出一個提示框，而confirm函數(shù)是彈出一個是否選擇框。之所以重寫一個對話框模塊代替這兩個函數(shù)，是因為這兩個函數(shù)的作用雖然一樣，但是在不同瀏覽器下的表現(xiàn)不太一樣，顯示效果不一致，也沒辦法通過程序自定義皮膚，故選擇代替這兩個函數(shù)，達到更好的界面一致性。 對話框模塊的實現(xiàn)： 此模塊的實現(xiàn)的主要難度在于，alert和confirm函數(shù)是JavaScript自帶函數(shù)，所以在執(zhí)行時可以暫停JavaScript代碼解釋運行，而自己的代碼則無法做到這一點。為了做到這一點，就只能利用事件回調(diào)方法，打開對話框，只有對話框關閉后，才能執(zhí)行下面的代碼。 套接字模塊（Socket） 套接字模塊是使用了Websocket技術，而進行套接字連接的一個模塊。主要目的是利用Websocket功能，避免HTTP的慢速度，同時也可以達到一定的加密效果。 聲音播放模塊（Voice） 聲音模塊是使用了HTML5的Audio標簽進行發(fā)音的功能，本課題軟件提供mp3和wav兩種音頻格式，可以覆蓋到市場上主流瀏覽器對于編碼格式的要求。 聲音播放模塊的實現(xiàn)：聲音模塊實現(xiàn)主要在于協(xié)調(diào)不同瀏覽器之間的兼容性，不同瀏覽器對其的支持都不同，所以要做到在各瀏覽器上比較統(tǒng)一的表現(xiàn)比較難。尤其是部分瀏覽器的聲音播放和其他功能執(zhí)行可能產(chǎn)生沖突，例如Chrome如果在聲音播放后有其他窗口操作，那么會中斷聲音的播放。而在載入窗口時會有一個300毫秒的延遲，所以本軟件將聲音的播放一律延遲350毫秒，以兼容Chrome瀏覽器。 事件模塊（Event） 在之前的章節(jié)說了，Event類主要的目的是為了實現(xiàn)MVP設計模式，其具體的工作流程是： 當一個類A為事件的提供者時，應該使用new Event()。的方法，創(chuàng)建一個事件，而另一個類B當需要監(jiān)聽這個事件時，就要用attach函數(shù)注冊這個事件，等待類A中用notify或者wait進行通知，以此執(zhí)行類B中的回調(diào)方法。 多線程工人模塊（Work） 本模塊主要應用了HTML5的Worker功能。Worker功能可以讓JavaScript代碼在后臺執(zhí)行，雖然標準未說明這一定要用多線程方法實現(xiàn)，不過現(xiàn)在主流的瀏覽器都是用多線程方法來實現(xiàn)Worker功能的，故本人將此模塊起名為多線程工人模塊。 當開啟一個工人時，就如同開啟了一個后臺線程，可以給這個后臺線程傳送一個信息（PostMessage），然后等待這個工人傳送回信息。 多線程工人模塊的實現(xiàn)： 工人模塊的實現(xiàn)主要難點是同步不同線程，本軟件所使用的方法是設置一個計數(shù)變量，每個線程執(zhí)行之后則對這個計數(shù)變量進行計算，當計數(shù)變量的數(shù)量等同于任務總數(shù)量時，就說明所有線程執(zhí)行完成了。JavaScript是不會出現(xiàn)線程同步的錯誤的，因為JavaScript是單線程語言，其他JavaScript線程空間雖然可以發(fā)送消息回調(diào)主線程的處理函數(shù)，但是并不會出現(xiàn)其他語言中可能遇到的線程沖突問題。 主模塊的主要功能是載入各種其他模塊并顯示程序主界面，主要流程解釋如下：（1） 當程序開始運行時，首先會載入程序主頁面。主要算法就存在于此頁面。載入此頁面的的過程中會運行此頁面中的JavaScript程序代碼，從而開始對整個程序的初始化。（2） 初始化的第一步是載入第三方模塊，即jQuery。他們的是其他模塊的基礎。這三個主要的模塊的大小也是比較小的。（3） 在載入了第三方模塊之后，就已經(jīng)有足夠的庫文件支持來顯示對話框了，所以此時顯示“載入中”對話框，提醒用戶程序正在初始化。（4） 如果載入中途失敗，出現(xiàn)某些錯誤，則提醒用戶載入出錯，無法繼續(xù)。如果載入成功，就繼續(xù)初始化數(shù)據(jù)。（5） 初始化數(shù)據(jù)主要指初始化顯示主界面所需要的一些數(shù)據(jù)，主要有：a) 判斷是否能夠自動登錄，如能夠，則自動登錄。b) 。c) 下載在線服務器的名言例句文件，隨機從中選擇一條。d) 判斷當前用戶詞庫的狀態(tài)，是可以復習，還是可以初記，亦或是什么都不能做（這三種可能性都有可能，原因是因為用戶背誦的進度等因素），按照相應的情況設置主界面開始按鈕顯示的文字。（6） 顯示界面的步驟主要是注冊各種界面的事件，初始化按鈕的輔助信息提示窗等內(nèi)容。（7） 如果程序是第一次運行，則在主界面的程序標題處，播放一個暫短的程序使用簡介動畫，通過滾動不同的文字信息，來提示用戶本軟件的主要功能。（8） 完成初始化，等待用戶的下一步指令。主模塊主要的難點是各種模塊的載入順序與兼容性問題，例如Internet Explorer瀏覽器載入CSS樣式文件必須在HTML文件的head模塊中，否則會載入失敗，而其他例如Firefox和Chrome瀏覽器都可以在任意位置載入。還有就是本程序的各模塊組之間使用的是順序載入，例如必須把所有詞典模塊都載入后才能解壓縮，此時必須利用JavaScript的事件方法，先去執(zhí)行其他部分，待等到所有需要的部分載入完成之后，再執(zhí)行此部分的任務。 程序運行流程圖登錄函數(shù) 登錄函數(shù)也是主模塊中的一個重要功能，提供自動登錄，手動登錄等功能，流程解釋如下：（1） 開始嘗試自動登錄（2） 判斷本地數(shù)據(jù)庫中是否有自動登錄所需要的用戶名和密碼信息。如果有則繼續(xù)登錄，如果沒有則停止自動登錄，等待用戶手動登錄。（3） 通過html提供的函數(shù)判斷當前是否聯(lián)網(wǎng)在線，如果沒有，且是手動登陸，應該提醒用戶。（4） 向服務器提交登錄信息（5） 通過服務器返回的信息判斷是否登錄成功，如果失敗，則提醒用（6） 完成登錄 登陸函數(shù)流程圖 上層模塊的詳細設計 初記模塊 初記模塊的作用是完成初記功能，因為Ebbinghaus的記憶曲線的第一個時間點最短只有1分鐘，所以最好的方法是初記后立刻復習。，詳細說明如下：（1） 在主模塊可以初記的情況下，點擊開始初記按鈕，進入初記流程（2） 判斷是否可以初記，即要么生詞本中有未初記的單詞，要么有當前詞庫，且里面的單詞足夠初記。（3） 如果能初記，則取出要初記的單詞（4） 取出要初記的單詞列表中的一個單詞，取出單詞響應信息。同時彈出聯(lián)想圖片搜索的對話框。（5） 等待用戶輸入正確的單詞，完成初記（6） 判斷用戶輸入單詞是否正確，不正確就抖動顯示的單詞，提醒用戶輸入錯誤。正確的話就判斷當前是否可以完成初記。（7） 如果當前完成了初記，也就是對每個單詞都輸入了或者跳過了，完成初記就將初記的單詞信息寫入記憶中數(shù)據(jù)庫。（8） 判斷是否用戶在設置中選擇初記后直接復習，如果選擇復習就跳轉到復習頁面，否則就跳轉回主頁面。 初記模塊運行流程圖取單詞函數(shù) 在初記模塊中判斷能否初記之后，最開始執(zhí)行的則是取單詞函數(shù)，要將數(shù)據(jù)庫中可以學習的單詞取出，打亂順序，最終顯示給用戶，詳細解釋如下：（1） 打開單詞數(shù)據(jù)庫，準備取出單詞（2） 從其中取出一個單詞（3） 判斷此單詞是否未學，如果未學則繼續(xù)，如果已學了，則返回上一步（4） 判斷是否達到本次學習要求的單詞數(shù)目，如果是則繼續(xù)，如果不是則再取出單詞（5） 將取出的單詞打亂順序（6） 判斷本地緩存中是否有取出的單詞的語音數(shù)據(jù)，如果沒有，則訪問遠程服務器下載（7） 開始學習 初記模塊取單詞函數(shù)流程圖 復習模塊 復習模塊的主要作用是實現(xiàn)單詞復習功能，就是對已經(jīng)學習了的單詞按照Ebbinghaus記憶曲線進行復習，也就是用重復記憶的方法，達到單詞的記憶效果。，詳細的流程解釋為：（1） 當主模塊判斷有可復習的單詞，然后用戶點擊開始復習后，即進入復習模塊（2） 首先判斷是否要有必要進行復習，也就是記憶中數(shù)據(jù)庫中是否有單詞的下次時間到了（3） 讀取所有要復習的單詞到本模塊，并賦予初始分值。每個單詞一共得10分就完成復習，如果單詞的錯誤次數(shù)較少則說明用戶對此單詞掌握的比較好，則初始分數(shù)較高，否則初始分數(shù)為0。（4） 讀取并在屏幕上顯示要復習的單詞中的第一個。（5） 等待用戶輸入單詞并提交，判斷用戶輸入的單詞正確與否。如果正確則加分，如果錯誤，則提示用戶回答錯誤，待用戶再次輸入正確單詞后不本次加分。無論正確還是錯誤，這個單詞到會插入到后續(xù)單詞列表中的一個隨機位置上。（6） 判斷單詞列表現(xiàn)在是否為空，即是否已經(jīng)完成了復習。 復習模塊運行流程圖 單詞書模塊 單詞書模塊是管理單詞書的模塊，可以在線添加單詞書，添加本地單詞書，對單詞書進行查詢，重置，刪除等操作的地方。 ，流程解釋為：（1） 根據(jù)用戶操作，從主模塊打開單詞書模塊，并初始化顯示單詞書界面（2） 一方面從遠程下載單詞書列表，另一方面讀取本地的單詞書（3） 計算單詞書中已經(jīng)學過的單詞（4） 顯示單詞書表格，供用戶操作 單詞書模塊運行流程圖載入本地單詞書函數(shù)：，解釋如下：（1） 用戶通過選擇本地單詞書（或者通過本地文件管理將單詞書拖入窗口位置）（2） 通過HTML5新加入的本地文件處理函數(shù)讀取單詞書文件中的信息（3） 計算單詞書文件中的可加入單詞（4） 提示用戶是否加入（5） 如果加入成功，則刷新單詞書顯示列表 載入本地單詞書函數(shù)流程圖 生詞本模塊 生詞本模塊的主要作用是讓用戶能手動添加、查詢、刪除單詞。而生詞本中的單詞因為會優(yōu)先于單詞書中的單詞提前記憶，也是用戶存放優(yōu)先的，想要立刻記憶的單詞的地方。 。流程如下：（1） 在主模塊調(diào)用生詞本模塊后，初始化數(shù)據(jù)并顯示生詞本界面（2） 從數(shù)據(jù)庫中讀取單詞信息（3） 將讀取出的單詞信息生成表格（4） 顯示表格，等待用戶進一步操作 生詞本模塊運行流程圖