EasyUI與EXTJS的對(duì)比分析

劉祖旺 高國(guó)元

摘要：通過對(duì)當(dāng)下比較流行的JavaScript庫(kù)中兩個(gè)框架，EasyUI和EXTJS進(jìn)行詳細(xì)介紹以及對(duì)比分析，分別從二者的來(lái)源，使用方法，優(yōu)缺點(diǎn)，以及應(yīng)用場(chǎng)景加以描述，把二者的相同點(diǎn)和不同點(diǎn)分析出來(lái)，重點(diǎn)在于二者開發(fā)思想截然不同，實(shí)現(xiàn)的過程也是有所區(qū)別，最后在19個(gè)方面對(duì)比分析了二者的特性，讓讀者結(jié)合自己實(shí)際需要或者學(xué)習(xí)過程，可以方便的對(duì)二者進(jìn)行取舍，尤其是為web設(shè)計(jì)開發(fā)者選擇框架時(shí)提供了參考。

關(guān)鍵詞：Web;JavaScript;EasyUI;EXTJS;UI設(shè)計(jì)

中圖分類號(hào)：G642 文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1009-3044（2020）01-0046-03

近幾年隨著HTML5和CSS3的在web前端的普及，各種網(wǎng)頁(yè)設(shè)計(jì)技術(shù)發(fā)展迅猛。一個(gè)網(wǎng)站設(shè)計(jì)的好與壞，首先要關(guān)注的要素是界面樣式。如果不注意界面樣式，致使用戶體驗(yàn)變差，將會(huì)導(dǎo)致用戶沒有興趣繼續(xù)體驗(yàn)接下來(lái)的服務(wù)。正是因?yàn)槟壳皐eb開發(fā)領(lǐng)域的發(fā)展趨勢(shì)，以至于用戶對(duì)界面的關(guān)注越來(lái)越高，但很多公司，受成本的限制，沒有全職美工，或者美工做出來(lái)的東西難以與前端開發(fā)相匹配（美工做出來(lái)的東西都是零散的）。所以，在這類需求下，市場(chǎng)上誕生了很多包含全套服務(wù)的前端插件，本文介紹的兩款基于JavaSeript的插件，是在實(shí)際工作中，使用非常頻繁的，也是使用時(shí)間持續(xù)最長(zhǎng)的兩款插件，它們分別是建立在jQuery基礎(chǔ)上的EasyUI和基于YUI為基礎(chǔ)的EXTJS插件。

使用前端插件，不但能使用它們提供的前端開發(fā)API，來(lái)完成對(duì)整個(gè)項(xiàng)目的開發(fā)，還可以使用它們提供的風(fēng)格，來(lái)對(duì)網(wǎng)站整體界面來(lái)做一些優(yōu)化，因此，插件化開發(fā)將是未來(lái)前端發(fā)展趨勢(shì)。

1EasyUI和EXTJS的介紹以及對(duì)比分析

我們平時(shí)所看到的網(wǎng)頁(yè)主要由三部分組成：結(jié)構(gòu)（strue-ture）、表現(xiàn)（Presentation）和行為（Behavior）：

HTML——結(jié)構(gòu)，決定網(wǎng)頁(yè)的結(jié)構(gòu)和內(nèi)容（“是什么”）

CSS——表現(xiàn)（樣式），設(shè)定網(wǎng)頁(yè)的表現(xiàn)樣式（“什么樣子”）

JavaScfipt（Js）——行為，控制網(wǎng)頁(yè)的行為（“做什么”）

