在回复或是评论的时候,很多时间都需要有回复表情的功能,然后而需要插入QQ表情可以是最常见的。

插件也写多很多个了,这次写插件就下了一个决定。就是使用模块化来开发。

最后在我的源代码中有这样子一段:

var css = require('./css.css'); //创建css
var arr = require('./facemap.js'); //返回表情数组
var insertText = require('./insertText.js'); //负责向textarea插入字符串
var position = require('./position.js'); //根据按钮显示div的位置
var creatFace = require('./creatFace.js'); //传入arr 和图片路径 返回html字符串

可以很清楚的看到。把这些能独立出去的都用模块化了。

主要用到的知识点:
1.模块化:采用node的方式module.exports
2.gulp来进行构建
3.webpack的loader的使用,将css也当成了插件的一个模块。

代码地址:https://github.com/kyo4311/jquery.qqface
在线示例:http://kyo4311.github.io/jquery.qqface/

当然,这只是我自己用来学习的一个项目,没有经过测试,可能会存在一些问题,
如果有同学以后用在实际项目了,并发现了什么问题,可以在https://github.com/kyo4311/jquery.qqface/issues留言。

亲手用模块化方式写一个jquery QQ表情插件。的更多相关文章

  1. 如何写一个jquery插件

      本文总结整理一下如何写一个jquery插件?虽然现今各种mvvm框架异常火爆,但是jquery这个陪伴我们成长,给我们带来很多帮助的优秀的库不应该被我们抛弃,写此文章,作为对以往欠下的笔记的补充, ...

  2. 一款基于jQuery的QQ表情插件

    我们在QQ聊天或者发表评论.微博时,会有一个允许加入表情的功能,点击表情按钮,会弹出一系列表情小图片,选中某个表情图片即可发表的丰富的含表情的内容.今天和大家分享一款基于jQuery的QQ表情插件,您 ...

  3. 大前端工程化之写一个简单的webpack插件

    今天写一个简单的webpack插件,来学习一下webpack插件 webpack插件机制可以使开发者在webpack构建过程中加入自己的行为,来针对自己项目中的一些需求做一些定制化 首先我们得知道一个 ...

  4. 经典qq表情插件(html+nodejs应用)

    由于目前在接触聊天室项目,接到一个需求实现一个类似QQ表情.在网上找了一款jquery经典表情插件.下面介绍一个用法: HTML: 首先在html页面的head中引入jQuery库文件和QQ表情插件j ...

  5. 如何使用jQuery写一个jQuery插件

    jQuery插件其实是前端框架的思维,构成一个框架,个人认为必须满足以下几个基础条件:1. 可重用,2. 兼容性,3. 维护方便,虽说现在有很多比较成熟的前端框架,但是也有部分存在配置麻烦,学习成本大 ...

  6. 自己写的一个jQuery轮播插件

    大概是四月初开始写的,中间停了有一个月吧.这是我在Github的第一个项目.项目地址:https://github.com/linzb93/jquery.slide.js. 轮播应该是最好写的插件了, ...

  7. 自己写一个 jQuery 插件

    我知道这一天终将会到来,现在,它来了. 需求 开发 SharePoint 的 CSOM 应用时,经常需要在网页上输出一些信息. 这种需求和 alert 的弹窗.F12 的断点查看信息的场景是不一样的: ...

  8. [原]发布一个jQuery提示框插件,Github开源附主站,jquery.tooltips.js

    一个简单精致的jQuery带箭头提示框插件 插件写好快一年了,和一个 弹出框插件(点击查看) 一起写的,一直没有整理出来,昨天得功夫整理并放到了github上,源码和网站均可在线看或下载. CSS中的 ...

  9. 写一个简单的JQ插件(例子)

    虽然现在 vue angular react 当道啊但是那 JQ还是有一席之地很多很多的小单位啊.其实还会用到 我也放一个例子吧虽然我也不是很肯定有没有人写的比我更好啊但是我相信 我这个还是蛮实用的 ...

随机推荐

  1. ACM2035_(递归法求幂)

    /* 编写一个递归算法,求解m的n次方. 我们一般求解m的n次方,一般使用n个m相乘的办法来求解. 其实我们还可以使用另外一种更有效率的办法求解这个问题. 我们知道一个数的0次方等于1,一个数的1次方 ...

  2. HDU 4749 Parade Show 2013 ACM/ICPC Asia Regional Nanjing Online

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4749 题目大意:给一个原序列N,再给出一个序列M,问从N中一共可以找出多少个长度为m的序列,序列中的数 ...

  3. Windows不能在本地计算机启动OracleDBConsoleorcl .错误代码2

    Windows 不能在 本地计算机 启动 OracleDBConsoleorcl.有关更多信息,查阅系统事件日志.如果这是非 Microsoft 服务,请与服务厂商联系,并参考特定服务错误代码 2. ...

  4. Java编程常见问题汇总

    每天在写Java程序,其实里面有一些细节大家可能没怎么注意,这不,有人总结了一个我们编程中常见的问题.虽然一般没有什么大问题,但是最好别这样做.另外这里提到的很多问题其实可以通过Findbugs( h ...

  5. java中进程与线程--三种实现方式

    一:进程与线程 概述:几乎任何的操作系统都支持运行多个任务,通常一个任务就是一个程序,而一个程序就是一个进程.当一个进程运行时,内部可能包括多个顺序执行流,每个顺序执行流就是一个线程. 进程:进程是指 ...

  6. WPF passwordbox 圆角制作

    将以下节点复制到app.xaml的<Application.Resources>节点下 <Style TargetType="PasswordBox">   ...

  7. UVA10518 - How Many Calls?(矩阵高速幂)

    UVA10518 - How Many Calls?(矩阵高速幂) 题目链接 题目大意:给你fibonacci数列怎么求的.然后问你求f(n) = f(n - 1) + f(n - 2)须要多少次调用 ...

  8. bash手册 之重定向原理与实现

    http://www.gnu.org/software/bash/manual/bashref.html#Redirections http://www.cnblogs.com/weidagang20 ...

  9. 最简单的自定义适配器adapter

    下面是一个非常简单的自定义适配器的总体源码,从这个源码入门,就可以慢慢学会适配器了 适配器的作用: 完成数据和界面控件的绑定,把数据绑定到界面的现实控件条目上(对于listView,应该是listVi ...

  10. Audit(查看审核/审计信息)

    2013需要到 网站集管理-网站集审核设置 中设置要开启的审核项,开启之后sharepoint才会记录信息,信息存储在contentDB的AuditData中: 去读审计信息的sharepoint代码 ...