构建前端UI组件的新思路

核心提示：前端UI组件，目前流行的实现方式大多源自传统客户端的UI设计体系，构建前端UI组件的新思路，无论是早期的Bindows，还是近几年兴盛的ExtJS，换什么角度去思考？什么角度才是合适的？这离不开具体场景，下面以一个实例来说明，其UI组件都在模仿客户端软件，代码实现建立在复杂的继承体系上

前端UI组件，目前流行的实现方式大多源自传统客户端的UI设计体系。无论是早期的Bindows，还是近几年兴盛的ExtJS，其UI组件都在模仿客户端软件，代码实现建立在复杂的继承体系上。好处是可以构建出和客户端体验一致的一整套UI组件，但弊端也很明显：组件长得都差不多，代码则继承太深，牵三挂四，不够轻便。

如何才能让前端UI组件轻便灵活起来呢？首先得意识到Web UI设计有自己的独特性。Web页面可分为两种：一种是以展现信息为主的Web页面（web page），另一种是以操作信息为主的Web应用（web app）。对复杂的Web应用来说，可以采用ExtJS等类库来构建类客户端体验。但是，越来越多的Web应用已逐步脱离模仿客户端的阶段，开始从Web 的独特性出发，将传统UI组件的功能融入到Web页面中。

举一个例子：国内的Web邮箱，无论是163还是QQ邮箱，都会让人联想起Outlook或Foxmail等客户端软件。这种模仿成本很高，然而带来的效果个人觉得却不是很好。反观Gmail，整体UI设计，简明轻快，但功能一点也不逊色。在Gmail里，看不到Tree，看不到DataGrid，脱离了这些传统UI组件的框框，将功能融入到Web元素里，反而让用户更自然、更高效。

前端UI组件的Web特性，需要我们打破传统思维，换一个角度，重新去思考UI组件的基本组成要素。换什么角度去思考？什么角度才是合适的？这离不开具体场景。下面以一个实例来说明。

在淘宝页面中，以下是几个常见的UI组件：