這 5 個前端組件庫，可讓你放棄 jQuery UI

在創建Web應用時，一般都須要用到一些有用的UI組件。不管應用中須要的是日曆，滑塊，圖形或其它用於提高或簡化用戶交互的組件，那麼都面臨兩種選擇：要麼本身來建立這些組件，要麼使用現有的組件功能。

自行開發這些組件是複雜並耗時的，一般會花費大量的時間來獨自完成這些組件，這也正是UI庫和框架存在的意義。現存的這些庫簡化了建立UI組件的過程。你能夠直接利用現有的框架，並自定義它們來知足本身的需求。

目前正在普遍使用的框架之一就是jQuery UI。這是一組擴展的使用jQuery構建的部件、效果和主題，分爲一組一組的形式。既能夠在單個軟件包中下載jQuery UI的全部元素，也能夠選擇只下載感興趣的組件和功能。使用這樣的控件集可以爲組件建立出一致的外觀，並容許以更少的投入快速建立出應用。

雖然jQuery UI能起到很好的做用，可是還有其它的一些框架，擁有很好的高品質控件。在這篇文章中，將會分析其中的幾個框架並作比較。

Kendo UI

這是一個付費框架，Kendo UI Framework提供了一系列超過70個用於加速開發過程的組件。這些組件是響應式的、可設置主題的、快速的和高度可定製的。

如下講解Kendo UI的幾件事情以及如何使用Kendo UI來建立炫酷的交互元素。

首先這些組件是由Telerik開發的。與其它框架不一樣的是，這些小部件僅使用JS，而且是從頭開始構建的，根本不須要jQuery。即便在移動設備上查看，組件也是快速，平穩而且穩定的。

說到移動設備，這也是Kendo UI擅長的領域之一。這些組件的創建考慮到了移動設備，根據組件被設置的位置，提供了響應式的和自適應的佈局。根據是否在移動設備上顯示，大多數小部件都會進行相應的調整和更改，這是一個很好的功能。下面是一個滑塊組件，它會根據屏幕尺寸自動調整。

從實施的角度來看，這些控件也是通過深思熟慮的。開發人員既能夠在JS中進行設置，也能夠在服務器端設置（例如經過PHP輸出）。除了Kendo UI的web應用方面，這個框架的一些分支還能夠用於Android和iOS。

另外，Kendo UI是使用AngularJS的組件集成的。這是一個使用UI元素從頭建立的完整系統，可以完美匹配你的Angular項目。若是你想要使用Angular，那麼Kendo UI已經支持了。

須要注意的是，Kendo UI不是一個免費的框架。

Wijmo

這是一個付費框架。Wijmo是一系列使用TypeScript 編寫的自定義JavaScript控件，用於建立快速、響應式的和可擴展的UI控件。Wijmo提供了普遍的控件，並支持多個JS框架，如React，Angular和Vue。

Wijmo支持一系列控件，其中大多數都集中在數據可視化和輸入方面，如圖表，儀表，輸入控件和網格控件。雖然其它框架提供了一系列基本控件，如對話或佈局控件，但Wijmo更加專一於數據。

有趣的一點是，Wijmo 5構建在更現代化的標準之上，所以在IE8上不起做用，此時就須要Wijmo的舊版本。Wijmo 3是基於jQuery，因此它支持直到在IE6上使用。Wijmo提供的這種版本選擇方式，對開發人員來講是一件很酷的事情，由於開發人員可以根據本身應用的具體運行場景來自行選擇到底是使用Wijmo 3仍是Wijmo 5。

Wijmo的網站上有一個「資源管理器」，顯示了全部的控件，並容許調整設置。這是一個有趣的工具，有助於瞭解控件的外觀和感受。

下面是Flexchart控件的圖表示例。

在選擇新的框架時，若是有較好的文檔會變得很是好。若是你查想Wijmo的圖表模塊（和代碼示例），那麼能夠在demo page頁面找到FlexChart demo，以便了解它是如何工做的。Wijmo開發者的博客也會常常更新，博客中會提供一些有用的提示，系統的亮點和各類各樣的想法。

Wijmo網站上的控件是頗有趣的。每一個控件都容許調整其顯示方式，併爲自定義功能提供回調以便根據須要對其進行調整。

