2016年31款輕量高效的開源JavaScript插件和庫

目前有不少網站設計師和開發者喜歡使用由JavaScript開發的插件和庫，但同時面臨一個苦惱的問題：它們中的大多數實在是太累贅並且經常下降網站的性能。其實，其中也有很多輕量級的插件和庫，它們不只輕巧有用，並且不會影響網站的性能。本文就爲你們整理了2016年以來30多款輕量級Javascript插件和庫的列表，這些工具服務於特定的目標，而且它們可以很是有效和高效地實現目標。

無論你想建立一個圖片庫、一個滑動效果，個性化菜單仍是其餘接口元素，你均可以用這些插件和庫輕易的實現。同時，你還可使用這些插件爲網站增長出色的功能，例如GIF和圖片預覽、吸引人的網站圖標及其餘。

這些插件和庫都是很是簡單的編碼而且能夠輕易實現。你之後確定會發現它們對於你的Web項目很是有用。

0、baguetteBox.js

baguetteBox.js是一個簡單易用的響應式圖像燈箱效果腳本，並且在移動設備上支持滑動手勢，徹底使用Javascript編寫。（壓縮後大約2.7KB）

DEMO：https://feimosi.github.io/baguetteBox.js/

一、ScrollReveal

ScrollReveal插件使用戶可以無比輕鬆地建立桌面和移動瀏覽器的網頁滾動動畫（壓縮後大約3.3KB）

請各位自行打開DEMO頁面感覺一下動畫效果。：）

DEMO：https://scrollrevealjs.org/

二、Marginotes

Marginotes，使用jQuery實現的添加旁註插件，快速，炫酷。

DEMO：http://francisco.dance/

三、Loud Links

LoudLinks是一個輕量級的JavaScript庫用於添加交互聲音到您的站點。它經過建立HTML5音頻元素並用它來播放MP3或OGG音頻文件來實現這個功能。（約1.5KB）

仍是煩請各位打開下面的連接感覺一下效果。：）

DEMO：http://loudlinks.rocks/#examples

四、Bricks.js

Bricks.js，是一款超快的用於固定寬度元素的「磚石」佈局生成器

能夠在DEMO頁面輸入所需的磚塊個數，查看生成的效果（每次都會隨機變化）

DEMO：http://callmecavs.com/bricks.js/

五、MediumEditor

MediumEditor，使用了Vanilla Javascript框架。MediumEditor是一個輕量級的（28KB）仿Medium.com的所見即所得在線編輯器工具欄。還有一個可用的MediumEditor擴展和主題。

DEMO：https://yabwe.github.io/medium-editor/

六、Philter

Philter可讓你經過使用HTML屬性控制CSS濾鏡，使用它以後，當你將光標移動到圖片上的時候，圖片上會加載CSS濾鏡。不管是做爲jQuery插件仍是Vanilla Javascript框架均可用。

DEMO：http://specro.github.io/Philter/

七、SuperEmbed.js

SuperEmbed.js是一個Javascript庫，可檢測出網頁上的內嵌視頻並使他們可以變成響應式元素（壓縮後約1.6KB）

DEMO：https://jsfiddle.net/h6x04LuL/

八、Substance

Substance是一個基於Web的內容編輯JavaScript庫。它給你提供全部你須要用於建立自定義編輯器和基於Web的發佈系統的工具。

DEMO：http://substance.io/

9 List.js

List.js是一個輕量級的和快速的Vanilla JavaScript框架腳本，爲列表、表格或其餘任何HTMLL標籤增長了搜索，排序，過濾器和靈活性等元素

DEMO：http://www.listjs.com/

十、jqGifPreview

jqGifPreview是一個簡單的jQuery插件，用於建立GIF預覽，就像你在Facebook上看到的。

DEMO：http://demo.sodhanalibrary.com/angular/gif_preview/jqGifPreview/demo.html

十一、Datedropper.js

Datedropper.js是一個jQuery插件，爲您提供了一種簡單的方法用於在輸入區域輸入日期。

DEMO：http://felicegattuso.com/projects/datedropper/

十二、jfMagnify

jfMagnify是一個jQuery插件用於在任何HTML元素建立放大鏡效果，不只僅是圖像。

DEMO：https://github.com/fonstok/jfMagnify/tree/master/demo

1三、jQuery formBuilder

jQuery formBuilder是一個新的jQuery插件，可經過拖放的方式快速生成表格

DEMO：https://formbuilder.online/

1四、Popper.js

