博客园_madwww

JSON2.js与Prototype同时使用所出现的bug

2011-04-20T10:32:00Z

同时使用JSON2.js和prototype，会导致json方法对于数组对象处理出现错误。

解决方案是：使用json2的json方法，但要增加附加函数来修正。

json_data = JSON.stringify(outAcctList_groupInfo, function(key, value) {
if (typeof this[key] == 'object' && Object.prototype.toString.apply(this[key]) === '[object Array]') {
return this[key];
} else {
return value;
}
});

本文链接

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

2011-04-07T02:44:00Z

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文件)是什么，让它给发送到浏览器就行了！

    实际上只需要一句代码就解决了。但确实很关键，没有这个伪多态是不行的。

   这句宝贵的代码就是：

红色的代码实际上就是地区号了。

三、总结

至此，汇款的逻辑部分通过以上形式的组织，将他们大部分都装入了js文件。应用了面向对象的方法，实际效果真是出人意料，很不错。

1.    消灭了重复代码，提升了复用性。
        2.    可维护性高。由于继承方法，使得新增代码变少了。
        3.    代码的灵活性高，逻辑清晰。

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

本文链接

JS面向对象应用一(界面分离JS,多语言及校验组件实现)

2011-04-07T02:40:00Z

JS面向对象应用一

----界面分离JS,多语言及校验组件实现

一、多语言实现

海外以前的代码由于有多语言方面的阻碍，一直是jsp和js语言混合编写在同一页面。这样做，第一不符合逻辑分离原则；第二也对带宽造成浪费，不经济。

只要解决了多语言就能实现js可分离。

1.1原来的代码形式：//通过utb这个javabean来动态获得多语言翻译

if(outAcctNameE.trim().length == 0){

alert("<%=utb.getJSAlert("VALID00005")%>"); //请输入汇款人英文户名

document.frmRemitApply.outAcctNameE.focus();

return;

}

代码1

1.2实现方案：

登录后可以取得当前语言的信息，于是只将需要的翻译写在jsp上，并且使用JSON形式组织，其他代码分离到js文件中

新代码jsp中：

<% //存储所有的js校验提示信息 %>

var myErrMsg = {

inputManual:'<icbc:label text="remit_remitApplyinputManual" />', //手工输入

saveSampleConfirmTitle:'<%=utb.getJSAlert("VALID00035")%>', //您是否要保存样本?

mustAgree:'<%=utb.getJSAlert("VALID00025")%>', //没有勾选阅读须知，不能提交。

selectProvince:'<%=utb.getJSAlert("VALID0132")%>'

};

在使用的地方直接使用myErrMsg.XXXXXX(例如: myErrMsg.mustAgree)就可以了，通过这个方法，就可以将业务逻辑提取成js文件了。Js文件中的翻译使用myErrMsg对象就可以了。

二、校验组件

对于用户的输入是需要校验内容的，其中有很多是相同的逻辑，如校验是否必输并且提示、校验是否是数字并且提示、校验是否是英文等等。

其调用形式非常类似于上面的代码1，而我们的业务逻辑经常就是多个这样类似的代码组合而成的校验组合，其最后会返回一个校验结果(True 或 False)。

这个组件基本上不会有继承和重载的情况出现，所以只需封装一下这些数据和方法即可。

2.1Validation类的设计

2.2Validation类的实现，使用prototype原型继承方式创建类。

function Validation()

{

this.res = true; //校验成功标志

}

校验方法的封装：

Object.extend(sdc.validation, {

//弹出错误提示信息并置焦点与控件之上

displayInfoAndFocus: function(obj,str,focusId){

obj.res = false;

alert(str);

if($(focusId) != null && $(focusId).style.display != "none" && !$(focusId).disabled)

$(focusId).focus();

//校验必输项是否输入值了

requiredValid: function (elemId,str,focusId){

if(arguments.length == 2)

focusId = elemId;

if( this.res && !($(elemId).value.trim().length > 0) )

{

sdc.validation.displayInfoAndFocus(this,str,focusId);

}

return this.res;

}

………………省略其他校验方法

});

每一步判断this.res这个值是一个关键，也就是组合校验的情况下，必须保证前面校验都已经正确了才能进行下面的校验。

创建类的方法：

Validation.prototype.requiredValid = sdc.validation.requiredValid;

Validation.prototype.hasChinese = sdc.validation.hasChinese;

…………省略

2.3使用示例：

function test(){

//先new出一个对象

var valid = new Validation();

//请输入收款人户名

valid.requiredValid("inAcctName", myErrMsg.requiredinAcctName);

//收款人名称最大136个字符

valid.maxLengthByteValid("inAcctName", 136 , myErrMsg.maxName);

//这里是结合使用非组件验证的情况

if(valid.res && $("iAgreeChk") != null && $("iAgreeChk").checked == false)

{

alert(myErrMsg.mustAgree);

valid.res = false;

}

return valid.res;

}

三、总结

由此页面逻辑可以分离出jsp页面形成单独的js文件，易于维护节约带宽，这里的关键是多语言。校验控件减少了重复代码，使程序更可读，可靠。

本文链接

使用VS调试JavaScript

2008-07-01T14:47:00Z

解决SplitContainer的Click事件不能正确执行的问题

2008-06-17T13:39:00Z

别拿软件不当工程

2008-04-29T14:52:00Z

IE6 CSS文件注释bug

2008-03-20T14:30:00Z

我的2007

2007-12-27T15:51:00Z

2007年，我走出了朝夕为伴的校园，迈入了社会。

关于document.getElementById(ID与Name的区别)

2007-12-22T01:50:00Z

对于HTML中的Id和Name。

测试第一帖子

2007-04-26T14:05:00Z

测试下。。。