前言：

由于公司開發(fā)項(xiàng)目需要用到表情插件，在網(wǎng)上百度了好久，很多表情插件，都是需要引用好多js文件，也沒有現(xiàn)成的demo可以使用，還有一些插件是引用好多圖片，每一個表情都要重新請求一下。為了這樣一個功能，要引入好多js，img，也是得不償失……

所以，博主自己碼了一個小巧的“表情插件”，方便以后項(xiàng)目直接使用。

功能

功能：傳遞表情對應(yīng)的字符格式到后臺，后臺返回字符串，前端將該字符串解析展示成相應(yīng)的表情展示在頁面上。

使用方法：

在option中配置需要的參數(shù)

var option = {
emojiArray: ['angry'], //填寫表情字符串的數(shù)組，【注：源文件image下面的圖標(biāo)，只需要寫紅框內(nèi)的字符串，詳見下圖】
textareaId: 'emoji-editor', //輸入框的id
loadId: 'load', //加載表情的id
emojiContainer: 'emojiContainer', 　//存儲表情的容器對象
sendId: 'send', 　　 //發(fā)送信息的按鈕 id
emojiTranslateCls:'emoji-comment', //需要轉(zhuǎn)換成表情（img）的容器類名，只需要添加一個類，即可自動將:kissing_heart:渲染成表情~
};
/*調(diào)用方法*/
var text = new Emoji(option);
text.init();

大致效果截圖：（ui方面可以根據(jù)各自需要進(jìn)行美化）

點(diǎn)擊發(fā)送后，發(fā)送給后臺的數(shù)據(jù)是：

表情插件的三個原理：

•如何顯示表情？

CSS Sprites(圖片整合技術(shù))，先設(shè)定好背景圖標(biāo)，然后定義每一個小圖標(biāo)的position，width，height，即可顯示想要顯示的表情。 期間遇到的問題：如何控制顯示表情的大小？ 首先想到的是background-size這個方法，但是要重新定義它的position，非常耗費(fèi)“體力”，后來，柳暗花明，發(fā)現(xiàn)一個屬性transform: scale(1.5); 控制當(dāng)前元素縮放比率，哈哈，一行代碼就搞定啦~想要表情大，還是小，尺寸不滿意？通通一行代碼搞定 •如何在輸入框中顯示表情圖標(biāo)？

一開始是選擇 input 的textarea，但是，將表情img “append”到這個輸入框后面，也沒有顯示出這個圖標(biāo)，后來嘗試了div，再“append”之后，發(fā)現(xiàn)能夠成功顯示表情，但是div又不能輸入文字，無果……

初步想法：使用input監(jiān)聽，將textarea值實(shí)時加到div中，同樣的，這個也是費(fèi)力不討好~繼續(xù)探索……

后來發(fā)現(xiàn)一個很大眾的屬性。contenteditable="true"，又愉快的選擇了contenteditable。

一開始是用span承載表情圖標(biāo)，但是用div或者span標(biāo)簽放置圖像，則contenteditable會默認(rèn)加到最后的div/span中……，所以會導(dǎo)致輸入表情圖標(biāo)后，再輸入文字，最后的文字會在最后一個div/span中，導(dǎo)致沒有顯示文字。好吧……真是心累……

既然div/span 不可以，就使用img標(biāo)簽承載表情，這下終于能夠正常輸入了。

【contenteditable有一個問題，它支持富文本，不安全，而且用戶體驗(yàn)不好?！?br />

比如：用戶粘貼的時候，會自動帶格式，例子如下：

這邊是采用網(wǎng)上大神的一段代碼，去除掉富文本功能，具體參考：某大神博文

•如何對圖片和文字進(jìn)行轉(zhuǎn)換？

這時候就要使用強(qiáng)大的正則了，先用html（）獲取內(nèi)容，再對內(nèi)容進(jìn)行處理。 轉(zhuǎn)換成文字：

1 content.replace(/<img\b[^>]*/, imgObj[j]) //匹配所有的<img />，替換成相應(yīng)的格式

2 imgObj.push(format + img[i].getAttribute("alt") + format); //這里的format我使用的是： 所以就是類似這樣 :fearful: 的格式 轉(zhuǎn)換成圖片：

var keys = '\\+|-||||ball|a|ab|abc|abcd|accept……' //這里只列出部分
regex = new RegExp(':(' + keys + '):', 'g'), // 匹配格式形如這樣子的格式 ：：
$(obj[i]).html().replace(regex, emoji) //替換
function emoji() {
var key = arguments[];
return '<img src="" alt="' + key + '"class="emoji emoji_' + key + '"/>'; //返回對應(yīng)的img格式
}

整個插件的代碼格式，也是比較常見的封裝方式

//Emoji對象可變的屬性
function Emoji(option) {
this.emoji = option.emojiArray,
this.textareaId = option.textareaId,
this.loadId = option.loadId,
this.sendId = option.sendId,
this.emojiContainer = option.emojiContainer,
this.emojiTranslateCls = option.emojiTranslateCls;
}

//每一次生成一個實(shí)例，上面的屬性都會重新生成一次，這樣對于固定的方法，會多占用一些內(nèi)存。這樣既不環(huán)保，也缺乏效率。所以可以把那些不變的屬性和方法，直接定義在prototype對象上。這時所有固定的方法，其實(shí)都是同一個內(nèi)存地址，指向prototype對象，因此就提高了運(yùn)行效率。

Emoji.prototype = {
init: function () { //放一些初始化的方法
this.toEmoji();
this.loadEmoji();
this.bindEvent();
},
bindEvent: function () {},
toEmoji: function () {}, //服務(wù)器數(shù)據(jù)轉(zhuǎn)換成表情
toText: function () {} //轉(zhuǎn)換成文字
loadEmoji: function () {} //加載表情
}

好啦，這樣一個表情插件就算完工了，系不系很簡單？目前暫時需要依賴jquery，之后如果有精力的話繼續(xù)搗鼓一個基于原生js的O(∩_∩)O，具體的實(shí)現(xiàn)代碼在github上。 最后，附上github地址：https://github.com/beidan/emoji

以上所述是小編給大家介紹的JavaScript從0開始構(gòu)思表情插件，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

最新評論