HTML5和CSS3已經(jīng)被人們所熟知，本文就不再贅述了。JavaSefipt這種網(wǎng)絡(luò)腳本語(yǔ)言，多年以來(lái)也被廣泛用于Web應(yīng)用開發(fā)，它經(jīng)常被用來(lái)為各種形式的網(wǎng)頁(yè)添加動(dòng)態(tài)功能，進(jìn)一步讓用戶瀏覽體驗(yàn)更加流暢更加美觀。一般情況下，通過把JavaS—eript腳本嵌入到HTML、JSP、ASP、PHP等頁(yè)面中去便于實(shí)現(xiàn)自身的功能。而在JavaScfipt基礎(chǔ)上衍生出的一系列高級(jí)前端框架，就像EasyUI和EXTJS，更加方便地讓設(shè)計(jì)人員和開發(fā)人員把業(yè)務(wù)需求放在首位，避免了大量底層的重復(fù)編碼工作，無(wú)論是靜態(tài)網(wǎng)頁(yè)還是動(dòng)態(tài)網(wǎng)頁(yè)，這些插件的應(yīng)用都大大提高了開發(fā)效率，增強(qiáng)了系統(tǒng)頁(yè)面的功能和性能，提高了用戶體驗(yàn)度。

1.1 EasyUI的介紹

EasyUI早期的時(shí)候是一款基于jQuery下的用戶界面插件開發(fā)庫(kù)，它為JavaSeript應(yīng)用程序的建立，在現(xiàn)代化和互動(dòng)方面提供了強(qiáng)有力的支持。用戶基于EasyUI開發(fā)的開發(fā)，代碼量是非常少的，僅需要編寫簡(jiǎn)單的一些HTML標(biāo)記，就能把界面定義清楚。EasyUI這款插件同時(shí)也是完美支持HTML5網(wǎng)頁(yè)的。它替用戶著想，節(jié)省了網(wǎng)頁(yè)開發(fā)的時(shí)間和規(guī)模。現(xiàn)在的EasyUI已經(jīng)支持Angular和Vue了，本文還是以基于jQueu的EasyUI為例。

作為一款輕量級(jí)的前端插件，EasyUI在很大程度上簡(jiǎn)化了程序員的開發(fā)工作，這也正是它的優(yōu)勢(shì)。它的官方網(wǎng)站是WWW.jeasyui.net，最新版本是1.7，壓縮包也只有1.08兆，并且它的壓縮包自帶了很多常用的例子，都是可直接運(yùn)行并且可查看代碼的，并且EasyUl支持多種瀏覽器展示。

EasyUI在遵循jQuery的語(yǔ)法定義的基礎(chǔ)上，幫助Web開發(fā)人員能夠在基于HTML5語(yǔ)言的基礎(chǔ)上和jQuery為核心前提下快速地建立程序頁(yè)面，因?yàn)樗峁┝艘徽椎慕M件的集合，例如功能強(qiáng)大能夠支持各種數(shù)據(jù)展現(xiàn)形式的數(shù)據(jù)網(wǎng)格，組件叫datagrid、可以動(dòng)態(tài)展開收縮的數(shù)據(jù)樹，組件叫treegrid，還有我們所熟悉的其他小型組件，各種面板，下拉多選框，以及各種按鈕等等。用戶可以根據(jù)實(shí)際業(yè)務(wù)需求進(jìn)行自由組合搭配使用，這樣構(gòu)建出的網(wǎng)頁(yè)應(yīng)用就可以支持跨瀏覽器。下面有兩個(gè)方式可以聲明uI組件，一是直接在HTML聲明組件：

在實(shí)際的項(xiàng)目開發(fā)過程中，一般把兩者結(jié)合起來(lái)使用，方便快捷。由于EasyUI為廣大用戶提供了用于建立跨瀏覽器網(wǎng)頁(yè)的完整組件集合，而且這些組件基本上都包括本身所特有的事件和方法，用戶就可以通過調(diào)用它自帶的事件或者方法來(lái)實(shí)現(xiàn)用戶所想要實(shí)現(xiàn)的業(yè)務(wù)需求。例如datagrid數(shù)據(jù)網(wǎng)格就有24種分類，可以說(shuō)涵蓋了目前用戶能見到的所有的數(shù)據(jù)網(wǎng)格形式，這24種數(shù)據(jù)網(wǎng)格除了通用的方法和事件，還有自己獨(dú)特的方法和事件，用戶不必?fù)?dān)心不知道如何使用，因?yàn)樵谒恼f(shuō)明文檔里介紹得非常詳細(xì)。

