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/