公務(wù)員期刊網(wǎng) 論文中心 正文

知識(shí)管理系統(tǒng)前端設(shè)計(jì)與優(yōu)化

前言：想要寫出一篇引人入勝的文章？我們特意為您整理了知識(shí)管理系統(tǒng)前端設(shè)計(jì)與優(yōu)化范文，希望能給你帶來靈感和參考，敬請(qǐng)閱讀。

知識(shí)管理系統(tǒng)前端設(shè)計(jì)與優(yōu)化

【摘要】今天的世界是一個(gè)互聯(lián)網(wǎng)的世界，身處信息化時(shí)代，現(xiàn)代社會(huì)人們獲取信息最主要的方式就是通過互聯(lián)網(wǎng)。而在互聯(lián)網(wǎng)上獲取和發(fā)表信息就少不了對(duì)各種知識(shí)管理系統(tǒng)的使用，那么系統(tǒng)的用戶體驗(yàn)就非常重要。本文以知識(shí)管理系統(tǒng)為主題，分析了其發(fā)展現(xiàn)狀及市場(chǎng)需求，對(duì)知識(shí)管理系統(tǒng)各個(gè)模塊的功能進(jìn)行了介紹。之后重點(diǎn)論述了對(duì)于系統(tǒng)前端的優(yōu)化手段和改進(jìn)方案，加快加載速度，提升用戶的體驗(yàn)。

【關(guān)鍵詞】知識(shí)管理系統(tǒng)前端模塊化優(yōu)化

引言：

目前，市場(chǎng)上具有豐富的各類知識(shí)產(chǎn)品，例如各類知識(shí)查詢軟件、在線文檔、知識(shí)問答交流平臺(tái)。從PC端到移動(dòng)端，這類軟件已經(jīng)基本滿足了用戶的需求，但相比之下，引導(dǎo)并幫助用戶去進(jìn)行知識(shí)積累的應(yīng)用卻并不是很多。通過實(shí)際統(tǒng)計(jì)發(fā)現(xiàn)，有大量的用戶都會(huì)在搜索引擎中對(duì)于“如何”、“怎樣”類信息進(jìn)行檢索，這說明在這一方面存在著很大的用戶需求。因此，提供更優(yōu)質(zhì)的知識(shí)管理系統(tǒng)是有很大必要的。本文也會(huì)就如何使知識(shí)管理系統(tǒng)前端運(yùn)行更加優(yōu)化來進(jìn)行論述和研討。

一、知識(shí)管理系統(tǒng)概述

