JavaScript 从0自定义封装企业插件原来这么简单

                                         JavaScript 从0自定义封装企业插件原来这么简单

                                                                                                                                                                          2017-7-28    小B

  大家都知道，企业里面因为项目效率需求，需要用到大量的JS插件，在网上也能找到一些功能性的插件，但往往和自己的实际项目需求对不上号，就比如公司开发项目需要用到表情插件，在网上百度了好久，很多表情插件，都是需要引用好多js文件，也没有现成的demo可以使用，还有一些插件是引用好多图片，每一个表情都要重新请求一下。为了这样一个功能，要引入好多js，img，也是得不偿失……
 
所以，小编自己码了一个小巧的“表情插件”，方便以后项目直接使用。
 
下面小编分享小巧表情插件码的过程：

功能

传递表情对应的字符格式到后台，后台返回字符串，前端将该字符串解析展示成相应的表情展示在页面上。

使用方法：


在option中配置需要的参数


大致效果截图：（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。


一开始是用span承载表情图标，但是用div或者span标签放置图像，则contenteditable会默认加到最后的div/span中……，所以会导致输入表情图标后，再输入文字，最后的文字会在最后一个div/span中，导致没有显示文字。好吧……真是心累……
 
既然div/span不可以，就使用img标签承载表情，这下终于能够正常输入了。
 
【contenteditable有一个问题，它支持富文本，不安全，而且用户体验不好。】
 
比如：用户粘贴的时候，会自动带格式，例子如下：




这边是采用网上大神的一段代码，去除掉富文本功能，具体参考：某大神博文
 
如何对图片和文字进行转换？
 
这时候就要使用强大的正则了，先用html（）获取内容，再对内容进行处理。
 
转换成文字：


转换成图片：


整个插件的代码格式，也是比较常见的封装方式


每一次生成一个实例，上面的属性都会重新生成一次，这样对于固定的方法，会多占用一些内存。这样既不环保，也缺乏效率。所以可以把那些不变的属性和方法，直接定义在prototype对象上。这时所有固定的方法，其实都是同一个内存地址，指向prototype对象，因此就提高了运行效率。




好啦，这样一个表情插件就算完工了，系不系很简单？目前暂时需要依赖jquery，那很多老铁就会问了，原生JavaScript的改如何做呢？


很多前端新手，或者做过前端开发一两年的初级前端开发者都会有一个致命的问题，JS该如何学？JS该如何深入精进呢？我也想能随心所欲封装插件，开发组件。


为此我们特别邀请了前端开发技术专家海牙老师，帮助那些喜欢前端追求卓越的前端新手或者初级前端工程师们系统提升研发实力，达到一线互联网企业中高级前端工程师的技能水平。