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

 

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文件，易于维护节约带宽，这里的关键是多语言。校验控件减少了重复代码，使程序更可读，可靠。