EXTJS框架是非常全面和成熟的,这是因为它发展的年头久远,并且有全世界的EXTJS爱好者为其出谋献策,它的组件库尤其是DataGrid组件无人能出其右。我在最初也考虑过使用EXTJS来做项目,学习了一段时间后最终还是选择放弃。放弃的理由有如下几点:

(1)风格样式单一

这是最让我受不了的。一个让用户满意的系统并不是单纯组件的堆砌,用户对系统的评价除了能够完成相应的功能外,还涉及到界面是否美观、导航是否合理等等。尤其是界面美观方面,在这个用户体验全面来临的时代,一个赏心悦目的系统尤为重要。而是用EXTJS构建的系统界面都是千篇一律的,无论是蓝色风格、灰色风格还是其他的第三方风格,看起来都是那么的单调。例如下图:

(2)EXTJS定位为底层JS框架,提供的都是基础的组件,并没有提供网页常用的布局模板,所有的页面都需要通过JS脚本动态生成布局与组件,这导致系统开发效率很低,尤其是对于新手。我曾经使用EXT制作一个普通的表单页面,结果花费了我近一个小时的时间(也有可能是我水平不够,呵呵)。不过据说3.0版本提供了可视化工具好了很多。

(3)EXTJS数据传输机制主要采用了AJAX+JSON模式,从长远角度看,这种做法是合理的。但不幸的是,我所在的开发团队还是习惯于传统的同步通信方式。因为历经多年的项目积累,我们早已有了一套成熟的SSH框架,我们所有项目的后台程序都是用这套东西。如果采用EXTJS,那么意味着需要生成JSON数据以AJAX方式传递,无疑会增加大量的工作量。

4)组件很难分离。如果我想在项目中使用一两个EXT的组件,例如window或者combox组件,那么我也需要将整套EXT框架机制全部引入,感觉太大材小用了,而且会影响整体性能。

另外我也尝试过其他的JS框架,发现它们的思路都与EXTJS相似,也同样无法满足我的需要。于是我决心自己开发一套网页框架,由此创建了QUI框架。要说明的有以下几点:

(1)首先我将其定位为集成框架,它并不是一个单纯的JS库,而是一套完整的企业级应用解决方案。包含了十多种导航结构的主页,能够满足绝大部分项目的整体布局需要。内容页面也提供了很多类型的模板,例如表单模板、数据列表模板等等。这样做的目的是为了大幅度地提高系统开发效率,不需要自己去创建,直接拿过来做简单的修改就可以用了。

(2)QUI框架最大的亮点不在于它拥有众多实用的组件和特效,而在于它拥有独特的皮肤机制,可以很方便地为其定制皮肤。我事先已经为每种结构都做了8-10套皮肤,以后新皮肤还会不断增加的。效果如下:

登录页面皮肤效果:

(3)QUI框架另一个让我得意的特点是使用的方式非常简单。在整个框架的开发过程中我就始终在思考如何简化使用步骤。它与EXTJS动态创建HTML元素的机制完全不同,是对现有的HTML进行渲染。例如如果想要创建一个提示信息,只要在元素上写title=”xxx”就可以了,效果如下:

而如果想要创建一个表单,与传统写HTML标签的方式没有任何区别,框架自动会把表单元素渲染成漂亮的、功能强大的页面。想要增加功能只要在标签上添加属性就可以了,例如为文本框标签增加一个watermark=”xxx”的属性,那么文本框就具有了水印效果,如下:

一个被渲染后的表单整体效果如下:

当然,很多人已经习惯了EXTJS的开发方式,反而会觉得EXT的开发方式效率更高一些,我也没意见,所谓萝卜青菜各有所爱。

(4)QUI框架只是对前台元素进行渲染,不会改变原有的后台机制。另外还提供了分离版本,这样如果只想使用里面的一两种组件或特效也不必将整套框架机制全部引入。前面提到的那两个问题也解决了。

项目网址:www.360ui.net

