基于WEB的表情圖片模塊的動(dòng)態(tài)管理與實(shí)現(xiàn)

屈 佳，胡志勇

（1.武漢郵電科學(xué)研究院 湖北 武漢 430000；2.武漢虹信技術(shù)服務(wù)有限責(zé)任公司 湖北 武漢　430074）

基于WEB的表情圖片模塊的動(dòng)態(tài)管理與實(shí)現(xiàn)

屈 佳1，胡志勇2

（1.武漢郵電科學(xué)研究院 湖北 武漢 430000；2.武漢虹信技術(shù)服務(wù)有限責(zé)任公司 湖北 武漢430074）

針對(duì)以往web技術(shù)中圖片處理存在的效率問題，文中通過實(shí)現(xiàn)一個(gè)基于web應(yīng)用的表情圖片動(dòng)態(tài)管理模塊，結(jié)合運(yùn)維平臺(tái)統(tǒng)一管理，最后得到更加高效和靈活的管理方案。模塊共分為3個(gè)部分，其中運(yùn)維平臺(tái)負(fù)責(zé)對(duì)分類的表情圖片進(jìn)行統(tǒng)一管理。前端公共頁面使用Javascript編寫方法，負(fù)責(zé)處理前臺(tái)寫入數(shù)據(jù)和發(fā)送請(qǐng)求動(dòng)態(tài)從數(shù)據(jù)庫(kù)中取最新的表情圖片。后臺(tái)語言Java，用于拼接從數(shù)據(jù)庫(kù)取出的包含表情圖片的數(shù)據(jù)，由此形成一套高效規(guī)范的表情管理模塊。

表情圖片；動(dòng)態(tài)生成；javascript；Java

1982年9月19日，美國(guó)卡耐基-梅隆大學(xué)的斯科特·法爾曼（匹茲堡計(jì)算機(jī)科學(xué)教授）教授在電子公告板，第一次輸入了這樣一串ASCII字符：“：-）”（微笑，順時(shí)針旋轉(zhuǎn)90度可得）。人類歷史上第一張電腦笑臉就此誕生。從此，網(wǎng)絡(luò)表情符號(hào)在互聯(lián)網(wǎng)世界風(fēng)行，為社會(huì)廣泛接受［1］。

目前隨著社交媒體高速發(fā)展和字符數(shù)量縮減，表情符號(hào)已經(jīng)成為互聯(lián)網(wǎng)應(yīng)用中必不可少的一部分，研究表明使用表情圖片能讓用戶在社交媒體上更受歡迎，更能促進(jìn)用戶之間的交流，如今表情圖片在比較嚴(yán)肅的商業(yè)氛圍中也得到了廣泛的應(yīng)用。根據(jù)這些現(xiàn)狀本文介紹了在web項(xiàng)目中實(shí)現(xiàn)表情模塊的動(dòng)態(tài)管理以及具體的前后臺(tái)轉(zhuǎn)換處理方案，下面是方案實(shí)施過程中遇到一些問題：

1）如何滿足表情圖片的多樣性使表情管理更加靈活；

2）如何在寫入數(shù)據(jù)時(shí)直觀的顯示圖片而不是圖片編碼；

3）表情圖片與文字信息一起寫入、取出時(shí)如何存儲(chǔ)處理；

針對(duì)以上幾個(gè)方面，系統(tǒng)制定了幾個(gè)解決方案，包括前端表情圖片的動(dòng)態(tài)生成管理，與文字信息一起寫入時(shí)直觀顯示表情圖片，寫入和取出數(shù)據(jù)時(shí)的處理等。

1　解決方案

1.1動(dòng)態(tài)表情圖片管理

