JavaScript UI选型及Jquery EasyUI使用经验谈

最近因为项目须要，对js UI做了一些简单的了解和使用，有本身的一些想法，在这里留个记录。

　　固然，个人专一点在管理系统的范围内，因此互联网网站及其余形态的应用这里不说起，因此jQuery UI和Bootstrap类的js库不会说起。

　　1、JavaScript UI选型

　　因为公司里通常只有“美工”，没有前端人员，因此通常是程序员兼职前端，因此通常会找一个好用且功能全的js UI框架（固然，还有免费），这样页面基本就不用花费太多功夫了。

　　咱们了解到的有大概这么几个js UI 框架：EXT js（http://www.sencha.com/），jQuery MiniUI（http://www.miniui.com/），jQuery EasyUI（http://www.jeasyui.com/index.php），还有博客园谢略的jQuery LigerUI（http://www.cnblogs.com/leoxie2011/）。

　　EXT js

　　优势：发展时间长，组件和功能丰富，效果炫，使用的人多，有专业团队维护。

　　缺点：因为组件太多、功能太丰富，致使臃肿，体积大，响应速度慢，收费。

　　jQuery MiniUI

　　优势：基于jQuery的轻量级UI，组件较丰富，性能与效果都还不错，有专业团队开发与维护，国产。

　　缺点：收费，收费较高；使用的人很少。

　　jQuery EasyUI

　　优势：轻量，组件较为丰富，效果还能够，版本已经趋于稳定，官方有专人维护与技术支持。

　　缺点：部分组件功能不太丰富，有少许兼容性问题，性能有些小小问题。

　　jQuery LigerUI

　　优势：轻量级，组件比较丰富，开源。

　　缺点：效果稍欠缺，文档不太完善，我的开发，版本升级与维护比较慢。

　　最终咱们选定jQuery EasyUI，虽然功能不太全，可是在轻量级UI里，它和MiniUI、LigerUI各方面其实都在同一级别，抛弃MiniUI的主要缘由是收费，听说价格还不低……咱们怕不缴费，就没有技术支持，会有问题，并且貌似用MiniUI的群体不大（估计也和收费有关）；LigerUI其实也不错，可是UI效果还稍微有些欠缺，并且是做者一我的维护，虽然开源，可是各种用户和爱好者提交的问题好像也很多，做者一我的恐怕很难应付得过来。

　　接下来再详细说说jQuery EasyUI，通过好几年的发展，如今的稳定版本已是1.3.3了，共有30多个组件，基本涵盖了普通应用系统里会用到的全部组件，文档和Demo都还比较全面和丰富，提供相应的扩展接口，方便扩展；并且更新也较为频繁，国内用户还算很多，并且也有官方论坛，版主回复也很是认真和及时，通常问题都能给搞定，不过如今已收费，好在不算太贵（$449）。

　　适用场景：须要快速开发对UI和性能要求不是特别高的的中小型应用系统。

 

　　2、接下来再吐槽一下使用过程当中遇到的问题吧

　　1.布局Layout 也算EasyUI的一大特点功能了，但是有些功能缺失，好比某layout在收起来后，title不能显示，收起和展开动做稍显不平滑（这实际上是EasyUI框架的问题了，全部组件都有一样问题）；

　　2.DataGrid挺好用，可是大数据量和编辑状态的性能比较差，特别是IE下；

　　3.Tabs里的content和href方式各有问题，用content方法打开iframe，会有性能问题，且相似dialog和messager的窗口不能在框架页弹出，只能在iframe页面范围内；href方式和其余第三方js插件貌似有兼容性问题，并且href是以资源的形式，将href的页面引用至父页面，这须要在对页面元素命名时，要全局考虑，整个站点不能重名；

　　4.部分浏览器下渲染效果过慢，有时候会看到还没渲染完成的页面效果，体验不太好；

　　5.文档不太详细，部分组件的依赖关系描述得不清楚，部分方法的使用方法也省略，用户在查完文档后，每每还须要看其余的demo才能明白；

　　6.ValidateBox有很多问题，总是在不应验证的时候去作验证，错误提示在页面边缘时会被挡住；

　　7.部分组件缺失，如：富文本编辑器；部分组件功能不够丰富，如：DateBox;

　　8.浏览器兼容性问题还有少许。

 

　　EasyUI相关资源：

　　jQuery EasyUI中文社区：http://bbs.jeasyuicn.com/forum.php

　　WebUI框架使用参考：http://www.easyui.info/

　　韩迎龙(Kencery)：http://www.cnblogs.com/hanyinglong/tag/easyUI/

　　雪雁：http://www.cnblogs.com/codelove/tag/Jquery%20EasyUi/

　　萧秦：http://www.cnblogs.com/xqin/tag/easyui/

　　疯狂秀才：http://www.cnblogs.com/hxling/