在回复或是评论的时候,很多时间都需要有回复表情的功能,然后而需要插入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. arm汇编--ubuntu12.04 安装arm-linux交叉编译环境

    1. 安装标准的C开发环境,由于Ubuntu安装默认是不安装的,所以需要先安装一下:sudo apt-get install gcc g++ libgcc1 libg++ make gdb 2.从ft ...

  2. select * from table where 1=1让您茅塞顿开(转)

    在很多网站上,都经常看到select * from table where 1=1这样的一种查询语句: 这是一种怎样的查询语句呢?首先说明,1=1不是查询语句中的任何关键词,所以,请您放心,不管你会不 ...

  3. Oracle的OFA架构

    最优灵活体系结构(Optimal Flexible Architecture,简称OFA) OFA其实就是一种Oracle的一种规范,其意义就是用一种统一的给文件和文件夹的规则,和文件存放目录的规则做 ...

  4. ASP.NET MVC- Controllers and Routing- Controller Overview

    In this tutorial, Stephen Walther introduces you to ASP.NET MVC controllers. You learn how to create ...

  5. 如何在ubuntu下使用stage3d的硬件加速

    最近想尝试一下心动的新游戏深渊,但是由于公司的电脑是ubuntu的,只要进游戏就提示说没有stage3d的硬件加速,于是google了一下,发现这么一篇文章 http://phoronix.com/f ...

  6. Android NDK 【错误】The method loadLibrary(String) is undefined for the type Settings.Syste

    [错误]The method loadLibrary(String) is undefined for the type Settings.System [解决方法] 不要加入包import andr ...

  7. 在XMPP的JAVA开源实现Openfire中,增加LBS 附近的人功能

    1. XMPP协议 与 Openfire XMPP协议是IM领域的标准协议了,具体可参考  http://xmpp.org   及RFC6120,RFC6121,RFC6122等相关文档. http: ...

  8. GDB 调试程序系列

    http://blog.csdn.net/haoel/article/category/9197

  9. 分布式服务框架 Zookeeper -- 管理分布式环境中的数据--转载

    原文:http://www.ibm.com/developerworks/cn/opensource/os-cn-zookeeper/ Zookeeper 分布式服务框架是 Apache Hadoop ...

  10. CentOS 更新yum源

    公司买了一台刀片机服务器,安装的系统版本太低,导致yum源不合适,安装就会报错. 在网上找了好长时间,才发现是yum源的问题.   转载原文: 突然想起试试 Docker,在一台计算机上安装了 Cen ...