劉祖旺 高國元

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

關鍵詞：Web;JavaScript;EasyUI;EXTJS;UI設計

中圖分類號：G642 文獻標識碼：A

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

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

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

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

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

HTML——結構，決定網(wǎng)頁的結構和內容（“是什么”）

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

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

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

1.1 EasyUI的介紹

EasyUI早期的時候是一款基于jQuery下的用戶界面插件開發(fā)庫，它為JavaSeript應用程序的建立，在現(xiàn)代化和互動方面提供了強有力的支持。用戶基于EasyUI開發(fā)的開發(fā)，代碼量是非常少的，僅需要編寫簡單的一些HTML標記，就能把界面定義清楚。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的語法定義的基礎上，幫助Web開發(fā)人員能夠在基于HTML5語言的基礎上和jQuery為核心前提下快速地建立程序頁面，因為它提供了一整套的組件的集合，例如功能強大能夠支持各種數(shù)據(jù)展現(xiàn)形式的數(shù)據(jù)網(wǎng)格，組件叫datagrid、可以動態(tài)展開收縮的數(shù)據(jù)樹，組件叫treegrid，還有我們所熟悉的其他小型組件，各種面板，下拉多選框，以及各種按鈕等等。用戶可以根據(jù)實際業(yè)務需求進行自由組合搭配使用，這樣構建出的網(wǎng)頁應用就可以支持跨瀏覽器。下面有兩個方式可以聲明uI組件，一是直接在HTML聲明組件：

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

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

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

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

1.2 EXTJS的介紹

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

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

如果EXTJS只有絢麗的uI界面與外觀，那么項目不一定非要使用EXTJS，使用EasyUI照樣可以實現(xiàn)同樣的效果。因此，使用EXTJS開發(fā)項目的原因就是它采用了面向對象的思想進行建構，就像Java語言一樣，所有的組件都有自己的類以及定義，并按照層級關系存放在自己的命名空間里，程序員可以使用面向對象的方法開發(fā)程序，就好像在編寫簡易版Java程序一樣，例如：

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

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

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

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

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

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

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

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

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

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

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

1.3 EasyUI和EXTJS的對比

表1為EasyUI與EXTJS屬性對比。

2分析結論

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

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