考慮到傳統(tǒng)的web技術(shù)中網(wǎng)頁圖片在頁面“寫死“的不靈活性所帶來的管理不便，比如頁面改動(dòng)較大，改動(dòng)地方較多，工作量大而且造成網(wǎng)頁代碼冗余，影響網(wǎng)頁的下載速度和請(qǐng)求速度。針對(duì)這些問題，系統(tǒng)提出動(dòng)態(tài)管理表情圖片。后臺(tái)語言是Java，取出數(shù)據(jù)時(shí)采用的是集合類中的ArrayList類。Java的類集框架可以使程序處理對(duì)象的方法標(biāo)準(zhǔn)化，類集接口是構(gòu)造類集框架的基礎(chǔ)，使用迭代方法可以使類集的操作更高效［2-3］。通過在ArrayList中嵌套ArrayList類型的數(shù)據(jù)來存儲(chǔ)表情圖片，再在前臺(tái)動(dòng)態(tài)讀取來實(shí)現(xiàn)表情圖片的動(dòng)態(tài)生成，這樣對(duì)表情圖片的管理只需要在運(yùn)維系統(tǒng)中統(tǒng)一操作，就可以多處調(diào)用，既減少了工作量，又提高了代碼的復(fù)用性和可維護(hù)性。數(shù)據(jù)庫(kù)的設(shè)計(jì)針對(duì)表情圖片和表情種類各自建立相應(yīng)的數(shù)據(jù)存儲(chǔ)表，便于數(shù)據(jù)庫(kù)存儲(chǔ)。數(shù)據(jù)持久層的設(shè)計(jì)目標(biāo)是為整個(gè)項(xiàng)目提供一個(gè)高層、統(tǒng)一、安全和并發(fā)的數(shù)據(jù)持久機(jī)制，完成對(duì)各種數(shù)據(jù)進(jìn)行持久化的編程工作，并為系統(tǒng)業(yè)務(wù)邏輯層提供服務(wù)［4-5］。

1）規(guī)范表情圖片類型管理：對(duì)應(yīng)建立表情圖片類型表，字段包括id、表情圖片類型名稱、是否默認(rèn)顯示（每次只有一個(gè)類型的圖片默認(rèn)顯示）創(chuàng)建時(shí)間、是否刪除（通過刪除這一圖片類型管理這個(gè)類型的所有的表情圖片的刪除）、是否顯示等；

2）規(guī)范表情圖片管理：對(duì)應(yīng)建立表情圖片管理表，包括id、類型id（對(duì)應(yīng)表情類型id）、表情編碼、圖片名稱和url字段（用于拼接完整的表情圖片標(biāo)簽）、是否刪除、排序、創(chuàng)建時(shí)間等；

3）前臺(tái)請(qǐng)求可用表情圖片數(shù)據(jù)：將動(dòng)態(tài)生成表情圖片的js代碼寫在一個(gè)公共的JSP頁面中，在需要使用表情模塊的頁面中引入該頁面即可。其主要功能是在瀏覽器完成頁面加載時(shí)發(fā)送Ajax請(qǐng)求到后臺(tái)，獲得所有可用的表情圖片數(shù)據(jù)，再根據(jù)后臺(tái)返回的結(jié)果遍歷取出的數(shù)據(jù)，在前臺(tái)拼接動(dòng)態(tài)生成img標(biāo)簽；

4）后臺(tái)獲取可用表情圖片數(shù)據(jù)：后臺(tái)接收到前端發(fā)送的請(qǐng)求，創(chuàng)建一個(gè) ArrayList對(duì)象，其中存放的元素也為ArrayList。底層實(shí)現(xiàn)是數(shù)組，提供了根據(jù)數(shù)組下標(biāo)快速隨機(jī)訪問的能力，但是增加和刪除元素時(shí)因?yàn)樾枰齽?dòng)數(shù)組的元素，因此比較慢［6］。首先獲取表情圖片的可用類型，存放到一個(gè)ArrayList對(duì)象中，根據(jù)圖片類型逐個(gè)獲取該類型的表情圖片，然后把相同類型的表情圖片存放到一個(gè)ArrayList對(duì)象中，再把每個(gè)類型的表情圖片作為一個(gè)ArrayList的對(duì)象添加到外層的ArrayList對(duì)象中；

5）寫入數(shù)據(jù)中包含表情圖片的管理：在簡(jiǎn)單的外表之下，javascript卻是一種具有豐富功能的程序設(shè)計(jì)語言［7］。寫入數(shù)據(jù)中包含表情圖片時(shí)存儲(chǔ)要做處理，因?yàn)樵谌〕鰯?shù)據(jù)存放的位置未知的時(shí)候，這樣的做法很容易出錯(cuò)，把公共處理的js方法寫在一個(gè)JSP頁面中，可以直接引用。系統(tǒng)中采用的是div標(biāo)簽用來獲取寫入的數(shù)據(jù)，獲取數(shù)據(jù)需要轉(zhuǎn)換后同步到文本域中，主要是去掉其中一些HTML標(biāo)簽，用相應(yīng)的字符代替，取出時(shí)根據(jù)應(yīng)用場(chǎng)景進(jìn)行拼接。

1.2模塊組成

