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

2017-03-19 16:32:19 +08:00
 coffeedeveloper

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


迷你全功能的模板引擎(压缩版代码不到 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 ,激励一下我^_^

1611 次点击
所在节点    分享发现
2 条回复
VaneHay
2017-03-19 16:39:51 +08:00
火钳留名 谢谢分享
coffeedeveloper
2017-03-20 10:17:10 +08:00
再补充一个简单的 jQuery 的语法糖插件:

项目地址 [https://github.com/coffeedeveloper/coffee-jquery-extends]( https://github.com/coffeedeveloper/coffee-jquery-extends)

给 jQuery 增加了三个方法
1 、 bings ,一次性给多个元素绑定事件,可以配合文章来理解
http://www.cnblogs.com/coffeedeveloper/archive/2013/04/19/3029922.html
2 、 serializeObject ,将表单序列化成对象,而不是数组( jQuery 默认是数组)
3 、 hasAttr ,增加判断是否拥有某个属性

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/348619

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX