知識管理系統(tǒng)前端設計與優(yōu)化
前言：想要寫出一篇引人入勝的文章？我們特意為您整理了知識管理系統(tǒng)前端設計與優(yōu)化范文，希望能給你帶來靈感和參考，敬請閱讀。
【摘要】今天的世界是一個互聯(lián)網(wǎng)的世界，身處信息化時代，現(xiàn)代社會人們獲取信息最主要的方式就是通過互聯(lián)網(wǎng)。而在互聯(lián)網(wǎng)上獲取和發(fā)表信息就少不了對各種知識管理系統(tǒng)的使用，那么系統(tǒng)的用戶體驗就非常重要。本文以知識管理系統(tǒng)為主題，分析了其發(fā)展現(xiàn)狀及市場需求，對知識管理系統(tǒng)各個模塊的功能進行了介紹。之后重點論述了對于系統(tǒng)前端的優(yōu)化手段和改進方案，加快加載速度，提升用戶的體驗。
【關鍵詞】知識管理系統(tǒng)前端模塊化優(yōu)化
引言：
目前，市場上具有豐富的各類知識產(chǎn)品，例如各類知識查詢軟件、在線文檔、知識問答交流平臺。從PC端到移動端，這類軟件已經(jīng)基本滿足了用戶的需求，但相比之下，引導并幫助用戶去進行知識積累的應用卻并不是很多。通過實際統(tǒng)計發(fā)現(xiàn)，有大量的用戶都會在搜索引擎中對于“如何”、“怎樣”類信息進行檢索，這說明在這一方面存在著很大的用戶需求。因此，提供更優(yōu)質的知識管理系統(tǒng)是有很大必要的。本文也會就如何使知識管理系統(tǒng)前端運行更加優(yōu)化來進行論述和研討。
一、知識管理系統(tǒng)概述
1、知識管理系統(tǒng)需求分析。知識管理系統(tǒng)重在引導用戶“怎么做”，該系統(tǒng)通過用戶的貢獻獲取大量知識內(nèi)容，從而建立一個龐大的知識庫，為用戶提供最全面的信息。同時該系統(tǒng)具有搜索功能，可以根據(jù)用戶的不同需求在知識庫中進行相關的檢索，之后以可視化的方式呈現(xiàn)給用戶，并供給用戶進行貢獻和反饋的機會。2、知識管理系統(tǒng)總體設計。1.用戶貢獻模塊：用戶可以根據(jù)自己的能力去貢獻出文章來與其他用戶分享，因此就要設立更加完善的用戶貢獻模塊來提升用戶的知識分享體驗。首先，要讓平臺積累更多的優(yōu)質內(nèi)容，這樣才能使用戶在使用搜索功能的時候能夠在知識庫中獲得更加符合需求的數(shù)據(jù)。除此之外，系統(tǒng)中設立了編輯器功能，使用戶能將自己的感受和啟發(fā)記錄下來并與他人分享。編輯器的功能主要是用戶對文章進行排版、調整文章結構，幫助用戶更便捷的完成撰寫過程。除了編輯器功能外，本模塊還具有草稿箱功能、評論功能和回復功能。2.任務平臺模塊：任務平臺模塊指的是系統(tǒng)任務后用戶領取并完成任務之后獲得一定獎勵。任務平臺模塊主要分為后臺任務和用戶領取任務兩個部分。任務的來源是搜索引擎中搜索量較大而相關內(nèi)容較少的內(nèi)容，讓用戶來填補這些較為稀少但需求量大的內(nèi)容，并加以獎勵，不僅填補了系統(tǒng)知識庫中的存儲空白，還滿足了用戶的需求，也激勵了用戶繼續(xù)為系統(tǒng)貢獻內(nèi)容。3.付費激勵模塊：付費激勵模塊首先要建立虛擬的貨幣體系，獎勵給用戶虛擬的貨幣，這些貨幣用戶可以用以活動消費或道具消費。其次付費激勵是對用戶進行物質獎勵，通過這兩種獎勵方式來激勵用戶，讓他們能夠更加積極的為平臺貢獻優(yōu)質作品和內(nèi)容。4.相冊模塊：相冊模塊主要是指用戶以圖片為中心進行瀏覽，通過圖片可以讓用戶在閱讀時獲得更加真實的體驗，同時也可以豐富知識平臺的知識表達方式，供用戶選擇自己更喜愛的方式。
二、知識管理系統(tǒng)中使用的技術
1、HTML。html是一種超文本標記語言，主要用來搭建網(wǎng)頁的結構。html主要由head和body兩部分組成，其中head標簽中主要標記的是網(wǎng)頁的標題，關鍵字信息，頭信息等。它們不作為內(nèi)容在網(wǎng)頁中顯示，但是影響網(wǎng)頁的顯示效果，頭部中常用的標簽有<title>標簽、<base>標簽、<link>標簽、<meta>標簽、<script>標簽、<style>標簽，其中head標簽主要定義了文檔的信息，title標簽主要定義了文檔的標題，link標簽主要定義了一個文檔和外部資源的關系，<meta>標簽主要定義了文檔中的關鍵字信息，script標簽主要是定義了客戶端的腳本文件，而style標簽主要是從外部引入樣式文件。而網(wǎng)頁中實際顯示的部分都是在<body></body>標記內(nèi)，是網(wǎng)頁的主體部分。2、CSS。css又稱層疊樣式表，層疊就是對一個元素多次設置一個樣式，如果出現(xiàn)這種情況，首先將通過選擇期進行權重的計算，在權重不同的情況下，以權重最大的樣式為準，如果權重相同的情況下，以最后定義的樣式為準。css的主要功能是針對網(wǎng)頁元素的排版進行像素級的控制，css未出現(xiàn)之前，樣式的修飾都是嵌入在html標簽內(nèi)，這對網(wǎng)頁之后的維護和修改異常的復雜，會造成大量代碼冗余，css的出現(xiàn)極大的實現(xiàn)了代碼的復用，可以將相同樣式的元素進行統(tǒng)一的歸類，使用同一個樣式進行定義，如果后期要修改整體的樣式，就不需要再修改原定的網(wǎng)頁結構，只需要在樣式列表中找到相應的樣式進行修改即可。除此之外，css樣式表可以單獨存放在一個頁面當中，如果多個頁面使用同一個樣式表，直接在網(wǎng)頁的<head></head>標簽內(nèi)用<link>引入外部資源即可，這樣不僅可以使代碼得到復用，還可以實現(xiàn)多個頁面風格的統(tǒng)一。3、Javascript。Javascript是一種解釋型腳本語言，即代碼不經(jīng)過預編譯，邊解釋邊執(zhí)行，目前Javascript廣泛應用到web應用開發(fā)當中，常用來給網(wǎng)頁添加各種各樣的動態(tài)效果，與用戶進行交互。Javascript主要分為三個部分,分別是ECMAScript,DOM,BOM,其中ECMAScript中主要定語了Javascript語言中最基本的語法結構，DOM又稱為文檔對象模型，用來描述網(wǎng)頁內(nèi)容的方法和接口，BOM是瀏覽器對象模型，用來定義與瀏覽器進行交互的方法。Javascript的主要功能如下：1.用戶每次向服務端請求回來的數(shù)據(jù)，都是由Javascript動態(tài)地將文本嵌入到頁面中渲染出來；2.在數(shù)據(jù)提交到服務器之前對數(shù)據(jù)進行校驗；3.對于服務端返回的狀態(tài)以可視化的方式提示給用戶4、Ajax。Ajax是一種異步更新的技術，在Ajax出現(xiàn)之前，用戶每次在更新網(wǎng)頁內(nèi)容的時候都需要重新加載網(wǎng)頁，導致網(wǎng)絡寬帶的大量浪費，而Ajax出現(xiàn)之后，可以實現(xiàn)網(wǎng)頁的異步刷新，這意味當網(wǎng)頁中的某些信息需要更新的時候，通過Ajax技術可以在不加載整個網(wǎng)頁的情況下，就可以完成與用戶的交互。
三、前端優(yōu)化的研究
1、減少http請求。http請求是客戶端和服務端請求和接受數(shù)據(jù)的協(xié)議，一個正常的http請求流程如下。如果我們需要訪問一個服務器，首先需要在瀏覽器輸入框中輸入’www.XXX.com‘然后按下回車，點擊回車的瞬間，首先通過dom技術獲得’www.XXX.com這個地址，然后通過域名轉換將URL轉換成對應的IP地址，之后與服務器建立連接，服務器在接收到數(shù)據(jù)之后進行數(shù)據(jù)的處理，再將數(shù)據(jù)返回給瀏覽器，瀏覽器在接受到數(shù)據(jù)之后對數(shù)據(jù)進行解釋執(zhí)行然后渲染到頁面上，在這個過程當中，我們每次請求的網(wǎng)頁文件中都會有很多的圖片，CSS文件，JS文件等等。每個HTTP請求都需要耗費一定的時間，這樣頻繁與服務器建立連接釋放連接，必定造成資源的浪費。因此，我們通過合并圖片，合并css和js文件的方法來減少HTTP請求的次數(shù)。2、進行zip壓縮。zip壓縮就是將文件在服務端采用壓縮技術將js,css等進行壓縮之后再進行傳輸。有數(shù)據(jù)表明，經(jīng)過壓縮之后，文件的大小能夠減小80%，經(jīng)過壓縮后的文件能夠極大地節(jié)約網(wǎng)絡的帶寬，數(shù)據(jù)經(jīng)過鏈路傳到瀏覽器端之后再進行解壓之后再渲染到界面上。目前，壓縮CSS,JS的功能一般都由打包工具提供，目前市場上比較流行的打包工具是webpack。壓縮文件一般是去除代碼中的注釋，空行等不必要的代碼，對于Css，js文件中較長的類名，變量名進行簡單的替換。3、使用JSON格式進行數(shù)據(jù)交換。JSON是一種輕量級的數(shù)據(jù)交換格式，采用完全獨立于語言的文本格式。在JSON中有兩種結構，分別是對象和數(shù)組，對于對象和數(shù)組字面量的操作是非常方便和高效的，使用JSON格式的數(shù)據(jù)進行數(shù)據(jù)的交互，可以寫出實用美觀可讀性強的代碼。
四、總結和展望
本文首先分析了知識管理系統(tǒng)在當今時代的市場需求，再詳細介紹了其總體的功能模塊，包括其中的4個大模塊以及分別具有的功能然后介紹了知識管理系統(tǒng)前端中所使用的技術，包括HTML、CSS、Javascript和Ajax。文章的主體部分就是對知識管理系統(tǒng)前端優(yōu)化的研究，本文只列舉了一些在現(xiàn)在技術水平上前端優(yōu)化可以采取的手段和方案，也并非最好的解決方法。知識管理系統(tǒng)現(xiàn)在還存在許多的缺陷和不足，這些問題都需要各方面人士繼續(xù)努力，同時隨著計算機的進步和發(fā)展，這些問題也將會逐漸得到解決。希望在今后的未來可以看到知識管理系統(tǒng)以及其前端的進步和優(yōu)化，能夠更好的滿足用戶需求，也為互聯(lián)網(wǎng)的發(fā)展貢獻力量。
參考文獻
[1]曹劉陽.曹劉陽.編寫高質量代碼:Web前端開發(fā)修煉之道[M].北京:中國物資出版社.2010（6）-281.
[2]劉杰.Web標準設計[M].北京:清華大學出版社，2009（1）551.
[3]鄭婭峰.網(wǎng)頁設計與開發(fā)：HTML、CSS、JavaScript實例教程[M].北京:清華大學出版社.2009，27-32.
[4]陳鯡.Web前端開發(fā)技術以及優(yōu)化方向分析[J].新媒體研究.2015（7）39-40.
作者：王科然 單位：河南省鄭州市實驗中學