Popper.js是一個輕量級的庫用於管理工具提示和彈窗效果。你能夠快速輕易地使用一行代碼放置工具提示控件。（壓縮後約4KB）

DEMO：https://popper.js.org/

1五、Image Blur Plugin

Image Blur Plugin是一個輕量級的跨瀏覽器jQuery插件，用於生成圖像模糊效果

DEMO：https://msurguy.github.io/background-blur/

1六、InlineTweet.js

InlineTweet.js，你能夠經過它輕易地用網頁上的任何文字建立一個推特連接。你所須要作的是用data-inline-tweet將推特文字包裹到一個容器

能夠點擊DEMO，體驗該插件的效果

DEMO：http://ireade.github.io/inlinetweetjs/

1七、iMissYou.js

iMissYou.js是個輕便小巧的jQuery插件用於當用戶離開你的網頁時，改變網頁的標題和圖標

1八、SweetAlert2

SweetAlert2是一個顏值很高並且能夠自定義的警告彈出窗口插件，能夠代替Javascript的彈出窗口

DEMO：https://limonte.github.io/sweetalert2/

1九、Turntable.js

Turntable.js是一個響應式的jQuery滑塊插件，會在當你的鼠標(或手指)掃過一個存放了一批圖片的容器時產生翻轉效果

DEMO：http://polarnotion.github.io/turntable/

20、Push.js

Push.js是一個跨瀏覽器的Javascript桌面通知插件

DEMO：http://nickersoft.github.io/push.js/

2一、Bideo.js

Bideo.js是一個Javascript庫，能很是輕易添加全屏背景視頻到網頁

DEMO：https://rishabhp.github.io/bideo.js/

2二、Microlight.js

Microlight.js是一個輕量級的代碼高亮庫，適用於任何編程語言，這大大提升了代碼可讀性（約2.2KB）

DEMO：https://asvd.github.io/microlight/

2三、Algolia Places

Algolia Places是一個Javascript庫，能讓你在網頁輕易實現搜索欄自動完成功能

DEMO：https://community.algolia.com/places/

2四、flatpickr

flatpickr基於vanilla Javascript框架，是一個輕量級的日期標記和日曆插件

DEMO：https://chmln.github.io/flatpickr/

2五、Slidebars

Slidebars是一個jQuery框架，用於爲你的網頁或web應用添加off-canvas菜單和側邊欄

DEMO：https://www.adchsm.com/slidebars/

2六、anime.js

anime.js是一個靈活輕便的JavaScript動畫庫。它經過CSS，獨立變換，SVG，DOM屬性和JS對象實現。這個GIF沒有表現出它真正的效果，你們能夠訪問主頁看一下，動畫至關酷炫。

DEMO：http://codepen.io/collection/XLebem/

2七、Cleave.js

Cleave.js會在你輸入時格式化你的標籤裏面的內容

DEMO：http://nosir.github.io/cleave.js/

2八、Skippr

Skippr是一個超級簡單的jQuery輕量級幻燈片插件

DEMO：http://austenpayan.github.io/skippr/

2九、iziModal.js

iziModal.js是一個優雅的，響應式的，靈活和輕便的jQuery插件。

DEMO：http://izimodal.marcelodolce.com/

30、Lightgallery.js

Lightgallery.js是一個功能齊全的JavaScript圖像燈箱插件，沒有任何依賴。

DEMO：https://sachinchoolur.github.io/lightgallery.js/

&& https://codepen.io/sachinchoolur/pen/qNyvGW

 

 

 

 

 

 

 

 

 

 

 

 

 

9 個用於移動APP開發的頂級 JavaScript 框架

 

從技術上講，iOS、Android和Windows Phone上的移動app使用了不一樣的編程語言進行編碼。iOS app使用Objective-C，Android app使用Java，而Windows Phone app使用.NET。可是，掌握必定量的JavaScript、CSS和HTML知識，你就能夠構建超棒的移動app。所以，在本博客中，咱們將討論用於開發移動app的頂級JavaScript框架。

對於Web開發而言，JavaScript是一個有前途的編程語言，而且在不久的未來它將依然在這個領域大放光彩。JavaScript在移動app開發上也有一樣的影響嗎？讓咱們一塊兒來看看ValueCoders研究發現的針對移動app開發的前9個JavaScript框架。

1）PhoneGap / Cordova

PhoneGap（Apache Cordova的發行版）是一個軟件開發框架，可幫助重用你現有的Web開發技能，從而快速構建使用HTML，CSS和JavaScript的混合移動應用程序。所以，確切的說這並不是是JavaScript框架。可是，在開始以前，瞭解PhoneGap很重要。