Wijmo爲產品提供了免費試用期，若是用於商業目的，則須要購買受權。若是想單獨購買Wijmo5，也是能夠的。若是須要.NET / Xamarin上的控件，則須要最高的enterprise licensing受權。

Webix

這是一個免費/付費框架。Webix爲開發人員提供了一種快速簡便的構建常見UI元素的方式。它包含了一系列數據可視化、佈局、導航和編輯控件。雖然這個框架與jQuery UI共享一些組件，但Webix擴展了jQuery UI並提供了一些不一樣於jQuery UI中經常使用的組件。

Webix文檔具備很好的幫助做用。全部控件都帶有一個API參考指南，其中涵蓋了控件的全部方法，屬性和事件。此外，大多數控件都具備一些樣例，用於準確的展現控件功能。這些閱讀友好的文檔能起到重要做用，這也是Webix開發者用心編寫文檔的結果。

另一點值得注意的是，Webix開發者常常會在博客上發佈一些內容，其中有幾個帖子提供有用的建議和實際的例子。雖然框架不少，可是一個內容持續更新的框架是很是有價值的。

Webix提供了對框架的免費和付費的兩種獲取方式。免費版包含了大部分構建應用初始時會用到的功能。付費版提供了一些額外的控件，並對這些控件提供支持和幫助。

另外，付費版還提供一些很詳細的的解決方案。

這些額外的付費附加件是很詳細的小部件，使用這些小部件能夠抽象化構建組件的複雜性，讓你專一於自定義功能和樣式方面。

總的來講，免費的小部件是很穩固的，提供了大量的功能。既然能夠免費得到一些很好的控件，那麼付費版就須要好好考慮是否值得了。

若是你正在尋求一個有詳細文檔而且大部分控件是免費的UI解決方案，那麼Webix是一個好選擇。

JQwidgets

這是一個半付費/付費框架。JQWidgets是一個jQuery驅動的框架，用於爲網站創建響應式、快速、強大的UI組件。JQWidget的組件主要是使用jQuery，並提供了交互式，動態和高度可定製的小部件。

JQWidget有一個易於使用和會被監視的論壇，論壇上常常會有博客更新。

同其它框架同樣，JQWidgets的文檔也是框架的核心。JQWidgets的文檔概述了每一個小部件的工做原理、示例代碼和一個很好的演示。每一個小部件還有一個簡單易懂的API參考指南以及如何實現每一個屬性或方法的示例。

另外，值得一提的是JQWidget支持React，Angular甚至ASP .NET組件。若是你傾向於其中一個，那麼這個框架會爲你節省不少時間開發。

JQWidgets提供半自由和付費兩種方式。非商業性使用是容許的。可是，若是用於商業目的，那麼必須購買受權。

EasyUI

這是一個半付費/付費框架。EasyUI是一個擴展jQuery部件的集合，用於建立新式的，交互式網站和web app的交互。使用EasyUI，你可使用HTML標記或者JavaScript來建立經常使用的UI元素。

EasyUI的設計可能與咱們之前見到的一些UI框架不一樣。雖然EasyUI的默認樣式可能會讓你毫無靈感，但EasyUI附帶了一個很是棒的實時主題編輯器，可以讓實現字體大小，文字顏色，背景顏色，位置以及其餘常見屬性的設置。最重要的是，它容許直接訪問CSS，以便讓你構建出一個適合的主題。

下面就是「Material Design」的主題。

EasyUI的文檔簡單直觀。全部的控件顯示在左側，右側顯示相關信息。每一個控件都附帶一個示例截圖、示例代碼，而後是全部的屬性、方法和事件。在主演示頁，能夠快速查看Demo和每個控件。例如，Panel Control演示瞭如何使用自定義控件，嵌套面板和其它元素。

若是用於非商業用途，jQuery EasyUI是免費的，但若是用於開發，則須要受權。

總的來講，EasyUI是一個堅實的框架，可是網站和文檔比較舊。

總結：
可以完美代替或補充jQuery UI的框架有不少，其中一大部分都是須要付費的。若是你正在尋求一個好的解決方案，那麼既可使用jQuery UI的開源社區，也能夠購買付費框架。這須要從控件功能和控件價格去綜合考慮衡量，以便選擇最適合本身的框架。

原文連接：https://www.sitepoint.com/top...

轉載請註明出自：葡萄城控件