最近一两年在一些项目上,通过实际需求出发,编写了一些库在项目中使用,现在将这些项目都稍微整理了一下开源了出来,也许也有刚好能够你也用得上的,顺便也骗一下star。均在项目的README中加了相关的说明。

迷你全功能的模板引擎(压缩版代码不到2kb)

项目地址: https://github.com/coffeedeveloper/coffee-tmpl

npm包名: coffee-tmpl

语法和ejs保持一致,只不过这个模板引擎只能用到浏览器,不支持layout之类的高级用法。会写这个库是因为很多情况下,我需要做一些小型到中型的模板输出,而我觉得市面上大部分的模板引擎都太大太负责了,这个库的迷你以及支持原生的js语句,能够覆盖大部分使用场景了。


可配置的抽奖转盘模板

项目地址: https://github.com/coffeedeveloper/turntable

npm包名: lottery-turntable

之前做抽奖活动的时候发现市面上基本上转盘的抽奖都是采用一张背景图片去做transition,满足不了动态增删改奖品这样的灵活运营需求,特意写了一个支持两种动画类型(transition / requestAnimationFrame)的。是采用svg绘出整个转盘,主要用于手机端方面的活动。


将js数组导出成CSV文件(解决了中文编码的问题)

项目地址: https://github.com/coffeedeveloper/exportjs

npm包名: exportjs

在做管理后台的时候,需要将一些表格的数据导出,以前都是让服务端开发单独的一个报表导出接口。可是考虑到一些简单的情景,可以通过遍历列表接口,然后汇总后前端自己做报表的生成导出即可。这个库解决了类似中文编码之类的问题。在只针对管理后台的情况下是能够直接运用的(我们只限制使用人员用chrome),因此不需要过多的考虑兼容性的问题。


功能完善的滚动加载库

项目地址: https://github.com/coffeedeveloper/loadmaster

npm包名: loadmaster

当你页面需要滚动加载以及做当前模块曝光埋点,以及图片延迟加载的时候,采用这个库就能够很好的完成。会自动检测你的当前曝光模块、即将加载的模块、已经离开的模块,即将到底部的检测。可以通过在事件触发的时候完成对应的处理,还是相当方便的。


一个很简易的事件监听触发库

项目地址: https://github.com/coffeedeveloper/coffee-eventemitter
npm包名: coffee-eventemitter

主要是在某些场景下(例如: 通知数据变化之类的store事件),需要用到自定义的事件触发时,可以很方面的套用过来。支持on\once\off\emit


娱乐性的打字效果库

项目地址: https://github.com/coffeedeveloper/typing.js

npm包名: typing.js

之前写的娱乐性库,曾经也宣传过一次,可以通过demo来看下效果。 demo


总结

这些库都是在实际的生产环境项目上跑过的,大的bug可以说是都没有的。当然可能在某些极端情况下的场景没有照料到,如果你发现了bug,可以给我提issue我会抽空修复的。当然最后如果你觉得这些苦能够在项目上帮助到你,也不妨帮忙点个star,激励一下我^_^

