JS面向对象应用二(多差异流程的WEB客户端逻辑设计实现)

JS面向对象应用二

----多差异流程的WEB客户端逻辑设计实现

一、问题的提出

        随着公司国际化脚步的加快，系统应用的大面积推广，出现了各个分支机构的业务需求差异的情况，尤其以汇款栏目最为明显。

       每一个海外分支机构因为其所处的当地监管、以及自身的考虑不同，而导致业务需求不同。界面上最大的不同，主要是因为所选清算系统、清算路径不同，而出现的界面输入要素的不同，包括客户端js联动的不同。

       具体来说主要有如下几种情况：

        1） 所有分支机构都需要调用的相同代码部分

        2)  分支机构之间逻辑实现不同

        3)  有些分支机构之间是相同的，而有些分支机构则需要重载

 

        这三条，完全可以套用面向对象的继承、重载、多态的概念。

        第一条就是说的继承，第二、三条就是说的重载与多态。用面向对象的方法来解决绝对是专杀！可是如何实现呢？这里面还是有一定技巧的，下面就是详细的设计情况。

二、设计与实现

    1. 唯有OO能解决

            由于工期原因，加上用JS实现OOP的种种不确定因素，我的第一个方案打算放弃OOP，使用的是下面的简单设计，如图。

 

也就是说，我将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.    代码的灵活性高，逻辑清晰。

这些优点提升了开发的进度，间接的也减少了出错的几率