JavaScript从0开始构思表情插件


Posted in Javascript onJuly 26, 2016

前言:

由于公司开发项目需要用到表情插件,在网上百度了好久,很多表情插件,都是需要引用好多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开始构思表情插件

点击发送后,发送给后台的数据是:

表情插件的三个原理:

•如何显示表情?

CSS Sprites(图片整合技术),先设定好背景图标,然后定义每一个小图标的position,width,height,即可显示想要显示的表情。 期间遇到的问题:如何控制显示表情的大小? 首先想到的是background-size这个方法,但是要重新定义它的position,非常耗费“体力”,后来,柳暗花明,发现一个属性transform: scale(1.5); 控制当前元素缩放比率,哈哈,一行代码就搞定啦~想要表情大,还是小,尺寸不满意?通通一行代码搞定 •如何在输入框中显示表情图标?

一开始是选择 input 的textarea,但是,将表情img “append”到这个输入框后面,也没有显示出这个图标,后来尝试了div,再“append”之后,发现能够成功显示表情,但是div又不能输入文字,无果……

初步想法:使用input监听,将textarea值实时加到div中,同样的,这个也是费力不讨好~继续探索……

后来发现一个很大众的属性。contenteditable="true",又愉快的选择了contenteditable。

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

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

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

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

JavaScript从0开始构思表情插件

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

•如何对图片和文字进行转换?

这时候就要使用强大的正则了,先用html()获取内容,再对内容进行处理。 转换成文字:

1 content.replace(/<img\b[^>]*/, imgObj[j]) //匹配所有的<img />,替换成相应的格式

2 imgObj.push(format + img[i].getAttribute("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="" alt="' + key + '"class="emoji emoji_' + key + '"/>'; //返回对应的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;
}

//每一次生成一个实例,上面的属性都会重新生成一次,这样对于固定的方法,会多占用一些内存。这样既不环保,也缺乏效率。所以可以把那些不变的属性和方法,直接定义在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开始构思表情插件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
XP折叠菜单&amp;仿QQ2006菜单
Dec 16 Javascript
javascript encodeURI和encodeURIComponent的比较
Apr 03 Javascript
js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍
Jan 24 Javascript
jQuery Select下拉框操作小结(推荐)
Jul 22 Javascript
详解用vue编写弹出框组件
Jul 04 Javascript
Three.js 再探 - 写一个微信跳一跳极简版游戏
Jan 04 Javascript
Vue 换肤的示例实践
Jan 23 Javascript
Vue实现动态创建和删除数据的方法
Mar 17 Javascript
vue使用v-for实现hover点击效果
Sep 29 Javascript
Vue + Element UI图片上传控件使用详解
Aug 20 Javascript
Vue快速实现通用表单验证功能
Dec 05 Javascript
VUE实现吸底按钮
Mar 04 Vue.js
只需五句话搞定JavaScript作用域(经典)
Jul 26 #Javascript
第一次接触神奇的Bootstrap基础排版
Jul 26 #Javascript
js获取html的span标签的值方法(超简单)
Jul 26 #Javascript
js无法获取到html标签的属性的解决方法
Jul 26 #Javascript
jquery判断对象是否为空并遍历对象的简单实例
Jul 26 #Javascript
浅谈Javascript数据属性与访问器属性
Jul 26 #Javascript
js判断空对象的实例(超简单)
Jul 26 #Javascript
You might like
php实现将字符串按照指定距离进行分割的方法
2015/03/14 PHP
Yii2框架引用bootstrap中日期插件yii2-date-picker的方法
2016/01/09 PHP
jscript之List Excel Color Values
2007/06/13 Javascript
JavaScript入门学习书籍推荐
2008/06/12 Javascript
javascript 弹出窗口中是否显示地址栏的实现代码
2011/04/14 Javascript
setTimeout()与setInterval()方法区别介绍
2013/12/24 Javascript
基于jQuery+Cookie实现的防止刷新的在线考试倒计时
2015/06/19 Javascript
12306 刷票脚本及稳固刷票脚本(防挂)
2017/01/04 Javascript
JavaScript实现设置默认日期范围为最近40天的方法分析
2017/07/12 Javascript
vue filters的使用详解
2018/06/11 Javascript
详解VUE里子组件如何获取父组件动态变化的值
2018/12/26 Javascript
js变量声明var使用与不使用的区别详解
2019/01/21 Javascript
Vue-cli assets SubDirectory及PublicPath区别详解
2020/08/18 Javascript
Ant Design Vue table中列超长显示...并加提示语的实例
2020/10/31 Javascript
[00:10]DOTA2全国高校联赛速递
2018/05/30 DOTA
[05:11]TI9战队采访——VIRTUSPRO
2019/08/22 DOTA
[54:05]DOTA2-DPC中国联赛定级赛 SAG vs iG BO3第一场 1月9日
2021/03/11 DOTA
深入解析Python编程中super关键字的用法
2016/06/24 Python
python实现的AES双向对称加密解密与用法分析
2017/05/02 Python
使用Pyinstaller的最新踩坑实战记录
2017/11/08 Python
Python continue继续循环用法总结
2018/06/10 Python
python+Splinter实现12306抢票功能
2018/09/25 Python
python实现用户名密码校验
2020/03/18 Python
什么是Python中的匿名函数
2020/06/02 Python
python热力图实现简单方法
2021/01/29 Python
CSS3条纹背景制作的实战攻略
2016/05/31 HTML / CSS
纯CSS3单页切换导航菜单界面设计的简单实现
2016/08/16 HTML / CSS
阿拉伯世界最大的电子卖场:Souq埃及
2016/08/01 全球购物
上海雨人软件技术开发有限公司测试题
2015/07/14 面试题
实体的生命周期
2013/08/31 面试题
模具专业求职信
2014/06/26 职场文书
招标承诺书
2014/08/30 职场文书
2014年乡镇纪委工作总结
2014/12/19 职场文书
CSS3实现的水平标题菜单
2021/04/14 HTML / CSS
Python常遇到的错误和异常
2021/11/02 Python
Python+Selenium实现抖音、快手、B站、小红书、微视、百度好看视频、西瓜视频、微信视频号、搜狐视频、一点号、大风号、趣头条等短视频自动发布
2022/04/13 Python