2017-09-28 11:45  瀏覽次數(shù)：45

在建立Web應(yīng)用時,，通常都需要用到一些有用的UI組件。無論應(yīng)用中需要的是日歷,，滑塊,，圖形或其它用于提升或簡化用戶交互的組件，那么都面臨兩種選擇：要么自己來創(chuàng)建這些組件,，要么使用現(xiàn)有的組件功能,。

自行開發(fā)這些組件是復雜并耗時的，通常會花費大量的時間來獨自完成這些組件,，這也正是UI庫和框架存在的意義?，F(xiàn)存的這些庫簡化了創(chuàng)建UI組件的過程。你可以直接利用現(xiàn)有的框架,，并自定義它們來滿足自己的需求,。

目前正在廣泛使用的框架之一就是jQuery UI,。這是一組擴展的使用jQuery構(gòu)建的部件、效果和主題,，分為一組一組的形式,。既可以在單個軟件包中下載jQuery UI的所有元素，也可以選擇只下載感興趣的組件和功能,。使用這樣的控件集能夠為組件創(chuàng)建出一致的外觀,，并允許以更少的投入快速創(chuàng)建出應(yīng)用。

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

Kendo UI

這是一個付費框架，Kendo UI Framework提供了一系列超過70個用于加速開發(fā)過程的組件,。這些組件是響應(yīng)式的,、可設(shè)置主題的、快速的和高度可定制的,。

以下講解Kendo UI的幾件事情以及如何使用Kendo UI來創(chuàng)建炫酷的交互元素,。

首先這些組件是由Telerik開發(fā)的。與其它框架不同的是,，這些小部件僅使用JS,，并且是從頭開始構(gòu)建的，根本不需要jQuery,。即使在移動設(shè)備上查看,，組件也是快速,，平穩(wěn)并且穩(wěn)定的,。

說到移動設(shè)備，這也是Kendo UI擅長的領(lǐng)域之一,。這些組件的建立考慮到了移動設(shè)備,，根據(jù)組件被設(shè)置的位置，提供了響應(yīng)式的和自適應(yīng)的布局,。根據(jù)是否在移動設(shè)備上顯示,，大多數(shù)小部件都會進行相應(yīng)的調(diào)整和更改，這是一個很好的功能,。下面是一個滑塊組件,，它會根據(jù)屏幕尺寸自動調(diào)整。

從實施的角度來看,，這些控件也是經(jīng)過深思熟慮的,。開發(fā)人員既可以在JS中進行設(shè)置,，也可以在服務(wù)器端設(shè)置（例如通過PHP輸出）。除了Kendo UI的web應(yīng)用方面,，這個框架的一些分支還可以用于Android和iOS,。

另外，Kendo UI是使用AngularJS的組件集成的,。這是一個使用UI元素從頭創(chuàng)建的完整系統(tǒng),，能夠完美匹配你的Angular項目。如果你想要使用Angular,，那么Kendo UI已經(jīng)支持了,。

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

10月底會有一堂由Kendo UI的廠商工程師主講的免費公開課,，主要目的在于講解Kendo的使用技巧、新版本特性,，有興趣的朋友可以去看看一看,。（Kendo UI 公開課）

Wijmo

這是一個付費框架。Wijmo是一系列使用TypeScript 編寫的自定義JavaScript控件,，用于創(chuàng)建快速,、響應(yīng)式的和可擴展的UI控件。Wijmo提供了廣泛的控件,，并支持多個JS框架,，如React，Angular和Vue,。

Wijmo支持一系列控件,，其中大多數(shù)都集中在數(shù)據(jù)可視化和輸入方面，如圖表,，儀表,，輸入控件和網(wǎng)格控件。雖然其它框架提供了一系列基本控件,，如對話或布局控件,，但Wijmo更加專注于數(shù)據(jù)。

有趣的一點是,，Wijmo 5構(gòu)建在更現(xiàn)代化的標準之上,，因此在IE8上不起作用，此時就需要Wijmo的舊版本,。Wijmo 3是基于jQuery,，所以它支持直到在IE6上使用。Wijmo提供的這種版本選擇方式,，對開發(fā)人員來說是一件很酷的事情,，因為開發(fā)人員能夠根據(jù)自己應(yīng)用的具體運行場景來自行選擇究竟是使用Wijmo 3還是Wijmo 5,。

Wijmo的網(wǎng)站上有一個“資源管理器”，顯示了所有的控件,，并允許調(diào)整設(shè)置,。這是一個有趣的工具，有助于了解控件的外觀和感覺,。

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

在選擇新的框架時，如果有較好的文檔會變得非常好,。如果你查想Wijmo的圖表模塊（和代碼示例）,，那么可以在demo page頁面找到FlexChart demo，以便了解它是如何工作的,。Wijmo開發(fā)者的博客也會經(jīng)常更新,，博客中會提供一些有用的提示，系統(tǒng)的亮點和各種各樣的想法,。

