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 相关文章推荐
jQuery源码分析-04 选择器-Sizzle-工作原理分析
Nov 14 Javascript
说说JSON和JSONP 也许你会豁然开朗
Sep 02 Javascript
脚本合并提升javascript性能示例
Feb 24 Javascript
js预加载图片方法汇总
Jun 15 Javascript
javascript实现状态栏中文字动态显示的方法
Oct 20 Javascript
大型JavaScript应用程序架构设计模式
Jun 29 Javascript
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
Jul 07 Javascript
JavaScript利用fetch实现异步请求的方法实例
Jul 26 Javascript
JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法
Jun 07 Javascript
vue 实现单选框设置默认选中值
Nov 07 Javascript
vue中activated的用法
Jan 03 Vue.js
js实现碰撞检测
Jan 29 Javascript
只需五句话搞定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来处理多个提交任务
2006/10/09 PHP
php5.4以上版本GBK编码下htmlspecialchars输出为空问题解决方法汇总
2015/04/03 PHP
php中smarty区域循环的方法
2015/06/11 PHP
PHP模拟asp.net的StringBuilder类实现方法
2015/08/08 PHP
jquery tools系列 expose 学习
2009/09/06 Javascript
最简单的JavaScript验证整数、小数、实数、有效位小数正则表达式
2015/04/17 Javascript
jQuery插件bgStretcher.js实现全屏背景特效
2015/06/05 Javascript
jquery实现简单的表单验证
2015/11/17 Javascript
jQuery Easyui 下拉树组件combotree
2016/12/16 Javascript
Node.js连接MongoDB数据库产生的问题
2017/02/08 Javascript
微信小程序获取手机号授权用户登录功能
2017/11/09 Javascript
详解微信小程序的 request 封装示例
2018/08/21 Javascript
JS实现的input选择图片本地预览功能示例
2018/08/29 Javascript
vue 移动端适配方案详解
2018/11/15 Javascript
node.js事件轮询机制原理知识点
2019/12/22 Javascript
Python代码实现http/https代理服务器的脚本
2019/08/12 Python
python list转置和前后反转的例子
2019/08/26 Python
python 批量修改 labelImg 生成的xml文件的方法
2019/09/09 Python
keras .h5转移动端的.tflite文件实现方式
2020/05/25 Python
Pretty Green美国:英式摇滚服饰风格代表品牌之一
2019/01/23 全球购物
德国专业木制品经销商:Holz-Direkt24
2019/12/26 全球购物
毕业生机械建模求职信
2013/10/14 职场文书
中式餐厅创业计划书范文
2014/01/23 职场文书
机械设计毕业生自荐信
2014/02/02 职场文书
关于旷工的检讨书
2014/02/02 职场文书
中学生学雷锋演讲稿
2014/04/26 职场文书
学校食堂标语
2014/10/06 职场文书
白酒代理协议书范本
2014/10/26 职场文书
三八妇女节致辞
2015/07/31 职场文书
银行客户经理培训心得体会
2016/01/09 职场文书
外出培训学习心得体会
2016/01/18 职场文书
《地震中的父与子》教学反思
2016/02/16 职场文书
2016优秀员工先进事迹材料
2016/02/25 职场文书
python turtle绘制多边形和跳跃和改变速度特效
2022/03/16 Python
SQL Server数据库备份和恢复数据库的全过程
2022/06/14 SQL Server
超越Nginx的Web服务器caddy优雅用法
2022/06/21 Servers