在回复或是评论的时候,很多时间都需要有回复表情的功能,然后而需要插入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. [置顶] 深入理解android之IPC机制与Binder框架

    [android之IPC机制与Binder框架] [Binder框架.Parcel.Proxy-Stub以及AIDL] Abstract [每个平台都会有自己一套跨进程的IPC机制,让不同进程里的两个 ...

  3. Velocity 的工作原理

    原文出处:http://www.blogjava.net/jackybu/articles/8803.html 这个程序很简单,但是它能让你清楚的了解Velocity的基本工作原理.程序中其他部分基本 ...

  4. 关于PHP程序员解决问题的能力

    这个话题老生长谈了,在面试中必然考核的能力中,我个人认为解决问题能力是排第一位的,比学习能力优先级更高.解决问题的能力既能看出程序员的思维能力,应变能力,探索能力等,又可以看出他的经验.如果解决问题能 ...

  5. 支持“***Context”上下文的模型已在数据库创建后发生更改。请考虑使用 Code First 迁移更新数据库(http://go.microsoft.com/fwlink/?LinkId=238269)。

    在用VS进行MVC开发的过程中遇到如下问题: 支持“***Context”上下文的模型已在数据库创建后发生更改.请考虑使用 Code First 迁移更新数据库(http://go.microsoft ...

  6. cf 85 E. Petya and Spiders

    http://codeforces.com/contest/112/problem/E 轮廓线dp.每一个格子中的蜘蛛选一个去向.终于,使每一个蜘蛛都有一个去向,同一时候保证有蜘蛛的格子最少.须要用4 ...

  7. oracle4

    分页查询 按雇员的id号升序取出 oracle的分页一共有三种方式 .根据rowid来分   ) ) order by cid desc; 执行时间0.03秒 .按分析函数来分   and rk> ...

  8. PureMVC(JS版)源码解析(二):Notification类

    上篇博客,我们已经就PureMVC的设计模式进行的分析,这篇博文主要分析Notification(消息)类的实现. 通过Notification的构造函数可以看出,PureMVC中的Notificat ...

  9. JDK中DNS缓存的分析

    在JAVA中使用InetAddress.getByName(String host) 方法来获取给定hostname的IP地址.为了减少DNS解析的请求次数,提高解析效率,InetAddress中提供 ...

  10. angularjs-yeoman环境配置

    yum install npm -y npm install -g grunt-cli bower yo generator-karma-require generator-angular-requi ...