这 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-5-jquery-ui-alternatives/

相关阅读：

Angular vs React 最全面深入对比

开放才能进步！Angular和Wijmo一起走过的日子

Wijmo已率先支持Angular4 & TypeScript 2.2