《EasyUI与EXTJS的对比分析》-工学论文，计算机论文-论文范文参考-科学狗论文网

标题

EasyUI与EXTJS的对比分析

范文

刘祖旺高国元

摘要：通过对当下比较流行的JavaScript库中两个框架，EasyUI和EXTJS进行详细介绍以及对比分析，分别从二者的来源，使用方法，优缺点，以及应用场景加以描述，把二者的相同点和不同点分析出来，重点在于二者开发思想截然不同，实现的过程也是有所区别，最后在19个方面对比分析了二者的特性，让读者结合自己实际需要或者学习过程，可以方便的对二者进行取舍，尤其是为web设计开发者选择框架时提供了参考。

关键词：Web;JavaScript;EasyUI;EXTJS;UI设计

中图分类号：G642 文献标识码：A

文章编号：1009-3044（2020）01-0046-03

近几年随着HTML5和CSS3的在web前端的普及，各种网页设计技术发展迅猛。一个网站设计的好与坏，首先要关注的要素是界面样式。如果不注意界面样式，致使用户体验变差，将会导致用户没有兴趣继续体验接下来的服务。正是因为目前web开发领域的发展趋势，以至于用户对界面的关注越来越高，但很多公司，受成本的限制，没有全职美工，或者美工做出来的东西难以与前端开发相匹配（美工做出来的东西都是零散的）。所以，在这类需求下，市场上诞生了很多包含全套服务的前端插件，本文介绍的两款基于JavaSeript的插件，是在实际工作中，使用非常频繁的，也是使用时间持续最长的两款插件，它们分别是建立在jQuery基础上的EasyUI和基于YUI为基础的EXTJS插件。

使用前端插件，不但能使用它们提供的前端开发API，来完成对整个项目的开发，还可以使用它们提供的风格，来对网站整体界面来做一些优化，因此，插件化开发将是未来前端发展趋势。

1EasyUI和EXTJS的介绍以及对比分析

我们平时所看到的网页主要由三部分组成：结构（strue-ture）、表现（Presentation）和行为（Behavior）：

HTML——结构，决定网页的结构和内容（“是什么”）

CSS——表现（样式），设定网页的表现样式（“什么样子”）

JavaScfipt（Js）——行为，控制网页的行为（“做什么”）

HTML5和CSS3已经被人们所熟知，本文就不再赘述了。JavaSefipt这种网络脚本语言，多年以来也被广泛用于Web应用开发，它经常被用来为各种形式的网页添加动态功能，进一步让用户浏览体验更加流畅更加美观。一般情况下，通过把JavaS—eript脚本嵌入到HTML、JSP、ASP、PHP等页面中去便于实现自身的功能。而在JavaScfipt基础上衍生出的一系列高级前端框架，就像EasyUI和EXTJS，更加方便地让设计人员和开发人员把业务需求放在首位，避免了大量底层的重复编码工作，无论是静态网页还是动态网页，这些插件的应用都大大提高了开发效率，增强了系统页面的功能和性能，提高了用户体验度。

1.1 EasyUI的介绍

EasyUI早期的时候是一款基于jQuery下的用户界面插件开发库，它为JavaSeript应用程序的建立，在现代化和互动方面提供了强有力的支持。用户基于EasyUI开发的开发，代码量是非常少的，仅需要编写简单的一些HTML标记，就能把界面定义清楚。EasyUI这款插件同时也是完美支持HTML5网页的。它替用户着想，节省了网页开发的时间和规模。现在的EasyUI已经支持Angular和Vue了，本文还是以基于jQueu的EasyUI为例。

作为一款轻量级的前端插件，EasyUI在很大程度上简化了程序员的开发工作，这也正是它的优势。它的官方网站是WWW.jeasyui.net，最新版本是1.7，压缩包也只有1.08兆，并且它的压缩包自带了很多常用的例子，都是可直接运行并且可查看代码的，并且EasyUl支持多种浏览器展示。

