利用ExtJS构建客户端三层初探

在软件架构中,特别是B/S架构中,很流行使用三层架构(数据层、中间层、 表现层)来建立软件。但这从来都是服务器端的专利。在传统的概念中,客户端 的职责就只是用来对数据进行展现而已。如果说客户端也搞三层,确实是一样不 可思议的事件。

为什么要搞客户端三层?

ExtJS这个框架是个功能很强大的框架,由于它给了开发者很大的自由度跟细 粒度。开发者在开发的过程中,配置、使用一个组件需要编写许多的代码。工作 量大不说,效率低,可重用性低却是致命的。所以,聪明的开发者,应该积极利 用ExtJS里的面向对象功能,简化自己的工作。定制自己的组件。才能提高自己 的效率。所以,除了在服务器端也搞三层,我们也可以在客户端搞三层,定制组 件,简化工作。

基本知识

Ext.ns()(或Ext.namespace()函数)。相信很少有人去使用这个函数,这个 函数用以构建一个新的命名空间。概念跟C#的命名空间或Java中的包概念一样。 观察源代码我们可以发现。实际上这个函数只是建立了一个跟命名空间一样的类 而已。比如:Ext.ns('buzz.data.utility');,就会新建一个类,名称是 buzz.data.utility。有了这个概念,我们就好办了。

实例函数与静态函数,这两种函数的区别我就不讲了,主要讲讲如何在JS中 实现。用例子说明或许会比较直观。

1 Ext.ns('test.cls');
2 test.cls = function() {
3
4 }
5 test.cls.staticShow = function() {
6     alert('这是静态函数');
7 }
8
9 test.cls.prototype.instanceShow = function() {
10     alert(' 这是实例函数');
11 }

调用如下:

1 var temp = new test.cls();
2 temp.instanceShow()
3 test.cls.staticShow()

数据访问层

1 Ext.ns('buzz.data.utility');
2 buzz.data.utility.buildHttpStroe = function() {
3     return new Ext.data.Store({
4         proxy: new Ext.data.HttpProxy()
5     });
6 }

该层用于返回一个进行基本封装的Store对象。

中间层