EasyUI現(xiàn)在也支持移動(dòng)終端了，并且，如果用戶下載了插件包的話，用戶會(huì)看到非常詳細(xì)的移動(dòng)端的使用例子，和電腦端的例子一樣淺顯易懂，它的移動(dòng)端有17大類的組件庫(kù)，可以說(shuō)對(duì)于常見的移動(dòng)端頁(yè)面已經(jīng)涵蓋的很全面了，當(dāng)然，這些比起電腦端的49個(gè)大類的組件庫(kù)來(lái)說(shuō)還是少了點(diǎn)，但是我們可以看到的是這些年來(lái)，EasyUI一直在不斷地更新它的版本。

實(shí)際上，EasyUI為了讓插件更具有競(jìng)爭(zhēng)性，還提供了8中不同風(fēng)格的主題，供開發(fā)人員選擇，其中就包括bootstrap主題。因此，那些沒有美工的公司也可以順利地使用插件。若是想對(duì)EasyUI的提供的風(fēng)格進(jìn)行個(gè)性化修改，或者開發(fā)全新的風(fēng)格，用戶只需去EasyUI文件夾下找到themes文件夾，就會(huì)發(fā)現(xiàn)EasyUI提供了諸多樣式命名的文件夾，用戶只需要找到每個(gè)樣式文件夾下的main.jsp文件并打開，就會(huì)看到下面這種結(jié)構(gòu)的語(yǔ)句：

這就說(shuō)明，我們目前使用的是EasyUI提供的默認(rèn)風(fēng)格，如果需要改動(dòng)的話，就把default改成其他風(fēng)格的文件名即可。

1.2 EXTJS的介紹

EXTJS主要是用于創(chuàng)建RIA（富客戶端）的，它集和了JavaS-cript、CSS和HTML等技術(shù)來(lái)實(shí)現(xiàn)，并且作為一個(gè)前端JavaScript框架，它與后臺(tái)技術(shù)的實(shí)現(xiàn)，沒有必然的關(guān)聯(lián)。所以在以Java、Net、Php等各種開發(fā)語(yǔ)言開發(fā)的應(yīng)用項(xiàng)目中，EXTJS都可以使用并且無(wú)縫連接。EXTJS初期是基于BSD協(xié)議的YUI技術(shù)進(jìn)行開發(fā)，誕生更早的JavaSwing所采用的機(jī)制被它借鑒來(lái)構(gòu)造可視化組件，無(wú)論從uI設(shè)計(jì)上，還是CSS樣式的引用上，更或是對(duì)數(shù)據(jù)解析中的異常處理上，都可以算是一款優(yōu)秀的基于Ja-vaScript客戶端技術(shù)的插件。它面向組化件開發(fā)，不同于jQuery的面向Dom開發(fā)，并且它還提供了非常多的功能強(qiáng)大的組件，同時(shí)它也是支持跨瀏覽器展示的。可是它框架體積過于龐大，比較適合內(nèi)網(wǎng)項(xiàng)目的編寫。

EXTJS的官方網(wǎng)站是www.sencha，com/products/EXTJS/，截止本文撰寫時(shí)，最新版本已經(jīng)到了6.7，插件壓縮包有209兆，當(dāng)然，EXTJS的官網(wǎng)也提供了豐富多彩的例子可供學(xué)習(xí)，介紹了每種組件的使用方法。值得一提的是，EXTJS本身實(shí)現(xiàn)了圖表的功能，如果用戶用到各種圖表的話，不用額外的在下載其他圖表插件。可以說(shuō)，EXTJS是實(shí)現(xiàn)功能最全面，自帶組件最多的一款JavaScript庫(kù)，它分為45大類組件庫(kù)，涵蓋了幾乎是所有用戶能用到的各種組件。當(dāng)然它也自帶了13種主題，基本可以滿足不同系統(tǒng)的風(fēng)格需要。

