最近由於項目需要,對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/