杰晶网络

JavaScript从0开始构思表情插件
网络编程 2024/5/19 佚名
3 2

前言：

由于公司开发项目需要用到表情插件，在网上百度了好久，很多表情插件，都是需要引用好多js文件，也没有现成的demo可以使用，还有一些插件是引用好多图片，每一个表情都要重新请求一下。为了这样一个功能，要引入好多js，img，也是得不偿失……

所以，博主自己码了一个小巧的“表情插件”，方便以后项目直接使用。

功能

功能：传递表情对应的字符格式到后台，后台返回字符串，前端将该字符串解析展示成相应的表情展示在页面上。

使用方法：

在option中配置需要的参数

var option = {
emojiArray: ['angry'], //填写表情字符串的数组，【注：源文件image下面的图标，只需要写红框内的字符串，详见下图】
textareaId: 'emoji-editor', //输入框的id
loadId: 'load', //加载表情的id
emojiContainer: 'emojiContainer', 　//存储表情的容器对象
sendId: 'send', 　　 //发送信息的按钮 id
emojiTranslateCls:'emoji-comment', //需要转换成表情（img）的容器类名，只需要添加一个类，即可自动将:kissing_heart:渲染成表情~
};
/*调用方法*/
var text = new Emoji(option);
text.init();

JavaScript从0开始构思表情插件

大致效果截图：（ui方面可以根据各自需要进行美化）

JavaScript从0开始构思表情插件

点击发送后，发送给后台的数据是：

表情插件的三个原理：

"true"，又愉快的选择了contenteditable。

一开始是用span承载表情图标，但是用div或者span标签放置图像，则contenteditable会默认加到最后的div/span中……，所以会导致输入表情图标后，再输入文字，最后的文字会在最后一个div/span中，导致没有显示文字。好吧……真是心累……

既然div/span 不可以，就使用img标签承载表情，这下终于能够正常输入了。

【contenteditable有一个问题，它支持富文本，不安全，而且用户体验不好。】

比如：用户粘贴的时候，会自动带格式，例子如下：

JavaScript从0开始构思表情插件

这边是采用网上大神的一段代码，去除掉富文本功能，具体参考：某大神博文

"alt") + format); //这里的format我使用的是： 所以就是类似这样 :fearful: 的格式 转换成图片：

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="/UploadFiles/2021-04-02/">


整个插件的代码格式，也是比较常见的封装方式





//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;
}





//每一次生成一个实例，上面的属性都会重新生成一次，这样对于固定的方法，会多占用一些内存。这样既不环保，也缺乏效率。所以可以把那些不变的属性和方法，直接定义在prototype对象上。这时所有固定的方法，其实都是同一个内存地址，指向prototype对象，因此就提高了运行效率。





Emoji.prototype = {
init: function () { //放一些初始化的方法
this.toEmoji();
this.loadEmoji();
this.bindEvent();
},
bindEvent: function () {},
toEmoji: function () {}, //服务器数据转换成表情
toText: function () {} //转换成文字
loadEmoji: function () {} //加载表情
}





好啦，这样一个表情插件就算完工了，系不系很简单？目前暂时需要依赖jquery，之后如果有精力的话继续捣鼓一个基于原生js的O(∩_∩)O，具体的实现代码在github上。 最后，附上github地址：https://github.com/beidan/emoji


以上所述是小编给大家介绍的JavaScript从0开始构思表情插件，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
标签：
js表情插件
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
评论“JavaScript从0开始构思表情插件”
暂无“JavaScript从0开始构思表情插件”评论...
www.imxmx.com 杰晶网络
8,675无损音乐
1,324高清电影
213破解软件
120,141站长资源

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新动态

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 更多链接