分享一些自己写的前端库,并骗骗 star(库都是在实际项目中大量运用过的)的更多相关文章

  1. Go1.13 标准库的 http 包爆出重大 bug,你的项目中招了吗? 原创: 王亚楼 Go语言中文网 今天

    Go1.13 标准库的 http 包爆出重大 bug,你的项目中招了吗? 原创: 王亚楼 Go语言中文网 今天

  2. webpack前端构建工具学习总结(四)之自动化生成项目中的html页面

    接续上文:webpack前端构建工具学习总结(三)之webpack.config.js配置文件 插件的介绍文档:https://www.npmjs.com/package/html-webpack-p ...

  3. [转]在VS2010 VC++项目中引用Lib静态库(以Openssl为例)

    本文转自:http://kb.cnblogs.com/page/94467/ Openssl是个为网络通信提供安全及数据完整性的一种安全协议,囊括了主要的密码算法.常用的密钥和证书封装管理功能以及SS ...

  4. [学习笔记] 在Eclipse中添加用户库 Add User Libraries ,在项目中引用用户库

    如果还没有安装Eclipse, 则请参考前文:  [学习笔记] 下载.安装.启动 Eclipse(OEPE) 添加用户库 本文主要介绍在项目中直接使用第三方库的情况.就是把第三方的jar文件直接放到某 ...

  5. Python - 超好用的第三方库pathlib,快速获取项目中各种路径

    前言 之前曾介绍过Python的os库详细使用方式,具体可看看这篇博文:https://www.cnblogs.com/poloyy/p/12341231.html 博主在学完os库之后,就开始投入使 ...

  6. 我想写一个前端开发工具(一):在npm发布模块

    有必要说说我为什么要开始写这个,正文从下面的第一条开始 我最近忙于公司的项目,一直没有抽出时间来写文章.本来想每个月写一片文章,保质保量,无奈上个月没有坚持. 这段时间有点忙,主要是由于公司业务调整, ...

  7. 【干货】分享几个写 demo 的思路

    好久没有动笔,最近发现了一个新的写 demo 的思路,仔细一想,自己仿佛积累了不少写 demo 的思路和想法,总结一下,抛砖引玉. 本文所说 demo 主要分以下三种: 本地 demo 外链 demo ...

  8. 分享几个写 demo 的思路

    好久没有动笔,最近发现了一个新的写 demo 的思路,非常有意思.仔细一想,自己仿佛积累了不少写 demo 的思路和想法,总结一下,抛砖引玉. 本文所说 demo 主要分以下三种: 本地 demo 外 ...

  9. 公司内部技术分享之Vue.js和前端工程化

    今天主要的核心话题是Vue.js和前端工程化.我将结合我这两年多的工作学习经历来谈谈这个,主要侧重点是前端工程化,Vue.js侧重点相对前端工程化,比重不是特别大. Vue.js Vue.js和Rea ...

随机推荐

  1. canvas粒子时钟

    前面的话 本文将使用canvas实现粒子时钟效果 效果展示 点阵数字 digit.js是一个三维数组,包含的是0到9以及冒号(digit[10])的二维点阵.每个数字的点阵表示是7*10大小的二维数组 ...

  2. 基于机器学习的web异常检测

    基于机器学习的web异常检测 Web防火墙是信息安全的第一道防线.随着网络技术的快速更新,新的黑客技术也层出不穷,为传统规则防火墙带来了挑战.传统web入侵检测技术通过维护规则集对入侵访问进行拦截.一 ...

  3. form表单的两种提交方式,submit和button的用法

    1.当输入用户名和密码为空的时候,需要判断.这时候就用到了校验用户名和密码,这个需要在jsp的前端页面写:有两种方法,一种是用submit提交.一种是用button提交.方法一: 在jsp的前端页面的 ...

  4. Linux驱动技术(五) _设备阻塞/非阻塞读写

    等待队列是内核中实现进程调度的一个十分重要的数据结构,其任务是维护一个链表,链表中每一个节点都是一个PCB(进程控制块),内核会将PCB挂在等待队列中的所有进程都调度为睡眠状态,直到某个唤醒的条件发生 ...

  5. Sql 知识点小结

    使用数据库的好处: 1.安全 2.支持多用户操作 3.误删数据比较容易恢复 4.存储较大容量的数据MySql: MYsql AB公司开发的数据库, 现在归属Oracle公司,开元的关系型数据库RDBM ...

  6. 用js实现文字提示层 ---总结

    文字提示层在项目中应该是比较常见的,我工作中项目中就用到了,原理是一样,只不过形式不一样,今天通过看视频学习,学会了,总结下: 首先,页面效果如下:  需求: 当鼠标移入到红色字体是,提示框会显示在下 ...

  7. ZooKeeper的不同类型的Znodes

    在ZooKeeper中有3个不同类型的znodes:persistent, ephemeral, sequential Persistent Znodes(默认)在ZooKeeper中,这是默认的zn ...

  8. java IoC

    IoC,控制反转,是spring的核心,通俗点讲就是我们不必再自己去用new创建对象了,通过l配置将类注入到IoC容器中,在启动时,IoC容器去帮我们创建对象,并管理其依赖关系,这种实现方式叫做DI, ...

  9. 剑指offer编程题Java实现——二维数组中的查找

    题目描述 在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数.   下面是我实现的代码 ...

  10. MySQL入门笔记(一)

    一.数据类型 1. 整型 2. 浮点型 3. 字符型 4. 日期时间型 二.数据库操作 1. 创建库 CREATE {DATABASE | SCHEMA} [IF NOT EXISTS] db_nam ...