分享一些本身寫的前端庫,並騙騙 star(庫都是在實際項目中大量運用過的)

最近一兩年在一些項目上,經過實際需求出發,編寫了一些庫在項目中使用,如今將這些項目都稍微整理了一下開源了出來,也許也有恰好可以你也用得上的,順便也騙一下star。均在項目的README中加了相關的說明。html

迷你全功能的模板引擎(壓縮版代碼不到2kb)

項目地址: https://github.com/coffeedeveloper/coffee-tmpl前端

npm包名: coffee-tmplgit

語法和ejs保持一致,只不過這個模板引擎只能用到瀏覽器,不支持layout之類的高級用法。會寫這個庫是由於不少狀況下,我須要作一些小型到中型的模板輸出,而我以爲市面上大部分的模板引擎都太大太負責了,這個庫的迷你以及支持原生的js語句,可以覆蓋大部分使用場景了。github


可配置的抽獎轉盤模板

項目地址: https://github.com/coffeedeveloper/turntablechrome

npm包名: lottery-turntablenpm

以前作抽獎活動的時候發現市面上基本上轉盤的抽獎都是採用一張背景圖片去作transition,知足不了動態增刪改獎品這樣的靈活運營需求,特地寫了一個支持兩種動畫類型(transition / requestAnimationFrame)的。是採用svg繪出整個轉盤,主要用於手機端方面的活動。數組


將js數組導出成CSV文件(解決了中文編碼的問題)

項目地址: https://github.com/coffeedeveloper/exportjs瀏覽器

npm包名: exportjssvg

在作管理後臺的時候,須要將一些表格的數據導出,之前都是讓服務端開發單獨的一個報表導出接口。但是考慮到一些簡單的情景,能夠經過遍歷列表接口,而後彙總後前端本身作報表的生成導出便可。這個庫解決了相似中文編碼之類的問題。在只針對管理後臺的狀況下是可以直接運用的(咱們只限制使用人員用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,激勵一下我^_^

相關文章
相關標籤/搜索