模塊組成包括運(yùn)維系統(tǒng)表情圖片管理、web表情圖片應(yīng)用公共模塊以及寫入、取出包含表情圖片的數(shù)據(jù)時(shí)處理模塊等3個(gè)部分。

1）運(yùn)維管理系統(tǒng)表情圖片管理模塊，按照數(shù)據(jù)存儲(chǔ)要求和前端顯示，主要有以下幾個(gè)方面的功能：

①表情圖片類別查詢管理；

②表情圖片類別錄入管理；

③表情圖片類別的編輯和刪除管理；

④某種類別可用的表情圖片查詢管理；

⑤按照類別添加表情圖片管理；

⑥某種類別的表情圖片的編輯和刪除管理；

2）web應(yīng)用公共模塊，javascript已經(jīng)成為一門功能全面的編程語言，能夠處理復(fù)雜的計(jì)算和交互，擁有了閉包、匿名函數(shù)，甚至元編程等特性［7-8］。系統(tǒng)中主要用于頁面動(dòng)態(tài)生成表情圖片模塊，頁面中需要寫入表情的地方引入，復(fù)用性和可維護(hù)性高：

①瀏覽器完成頁面加載后發(fā)送請(qǐng)求到后臺(tái)；

②接受后臺(tái)返回的可用的表情圖片數(shù)據(jù)；

③寫入表情時(shí)顯示表情圖片用div標(biāo)簽實(shí)現(xiàn)；

④寫入的數(shù)據(jù)處理后同步到文本輸入框中；

⑤限制寫入字符個(gè)數(shù)截取時(shí)保證表情圖片的完整；

3）從數(shù)據(jù)庫(kù)中取出包含表情圖片的數(shù)據(jù)時(shí)相應(yīng)的函數(shù)處理模塊：

①根據(jù)應(yīng)用場(chǎng)景在數(shù)據(jù)庫(kù)中編寫函數(shù)處理包含表情圖片的數(shù)據(jù)；

②通過表情圖片的code字段去緩存中取表情圖片；

③根據(jù)應(yīng)用處理數(shù)據(jù)內(nèi)容中的特殊字符；

④將包含表情圖片的數(shù)據(jù)拼接成相應(yīng)的img標(biāo)簽；

1.3應(yīng)用和價(jià)值

表情圖片模塊的動(dòng)態(tài)管理在web系統(tǒng)中的應(yīng)用：

1）表情圖片錄入及管理

通過在運(yùn)維平臺(tái)對(duì)表情圖片進(jìn)行統(tǒng)一的錄入和管理，實(shí)現(xiàn)了一處改動(dòng)，多處調(diào)用。同時(shí)減少了前端代碼的冗余，提高了代碼的復(fù)用性，以及表情圖片管理的靈活性和多樣性，便于管理，降低管理成本。

2）公共模塊復(fù)用

利用對(duì)前端公共模塊的總結(jié)，編寫一個(gè)在頁面加載完成后請(qǐng)求表情圖片數(shù)據(jù)的公共的JSP頁面，在需要的地方直接引入，十分方便，包括對(duì)寫入數(shù)據(jù)的處理和轉(zhuǎn)換。在后臺(tái)取出包含表情圖片的數(shù)據(jù)時(shí)有兩種處理方法，一種是在數(shù)據(jù)庫(kù)中編寫函數(shù)，對(duì)取出的數(shù)據(jù)進(jìn)行拼接處理；另外一種是在后臺(tái)程序中對(duì)數(shù)據(jù)進(jìn)行拼接處理。兩種方法都要結(jié)合數(shù)據(jù)取出后的應(yīng)用的環(huán)境來進(jìn)行。

3）應(yīng)用價(jià)值

表情符號(hào)現(xiàn)如今已經(jīng)成為了一種世界語言，可以讓接收它的人迅速接收到它所包含的語言信息，無論是在web系統(tǒng)的交流版塊、信息發(fā)布版塊等文字信息模塊中都可以使用它，使用表情圖片可以讓信息交流更加的帶有生動(dòng)的氣息，使人感到親近和有人情味。

2　系統(tǒng)工作原理

在Web系統(tǒng)中，應(yīng)用文字的模塊多不勝數(shù)，如用于和運(yùn)維人員進(jìn)行交流的意見和建議模塊、用于發(fā)布個(gè)人信息的模塊、用戶回復(fù)的模塊等等，這些應(yīng)用到文字信息的模塊都需要使用公共的表情圖片模塊。

