在项目开发阶段很多项目都会用到表情插件,接下来通过本文给大家介绍了 JavaScript 从 0 开始构思表情插件 的相关资料, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
前言:
由于公司开发项目需要用到表情插件,在网上百度了好久,很多表情插件,都是需要引用好多 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();
大致效果截图:(ui 方面可以根据各自需要进行美化)
点击发送后,发送给后台的数据是:
表情插件的三个原理:
• 如何显示表情?
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。
【contenteditable 有一个问题,它支持富文本,不安全,而且用户体验不好。】
比如:用户粘贴的时候,会自动带格式,例子如下:
这边是采用网上大神的一段代码,去除掉富文本功能,具体参考:某大神博文
• 如何对图片和文字进行转换?
这时候就要使用强大的正则了,先用 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 地址:{aa0aa}
以上所述是小编给大家介绍的 JavaScript 从 0 开始构思表情插件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 phperz 网站的支持!
来源: http://www.phperz.com/article/17/0405/264095.html