PhoneGap是Web應用程序代碼和移動操做系統API之間的媒介。此圖將幫助你更好地理解：

在PhoneGap的幫助下，你可使用用JavaScript，HTML和CSS編寫的相同代碼，併爲Android和iOS等移動操做系統生成API。

除了PhoneGap，還有一些框架能夠幫助將JavaScript文件轉換爲移動API。Xamarin，Ionic，Corona就是這樣的框架。

2）Titanium

Appcelerator的Titanium是一個開源的應用程序開發平臺，容許你使用Web技術，如HTML，JavaScript和CSS建立原生app（移動的和桌面的）。Titanium Mobile SDK是當今最流行的跨平臺移動開發解決方案之一，擁有超過916109名移動開發人員和使用Accelerator支持app的460,587,474個設備。

下面是Titanium的工做原理：

3）jQuery Mobile

jQuery Mobile框架將「write less, do more」的理念提高到一個新的水平。它是用於移動的構建應用程序或移動友好網站的頂級JavaScript框架之一。

jQuery Mobile支持許多與現代平臺如Android，iOS乃至最先的平臺，如Opera Mini和Nokia Symbian兼容的用戶界面。在PhoneGap的幫助下，你能夠將jQuery Web app代碼集成到交互式iOS或Android應用程序。

4）Sencha Touch

Sencha Touch（相似於Ext JS）被認爲是爲開發人員建立快速和使人印象深入的移動應用程序提供最佳解決方案的惟一框架，且這些應用程序可在Android，iOS，Kindle Fire等平臺上運行。它帶有大量創造性和有用的組件，可高效地工做於全部類型的移動應用程序。下面就粗略地看一看功能。

這裏是上述四個框架的特徵比較

5）React Native

若是你喜歡Native移動應用程序，那麼主要有兩個選項——Xamarin和React Native。Xamarin容許你只編寫相同類型的代碼，而本地編程包括相似的界面設計工具和相似的調用。

另外一方面，React Native（來自Facebook）對本地app採用徹底不用的開發路徑。它使用JavaScript代碼，相似CSS的樣式表和全部太熟悉的相似HTML的標籤來佈局。這裏有一個圖表能夠清楚地瞭解React Native的受歡迎程度：

若是你的團隊已經React友好，那麼React Native多是一個不錯的選擇。

6）Meteor

Meteor是另外一個JavaScript框架，能夠幫助你開發交互式移動應用程序。Meteor不只容許你的JavaScript代碼用於移動應用，還可讓你持續控制你的app。使用此功能，你能夠更新JavaScript代碼而無需開發人員的幫助，並使用熱代碼推送功能以便於當即將更改部署到全部移動平臺上的用戶。

Meteor（version：1.0）的另外一個特色是它經過在手機內部存儲器中實現其miniMongo數據庫來維護數據的本地副本。此外，全部的電話到服務器數據通訊和同步由Meteor提供。（miniMongo是MongoDB API的JavaScript實現。）下面是架構：

7）NativeScript

NativeScript是一個用於從單個代碼源構建多平臺本機移動應用程序的Telerik發明。 NativeScript站點和GitHub頁面將運行時描述爲受權開發人員利用JavaScript和TypeScript（甚至Angular 2.0）去構建Android，iOS和Windows Phone的本機app，並在平臺上提供代碼。

下面是NativeScript遵循的架構：

8）Rachet

Rachet是用於移動app開發的頂級JavaScript框架中的另外一個重要元素。它旨在爲開發人員和設計人員提供構建移動Web app的框架。該框架由提供Bootstrap框架的同一團隊建立，這保證了Rachet的高質量。不管你是旨在Android，iOS，仍是二者，Ratchet 2.x都行。

9）Mobile Angular UI

頂級移動JavaScript框架之一是Mobile  Angular UI。若是你是Angular迷，那麼這個框架絕對適合你。它提供Bootstrap 3遺漏的必要的移動組件。切換，覆蓋，可滾動區域，側邊欄，絕對定位不彈跳滾動的頂部和底部導航欄，是一些要提到的功能。

然而，隨着Angular 2的發佈，概念略有改變。因此對於Angular 2的崇拜者而言，Onsen UI 2.0也是一個不錯的選擇。

寫在最後

選擇合適的JavaScript框架用於移動開發，歷來不在於特定框架能夠提供的功能數量。而是在於框架的真正功能，以及該功能如何在你的移動app開發項目中被合理應用。所以，根據你的項目須要選擇JavaScript框架用於移動開發以便於節省時間和成本。