劉祖旺 高國元

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

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

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

文章編號：1009-3044（2020）01-0046-03

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

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

1EasyUI和EXTJS的介紹以及對比分析

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

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

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

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

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

1.1 EasyUI的介紹

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

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

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

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

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

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

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

1.2 EXTJS的介紹

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

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

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

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

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

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

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

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

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

EXTJS對各個部分定義的功能：

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

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

Controller-控制層：是應(yīng)用程序中MVC三層架構(gòu)的邏輯部分。它用來處理事件并作出一系列的響應(yīng)?！笆录敝饕傅挠脩舻男袨?、數(shù)據(jù)以及模型上的改變。Ext.app.Conlxoller就是控制層中控制器的基類。

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

1.3 EasyUI和EXTJS的對比

表1為EasyUI與EXTJS屬性對比。

2分析結(jié)論

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

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