1、知識(shí)管理系統(tǒng)需求分析。知識(shí)管理系統(tǒng)重在引導(dǎo)用戶“怎么做”，該系統(tǒng)通過用戶的貢獻(xiàn)獲取大量知識(shí)內(nèi)容，從而建立一個(gè)龐大的知識(shí)庫，為用戶提供最全面的信息。同時(shí)該系統(tǒng)具有搜索功能，可以根據(jù)用戶的不同需求在知識(shí)庫中進(jìn)行相關(guān)的檢索，之后以可視化的方式呈現(xiàn)給用戶，并供給用戶進(jìn)行貢獻(xiàn)和反饋的機(jī)會(huì)。2、知識(shí)管理系統(tǒng)總體設(shè)計(jì)。1.用戶貢獻(xiàn)模塊：用戶可以根據(jù)自己的能力去貢獻(xiàn)出文章來與其他用戶分享，因此就要設(shè)立更加完善的用戶貢獻(xiàn)模塊來提升用戶的知識(shí)分享體驗(yàn)。首先，要讓平臺(tái)積累更多的優(yōu)質(zhì)內(nèi)容，這樣才能使用戶在使用搜索功能的時(shí)候能夠在知識(shí)庫中獲得更加符合需求的數(shù)據(jù)。除此之外，系統(tǒng)中設(shè)立了編輯器功能，使用戶能將自己的感受和啟發(fā)記錄下來并與他人分享。編輯器的功能主要是用戶對(duì)文章進(jìn)行排版、調(diào)整文章結(jié)構(gòu)，幫助用戶更便捷的完成撰寫過程。除了編輯器功能外，本模塊還具有草稿箱功能、評(píng)論功能和回復(fù)功能。2.任務(wù)平臺(tái)模塊：任務(wù)平臺(tái)模塊指的是系統(tǒng)任務(wù)后用戶領(lǐng)取并完成任務(wù)之后獲得一定獎(jiǎng)勵(lì)。任務(wù)平臺(tái)模塊主要分為后臺(tái)任務(wù)和用戶領(lǐng)取任務(wù)兩個(gè)部分。任務(wù)的來源是搜索引擎中搜索量較大而相關(guān)內(nèi)容較少的內(nèi)容，讓用戶來填補(bǔ)這些較為稀少但需求量大的內(nèi)容，并加以獎(jiǎng)勵(lì)，不僅填補(bǔ)了系統(tǒng)知識(shí)庫中的存儲(chǔ)空白，還滿足了用戶的需求，也激勵(lì)了用戶繼續(xù)為系統(tǒng)貢獻(xiàn)內(nèi)容。3.付費(fèi)激勵(lì)模塊：付費(fèi)激勵(lì)模塊首先要建立虛擬的貨幣體系，獎(jiǎng)勵(lì)給用戶虛擬的貨幣，這些貨幣用戶可以用以活動(dòng)消費(fèi)或道具消費(fèi)。其次付費(fèi)激勵(lì)是對(duì)用戶進(jìn)行物質(zhì)獎(jiǎng)勵(lì)，通過這兩種獎(jiǎng)勵(lì)方式來激勵(lì)用戶，讓他們能夠更加積極的為平臺(tái)貢獻(xiàn)優(yōu)質(zhì)作品和內(nèi)容。4.相冊(cè)模塊：相冊(cè)模塊主要是指用戶以圖片為中心進(jìn)行瀏覽，通過圖片可以讓用戶在閱讀時(shí)獲得更加真實(shí)的體驗(yàn)，同時(shí)也可以豐富知識(shí)平臺(tái)的知識(shí)表達(dá)方式，供用戶選擇自己更喜愛的方式。

二、知識(shí)管理系統(tǒng)中使用的技術(shù)

