最近由于项目需要,对js UI作了一些简单的了解和使用,有自己的一些想法,在这里留个记录。

  当然,我的专注点在管理系统的范围内,所以互联网网站及其他形态的应用这里不提及,所以jQuery UI和Bootstrap类的js库不会提及。

  一、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和性能要求不是特别高的的中小型应用系统。

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

  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/

  

JavaScript UI选型及Jquery EasyUI使用经验谈的更多相关文章

  1. JavaScript精彩范例(1)——Jquery EasyUI应用的一个框架实例

    从网上看到的,非常漂亮,放在这里和大家分享一下,作者是疯狂秀才 这是截图 >>这是下载地址<<

  2. 第 1 章 jQuery EasyUI 入门

    学习要点: 1.什么是 jQuery EasyUI 2.学习 jQuery EasyUI 的条件 3.jQuery EasyUI 的功能和优势 4.其他的 UI 插件 5.是否兼容低版本 IE 6.下 ...

  3. Jquery EasyUi实战教程布局篇

    转自:http://www.kwstu.com/ArticleView/kwstu_20139413501290 送给大家一个非常好的后台布局模板,本人后来就选择了这个模板http://www.kws ...

  4. 初试jQuery EasyUI

    jQuery EasyUI jQuery EasyUI是一组基于jQuery的UI插件集合,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面.开发者不需要 ...

  5. 第一百九十一节,jQuery EasyUI 入门

    jQuery EasyUI 入门 学习要点: 1.什么是 jQuery EasyUI 2.学习 jQuery EasyUI 的条件 3.jQuery EasyUI 的功能和优势 4.其他的 UI 插件 ...

  6. 基于JQuery easyui,gson的批量新增/修改和删除-servlet版

    最近项目需要用到在页面进行批量操作,做了一些这方面的学习,参照网上的资料写了个小例子,记录一下: 准备 引入gson-2.6.2.jar,这里使用gson而不使用json-lib,原因是json-li ...

  7. Jquery EasyUI Treegrid按需加载子集

    项目说明,要一个有权限并且按需加载的树形列表. jeasyui网址 CSS <!--添加树状控件--> <link rel="stylesheet" type=& ...

  8. JavaScript UI技术选型

    ExtJS l ExtJS(TODO:找旧版本,类似现在EasyUI插件的旧版本)简介:纯JS支持:IE6授权:GPLv3授权.商业授权($329/人) l Ext.NET简介:ExtJS的NET封装 ...

  9. jquery easyui datagrid 远程加载数据----javascript法

    jquery easyui有三种办法生成datagrid(数据网格),本篇专门讨论javascript借助jquey easy ui实现的方式 html部分 <main role="m ...

随机推荐

  1. 烂泥:gpg加解密软件学习

    本文由ilanniweb提供友情赞助,首发于烂泥行天下 想要获得更多的文章,可以关注我的微信ilanniweb. 为什么要学习gpg呢?因为要在Linux下把一个邮箱的密码加密,不让其他人看到该邮箱真 ...

  2. springmvc+log4j操作日志记录,详细配置

    没有接触过的,先了解一下:log4j教程 部分内容来:log4j教程 感谢! 需要导入包: log包:log4j-12.17.jar 第一步:web.xml配置 <!-- log4j配置,文件路 ...

  3. 正则表达式(/[^0-9]/g,'')中的"/g"是什么意思?

    解答“正则表达式(/[^0-9]/g,'')中的"/g"是什么意思?”这个问题,也为了能够便于大家对正则表达式有一个更为综合和深刻的认识,我将一些关键点和容易犯糊涂的地方再系统总结 ...

  4. 使用redis进行消息推送

    Redis支持这样一种特性,你可以将数据推到某个信息管道中,然后其它客户端可以通过订阅这些管道来获取推送过来的信息.使用Redis的Pub/Sub,接收方在某个channel注册为一个订阅者,然后监听 ...

  5. TCMalloc 对MYSQL 性能 优化的分析

    虽然经过研究发现TCMalloc不适合我们现有的游戏框架,但意外收获发现TCMalloc可以大幅度提高MYSQL 性能及内存占用,这里给出配置及测试的结果: 1.配置 关于TCMalloc的安装,在& ...

  6. ASP.NET执行模型之IIS服务器处理流程

    之前在网上看过很多对这方面的讲解,但个人觉得看下来过于 "深奥",不容易理解,所以想用更简单的方式进行阐述,便于理解. 本次我们重点分析用户请求到页面呈现过程中Web服务器的处理过 ...

  7. 【HTML】嵌入图像

    img元素允许我们在HTML文档里嵌入图像. 要嵌入一张图像需要使用src和alt属性,代码如下: <img src="../img/example/img-map.jpg" ...

  8. 阿里云+wordpress搭建个人博客网站【小白专用的图文教程】

    [声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/4 ...

  9. 第15章 设备无关位图_15.1 DIB文件格式

    15.1 DIB文件格式(一种文件格式,扩展名为BMP) 15.1.1 OS/2风格的DIB 文件格式 字段 说明 文件头 (BITMAPFILEHEADER) 1.共14个字节 2.缩写建议用bmf ...

  10. php发送邮件——SMTP服务器配置图文教程

    准备工作:      注册一个用于网站发送邮件的QQ邮箱(或使用已有的QQ邮箱):      http://zc.qq.com/chs/index.html?type=1&app_id=110 ...