分享一些自己写的前端库,并骗骗 star(库都是在实际项目中大量运用过的)
最近一两年在一些项目上,通过实际需求出发,编写了一些库在项目中使用,现在将这些项目都稍微整理了一下开源了出来,也许也有刚好能够你也用得上的,顺便也骗一下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(库都是在实际项目中大量运用过的)的更多相关文章
- Go1.13 标准库的 http 包爆出重大 bug,你的项目中招了吗? 原创: 王亚楼 Go语言中文网 今天
Go1.13 标准库的 http 包爆出重大 bug,你的项目中招了吗? 原创: 王亚楼 Go语言中文网 今天
- webpack前端构建工具学习总结(四)之自动化生成项目中的html页面
接续上文:webpack前端构建工具学习总结(三)之webpack.config.js配置文件 插件的介绍文档:https://www.npmjs.com/package/html-webpack-p ...
- [转]在VS2010 VC++项目中引用Lib静态库(以Openssl为例)
本文转自:http://kb.cnblogs.com/page/94467/ Openssl是个为网络通信提供安全及数据完整性的一种安全协议,囊括了主要的密码算法.常用的密钥和证书封装管理功能以及SS ...
- [学习笔记] 在Eclipse中添加用户库 Add User Libraries ,在项目中引用用户库
如果还没有安装Eclipse, 则请参考前文: [学习笔记] 下载.安装.启动 Eclipse(OEPE) 添加用户库 本文主要介绍在项目中直接使用第三方库的情况.就是把第三方的jar文件直接放到某 ...
- Python - 超好用的第三方库pathlib,快速获取项目中各种路径
前言 之前曾介绍过Python的os库详细使用方式,具体可看看这篇博文:https://www.cnblogs.com/poloyy/p/12341231.html 博主在学完os库之后,就开始投入使 ...
- 我想写一个前端开发工具(一):在npm发布模块
有必要说说我为什么要开始写这个,正文从下面的第一条开始 我最近忙于公司的项目,一直没有抽出时间来写文章.本来想每个月写一片文章,保质保量,无奈上个月没有坚持. 这段时间有点忙,主要是由于公司业务调整, ...
- 【干货】分享几个写 demo 的思路
好久没有动笔,最近发现了一个新的写 demo 的思路,仔细一想,自己仿佛积累了不少写 demo 的思路和想法,总结一下,抛砖引玉. 本文所说 demo 主要分以下三种: 本地 demo 外链 demo ...
- 分享几个写 demo 的思路
好久没有动笔,最近发现了一个新的写 demo 的思路,非常有意思.仔细一想,自己仿佛积累了不少写 demo 的思路和想法,总结一下,抛砖引玉. 本文所说 demo 主要分以下三种: 本地 demo 外 ...
- 公司内部技术分享之Vue.js和前端工程化
今天主要的核心话题是Vue.js和前端工程化.我将结合我这两年多的工作学习经历来谈谈这个,主要侧重点是前端工程化,Vue.js侧重点相对前端工程化,比重不是特别大. Vue.js Vue.js和Rea ...
随机推荐
- KB奇遇记(4):困难重重的选型
在以往的工作经历中,虽然也会出现公司的一些规章制度,但我鲜少与其打交道,也极少听说.但是来KB这里,突然发现公司居然并没有给我配备电脑!!原因是制度上并没有写IT人员入职需要配备电脑,尔后通过特批流程 ...
- page cache 与free
我们经常用free查看服务器的内存使用情况,而free中的输出却有些让人困惑,如下: 先看看各个数字的意义以及如何计算得到: free命令输出的第二行(Mem):这行分别显示了物理内存的总量(tota ...
- 【开源.NET】 分享一个前后端分离的轻量级内容管理框架
开发框架要考虑的面太多了:安全.稳定.性能.效率.扩展.整洁,还要经得起实践的考验,从零开发一个可用的框架,是很耗时费神的工作.网上很多开源的框架,为何还要自己开发?我是基于以下两点: 没找到合适的: ...
- 如何让微信小程序快速接入七牛云
如果你确定用七牛运行小程序的话,给大家分享一个九折优惠码:61d1fd4d1 月 9 日 微信小程序正式发布,小程序终于揭开了它神秘的面纱,开发者对小程序的追捧更是热度不减.从小程序的热门应用场景来看 ...
- C++编程练习(10)----“图的最小生成树“(Prim算法、Kruskal算法)
1.Prim 算法 以某顶点为起点,逐步找各顶点上最小权值的边来构建最小生成树. 2.Kruskal 算法 直接寻找最小权值的边来构建最小生成树. 比较: Kruskal 算法主要是针对边来展开,边数 ...
- C++编程练习(6)----“实现简单的队列的链式存储结构“
队列的链式存储结构,其实就是线性表的单链表,只不过它只能尾进头出.简称链队列. 实现代码如下: /* LinkQueue.h 头文件 */ #include<iostream> #defi ...
- 【Java】Objects 源码学习
2017-02-10 by 安静的下雪天 http://www.cnblogs.com/quiet-snowy-day/p/6387321.html 本篇概要 Objects 与 Object ...
- view里面的tableview顶部被view的导航栏盖住了的问题
在你要显示的控制器的viewDidLoad中添加代码 self.edgesForExtendedLayout = UIRectEdgeNone; 另外记住tableView要遵循代理cell才能显示. ...
- 原生js实现轮播图
原生js实现轮播图 很多网站上都有轮播图,但找到一个系统讲解的却很难,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计 ...
- 利用AForge.NET 调用电脑摄像头进行拍照
当然了,你需要去官网下载类库,http://www.aforgenet.com/ 调用本机摄像头常用的组件: AForge AForge.Controls AForge.Imaging AForge. ...