挑戰EXT——QUI框架介紹與下載

挑戰EXT——QUI框架介紹與下載

為慶祝新版QUI問世特寫此文：

提起EXTJS的大名，恐怕WEB開發界無人不曉吧。EXTJS框架發展到現在，已經非常成熟和全面了。它的組件庫尤其是DataGrid組件無人能出其右。

我之前也一直把EXT作為項目前台方案的首選，然而在兩年前，我因為某些理由終於無法忍受它了，決心要開發一套符合自己和大眾化需求的前台框架出來。這就成就了QUI框架的問世（原UUR框架）。

先不說QUI，我想先說說我放棄EXT的理由。純屬個人感受。

（1）風格樣式單一。這是最讓我受不了的。一個讓用戶滿意的系統並不是單純組件的堆砌，用戶對系統的評價除了能夠完成相應的功能外，還涉及到界面是否美觀、導航是否合理等等。尤其是界面美觀方面，蘋果的成功告訴我們用戶體驗至關重要。用戶需要的是一個一個賞心悅目的系統，而是用EXTJS構建的系統界面都是千篇一律的，看起來很是單調。例如下圖：


 
（2）EXTJS定位為底層JS框架，提供的都是基礎的組件，並沒有提供網頁常用的布局模板，所有的頁面都需要通過JS腳本動態生成布局與組件，這導致系統開發效率很低，尤其是對於新手。我很久以前曾使用EXT制作一個普通的表單頁面，結果花費了我近一個小時的時間（也有可能是我水平不夠）。

（3）EXTJS數據傳輸機制主要采用了AJAX+JSON模式，不兼容傳統的網頁HTML元素開發模式。不幸的是，我所在的開發團隊還是習慣於傳統的同步通信方式。因為歷經多年的項目積累，我們早已有了一套成熟的SSH框架，我們所有項目的后台程序都是用這套東西。如果采用EXTJS，那么意味着需要生成JSON數據以AJAX方式傳遞，無疑會增加大量的工作量。

（4）組件很難分離。如果我想在項目中使用一兩個EXT的組件，例如window或者combox組件，那么我也需要將整套EXT框架機制全部引入，感覺太大材小用了，而且會影響整體性能。

另外我也嘗試過其他的JS框架，發現它們的思路都與EXTJS相似，也同樣無法滿足我的需要。

下面開始引出QUI框架。
QUI的英文全拼是QuickUI，意思是使用它能夠快速地搭建你的系統界面。

 
（1）首先我將其定位為集成框架，它並不是一個單純的JS庫，而是一套完整的企業級應用解決方案。包含了十多種導航結構的主頁，能夠滿足絕大部分項目的整體布局需要。內容頁面也提供了很多類型的模板，例如表單模板、數據列表模板等等。這樣做的目的是為了大幅度地提高系統開發效率，不需要自己去創建，直接拿過來做簡單的修改就可以用了。
經過實踐檢驗，這種方式開發系統效率真的是非常非常高！


（2）QUI框架最大的亮點不在於它擁有眾多實用的組件和特效，而在於它擁有獨特的皮膚機制，可以很方便地為其定制皮膚。我事先已經為每種結構都做了十幾套套皮膚，同時也留出響應接口，方便用戶自定義皮膚。
皮膚預覽圖列表效果如下
：
 

其中一套皮膚效果如下：



登錄頁面皮膚列表效果：

 
（3）QUI框架另一個讓我得意的特點是使用的方式非常簡單。在整個框架的開發過程中我就始終在思考如何簡化使用步驟。它與EXTJS動態創建HTML元素的機制完全不同，是對現有的HTML進行渲染。例如如果想要創建一個提示信息，只要在元素上寫title=”xxx”就可以了，效果如下：

 
而如果想要創建一個表單，與傳統寫HTML標簽的方式沒有任何區別，框架自動會把表單元素渲染成漂亮的、功能強大的頁面。想要增加功能只要在標簽上添加屬性就可以了，例如為文本框標簽增加一個watermark=”xxx”的屬性，那么文本框就具有了水印效果，如下：

 
一個被渲染后的表單整體效果如下：

 
當然，很多人已經習慣了EXTJS的開發方式，反而會覺得EXT的開發方式效率更高一些，我也沒意見，所謂蘿卜青菜各有所愛。

（4）QUI框架只是對前台元素進行渲染，不會改變原有的后台機制。另外還提供了分離版本，這樣如果只想使用里面的一兩種組件或特效也不必將整套框架機制全部引入。這樣前面提到的那兩個問題也解決了。

分離版組件效果（每個組件都是單獨的一個文件包）：



感興趣的可以下載該框架自行嘗試。
點擊下載QUI
（直接點擊鏈接即可，使用迅雷可能會導致無法下載）

框架體積說明：
壓縮包解壓后有將近50M，里面有將近30M是各種皮膚的預覽圖，6M的PPT介紹，4M的flash播放器插件，其余的是框架本身和各種示例demo頁面以及所用的資源圖片等