如果EXTJS只有絢麗的uI界面與外觀，那么項(xiàng)目不一定非要使用EXTJS，使用EasyUI照樣可以實(shí)現(xiàn)同樣的效果。因此，使用EXTJS開發(fā)項(xiàng)目的原因就是它采用了面向?qū)ο蟮乃枷脒M(jìn)行建構(gòu)，就像Java語(yǔ)言一樣，所有的組件都有自己的類以及定義，并按照層級(jí)關(guān)系存放在自己的命名空間里，程序員可以使用面向?qū)ο蟮姆椒ㄩ_發(fā)程序，就好像在編寫簡(jiǎn)易版Java程序一樣，例如：

EXTJS通過require來(lái)引入各個(gè)組件，就像Java里的import或者c#的using一樣。并且通過名字可以清晰的看出引入的是什么類型的組件，grid表示表格，data表示數(shù)據(jù)類型，form表示表單，等等。引入完成之后就是通過define來(lái)定義組件，給這個(gè)組件豐富血肉，例如：

在定義組件的方法中，就得明確這個(gè)組件的唯-ID，擴(kuò)展自哪種類型，數(shù)據(jù)來(lái)源，方法，事件等一系列屬性，這樣才能真正用起來(lái)。同時(shí)，它還提供了另外一種定義組件的方法，

vat grid1=Ext.create（Ext.grid.Panel，{...}）;也是同樣可以的。

另外，EXTJS 5之前，它還是一個(gè)MVC模式的框架，EXTJS

5之后便加入了MVVM的模式。

Model-View-Controller，簡(jiǎn)稱MVC，即通常我們所說(shuō)的模型一視圖一控制器三層架構(gòu)，這類架構(gòu)是用來(lái)編寫軟件的一種架構(gòu)模式。通俗點(diǎn)講，就是它把軟件系統(tǒng)從上往下劃分為了三個(gè)基本部分：Model一模型層、View-視圖層和Controller-控制層，這類模式把復(fù)雜的程序結(jié)構(gòu)簡(jiǎn)單化了。

EXTJS對(duì)各個(gè)部分定義的功能：

Model一模型層：應(yīng)用程序涉及的業(yè)務(wù)邏輯中相關(guān)的數(shù)據(jù)以及對(duì)這些數(shù)據(jù)的處理主要就是用這層進(jìn)行封裝。一個(gè)數(shù)據(jù)字段的集合，可通過關(guān)聯(lián)被鏈接到其他模型和通過代理鏈接到一個(gè)數(shù)據(jù)流。

View-視圖層：表示數(shù)據(jù)給用戶。任何類型的組件，這些組件將信息輸出到瀏覽器，如Form、Grid、Chart。

Controller-控制層：是應(yīng)用程序中MVC三層架構(gòu)的邏輯部分。它用來(lái)處理事件并作出一系列的響應(yīng)。“事件”主要指的用戶的行為、數(shù)據(jù)以及模型上的改變。Ext.app.Conlxoller就是控制層中控制器的基類。

如果要想切身體會(huì)EXTJS，那么最直接最便捷的便是閱讀EXTJS插件的源代碼，這是了解把握全部開源項(xiàng)目必不可少的關(guān)鍵，想要查看EXTJS的源代碼，可以去EXTJS項(xiàng)目下的source文件夾下找到。熟悉EXTJS的源碼，不一定非得把所有的組件源碼全都看一遍，組件核心代碼一Component.js、容器組件代碼-Container.js、面板--Panel.js等這些組件源代碼是必看的;還有core目錄中的Element.js、Ext.js等也是非常重要的。當(dāng)用戶需要對(duì)一個(gè)控件進(jìn)行擴(kuò)展的時(shí)候，最佳的途徑就是簡(jiǎn)單看一看這個(gè)控件的源代碼。

1.3 EasyUI和EXTJS的對(duì)比

表1為EasyUI與EXTJS屬性對(duì)比。

