javascript

位置:IT落伍者 >> javascript >> 浏览文章

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


发布日期:2018年01月19日
 
利用ExtJS构建客户端三层初探

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

为什么要搞客户端三层?

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

基本知识

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

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

Extns(testcls);

testcls = function() {

}

testclsstaticShow = function() {

alert(这是静态函数);

}

testclsprototypeinstanceShow = function() {

alert(这是实例函数);

}

调用如下

var temp = new testcls();

tempinstanceShow()

testclsstaticShow()

数据访问层

Extns(buzzdatautility);

buzzdatautilitybuildHttpStroe = function() {

return new ExtdataStore({

proxy: new ExtdataHttpProxy()

});

}

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

中间层

Extns(buzzuser);

buzzuser = ExtdataRecordcreate([

{ name: PersonName mapping: name type: string }

{ name: PersonID mapping: id type: int }

]); //数据模型对应服务器端的数据模型

buzzuserload = function(url loadedCallback) {

var st = buzzdatautilitybuildHttpStroe();

stproxygetConnection()url = url;

streader = new ExtdataJsonReader({ root: data } buzzuser);

ston(load loadedCallback);

stload();

} //静态方法用以从服务器端返回数据返回类型为buzzuser类型参数url是要调用数据的地址loadedCallback是回调函数

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

表现层部分

ExtonReady(function() {

Extget(btn)on(click function() {

buzzuserload(jsonashx callback);

});

});

function callback(st res op) {

for (var i = ; i < reslength; i++) {

alert(Stringformat({}{} res[i]get(PersonID) res[i]get(PersonName)));

}

}

回调函数三个参数ststore对象resRecord数组op其它附加选项

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

               

上一篇:JS实现鼠标点击复制标题和地址

下一篇:使用div仿javascript模态窗口