前端 UI 库 OperaMasks–UI 开发团队专访

OperaMasks-UI是一款基于jQuery并提供丰富组件的前端UI库，拥有丰富的业务组件、强大的扩展能力、高度的可靠性，满足大部分业务场景需求，带给你便捷的前端开发新体验。  官网地址： http://ui.operamasks.org/  在线演示： http://ui.operamasks.org/website/demos.html  本期我们采访了OperaMasks-UI的开发团队，请他们详细介绍一下这个优秀的前端UI库。  欢迎大家推荐更多开源项目给我们，支持中国的开源项目发展，如果您和您的团队希望展示创业理念和有趣之处，或者有朋友正在创造这样的价值，请联系我们，发信到blog@csdn.com即可。

OperaMasks-UI是什么？该项目的由来？

OperaMasks-UI是一款轻量级的、基于jQuery并提供丰富组件的前端UI库，遵循LGPL开源协议，对商业使用友好。  OperaMasks团队曾在2008年发布一款基于JSF的开源WEB框架OperaMasks SDK，4年多的社区开放之路，一直受限ExtJS的License授权（OperaMasks SDK为LGPL开放协议），自有维护的ExtJS成本非常高昂且随时可能的License风险一直让OperaMasks团队发展的如履薄冰。鉴于此，OperaMasks团队2011年决定自主开发一套全新的JS前端组件库并命名为OperaMasks-UI，并持续贡献给开源社区（ http://ui.operamasks.org）。 

我们的定位是借鉴社区内成熟的前端框架，打造一款轻量级前端JS组件库，希望能够面向企业提供一款学习曲线低、定制性灵活、样式统一，且多浏览器支持、覆盖企业业务场景的前端JavaScript UI组件库。

OperaMasks-UI包含了哪些组件？  最新的OperaMasks-UIV2.0版本已经包含各类共26种组件，包含表单，布局，窗口等多个方面，分别为：  1.  表单类8种组件： 

• omCalendar：日历控件
• omCombo：下拉框控件
• omNumberfiled：数字输入框控件
• omSuggestion：Ajax提示控件
• omValidate：表单校验控件
• omAjaxsubmit： Ajax表单提交
• omFileupload：文件上传控件
• omItemSelector：项目选择器

2.  控件类8种组件： 

• OmGrid：表格控件
• omTree：树控件
• omButton：按钮控件
• omButtonbar：工具条控件
• omSlider：滑动器控件
• omMenu：菜单控件
• omProgressbar：进度条控件
• omTooltip：提示控件

3.  窗口类3种组件： 

• omMessagebox：提示信息弹出框控件
• omDialog：对话框控件
• omMessagetip：右下角弹出提示窗口控件

4.  布局类4种组件： 

• omTabs：页签布局控件
• omAccordion：抽屉布局控件
• omBorderLayout：边界布局控件
• omPanel：面板布局控件

5.  功能类3种组件：

• omDraggable：可拖拽控件
• omDroppable：可拖拽控件
• omScrollbar：自定义滚动条控件

同时还提供了总计169种的业务场景示例（http://ui.operamasks.org/website/demos.html），充分的展示组件的使用用法。

相比其他前端UI库（如jQuery UI、ExtJS等），OperaMasks-UI有哪些特点？  相比ExtJS，OperaMasks-UI具备如下特点：

• 完全的开源免费，并对商业授权友好。
• 学习曲线较低，本地化支持。
• 组件体系是按照现有国内企业业务场景定义和优化，更加轻量级。

相比jQuery-UI，OperaMasks-UI具备如下特点： 

• 提供的组件和功能更加丰富，更加面向国内的企业化应用需求。
• 本地化支持更加友好。
• 组件经过优化，性能更加优秀。
• 丰富的单元测试，全面采用Qunit测试，所有组件均有详实的单元和场景测试案例，确保组件的质量。

OperaMasks-UI的性能如何，浏览器兼容性如何？  OperaMasks-UI 目前支持IE7/8/9系列、Firefox、Chrome等，覆盖主流浏览器。  OperaMasks-UI目前在组件框架的性能测试对比中一直保持着较高的性能数据，相对各主流前端框架而言， OperaMasks-UI的整体性能（不考虑组件功能差异性）呈现如下：  Extjs < jQuery Easy UI < ligerUI < OperaMasks-UI