EasyUI在遵循jQuery的语法定义的基础上，帮助Web开发人员能够在基于HTML5语言的基础上和jQuery为核心前提下快速地建立程序页面，因为它提供了一整套的组件的集合，例如功能强大能够支持各种数据展现形式的数据网格，组件叫datagrid、可以动态展开收缩的数据树，组件叫treegrid，还有我们所熟悉的其他小型组件，各种面板，下拉多选框，以及各种按钮等等。用户可以根据实际业务需求进行自由组合搭配使用，这样构建出的网页应用就可以支持跨浏览器。下面有两个方式可以声明uI组件，一是直接在HTML声明组件：

在实际的项目开发过程中，一般把两者结合起来使用，方便快捷。由于EasyUI为广大用户提供了用于建立跨浏览器网页的完整组件集合，而且这些组件基本上都包括本身所特有的事件和方法，用户就可以通过调用它自带的事件或者方法来实现用户所想要实现的业务需求。例如datagrid数据网格就有24种分类，可以说涵盖了目前用户能见到的所有的数据网格形式，这24种数据网格除了通用的方法和事件，还有自己独特的方法和事件，用户不必担心不知道如何使用，因为在它的说明文档里介绍得非常详细。

EasyUI现在也支持移动终端了，并且，如果用户下载了插件包的话，用户会看到非常详细的移动端的使用例子，和電脑端的例子一样浅显易懂，它的移动端有17大类的组件库，可以说对于常见的移动端页面已经涵盖的很全面了，当然，这些比起电脑端的49个大类的组件库来说还是少了点，但是我们可以看到的是这些年来，EasyUI一直在不断地更新它的版本。

实际上，EasyUI为了让插件更具有竞争性，还提供了8中不同风格的主题，供开发人员选择，其中就包括bootstrap主题。因此，那些没有美工的公司也可以顺利地使用插件。若是想对EasyUI的提供的风格进行个性化修改，或者开发全新的风格，用户只需去EasyUI文件夹下找到themes文件夹，就会发现EasyUI提供了诸多样式命名的文件夹，用户只需要找到每个样式文件夹下的main.jsp文件并打开，就会看到下面这种结构的语句：

这就说明，我们目前使用的是EasyUI提供的默认风格，如果需要改动的话，就把default改成其他风格的文件名即可。

1.2 EXTJS的介绍

EXTJS主要是用于创建RIA（富客户端）的，它集和了JavaS-cript、CSS和HTML等技术来实现，并且作为一个前端JavaScript框架，它与后台技术的实现，没有必然的关联。所以在以Java、Net、Php等各种开发语言开发的应用项目中，EXTJS都可以使用并且无缝连接。EXTJS初期是基于BSD协议的YUI技术进行开发，诞生更早的JavaSwing所采用的机制被它借鉴来构造可视化组件，无论从uI设计上，还是CSS样式的引用上，更或是对数据解析中的异常处理上，都可以算是一款优秀的基于Ja-vaScript客户端技术的插件。它面向组化件开发，不同于jQuery的面向Dom开发，并且它还提供了非常多的功能强大的组件，同时它也是支持跨浏览器展示的。可是它框架体积过于庞大，比较适合内网项目的编写。

EXTJS的官方网站是www.sencha，com/products/EXTJS/，截止本文撰写时，最新版本已经到了6.7，插件压缩包有209兆，当然，EXTJS的官网也提供了丰富多彩的例子可供学习，介绍了每种组件的使用方法。值得一提的是，EXTJS本身实现了图表的功能，如果用户用到各种图表的话，不用额外的在下载其他图表插件。可以说，EXTJS是实现功能最全面，自带组件最多的一款JavaScript库，它分为45大类组件库，涵盖了几乎是所有用户能用到的各种组件。当然它也自帶了13种主题，基本可以满足不同系统的风格需要。

如果EXTJS只有绚丽的uI界面与外观，那么项目不一定非要使用EXTJS，使用EasyUI照样可以实现同样的效果。因此，使用EXTJS开发项目的原因就是它采用了面向对象的思想进行建构，就像Java语言一样，所有的组件都有自己的类以及定义，并按照层级关系存放在自己的命名空间里，程序员可以使用面向对象的方法开发程序，就好像在编写简易版Java程序一样，例如：