2分析結(jié)論

通過以上表格對(duì)EasyUI和EXTJS特點(diǎn)的對(duì)比，我們可以比較深入地了解到這兩個(gè)前端框架各自的優(yōu)劣勢(shì)。簡(jiǎn)單來(lái)講，就是EasyUI屬于“輕量級(jí)”，而EXTJS屬于“重量級(jí)”，畢竟前者面向頁(yè)面級(jí)開發(fā)，后者面向應(yīng)用級(jí)開發(fā)，組件的豐富程度肯定也是后者要強(qiáng)一些，不難從插件包大小上可以看出來(lái)，更可以從例子的展示數(shù)量上可以看出來(lái)。EasyUI實(shí)際使用過程中與HTML語(yǔ)言配合緊密，大多數(shù)都是一個(gè)頁(yè)面跟著一個(gè)配對(duì)的Ja_vascript文件，例如grid.jsp頁(yè)面要想生效，就要有一個(gè)能與它呼應(yīng)的grid.js文件，這已經(jīng)是軟件開發(fā)過程中默認(rèn)的規(guī)范了，而EXTJS則沒有這些束縛，往往整個(gè)系統(tǒng)只有一個(gè)頁(yè)面，但是卻實(shí)現(xiàn)了上百個(gè)頁(yè)面的效果，因?yàn)槠溆嗟娜荍avaScript文件，這就是EXTJS帶來(lái)的效果。從上手難度上來(lái)看，EasyUI比較簡(jiǎn)單，容易掌握，實(shí)際使用起來(lái)也比較能夠快速部署應(yīng)用，而EX-TJs上手比較難，因?yàn)樗脑O(shè)計(jì)模式是面向?qū)ο蟮模M件和工具的數(shù)量過于龐大，用戶得熟悉每個(gè)接口的使用，但是經(jīng)過長(zhǎng)時(shí)間的學(xué)習(xí)使用之后，用戶就會(huì)發(fā)現(xiàn)它的功能是多么的強(qiáng)大。還有就是比較重要的反應(yīng)速度，這也是用戶在實(shí)際使用過程中比較關(guān)注的地方，當(dāng)數(shù)據(jù)量或者數(shù)據(jù)變化頻率達(dá)到一定程度后，二者都會(huì)變慢，但是EXTJS明顯要比EasyUI略慢一些，因?yàn)橥ㄟ^分析頁(yè)面加載的資源文件可以看出來(lái)，EXTJS每次在頁(yè)面打開的時(shí)候加載的資源文件數(shù)量是EasyUI的好幾倍，這些都是可以優(yōu)化的，不過需要后臺(tái)優(yōu)化業(yè)務(wù)處理邏輯了，這里就不在涉及。

綜上所述，通過圖1可以清晰地得出結(jié)論，如果當(dāng)用戶需要快速開發(fā)一個(gè)輕量級(jí)的系統(tǒng)，尤其是一些個(gè)性化的網(wǎng)頁(yè)的時(shí)候，涉及的功能不是很多，例如grid，form，message，tree，select等簡(jiǎn)單組件就能滿足業(yè)務(wù)需求時(shí)，EasvuI是不二選擇。如果用戶的項(xiàng)目屬于重量級(jí)的應(yīng)用系統(tǒng)，對(duì)組件的要求比較復(fù)雜，那就需要用到它的重用性和可維護(hù)性了。對(duì)于大中型項(xiàng)目來(lái)說(shuō)，就是把面向?qū)ο蟮母拍顜腠?xiàng)目開發(fā)，使得團(tuán)隊(duì)中訓(xùn)練有素的程序員都能夠?qū)⑾到y(tǒng)分解，并運(yùn)用設(shè)計(jì)模式的理念來(lái)開發(fā)系統(tǒng)，還有就是用到一些復(fù)雜的圖表，最好采用EXTJS，總之它是一個(gè)有著相對(duì)比較完整的生態(tài)結(jié)構(gòu)的Javascript框架。