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 相关文章推荐
JS实现可拖曳、可关闭的弹窗效果
Sep 26 Javascript
js实现图片无缝滚动特效
Mar 19 Javascript
EasyUI创建对话框的两种方式
Aug 23 Javascript
js判断请求的url是否可访问,支持跨域判断的实现方法
Sep 17 Javascript
JavaScript中关于iframe滚动条的去除和保留
Nov 17 Javascript
如何在Angular.JS中接收并下载PDF
Nov 26 Javascript
jquery.validate.js 多个相同name的处理方式
Jul 10 jQuery
vue proxyTable 接口跨域请求调试的示例
Sep 12 Javascript
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
Oct 31 Javascript
layui 上传文件_批量导入数据UI的方法
Sep 23 Javascript
JS实现横向跑马灯效果代码
Apr 20 Javascript
代码块高亮可复制显示js插件highlight.js+clipboard.js整合
Feb 15 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
《OVERLORD》手游英文版即将上线 手机上也能扮演骨王
2020/04/09 日漫
PHP 第三节 变量介绍
2012/04/28 PHP
PHP产生不重复随机数的5个方法总结
2014/11/12 PHP
PHP实现读取文件夹及批量重命名文件操作示例
2019/04/15 PHP
redis+php实现微博(二)发布与关注功能详解
2019/09/23 PHP
使用prototype.js 的时候应该特别注意的几个问题.
2007/04/12 Javascript
用javascript来实现动画导航效果的代码
2007/12/16 Javascript
Javascript 自定义类型方法小结
2010/03/02 Javascript
获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)
2011/02/14 Javascript
jquery next nextAll nextUntil siblings的区别介绍
2013/10/05 Javascript
高效的jquery数字滚动特效
2015/12/17 Javascript
浅析JavaScript中命名空间namespace模式
2016/06/22 Javascript
jquery插件ContextMenu设置右键菜单
2017/03/13 Javascript
Vue.js对象转换实例
2017/06/07 Javascript
JavaScript实现旋转轮播图
2020/08/18 Javascript
利用babel将es6语法转es5的简单示例
2017/12/01 Javascript
详解Vue中watch的高级用法
2018/05/02 Javascript
vue element-ui之怎么封装一个自己的组件的详解
2019/05/20 Javascript
js中的this的指向问题详解
2019/08/29 Javascript
js实现随机点名器精简版
2020/06/29 Javascript
原生js生成图片验证码
2020/10/11 Javascript
python 捕获 shell/bash 脚本的输出结果实例
2017/01/04 Python
Python函数中参数是传递值还是引用详解
2019/07/02 Python
Django 对IP访问频率进行限制的例子
2019/08/30 Python
详解Python list和numpy array的存储和读取方法
2019/11/06 Python
Python yield的用法实例分析
2020/03/06 Python
在matplotlib中改变figure的布局和大小实例
2020/04/23 Python
python中time、datetime模块的使用
2020/12/14 Python
CSS3中伪元素::before和::after的用法示例
2017/09/18 HTML / CSS
Oakley西班牙官方商店:太阳眼镜和男女运动服
2019/04/26 全球购物
Weblogic和WebSphere不同特点
2012/05/09 面试题
房屋转让协议书
2014/04/11 职场文书
企业安全标语
2014/06/07 职场文书
机关作风建设自查报告
2014/10/22 职场文书
2016年大学迎新晚会工作总结
2015/10/15 职场文书
导游词之新疆尼雅遗址
2019/10/16 职场文书