2017年超棒前端相關工具類庫大薈萃

阿里云云棲社群發表於2018-01-22
原文網址 : https://juejin.im/post/5a658407518825733d692e54
前端

摘要：

又到了新的一年，在過去的2017年，我相信大家都在工作和開發中遇到了很多有趣的前端程式碼工具或者是類庫， 希望在來到的2018年， 我們依然能夠找到更多有用的輔助前端工具及其類庫。 在這篇文章中，我將介紹一組個人覺得非常實用並且有益的工具和類庫，希望對大家的工作也可以有比較大的幫助。


點此檢視原文：http://click.aliyun.com/m/40726/

又到了新的一年，在過去的2017年，我相信大家都在工作和開發中遇到了很多有趣的前端程式碼工具或者是類庫， 希望在來到的2018年， 我們依然能夠找到更多有用的輔助前端工具及其類庫。

在這篇文章中，我將介紹一組個人覺得非常實用並且有益的工具和類庫，希望對大家的工作也可以有比較大的幫助。

作為一個javascript的動畫類庫來說， 並沒有什麼非常有新鮮感的地方， 但是它最大的特色在於：效能突出。 在現在的web動畫中， 我們無法避免的會遇到效能上的問題， 我們必須去應對和解決移動裝置或者連線緩慢的問題

59420004325cc2e3e4eb

訪問以上網站，你可以看到一系列的複雜動畫效果， 但動畫效果流暢並且沒有卡頓， 不信的話，大家可以嘗試一下， 另外兩個加分點：

  • 非常專業的API

  • 非常好的callback系統設計

  • 如果你想學習前端可以來這個Q群，首先是291，中間是851，最後是189，裡面可以學習和交流，也有資料可以下載。

使用非常簡單，如下：

var el = document.querySelector(".box");
複製程式碼

var tween = KUTE.fromTo(
el,
{ translateX: 0, rotateX: 0 },
{ translateX: 100, rotateX: 25 },
{ perspective: 100, duration: 2000 }
);
tween.start();
複製程式碼
演示地址

ScrollDir

scrolldir是一個非常簡單，迷你和創意十足的js工具，可以幫助你做一些相關滾動檢測的功能

59420004325a3e593627

使用這個迷你的js，你不需要使用javascript，只需要使用css即可控制頁面佈局，程式碼如下：

[data-scrolldir="down"] .header-banner {top: -100px;}[data-scrolldir="up"] .footer-banner {bottom: -100px;}複製程式碼

線上演示

CodeSandBox

越來越多的公司開始使用vue和react來開發web應用， 因此出現了很多不同的IDE， 用來幫助開發人員使用特定類庫或者框架來開發web相關應用，CodesandBox就是其中的一個， 它可以用來開發react，vue，preact和Svelte

codesandbox的一個非常不錯的特性就是新增npm包到左邊的邊欄， 叫依賴關係。 這裡有個新增包，允許你搜尋相關的包

593f000428a63683e804

如果你的應用缺少了依賴， 這個工具也會提示出錯，並且提示新增新的包

更多功能，大家可以看看工具主站，工具不錯，大家可以體驗一下

AmplitudeJS

這是一個不依賴任何類庫的現代HTML5音訊播放器。相信很多音樂製作愛好者會非常欣賞這個web應用

593e00023f5b9c958ac6

這個播放器允許你建立自定義設計和佈局， 這有個例子：

Amplitude.init({
  songs:[{
      name:"Song Name One",
      artist:"Artist Name",
      album:"Album Name",
      url:"/path/to/song.mp3",
      cover_art_url:"/path/to/artwork.jpg"},{
      name:"Song Name Two",
      artist:"Artist Name Two",
      album:"Album Name Two",
      url:"/path/to/song.mp3",
      cover_art_url:"/path/to/artwork.jpg"},{
       name:"Song Name Three",
      artist:"Artist Name Three",
      album:"Album Name Three",
      url:"/path/to/song.mp3",
      cover_art_url:"/path/to/artwork.jpg"}]});複製程式碼
線上演示

更多超棒的類庫

BunnyJS

一個基於ES6的前端框架， 廣告詞兒如下：

如jQuery般簡單， 比jQuery UI更優越， 和React一樣強大

Keyframe-tool

一個將CSS動畫轉化成keyframe物件的命令列工具， 以便適用於web animation API

svgi

一個命令列工具，可以用來檢查SVG檔案內容， 提供svg檔案相關資訊，例如， 節點數量， 路徑， 容器，形狀， 樹狀層次等等


相關文章