前端UI框架的认识

zcz123

浏览: 157557 次
性别:
来自: 厦门

最近访客更多访客>>

mhx1535

spedit

josephgch

偶然——相逢

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

一、jQWidgets

jqxWidgets 是一个复杂的、创新的 UI 部件库，基于 jQuery 开发，可让用户开发非常专业的、跨浏览器支持的 Web应用，主要特点：

Feature complete widgets for jQuery
Rich functionality and great performance.
Search-engine friendly.
Quick to download, easy to setup, well supported and well documented.
4 major quarterly releases.
Guaranteed 24h support time for licensed developers Mon-Fri.
Outstanding technical assistance provided by software developers.
Free fully functional Download.
Free upgrades for a full calendar year.
Easy CSS styling.
Ready to use, built-in Themes
Unique and completely customizable architecture for JQuery widgets.
Multiple code samples are provided to accelerate your learning.

在线演示：http://www.jqwidgets.com/jquery-widgets-demo

二、LigerUI

LigerUI 是基于jQuery 的UI框架，其核心设计目标是快速开发、使用简单、功能强大、轻量级、易扩展。简单而又强大，致力于快速打造Web前端界面解决方案，可以应用于.net,jsp,php等等web服务器环境。

三、Kendo UI

Kendo UI是一个强大的框架用于快速HTML5 UI开发。基于最新的HTML5、CSS3和JavaScript标准。

Kendo UI包含了开发现代JavaScript开发所需要的所有一切，包括：强大的数据源，通用的拖拉（Drag-and-Drop）功能，模板，和UI控件。

在线演示：http://demos.kendoui.com

四、B-JUI

B-JUI (Best jQuery UI) 前端管理框架

五、jQuery EasyUI

jQuery EasyUI 为网页开发提供了一堆的常用UI组件，包括菜单、对话框、布局、窗帘、表格、表单等等组件。

六、跨浏览器的RIA框架ExtJS

ExtJS 主要用来开发RIA富客户端的AJAX应用，主要用于创建前端用户界面，与后台技术无关的前端ajax框架。因此，可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。ExtJs最开始基于YUI技术，由开发人员 JackSlocum开发，通过参考JavaSwing等机制来组织可视化组件，无论从UI界面上CSS样式的应用，到数据解析上的异常处理，都可算是一款不可多得的JavaScript客户端技术的精品。

Ext的UI组件模型和开发理念脱胎、成型于Yahoo组件库YUI和Java平台上Swing两者，并为开发者屏蔽了大量跨浏览器方面的处理。相对来说，EXT要比开发者直接针对DOM、W3C对象模型开发UI组件轻松。

特点如下：

高性能, customizable UI widgets
Well designed, documented and extensible Component model
Commercial and Open Source licenses available

更多的例子请看这里：http://extjs.com/deploy/dev/examples/samples.html

七、HTML的Web框架AngularJS

Angular JS (Angular.JS) 是一组用来开发 Web 页面的框架、模板以及数据绑定和丰富 UI 组件。它支持整个开发进程，提供 Web 应用的架构，无需进行手工 DOM 操作。 AngularJS 很小，只有 60K，兼容主流浏览器，与 jQuery 配合良好。

数据绑定可能是 AngularJS 最酷最实用的特性。它能够帮助你避免书写大量的初始代码从而节约开发时间。一个典型的 Web 应用可能包含了 80% 的代码用来处理，查询和监听 DOM。数据绑定使得代码更少，你可以专注于你的应用。

传统来说，当 Model 变化了。开发人员需要手动处理 DOM 元素并且将属性反映到这些变化中。这个一个双向的过程。一方面，Model 变化驱动了 DOM 中元素变化，另一方面，DOM 元素的变化也会影响到 Model。这个在用户互动中更加复杂，因为开发人员需要处理和解析这些互动，然后融合到一个 Model 中，并且更新 View。这是一个手动的复杂过程，当一个应用非常庞大的时候，将会是一件非常费劲的事情。

特性二：模板

在 AngularJS 中，一个模板就是一个 HTML 文件。但是 HTML 的内容扩展了，包含了很多帮助你映射 Model 到 View 的内容。

HTML 模板将会被浏览器解析到 DOM 中。DOM 然后成为 AngularJS 编译器的输入。AngularJS 将会遍历 DOM 模板来生成一些指导，即，directive（指令）。所有的指令都负责针对 View 来设置数据绑定。

我们要理解 AuguarJS 并不把模板当做 String 来操作。输入 AngularJS 的是 DOM 而非 string。数据绑定是 DOM 变化，不是字符串的连接或者 innerHTML 变化。使用 DOM 作为输入，而不是字符串，是 AngularJS 区别于其它的框架的最大原因。使用 DOM 允许你扩展指令词汇并且可以创建你自己的指令，甚至开发可重用的组件。

特性三：MVC

针对客户端应用开发 AngularJS 吸收了传统的 MVC 基本原则。MVC 或者 Model-View-Controll 设计模式针对不同的人可能意味不同的东西。AngularJS 并不执行传统意义上的 MVC，更接近于 MVVM（Model-View-ViewModel)。

特性四：依赖注入（Dependency Injection，即 DI）

AngularJS 拥有内建的依赖注入子系统，可以帮助开发人员更容易的开发，理解和测试应用。

DI 允许你请求你的依赖，而不是自己找寻它们。比如，我们需要一个东西，DI 负责找创建并且提供给我们。

特性五：Directives（指令）

指令是我个人最喜欢的特性。你是不是也希望浏览器可以做点儿有意思的事情？那么 AngularJS 可以做到。
指令可以用来创建自定义的标签。它们可以用来装饰元素或者操作 DOM 属性。

该条目收录的是 1.x 版本，因为官方将 1.x 系列与 Angular 2 及后面的版本分开维护，所以有了这个条目 — Angular。

八、Web前端UI框架Bootstrap

Bootstrap是快速开发Web应用程序的前端工具包。它是一个CSS，HTML和JS的集合，它使用了最新的浏览器技术，给你的Web开发提供了时尚的版式，表单，buttons，表格，网格系统等等。