1、HTML。html是一種超文本標(biāo)記語言，主要用來搭建網(wǎng)頁的結(jié)構(gòu)。html主要由head和body兩部分組成，其中head標(biāo)簽中主要標(biāo)記的是網(wǎng)頁的標(biāo)題，關(guān)鍵字信息，頭信息等。它們不作為內(nèi)容在網(wǎng)頁中顯示，但是影響網(wǎng)頁的顯示效果，頭部中常用的標(biāo)簽有<title>標(biāo)簽、<base>標(biāo)簽、<link>標(biāo)簽、<meta>標(biāo)簽、<script>標(biāo)簽、<style>標(biāo)簽，其中head標(biāo)簽主要定義了文檔的信息，title標(biāo)簽主要定義了文檔的標(biāo)題，link標(biāo)簽主要定義了一個(gè)文檔和外部資源的關(guān)系，<meta>標(biāo)簽主要定義了文檔中的關(guān)鍵字信息，script標(biāo)簽主要是定義了客戶端的腳本文件，而style標(biāo)簽主要是從外部引入樣式文件。而網(wǎng)頁中實(shí)際顯示的部分都是在<body></body>標(biāo)記內(nèi)，是網(wǎng)頁的主體部分。2、CSS。css又稱層疊樣式表，層疊就是對(duì)一個(gè)元素多次設(shè)置一個(gè)樣式，如果出現(xiàn)這種情況，首先將通過選擇期進(jìn)行權(quán)重的計(jì)算，在權(quán)重不同的情況下，以權(quán)重最大的樣式為準(zhǔn)，如果權(quán)重相同的情況下，以最后定義的樣式為準(zhǔn)。css的主要功能是針對(duì)網(wǎng)頁元素的排版進(jìn)行像素級(jí)的控制，css未出現(xiàn)之前，樣式的修飾都是嵌入在html標(biāo)簽內(nèi)，這對(duì)網(wǎng)頁之后的維護(hù)和修改異常的復(fù)雜，會(huì)造成大量代碼冗余，css的出現(xiàn)極大的實(shí)現(xiàn)了代碼的復(fù)用，可以將相同樣式的元素進(jìn)行統(tǒng)一的歸類，使用同一個(gè)樣式進(jìn)行定義，如果后期要修改整體的樣式，就不需要再修改原定的網(wǎng)頁結(jié)構(gòu)，只需要在樣式列表中找到相應(yīng)的樣式進(jìn)行修改即可。除此之外，css樣式表可以單獨(dú)存放在一個(gè)頁面當(dāng)中，如果多個(gè)頁面使用同一個(gè)樣式表，直接在網(wǎng)頁的<head></head>標(biāo)簽內(nèi)用<link>引入外部資源即可，這樣不僅可以使代碼得到復(fù)用，還可以實(shí)現(xiàn)多個(gè)頁面風(fēng)格的統(tǒng)一。3、Javascript。Javascript是一種解釋型腳本語言，即代碼不經(jīng)過預(yù)編譯，邊解釋邊執(zhí)行，目前Javascript廣泛應(yīng)用到web應(yīng)用開發(fā)當(dāng)中，常用來給網(wǎng)頁添加各種各樣的動(dòng)態(tài)效果，與用戶進(jìn)行交互。Javascript主要分為三個(gè)部分,分別是ECMAScript,DOM,BOM,其中ECMAScript中主要定語了Javascript語言中最基本的語法結(jié)構(gòu)，DOM又稱為文檔對(duì)象模型，用來描述網(wǎng)頁內(nèi)容的方法和接口，BOM是瀏覽器對(duì)象模型，用來定義與瀏覽器進(jìn)行交互的方法。Javascript的主要功能如下：1.用戶每次向服務(wù)端請(qǐng)求回來的數(shù)據(jù)，都是由Javascript動(dòng)態(tài)地將文本嵌入到頁面中渲染出來；2.在數(shù)據(jù)提交到服務(wù)器之前對(duì)數(shù)據(jù)進(jìn)行校驗(yàn)；3.對(duì)于服務(wù)端返回的狀態(tài)以可視化的方式提示給用戶4、Ajax。Ajax是一種異步更新的技術(shù)，在Ajax出現(xiàn)之前，用戶每次在更新網(wǎng)頁內(nèi)容的時(shí)候都需要重新加載網(wǎng)頁，導(dǎo)致網(wǎng)絡(luò)寬帶的大量浪費(fèi)，而Ajax出現(xiàn)之后，可以實(shí)現(xiàn)網(wǎng)頁的異步刷新，這意味當(dāng)網(wǎng)頁中的某些信息需要更新的時(shí)候，通過Ajax技術(shù)可以在不加載整個(gè)網(wǎng)頁的情況下，就可以完成與用戶的交互。

三、前端優(yōu)化的研究

