JS面向对象应用二(多差异流程的WEB客户端逻辑设计实现)
2011-04-07 10:44
786 查看
JS面向对象应用二
----多差异流程的WEB客户端逻辑设计实现
一、问题的提出
随着公司国际化脚步的加快,系统应用的大面积推广,出现了各个分支机构的业务需求差异的情况,尤其以汇款栏目最为明显。
每一个海外分支机构因为其所处的当地监管、以及自身的考虑不同,而导致业务需求不同。界面上最大的不同,主要是因为所选清算系统、清算路径不同,而出现的界面输入要素的不同,包括客户端js联动的不同。
具体来说主要有如下几种情况:
1) 所有分支机构都需要调用的相同代码部分
2) 分支机构之间逻辑实现不同
3) 有些分支机构之间是相同的,而有些分支机构则需要重载
这三条,完全可以套用面向对象的继承、重载、多态的概念。
第一条就是说的继承,第二、三条就是说的重载与多态。用面向对象的方法来解决绝对是专杀!可是如何实现呢?这里面还是有一定技巧的,下面就是详细的设计情况。
二、设计与实现
1. 唯有OO能解决
由于工期原因,加上用JS实现OOP的种种不确定因素,我的第一个方案打算放弃OOP,使用的是下面的简单设计,如图。
![](http://images.cnblogs.com/cnblogs_com/madwww/20103991579031.jpg)
也就是说,我将js,分为公用部分和非公有部分两个文件,非公有js部分每个分行对应一个。
可是遇到了强大的难题:
1:如何界定公用js,后续范围变化了怎么半?代码如何维护?难道要所有分行都要修改嘛,不可能。
2:如何知道我要调用哪个分行的非公有js?这个倒可以通过后面的方法实现。
3:如何重写公用js里面的js方法?
也许还有问题,但到此,这个方案也只得放弃。非常的不现实的,维护代价很高,实现难度也不低,外加实现架构乱!
2.事已至此,唯有实现客户端OOP框架了
A. 基类的实现
使用ProtoType原型实现,并且加入了一个简单的伪名称空间。
文件名字remit.0000.js
//创建一个名称空间BEGIN
var sdc;
if (!sdc) sdc = {};
else if (typeof sdc != "object")
throw new Error("sdc already exists and is not an object, error at remit.0000.js");
if (!sdc.RemitBase) sdc.RemitBase=Class.create();//创建基类!
//创建一个名称空间END
//下面就是给基类增加方法了
Object.extend(sdc.RemitBase.prototype, {
initialize: function() {//此方法必须有
},
payuseOnChanged: function(form, payuseSel, otherField)
{
…………
},
getPayuseInfo:function()
{
…………
},
feecurrtypeOnChange:function(feeObjName){
currConstrainOnChange('*' + feeObjName);
this.showRemitCurType();
},
outAcctOnChangeExtraHandler : function () //各分行自定义附加函数 在remitFun里重写就行了
{
},
outCurrTypeOnChangeExtraHandler : function () //各分行自定义附加函数 在remitFun里重写就行了
{
},
conPageInit : function () //确认页面和OK调用的初始化函数
{
}
…………//其他公用方法
});
B. 子类的实现
我的文件命名规则是remit.地区号.js
var sdc;
if (!sdc) sdc = {};
else if (typeof sdc != "object")
throw new Error("sdc already exists and is not an object, error at remit.js");
var RemitFun = Class.create();
Object.extend(RemitFun.prototype, sdc.RemitBase.prototype);//继承基类
Object.extend(RemitFun.prototype, {//覆盖基类的方法,增加自己的方法
initialize: function() {
},
// Event Handler for inArea
inAreaOnChangedHadler : function (source)
{
…………
},
conPageInit : function () //这里就是覆盖的基类方法。
{
}
});
C. 多态的实现。这里用了一个小技巧。
当时想了几天也没想出来,因为js的运行时怎么可能支持多态呢-_-! 但是,我想到了一个替代的方法,就是依托服务器来实现多态!其实就是:应用服务器能够知道此时需要的子类(分行特定js文件)是什么,让它给发送到浏览器就行了!
实际上只需要一句代码就解决了。但确实很关键,没有这个伪多态是不行的。
这句宝贵的代码就是:
<script type="text/javascript" src="<%=webpath%>js/pages/remit/remit.<icbc:label controlID="jsFilePathInfo" />.js"></script>
红色的代码实际上就是地区号了。
三、总结
至此,汇款的逻辑部分通过以上形式的组织,将他们大部分都装入了js文件。应用了面向对象的方法,实际效果真是出人意料,很不错。
1. 消灭了重复代码,提升了复用性。
2. 可维护性高。由于继承方法,使得新增代码变少了。
3. 代码的灵活性高,逻辑清晰。
这些优点提升了开发的进度,间接的也减少了出错的几率
----多差异流程的WEB客户端逻辑设计实现
一、问题的提出
随着公司国际化脚步的加快,系统应用的大面积推广,出现了各个分支机构的业务需求差异的情况,尤其以汇款栏目最为明显。
每一个海外分支机构因为其所处的当地监管、以及自身的考虑不同,而导致业务需求不同。界面上最大的不同,主要是因为所选清算系统、清算路径不同,而出现的界面输入要素的不同,包括客户端js联动的不同。
具体来说主要有如下几种情况:
1) 所有分支机构都需要调用的相同代码部分
2) 分支机构之间逻辑实现不同
3) 有些分支机构之间是相同的,而有些分支机构则需要重载
这三条,完全可以套用面向对象的继承、重载、多态的概念。
第一条就是说的继承,第二、三条就是说的重载与多态。用面向对象的方法来解决绝对是专杀!可是如何实现呢?这里面还是有一定技巧的,下面就是详细的设计情况。
二、设计与实现
1. 唯有OO能解决
由于工期原因,加上用JS实现OOP的种种不确定因素,我的第一个方案打算放弃OOP,使用的是下面的简单设计,如图。
![](http://images.cnblogs.com/cnblogs_com/madwww/20103991579031.jpg)
也就是说,我将js,分为公用部分和非公有部分两个文件,非公有js部分每个分行对应一个。
可是遇到了强大的难题:
1:如何界定公用js,后续范围变化了怎么半?代码如何维护?难道要所有分行都要修改嘛,不可能。
2:如何知道我要调用哪个分行的非公有js?这个倒可以通过后面的方法实现。
3:如何重写公用js里面的js方法?
也许还有问题,但到此,这个方案也只得放弃。非常的不现实的,维护代价很高,实现难度也不低,外加实现架构乱!
2.事已至此,唯有实现客户端OOP框架了
A. 基类的实现
使用ProtoType原型实现,并且加入了一个简单的伪名称空间。
文件名字remit.0000.js
//创建一个名称空间BEGIN
var sdc;
if (!sdc) sdc = {};
else if (typeof sdc != "object")
throw new Error("sdc already exists and is not an object, error at remit.0000.js");
if (!sdc.RemitBase) sdc.RemitBase=Class.create();//创建基类!
//创建一个名称空间END
//下面就是给基类增加方法了
Object.extend(sdc.RemitBase.prototype, {
initialize: function() {//此方法必须有
},
payuseOnChanged: function(form, payuseSel, otherField)
{
…………
},
getPayuseInfo:function()
{
…………
},
feecurrtypeOnChange:function(feeObjName){
currConstrainOnChange('*' + feeObjName);
this.showRemitCurType();
},
outAcctOnChangeExtraHandler : function () //各分行自定义附加函数 在remitFun里重写就行了
{
},
outCurrTypeOnChangeExtraHandler : function () //各分行自定义附加函数 在remitFun里重写就行了
{
},
conPageInit : function () //确认页面和OK调用的初始化函数
{
}
…………//其他公用方法
});
B. 子类的实现
我的文件命名规则是remit.地区号.js
var sdc;
if (!sdc) sdc = {};
else if (typeof sdc != "object")
throw new Error("sdc already exists and is not an object, error at remit.js");
var RemitFun = Class.create();
Object.extend(RemitFun.prototype, sdc.RemitBase.prototype);//继承基类
Object.extend(RemitFun.prototype, {//覆盖基类的方法,增加自己的方法
initialize: function() {
},
// Event Handler for inArea
inAreaOnChangedHadler : function (source)
{
…………
},
conPageInit : function () //这里就是覆盖的基类方法。
{
}
});
C. 多态的实现。这里用了一个小技巧。
当时想了几天也没想出来,因为js的运行时怎么可能支持多态呢-_-! 但是,我想到了一个替代的方法,就是依托服务器来实现多态!其实就是:应用服务器能够知道此时需要的子类(分行特定js文件)是什么,让它给发送到浏览器就行了!
实际上只需要一句代码就解决了。但确实很关键,没有这个伪多态是不行的。
这句宝贵的代码就是:
<script type="text/javascript" src="<%=webpath%>js/pages/remit/remit.<icbc:label controlID="jsFilePathInfo" />.js"></script>
红色的代码实际上就是地区号了。
三、总结
至此,汇款的逻辑部分通过以上形式的组织,将他们大部分都装入了js文件。应用了面向对象的方法,实际效果真是出人意料,很不错。
1. 消灭了重复代码,提升了复用性。
2. 可维护性高。由于继承方法,使得新增代码变少了。
3. 代码的灵活性高,逻辑清晰。
这些优点提升了开发的进度,间接的也减少了出错的几率
相关文章推荐
- JS面向对象应用一(界面分离JS,多语言及校验组件实现)
- 面向对象程序设计(OOP设计模式)-行为型模式之观察者模式的应用与实现
- js客户端快捷键管理类的较完整实现和应用
- Web用户的身份验证及WebApi权限验证流程的设计和实现
- js面向对象设计用{}好还是function(){}好(构造函数)
- web前端 js面向对象思想
- js的面向对象和设计模式
- JS 面向对象实现 学习总结
- Web用户的身份验证及WebApi权限验证流程的设计和实现
- 使用JCS在Web门户应用中实现对象缓存(3)
- 巩固JAVA面向对象基础应用 -- 实现小巧的数据库1
- 面向Windows的文件透明加解密解决方案(4)——客户端服务设计与功能实现
- 用描写对象的特征来实现面向对象的JS设计 (JS 中级)
- 深入理解this关键字在面向对象设计中的应用
- YbSoftwareFactory 代码生成插件【十六】:Web 下灵活、强大的审批流程实现(含流程控制组件、流程设计器和表单设计器)
- js面向对象开发互联网机顶盒应用头端之六
- 面向对象设计原则和创建SOLID应用的5个方法
- 数据结构模版----单链表SimpleLinkList[带头结点&&面向对象设计思想](C语言实现)
- Node.js巧妙实现Web应用代码热更新