首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
探索世界的好奇心万岁
Udacity
网易公开课
Godel, Escher, Bach: An Eternal Golden Braid
V2EX  ›  分享发现

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

  •  
  •   coffeedeveloper · 2017-03-19 16:32:19 +08:00 · 1192 次点击
    这是一个创建于 994 天前的主题,其中的信息可能已经有所发展或是发生改变。

    最近一两年在一些项目上,通过实际需求出发,编写了一些库在项目中使用,现在将这些项目都稍微整理了一下开源了出来,也许也有刚好能够你也用得上的,顺便也骗一下 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 ,激励一下我^_^

    2 回复  |  直到 2017-03-20 10:17:10 +08:00
        1
    VaneHay   2017-03-19 16:39:51 +08:00
    火钳留名 谢谢分享
        2
    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 ,增加判断是否拥有某个属性
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   4192 人在线   最高记录 5043   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 26ms · UTC 07:17 · PVG 15:17 · LAX 23:17 · JFK 02:17
    ♥ Do have faith in what you're doing.