1、減少http請(qǐng)求。http請(qǐng)求是客戶端和服務(wù)端請(qǐng)求和接受數(shù)據(jù)的協(xié)議，一個(gè)正常的http請(qǐng)求流程如下。如果我們需要訪問一個(gè)服務(wù)器，首先需要在瀏覽器輸入框中輸入’www.XXX.com‘然后按下回車，點(diǎn)擊回車的瞬間，首先通過dom技術(shù)獲得’www.XXX.com這個(gè)地址，然后通過域名轉(zhuǎn)換將URL轉(zhuǎn)換成對(duì)應(yīng)的IP地址，之后與服務(wù)器建立連接，服務(wù)器在接收到數(shù)據(jù)之后進(jìn)行數(shù)據(jù)的處理，再將數(shù)據(jù)返回給瀏覽器，瀏覽器在接受到數(shù)據(jù)之后對(duì)數(shù)據(jù)進(jìn)行解釋執(zhí)行然后渲染到頁面上，在這個(gè)過程當(dāng)中，我們每次請(qǐng)求的網(wǎng)頁文件中都會(huì)有很多的圖片，CSS文件，JS文件等等。每個(gè)HTTP請(qǐng)求都需要耗費(fèi)一定的時(shí)間，這樣頻繁與服務(wù)器建立連接釋放連接，必定造成資源的浪費(fèi)。因此，我們通過合并圖片，合并css和js文件的方法來減少HTTP請(qǐng)求的次數(shù)。2、進(jìn)行zip壓縮。zip壓縮就是將文件在服務(wù)端采用壓縮技術(shù)將js,css等進(jìn)行壓縮之后再進(jìn)行傳輸。有數(shù)據(jù)表明，經(jīng)過壓縮之后，文件的大小能夠減小80%，經(jīng)過壓縮后的文件能夠極大地節(jié)約網(wǎng)絡(luò)的帶寬，數(shù)據(jù)經(jīng)過鏈路傳到瀏覽器端之后再進(jìn)行解壓之后再渲染到界面上。目前，壓縮CSS,JS的功能一般都由打包工具提供，目前市場(chǎng)上比較流行的打包工具是webpack。壓縮文件一般是去除代碼中的注釋，空行等不必要的代碼，對(duì)于Css，js文件中較長(zhǎng)的類名，變量名進(jìn)行簡(jiǎn)單的替換。3、使用JSON格式進(jìn)行數(shù)據(jù)交換。JSON是一種輕量級(jí)的數(shù)據(jù)交換格式，采用完全獨(dú)立于語言的文本格式。在JSON中有兩種結(jié)構(gòu)，分別是對(duì)象和數(shù)組，對(duì)于對(duì)象和數(shù)組字面量的操作是非常方便和高效的，使用JSON格式的數(shù)據(jù)進(jìn)行數(shù)據(jù)的交互，可以寫出實(shí)用美觀可讀性強(qiáng)的代碼。

四、總結(jié)和展望

本文首先分析了知識(shí)管理系統(tǒng)在當(dāng)今時(shí)代的市場(chǎng)需求，再詳細(xì)介紹了其總體的功能模塊，包括其中的4個(gè)大模塊以及分別具有的功能然后介紹了知識(shí)管理系統(tǒng)前端中所使用的技術(shù)，包括HTML、CSS、Javascript和Ajax。文章的主體部分就是對(duì)知識(shí)管理系統(tǒng)前端優(yōu)化的研究，本文只列舉了一些在現(xiàn)在技術(shù)水平上前端優(yōu)化可以采取的手段和方案，也并非最好的解決方法。知識(shí)管理系統(tǒng)現(xiàn)在還存在許多的缺陷和不足，這些問題都需要各方面人士繼續(xù)努力，同時(shí)隨著計(jì)算機(jī)的進(jìn)步和發(fā)展，這些問題也將會(huì)逐漸得到解決。希望在今后的未來可以看到知識(shí)管理系統(tǒng)以及其前端的進(jìn)步和優(yōu)化，能夠更好的滿足用戶需求，也為互聯(lián)網(wǎng)的發(fā)展貢獻(xiàn)力量。

參考文獻(xiàn)

[1]曹劉陽.曹劉陽.編寫高質(zhì)量代碼:Web前端開發(fā)修煉之道[M].北京:中國(guó)物資出版社.2010（6）-281.

[2]劉杰.Web標(biāo)準(zhǔn)設(shè)計(jì)[M].北京:清華大學(xué)出版社，2009（1）551.

[3]鄭婭峰.網(wǎng)頁設(shè)計(jì)與開發(fā)：HTML、CSS、JavaScript實(shí)例教程[M].北京:清華大學(xué)出版社.2009，27-32.

[4]陳鯡.Web前端開發(fā)技術(shù)以及優(yōu)化方向分析[J].新媒體研究.2015（7）39-40.

作者：王科然 單位：河南省鄭州市實(shí)驗(yàn)中學(xué)