js从0开始构思表情插件-安度博客

前言： 
由于公司开发项目需要用到心情插件，在网上百度了良久，许多心情插件，都是需要引用许多几何js文件，也没有现成的demo可以使用，尚有一些插件是引用许多几何图片，每一个心情都要重新请求一下。为了这样一个功效，要引入许多几何js，img，也是得不偿失……
所以，博主自己码了一个小巧的“心情插件”，利便以后项目直接使用。
功效
功效：通报心情对应的字符名堂到后台，后台返回字符串，前端将该字符串剖析展示成相应的心情展示在页面上。      
使用要领：
在option中配置需要的参数
 1 var option = { 2 emojiArray: [&＃39;angry&＃39;] //填写心情字符串的数组，【注：源文件image下面的图标，只需要写红框内的字符串，详见下图】 3 textareaId: &＃39;emoji-editor&＃39; //输入框的id 4 loadId: &＃39;load&＃39; //加载心情的id 5 emojiContainer: &＃39;emojiContainer&＃39; 　//存储心情的容器工具 6 sendId: &＃39;send&＃39; 　　 //发送信息的按钮 id 7 emojiTranslateCls:&＃39;emoji-comment&＃39; //需要转换成心情（img）的容器类名，只需要添加一个类，即可自动将:kissing_heart:渲染成心情~ 8 }; 9 /*调用要领*/10 var text = new Emoji(option);11 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=&＃39;true&＃39;，又愉快的选择了contenteditable。
一开始是用span承载心情图标，可是用div或者span标签放置图像，则contenteditable会默认加到最后的div/span中……，所以会导致输入心情图标后，再输入文字，最后的文字会在最后一个div/span中，导致没有显示文字。好吧……真是心累……
既然div/span 不行以，就使用img标签承载心情，这下终于能够正常输入了。
【contenteditable有一个问题，它支持富文本，不宁静，而且用户体验欠好。】
好比：用户粘贴的时候，会自动带名堂，例子如下：
这边是接纳网上大神的一段代码，去除掉富文本功效，详细参考：某大神博文
  如何对图片和文字举行转换？
这时候就要使用强大的正则了，先用html（）获取内容，再对内容举行处置惩罚。
转换成文字：
1 content.replace(/<img[^>]*/ imgObj[j]) //匹配所有的<img />，替换成相应的名堂2 imgObj.push(format + img[i].getAttribute(&＃39;alt&＃39;) + format); //这里的format我使用的是： 所以就是类似这样 :fearful: 的名堂
转换成图片：
1 var keys = &＃39;\+1|-1|100|109|1234|8ball|a|ab|abc|abcd|accept……&＃39; //这里只列出部门2 regex = new RegExp(&＃39;:(&＃39; + keys + &＃39;):&＃39; &＃39;g&＃39;) // 匹配名堂形如这样子的名堂 ：100：3 $(obj[i]).html().replace(regex emoji) //替换4 function emoji() {5 var key = arguments[1];6 return &＃39;<img src=&＃39;&＃39; alt=&＃39;&＃39; + key + &＃39;&＃39;class=&＃39;emoji emoji_&＃39; + key + &＃39;&＃39;/>&＃39;; //返回对应的img名堂7 }
整个插件的代码名堂，也是较量常见的封装方式
1 //Emoji工具可变的属性2 function Emoji(option) {3 this.emoji = option.emojiArray4 this.textareaId = option.textareaId5 this.loadId = option.loadId6 this.sendId = option.sendId7 this.emojiContainer = option.emojiContainer8 this.emojiTranslateCls = option.emojiTranslateCls;9 }
//每一次生成一个实例，上面的属性都市重新生成一次，这样对于牢靠的要领，会多占用一些内存。这样既不环保，也缺乏效率。所以可以把那些稳定的属性和要领，直接界说在prototype工具上。这时所有牢靠的要领，其实都是同一个内存地址，指向prototype工具，因此就提高了运行效率。
 1 Emoji.prototype = { 2 init: function () { //放一些初始化的要领 3 this.toEmoji(); 4 this.loadEmoji(); 5 this.bindEvent(); 6 } 7 bindEvent: function () {} 8 toEmoji: function () {} //服务器数据转换成心情 9 toText: function () {} //转换成文字10 loadEmoji: function () {} //加载心情11 }
好啦，这样一个心情插件就算完工了，系不系很简朴？现在暂时需要依赖jquery，之后如果有精神的话继续捣鼓一个基于原生js的O(∩_∩)O，详细的实现代码在github上。
最后，附上github地址：https://github.com/beidan/emoji 接待star，fork~~~~~~~ 附：秋招要开始了，有没有大神有好事情推荐～～