EXTJS通过require来引入各个组件，就像Java里的import或者c#的using一样。并且通过名字可以清晰的看出引入的是什么类型的组件，grid表示表格，data表示数据类型，form表示表单，等等。引入完成之后就是通过define来定义组件，给这个组件丰富血肉，例如：

在定义组件的方法中，就得明确这个组件的唯-ID，扩展自哪种类型，数据来源，方法，事件等一系列属性，这样才能真正用起来。同时，它还提供了另外一种定义组件的方法，

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

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

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

Model-View-Controller，简称MVC，即通常我们所说的模型一视图一控制器三层架构，这类架构是用来编写软件的一种架构模式。通俗点讲，就是它把软件系统从上往下划分为了三个基本部分：Model一模型层、View-视图层和Controller-控制层，这类模式把复杂的程序结构简单化了。

EXTJS对各个部分定义的功能：

Model一模型层：应用程序涉及的业务逻辑中相关的数据以及对这些数据的处理主要就是用这层进行封装。一个数据字段的集合，可通过关联被链接到其他模型和通过代理链接到一个数据流。

View-视图层：表示数据给用户。任何类型的组件，这些组件将信息输出到浏览器，如Form、Grid、Chart。

Controller-控制层：是应用程序中MVC三层架构的逻辑部分。它用来处理事件并作出一系列的响应。“事件”主要指的用户的行为、数据以及模型上的改变。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特点的对比，我们可以比较深入地了解到这两个前端框架各自的优劣势。简单来讲，就是EasyUI属于“轻量级”，而EXTJS属于“重量级”，毕竟前者面向页面级开发，后者面向应用级开发，组件的丰富程度肯定也是后者要强一些，不难从插件包大小上可以看出来，更可以从例子的展示数量上可以看出来。EasyUI实际使用过程中与HTML语言配合紧密，大多数都是一个页面跟着一个配对的Ja_vascript文件，例如grid.jsp页面要想生效，就要有一个能与它呼应的grid.js文件，这已经是软件开发过程中默认的规范了，而EXTJS则没有这些束缚，往往整个系统只有一个页面，但是却实现了上百个页面的效果，因为其余的全是JavaScript文件，这就是EXTJS带来的效果。从上手难度上来看，EasyUI比较简单，容易掌握，实际使用起来也比较能够快速部署应用，而EX-TJs上手比较难，因为它的设计模式是面向对象的，而组件和工具的数量过于庞大，用户得熟悉每个接口的使用，但是经过长时间的学习使用之后，用户就会发现它的功能是多么的强大。还有就是比较重要的反应速度，这也是用户在实际使用过程中比较关注的地方，当数据量或者数据变化频率达到一定程度后，二者都会变慢，但是EXTJS明显要比EasyUI略慢一些，因为通过分析页面加载的资源文件可以看出来，EXTJS每次在页面打开的时候加载的资源文件数量是EasyUI的好几倍，这些都是可以优化的，不过需要后台优化业务处理逻辑了，这里就不在涉及。

综上所述，通过图1可以清晰地得出结论，如果当用户需要快速开发一个轻量级的系统，尤其是一些个性化的网页的时候，涉及的功能不是很多，例如grid，form，message，tree，select等简单组件就能满足业务需求时，EasvuI是不二选择。如果用户的项目属于重量级的应用系统，对组件的要求比较复杂，那就需要用到它的重用性和可维护性了。对于大中型项目来说，就是把面向对象的概念带入项目开发，使得团队中训练有素的程序员都能够将系统分解，并运用设计模式的理念来开发系统，还有就是用到一些复杂的图表，最好采用EXTJS，总之它是一个有着相对比较完整的生态结构的Javascript框架。

随便看

科学优质学术资源、百科知识分享平台，免费提供知识科普、生活经验分享、中外学术论文、各类范文、学术文献、教学资料、学术期刊、会议、报纸、杂志、工具书等各类资源检索、在线阅读和软件app下载服务。