1 Ext.ns('buzz.user);
2 buzz.user = Ext.data.Record.create([
3     { name: 'PersonName', mapping: 'name', type: 'string' },
4     { name: 'PersonID', mapping: 'id', type: 'int' }
5 ]); //数据模型,对应服务器端的数据模型
6
7 buzz.user.load = function(url, loadedCallback) {
8      var st = buzz.data.utility.buildHttpStroe();
9     st.proxy.getConnection().url = url;
10     st.reader = new Ext.data.JsonReader({ root: 'data' }, buzz.user);
11     st.on('load', loadedCallback);
12     st.load();
13 }  //静态方法,用以从服务器端返回数据,返回类型为buzz.user类型,参数url是 要调用数据的地址,loadedCallback是回调函数

中间层部分,我们新建了一个buzz.user类(命名空间),该类直接创建自 Record对象,该对象是定制的,与服务器端数据模型对应的。注意使用mapping 进行映射。而buzz.user.load方法是一个静态方法。不需要实例化即可使用。

表现层部分

1 Ext.onReady(function() {
2     Ext.get('btn1').on ('click', function() {
3         buzz.user.load ('json1.ashx', callback);
4     });
5 });
6
7 function callback(st, res, op) {
8     for (var i = 0; i < res.length;  i++) {
9         alert(String.format('{0}, {1}', res[i].get('PersonID'), res[i].get('PersonName')));
10      }
11 }
12 

回调函数三个参数,st:store对象;res:Record数组;op:其它附加选项

该篇文章只作抛砖引玉的作用。实际开发中,还需要更多考虑的地方。

时间: 2024-08-06 20:05:11

利用ExtJS构建客户端三层初探的相关文章

利用Servlet开发企业级三层Web应用(一)

随着Web技术的深入发展,传统的客户机/服务器结构的企业级应用系统已逐渐为浏览器/中间层/后台数据库服务器的三层结构所代替,这种结构的改变无论是在Microsoft的Windows DNA中还是在以Java技术为核心的应用中都得到了具体的体现.Servlet技术的出现推动了以Java为核心技术的企业级三层Web应用的发展,它最适合于开发与Web服务器紧密相关的中间层. 1.利用Servlet技术的三层结构解决方案 企业级Web应用通常包含Web浏览器.中间层和后台数据库服务器三个层次. (1)W

利用keepalived构建高可用MySQL-HA

介绍利用keepalived构建高可用MySQL-HA,保证两台MySQL数据的一致性,然后用keepalived实现虚拟IP,通过keepalived自带的服务监控功能来实现MySQL故障时自动切换. AD: 关于MySQL-HA,目前有多种解决方案,比如heartbeat.drbd.mmm.共享存储,但是它们各有优缺点.heartbeat.drbd配置较为复杂,需要自己写脚本才能实现MySQL自动切换,对于不会脚本语言的人来说,这无疑是一种脑裂问题:对于mmm,生产环境中很少有人用,且mmm

利用EXTJS来显示LDAP的树状结构

下列程序主要是利用EXTJS的tree对LDAP中的数据进行一层层list出现,显示为一个树状.有点类似Softerra LDAP的结构.可以添加类似的操作,比如:修改.拖拽等等.在这就没列出了.程序用到了Spring-Ldap 所以需要相应的包.extjs用的是2.3.0: 树的js代码 Operate.js代码 buildUnitTree=function(){ //定义根节点的Loader // var treeloader=new Tree.TreeLoader({dataUrl:'un

在Eclipse下利用gradle构建系统

简介:构建系统时候常常要用到 Ant, Maven 等工具,对于初学者来说,它们还是过于复杂,上手还 是需要时间的.本文将向读者介绍一种全新的构建项目的方式 gradle,它简单.上手快,能大大节省项 目的时间和成本. 在 eclipse 下利用 gradle 构建系统 基本开发环境 操作系统:本教程使用的为 Windows Vista Enterprise, 如果您的系统是 Linux 的,请选择下载对 应版本的其他工具,包括开发工具.Java EE 服务器.Apache Ant.SoapUI

利用GoAhead构建嵌入式web应用

1 简介 廉价的硬件,功能强大的32操作系统,以及无处不在的因特网,它们一起促成了网络应用和设备的飞速增长.大量的设备连接到网络上,于是人们希望通过一种通用.熟悉.快捷的方式来访问和控制它们.嵌入式web服务器正好迎合了这种需求,它们嵌入在网络设备之中,使用标准的浏览器就可以远程访问和控制它们. 然而,并不是所有的web服务器都可以担当如此重任,我们需要的是一个强大,安全,标准的,而且最好是久经考验的嵌入式web服务器.这里将要介绍的GoAhead嵌入式web服务器能够满足所有这些需求,包括西门

利用userData实现客户端保存表单数据

利用userData实现客户端保存表单数据 作者:bencalie  整理日期:2004年6月15日 对于多数网页制作的朋友,实现在客户端保存在网页表单上的信息,比较多的是采用Cookie技术来实现,这些功能例如:下拉列表框选择的选项,文本框输入的数据等.事实上,我们可以利用微软DHTML默认行为中的userData行为来实现这个功能. 因为很多网友问到这样的问题,整理了一下,并提供了三个示例.下面将就该行为的使用做一个介绍: UserData 行为(userData Behavior): 1.

利用OpenVSwitch构建多主机Docker网络

本文讲的是利用OpenVSwitch构建多主机Docker网络,[编者的话]当你在一台主机上成功运行Docker容器后,信心满满地打算将其扩展到多台主机时,却发现前面的尝试只相当于写了个Hello World的入门程序,多主机的网络设置成了下一道门槛.在你尝试各种方案时不妨先看看本文,或许就会豁然开朗,发现原来也不复杂.嗯,是的,本文用到了OpenVSwitch. 运行Docker已经不是什么新鲜事,网上有很多入门教程来帮助你在一台主机上运行容器.这台主机可以是Linux服务器,也可以是Mac(

如何利用HTML5构建一个基本的Web操作系统

然而目前的 Web 操作系统前端大多基于 Flex.Silverlight.ActiveX 插件等技术开发,存在着对移动设备的支持性差,终端安全性差,开发难度大等缺点. HTML5 是下一代 web 语言的标准,具有兼容性好,安全性高,功能丰富,开发便捷等优点,特别适合如 Web 操作系统一类的富客户端互联网应用的前端开发.本文将展示如何利用 HTML5 提供的多种新技术如:本地数据库.多线程开发.视频支持.离线编程等构建一个基本的 Web 操作系统. 传统的操作系统有着一些难以克服的缺点,如仅

利用VS2005构建针对DB2的应用程序和Web站点

在本文中,讲述利用 IBM tooling for Visual Studio 2005 构建针对 DB2的Windows 应用程序和Web 站点.本文讲述如何依照 Visual Studio 2005 中引入的最新的简单范型来构建此类应用程序和Web 站点. 前提条件 在开始构建应用程序和Web 站点之前,请确保已执行了以下步骤: 下载并安装 IBM Database Add-ins for Visual Studio 2005.有关下载和安装说明,请访问 developerWorks Inf