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 相关文章推荐
基于zepto的移动端轻量级日期插件--date_picker
Mar 04 Javascript
jQuery实现的瀑布流加载效果示例
Sep 13 Javascript
javascript对浅拷贝和深拷贝的详解
Oct 14 Javascript
vue.js指令v-model实现方法
Dec 05 Javascript
Vue自定义指令拖拽功能示例
Feb 17 Javascript
JS库中的Particles.js在vue上的运用案例分析
Sep 13 Javascript
angularjs的单选框+ng-repeat的实现方法
Sep 12 Javascript
js实现删除li标签一行内容
Apr 16 Javascript
Vue多环境代理配置方法思路详解
Jun 21 Javascript
IDEA安装vue插件图文详解
Sep 26 Javascript
jQuery实现开关灯效果
Aug 02 jQuery
详解三种方式在React中解决绑定this的作用域问题并传参
Aug 18 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 magic quotes的详解
2013/06/17 PHP
PHP连接access数据库
2015/03/27 PHP
PHP实现无限级分类(不使用递归)
2015/10/22 PHP
PHP响应post请求上传文件的方法
2015/12/17 PHP
jQuery:节点(插入,复制,替换,删除)操作
2013/03/04 Javascript
ExtJS下 Ext.Direct加载和提交过程排错小结
2013/04/02 Javascript
使用nodejs开发cli项目实例
2015/06/03 NodeJs
浅谈js停止事件冒泡 阻止浏览器的默认行为(阻止超连接 #)
2017/02/08 Javascript
深入学习nodejs中的async模块的使用方法
2017/07/12 NodeJs
使用JavaScript实现链表的数据结构的代码
2017/08/02 Javascript
js表单序列化判断空值的实例
2017/09/22 Javascript
npm 下载指定版本的组件方法
2018/05/17 Javascript
Node.js npm命令运行node.js脚本的方法
2018/10/10 Javascript
详解无限滚动插件vue-infinite-scroll源码解析
2019/05/12 Javascript
PHP webshell检查工具 python实现代码
2009/09/15 Python
Python __setattr__、 __getattr__、 __delattr__、__call__用法示例
2015/03/06 Python
Python用GET方法上传文件
2015/03/10 Python
简单的Python的curses库使用教程
2015/04/11 Python
Python使用email模块对邮件进行编码和解码的实例教程
2016/07/01 Python
Python数据操作方法封装类实例
2017/06/23 Python
使用Python读取大文件的方法
2018/02/11 Python
对Python中列表和数组的赋值,浅拷贝和深拷贝的实例讲解
2018/06/28 Python
flask入门之表单的实现
2018/07/18 Python
python实现图片批量压缩程序
2018/07/23 Python
python 控制Asterisk AMI接口外呼电话的例子
2019/08/08 Python
Django项目创建到启动详解(最全最详细)
2019/09/07 Python
Django 如何使用日期时间选择器规范用户的时间输入示例代码详解
2020/05/22 Python
html5 button autofocus 属性介绍及应用
2013/01/04 HTML / CSS
html svg生成环形进度条的实现方法
2019/09/23 HTML / CSS
英国现代绅士品牌:Hackett
2017/12/17 全球购物
2015年五一劳动节慰问信
2015/03/23 职场文书
财务经理岗位职责范本
2015/04/08 职场文书
公司开业主持词
2015/07/02 职场文书
大学开学感言
2015/08/01 职场文书
python批量创建变量并赋值操作
2021/06/03 Python
Python卷积神经网络图片分类框架详解分析
2021/11/07 Python