用javascript写一个emoji表情插件

概述

以我们写的这个emoji插件为例，网上已经有一些相关的插件了，但你总感觉有些部分的需求不能被满足（如：可以自行添加新的表情包而不用去改源代码等等）

详细

代码下载：http://www.demodashi.com/demo/10345.html

很久没有写文章了，说实话本人现在受困于五月病已经快变成一条死咸鱼了(T_T)，本次就当写一个简单的js插件教程了。本项目的代码相对比较简单，至于里面有些变量命名的问题就请你们不要吐槽了Σ(ﾟдﾟlll)（好的，我承认我英语就小学水平好吧。除了hello和goodbye其他的都不会了____orz）。 废话就讲到这里，下面开始正文。

一、事前准备

事实上在写一个插件前我们都需要事先想好你要实现哪些功能，怎么去实现，这些大方向的东西是需要事先考虑的，至于具体细节和优化选项我们可以在写代码的过程中再进行修改。

就以我们写的这个emoji插件为例，网上已经有一些相关的插件了，但你总感觉有些部分的需求不能被满足（如：可以自行添加新的表情包而不用去改源代码等等），这时我们就可以列出你想实现的功能项了：

1. 需要满足基本的表情插件的需求，包括图片和对应code的相互转换

2. 希望可以通过参数来调整每行以及每列表情图片的显示个数，并且可以针对不同表情包单独调整

3. 希望用户可以在不了解源代码的情况下也能自行主动添加新的表情包

4. 模板界面简单，可以进行自适应，并且兼容移动端

5. 尽可能只提供简单的api接口和方法，避免内部涉及其他不是很相关的功能（如绑定某个特定的元素或者在内部进行数据传输等等），保持插件的灵活性等等

以上就是我们暂时能想到的功能和需求，下面就开始写一个完整的插件了（当然原生js插件某种程度来讲使用起来相对比较自由，因为不需要依赖某些特定库，而且也不需要按照某些库类的格式标准进行插件的编写，但少了一些封装好的方法也会使得插件写起来更费力，至于怎么取舍就需要看个人需求来定了）

二、进行结构划分

当我们正式开始代码编写的时候，当然想自己写出来的代码不敢说很强势，但至少结构清晰，易于读懂，而且代码的性能也需要保证。这时我们就需要回到前面的需求了，由上面列出的5点可以看出，大部分的功能需求都是在我们程序内部去实现的，唯一需要考虑的是上面的第3点。

这时我们可能已经想到办法了，比如说将新的表情包填好相关的参数后由接口传入程序内部去作处理。当然这