360UI 界面框架 即QUI框架与EXT比较的更多相关文章

  1. 挑战EXT——QUI框架介绍与下载

    挑战EXT——QUI框架介绍与下载 为庆祝新版QUI问世特写此文: 提起EXTJS的大名,恐怕WEB开发界无人不晓吧.EXTJS框架发展到现在,已经非常成熟和全面了.它的组件库尤其是DataGrid组 ...

  2. jQuery Mobile与QUI框架的异曲同工之处

    最近一直在研究jQuery Mobile框架,这是jQuery的官方移动版UI框架,专门用来开发手机与平板电脑方面的应用.结果越来越觉得它和我的QUI框架的开发思路非常相似,很多地方都有异曲同工之妙. ...

  3. 仿知乎app登录界面(Material Design设计框架拿来就用的TexnInputLayout)

    在我脑子里还没有Material Design这种概念,就我个人而言,PC端应用扁平化设计必须成为首选,手当其冲的两款即时通讯旺旺和QQ早就完成UI扁平化的更新,然而客户端扁平化的设计本身就存在天生的 ...

  4. Android酷炫实用的开源框架(UI框架)

    Android酷炫实用的开源框架(UI框架) 前言 忙碌的工作终于可以停息一段时间了,最近突然有一个想法,就是自己写一个app,所以找了一些合适开源控件,这样更加省时,再此分享给大家,希望能对大家有帮 ...

  5. 二十一、【.Net开源框架】EFW框架Web前端开发之目录结构和使用FireBug调试方法

    回<[开源]EFW框架系列文章索引> EFW框架源代码下载V1.2:http://pan.baidu.com/s/1hcnuA EFW框架实例源代码下载:http://pan.baidu. ...

  6. Android酷炫实用的开源框架(UI框架) 转

    Android酷炫实用的开源框架(UI框架) 前言 忙碌的工作终于可以停息一段时间了,最近突然有一个想法,就是自己写一个app,所以找了一些合适开源控件,这样更加省时,再此分享给大家,希望能对大家有帮 ...

  7. 黄聪:Android酷炫实用的开源框架(UI框架)(转)

    Android酷炫实用的开源框架(UI框架) 前言 忙碌的工作终于可以停息一段时间了,最近突然有一个想法,就是自己写一个app,所以找了一些合适开源控件,这样更加省时,再此分享给大家,希望能对大家有帮 ...

  8. 用Python手把手教你搭建一个web框架-flask微框架!

    在之前的文章当中,小编已经教过大家怎么搭建一个Django框架,今天我们来探索另外的一种框架的搭建,这个框架就是web框架-flask微框架啦!首先我们带着以下的几个问题来阅读本文: 1.flask是 ...

  9. wsgiref模块、web框架、django框架简介

    """web框架:将前端.数据库整合到一起的基于互联网传输的python代码 web框架也可以简单的理解为是软件开发架构里面的'服务端'""" ...

随机推荐

  1. RP2837 IN1-IN2 对应关系 2路DI

    RP2837 IN1-IN2 对应关系: IN1   ARM-IO2   PA16 IN2   ARM-IO6   PA4 root@sama5d3-linux:~ echo 16  > /sy ...

  2. 07 Test结构

    Test 有多种实现方式, [ 等价于 test, 并且 [ 是一个内建命令, 效率很高 另外, [[]] 也是测试, [[]]结构比bash[]更灵活, 这是一个扩展test命令, 从ksh88继承 ...

  3. 2015 Multi-University Training Contest 3 1001 Magician

    Magician Problem's Link: http://acm.hdu.edu.cn/showproblem.php?pid=5316 Mean: n个数,2种操作,1是单点更新,2是询问区间 ...

  4. 10个 jQuery 小技巧

    10个 jQuery 小技巧 -----整理by: xiaoshuai 1. 返回顶部按钮 可以利用 animate 和 scrollTop 来实现返回顶部的动画,而不需要使用其他插件. // Bac ...

  5. C语言 百炼成钢24

    /* 题目60:从键盘中输入一个不超过40个字符的字符串, 再输入3个位数(每次删除一个字符),删除对应 位数的字符,然后输出删除指定字符后的字符串. 输入:hellokityManGood 3 6 ...

  6. mobile体验效果:增加点击后反馈

    document.addEventListener("touchstart", function(){}, true) //JS部分 a:active{ background:re ...

  7. uva624 CD (01背包+路径的输出)

    CD Time Limit:3000MS Memory Limit:0KB 64bit IO Format:%lld & %llu Submit Status Practice UVA 624 ...

  8. JavaScript------创建节点

    代码: <script type="text/javascript"> var i = 0; function add(){ var inputNode = docum ...

  9. jdbc的简单实现demo

    直接上代码吧,只是因为上篇的心血来潮.总结哈 import java.sql.Connection; import java.sql.DriverManager; import java.sql.Re ...

  10. kotlin 遇到的问题

    转载请表明 https://i.cnblogs.com/EditPosts.aspx?opt=1 从5月18号goole正式公布用kotlin做为android的新语言,做为android也很庆幸可以 ...