文中介紹的表情動(dòng)態(tài)管理模塊在系統(tǒng)中工作原理如下：在運(yùn)維平臺(tái)中首先有一個(gè)相應(yīng)的表情圖片管理模塊，用于進(jìn)行表情圖片的統(tǒng)一管理，主要實(shí)現(xiàn)不同表情類別和表情圖片的管理，一處管理、多處調(diào)用。其次在web系統(tǒng)中建立一個(gè)公共的用于動(dòng)態(tài)生成和寫入表情圖片的JSP頁面，其中包括一些公共的js處理函數(shù)，在需要使用的地方直接調(diào)用，用于在前臺(tái)動(dòng)態(tài)生成表情圖片和處理需要寫入的數(shù)據(jù)。最后是包含表情圖片的數(shù)據(jù)取出時(shí)的處理，這里也是通過調(diào)用公共的轉(zhuǎn)換函數(shù)將數(shù)據(jù)拼接成正確的數(shù)據(jù)格式。

3　應(yīng)用實(shí)現(xiàn)

具體功能實(shí)現(xiàn)后，動(dòng)態(tài)生成的表情模塊如圖1。

圖1　電腦端動(dòng)態(tài)生成表情模塊界面

主要功能有：動(dòng)態(tài)生成表情圖片以及數(shù)據(jù)的的寫入管理運(yùn)維終端登陸后，表情圖片管理界面如圖2。

圖2　運(yùn)維端管理表情圖片界面

主要功能有：表情圖片類別管理功能、對(duì)應(yīng)表情類別的表情圖片管理功能

4　結(jié)束語

隨著互聯(lián)網(wǎng)的普及化和手機(jī)短信的普遍流行，用表情圖片來表達(dá)心情這種網(wǎng)絡(luò)次文化已經(jīng)為社會(huì)所廣泛接受，表情圖片在社交媒體中的應(yīng)用將越來越多。文中介紹了在web應(yīng)用系統(tǒng)中實(shí)現(xiàn)表情圖片動(dòng)態(tài)管理模塊，通過集成表情圖片動(dòng)態(tài)管理功能、明確劃分模塊職能，在系統(tǒng)中集成公共的動(dòng)態(tài)表情圖片管理模塊和公共的方法，直接在需要的地方調(diào)用，提高了代碼的復(fù)用性，便于運(yùn)維人員管理，靈活性高。

［1］表情符號(hào)世界通行［N］.蘋果日?qǐng)?bào)，2007-07-30（A26）.

［2］Joshua Bloch.Effective Java［M］.楊春花，俞黎敏，譯.北京：機(jī)械工業(yè)出版社，2009.

［3］程杰.大話設(shè)計(jì)模式［M］.北京：清華大學(xué)出版社，2007.

［4］劉艷霞.J2EE項(xiàng)目中的數(shù)據(jù)持久層設(shè)計(jì)［J］.工程地質(zhì)計(jì)算機(jī)應(yīng)用，2005：20-27.

［5］高博.基于J2ME的移動(dòng)通信技術(shù)的研究與應(yīng)用 ［D］.遼寧：沈陽工業(yè)大學(xué)，2006.

［6］Bruce Eckel.Thinking in Java［M］.4th Revised edition Prentice Hall，2006.

［7］David Flanagan.JavaScript權(quán)威指南［M］.李強(qiáng)，譯.北京：機(jī)器工業(yè)出版社，2007.

［8］Nicholas C.Zakas.JavaScript高級(jí)程序設(shè)計(jì)［M］.曹力，譯.北京：人民郵電出版社，2010.

Dynamicmanagement and realization of emotion module based on WEB system

QU Jia1，HU Zhi-yong2
（1.Wuhan Research Institute of Posts and Telecommunications，Wuhan 430000，China；2.Wuhan Hongxin Technology Services，LLC，Wuhan 430074，China）

For the efficiency of the conventional image processing web technology exists to implement a paper-based expression of dynamic web applications，image management module，combined with a unified management platform for operation and maintenance，and finally get more efficient and flexible management solution.Module is divided into three parts，which is responsible for the operation and maintenance platform classification emoticons for unified management.The front page uses Javascript public write method，handles the front desk to write data and sends a request to take the latest dynamic emoticons from the database.Background language Java，for data contained emoticons stitching removed from the database，thereby forming an efficient standardized expression management module.

emoticons；dynamically generated；javascript；Java

TN919.82

A

1674－6236（2016）09-0185-03

2015-06-03稿件編號(hào)：201506043

屈 佳（1990—），女，湖北天門人，碩士。研究方向：通信與信息系統(tǒng)。