Wijmo網(wǎng)站上的控件是很有趣的,。每個控件都允許調(diào)整其顯示方式，并為自定義功能提供回調(diào)以便根據(jù)需要對其進行調(diào)整,。

Wijmo為產(chǎn)品提供了免費試用期,，如果用于商業(yè)目的，則需要購買授權(quán),。如果想單獨購買Wijmo5,，也是可以的。如果需要.NET / Xamarin上的控件,，則需要最高的enterprise licensing授權(quán),。

今年8月葡萄城的工程師針對Wijmo5做了一堂公開課，想要學習上手的可以看一看課程視頻,。

Webix

這是一個免費/付費框架,。Webix為開發(fā)人員提供了一種快速簡便的構(gòu)建常見UI元素的方式。它包含了一系列數(shù)據(jù)可視化,、布局,、導航和編輯控件。雖然這個框架與jQuery UI共享一些組件,，但Webix擴展了jQuery UI并提供了一些不同于jQuery UI中常用的組件。

Webix文檔具有很好的幫助作用,。所有控件都帶有一個API參考指南,，其中涵蓋了控件的所有方法，屬性和事件,。此外,，大多數(shù)控件都具有一些樣例,，用于準確的展示控件功能。這些閱讀友好的文檔能起到重要作用,，這也是Webix開發(fā)者用心編寫文檔的結(jié)果,。

另外一點值得注意的是，Webix開發(fā)者經(jīng)常會在博客上發(fā)布一些內(nèi)容,，其中有幾個帖子提供有用的建議和實際的例子,。雖然框架很多，但是一個內(nèi)容持續(xù)更新的框架是非常有價值的,。

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

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

這些額外的付費附加件是很詳細的小部件,，使用這些小部件可以抽象化構(gòu)建組件的復雜性，讓你專注于自定義功能和樣式方面,。

總的來說,，免費的小部件是很穩(wěn)固的，提供了大量的功能,。既然可以免費獲得一些很好的控件,，那么付費版就需要好好考慮是否值得了。

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

JQwidgets

這是一個半付費/付費框架。JQWidgets是一個jQuery驅(qū)動的框架,，用于為網(wǎng)站建立響應(yīng)式,、快速、強大的UI組件,。JQWidget的組件主要是使用jQuery,，并提供了交互式，動態(tài)和高度可定制的小部件,。

JQWidget有一個易于使用和會被監(jiān)視的論壇,，論壇上經(jīng)常會有博客更新。

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

另外,，值得一提的是JQWidget支持React，Angular甚至ASP .NET組件,。如果你傾向于其中一個,，那么這個框架會為你節(jié)省很多時間開發(fā)。

JQWidgets提供半自由和付費兩種方式,。非商業(yè)性使用是允許的,。但是，如果用于商業(yè)目的,，那么必須購買授權(quán),。

EasyUI

這是一個半付費/付費框架。EasyUI是一個擴展jQuery部件的集合,，用于創(chuàng)建新式的,，交互式網(wǎng)站和web app的交互。使用EasyUI,，你可以使用HTML標記或者JavaScript來創(chuàng)建常用的UI元素,。

EasyUI的設(shè)計可能與我們以前見到的一些UI框架不同。雖然EasyUI的默認樣式可能會讓你毫無靈感,，但EasyUI附帶了一個非常棒的實時主題編輯器,，可讓實現(xiàn)字體大小，文字顏色,，背景顏色,，位置以及其他常見屬性的設(shè)置。最重要的是,，它允許直接訪問CSS,，以便讓你構(gòu)建出一個適合的主題。

下面就是“Material Design”的主題,。

EasyUI的文檔簡單直觀,。所有的控件顯示在左側(cè)，右側(cè)顯示相關(guān)信息,。每個控件都附帶一個示例截圖,、示例代碼，然后是所有的屬性,、方法和事件,。在主演示頁，可以快速查看Demo和每一個控件,。例如,，Panel Control演示了如何使用自定義控件，嵌套面板和其它元素,。

如果用于非商業(yè)用途,，jQuery EasyUI是免費的，但如果用于開發(fā),，則需要授權(quán),。

總的來說，EasyUI是一個堅實的框架,，但是網(wǎng)站和文檔比較舊,。

總結(jié)：

能夠完美代替或補充jQuery UI的框架有很多，其中一大部分都是需要付費的,。如果你正在尋求一個好的解決方案,，那么既可以使用jQuery UI的開源社區(qū)，也可以購買付費框架,。這需要從控件功能和控件價格去綜合考慮衡量,，以便選擇最適合自己的框架。