在回复或是评论的时候,很多时间都需要有回复表情的功能,然后而需要插入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. 1 weekend110的Linux带图形系统安装 + 网络配置 + 静态IP设置

    一.weekend110的Linux带图形系统安装 二.网络配置 明明是配置好的啊,只能说是域名出现问题了, 出现ping:unknow host www.baidu.com的问题解决 解决Ubunt ...

  2. rsync学习与实践

    1.介绍:开源的.快速的.多功能的可以实现全量和增量备份的工具:还能实现文件的删除等:可以根据文件大小的变化和修改时间的变化来同步数据(快速) 2.描述:支持特殊文件的拷贝,例如设备文件,链接等:可以 ...

  3. request&response笔记

    一.HttpServletResponse 1.代表了一个响应 2.应用: 2.1输出中文 字节流输出中文 //拿到输出字节流对象 ServletOutputStream oos = response ...

  4. [Node] 逃离回调地狱

    逃离Node回调地狱 Background : 在Node中,函数的返回结果大多利用回调的方式处理.如简单的判断文件是否存在并读取内容: var fs = require('fs'); fs.exis ...

  5. Sysinternals Suite实用程序工具包

    Sysinternals Suite是微软出品的一套集成数十个绿色软件的实用程序工具包.就在2014年1月29日(官方日期),迎来了2014新版本 AccessChk为了确保创建安全的环境,Windo ...

  6. PL/SQL:使用pragma restrict_references限制包权限

    在看别人的代码的时候.发现了例如以下的编译指令. pragma restrict_references(get_attribute_name, wnds); get_attribute_name是一个 ...

  7. Linux进程管理—信号、定时器

    信号: 1.       信号的作用: 背景: 进程之间通信比较麻烦. 但进程之间又必须通信,比如父子进程之间. 作用: 通知其他进程响应.进程之间的一种通信机制. 信号: 接受信号的进程马上停止,调 ...

  8. C# 动态创建出来的窗体间的通讯 delegate2

    附件:http://files.cnblogs.com/xe2011/CSharp_WindowsForms_delegate02.rar 窗体2 和窗体3 都是动态创建出来的 现在 FORM3.TE ...

  9. 微信支付 V3版

    本人小菜鸟一仅仅.为了自我学习和交流PHP(jquery,linux,lamp,shell,javascript,server)等一系列的知识,小菜鸟创建了一个群.希望光临本博客的人能够进来交流. 寻 ...

  10. request对象多种方法封装表单数据

    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, ...