屈 佳，胡志勇

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

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

屈 佳1，胡志勇2

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

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

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

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

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

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

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

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

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

1　解決方案

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

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

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

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

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

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

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

1.2模塊組成

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

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

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

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

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

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

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

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

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

①瀏覽器完成頁面加載后發(fā)送請求到后臺；

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

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

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

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

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

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

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

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

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

1.3應用和價值

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

1）表情圖片錄入及管理

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

2）公共模塊復用

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

3）應用價值

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

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

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

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

3　應用實現(xiàn)

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

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

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

圖2　運維端管理表情圖片界面

主要功能有：表情圖片類別管理功能、對應表情類別的表情圖片管理功能

4　結(jié)束語

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

［1］表情符號世界通行［N］.蘋果日報，2007-07-30（A26）.

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

［3］程杰.大話設計模式［M］.北京：清華大學出版社，2007.

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

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

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

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

［8］Nicholas C.Zakas.JavaScript高級程序設計［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稿件編號：201506043

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