这 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...

转载请注明出自：葡萄城控件