Menu
Woocommerce Menu

面向对象编程基础,IE兼容性的修改小结银河国际网址手机版

0 Comment

Javascript已经可以模拟出面向对象的封装和继承特性,但是不幸的是Javascript对多态特性的支持非常弱!其它面向对象语言的多态一般都由方法重载和虚方法来实现多态,Javascript也通过这两种途径来实现!

1.html 标签如果用 $(id) 或者 getElementById
这两个方法取值时,要给该标签加上 id 的属性, IE 、 FF 才兼容。如
$(mobile): 如果填 写 mobile 的 input 没有 id 属性在 FF 中会报这个变量
undefined ;

这个时候我们最好是将cookie操作封装起来,便于重用啊

复制代码 代码如下:

/**
类 Cookie
将此类放入用到的js文件中即可使用
1.add(name,value,100); 添加一个cookie
2.get(name);
3.remove(name);
用例:
Cookie.add(“sk”,”ss”,3);
alert(cookie.get(“sk”));
Cookie.remove(“sk”);
*/
var Cookie=new function(){
//添加cookie
this.add=function(name,value,hours){
var life=new Date().getTime();
life+=hours*1000*60;
var cookieStr=name+”=”+escape(value)+”;expires=”+new
Date(life).toGMTString();
document.cookie=cookieStr;
};
//获取cookie值
this.get=function(name){
var cookies = document.cookie.split(“;”);
if(cookies.length>0){
var cookie=cookies[0].split(“=”);
if(cookie[0]==name)
return unescape(cookie[1]);
}
return null;
};
//删除cookie
this.remove=function(name){
var cookieStr=name+”=”+escape(‘null’)+”;expires=”+new
Date().toGMTString();
document.cookie=cookieStr;
};
}

===================== 复制代码 代码如下: /** 类 Cookie
将此类放入用到的js文件中即可使用…

重载:由于Javascript是弱类型的语言,而且又支持可变参数,当我们定义重载方法的时候,解释器无法通过参数类型和参数个数来区分不同的重载方法,因此方法重载是不被支持的!当先后定义了同名的方法的时候,后定义的方法会覆盖先定义的方法!

  1. 取 form 表单的某个标签对象,如果要 IE 、 FF 兼容要把 formMain.item
    改为 document.formName.item 。
    如 form1.webUrl 改为 document.form1.webUrl 。
    如果 form 作为一个参数传给某个函数,也要加上 “document.”, 如
    search(formMain) 改为 search(document.formMain)
  2. 取 html 的自定义属性用 obj.attributeName 改为
    obj.getAttribute(“attributeName”) 取则 IE 、 FF
    兼容;非自定义属性仍可以按照
    obj.attributeName 取。
    如: <input type=”text” name=”memberCn”
    checkValue=”notNull;eLength:25″> 这个标签中的 checkValue
    属性为自定义属性,要用 obj.getAttribute(“checkValue”) 取, IE 、 FF
    才兼容,其他属性如 type 属性则仍然可以用 obj.type 取
    4.eval 函数,在 FF 和 IE 中使用不一样 , 在 FF 中用“ +
    ”连接成的一个可执行语句作为 eval 的参数时,不能执行而在 IE 中可以。遇到
    要用 eval 时,尽量找别的方法代替。
    如: eval(“msg_” + textbox.name+ “ .className=’wrong’ ”) ;
    “msg_” + textbox.name+ “ .className=’wrong’ ”这句话作为 eval 的参数在
    IE 中能执行,在 FF 中执行时报 “msg_” + textbox.name 连接得到的空间名
    undefined ,不能执行, 要修改为:
    document.getElementById(“msg_” + textbox.name).className=’wrong’;
  3. 样式中的 display 的属性 block ,在 FF 中如果遇到异常可以变为空;如
    item.style.display=”block” 可以改为 item.style.display=””
    如 $(“divType4″).style.display=”block”;
    改为 $(“divType4″).style.display=””;
  4. 再添加一个: label 在 FF 中好像跟 IE 不一样:比如说以下代码:
    <td colspan = “3” class = “line_l”> 成人 <label>
    <input name = “amount” type = “text” value = “${amount} ” size = “6”
    maxlength = “10” eleName = “[ 成人预订人数 ]” checkValue =
    “notNull;eLength:10;isLong” />
    人        儿童
    <input name = “kidAmount” type = “text” value = “${kidAmount} ” size
    = “6” maxlength = “10” eleName = “[ 儿童预订人数 ]” checkValue =
    “notNull;eLength:10;isLong” />
    人 <span class = “line_red”> * </ span></label>
    </ td>
    这样写在 FF 中输入时儿童的光标总是跑到成人那里去, IE
    中不会,而这样写就不会:
    <td width = “25%”> 成人 <label>
    <input name = “amount” type = “text” value = “${amount} ” size = “6”
    maxlength = “10” eleName = “[ 成人预订人数 ]” checkValue =
    “notNull;eLength:10;isLong” /> 人 </ label></ td>
    <td width = “75%”> 儿童 <label><input name = “kidAmount”
    type = “text” value = “${kidAmount} ” size = “6” maxlength = “10”
    eleName = “[ 儿童预订人数 ]” checkValue = “notNull;eLength:10;isLong”
    /> 人 </ label></ td>
    注意 label 的位置,一个是在两个 input 的外面,一个是在一个 input
    的外面,
    难道 label 标签在 FF 中不能包含两个输入的标签???
    还有一个地方:代码如下:
    <td><label>
    <select name = “provinceId” id = “provinceId” onchange =
    “iniCity(document.frmMain.provinceId,document.frmMain.cityId,document.frmMain.subCity);”
    eleName = “[ 所在省份 ]” checkValue = “IS_LONG”>
    </ select> 省
    <select name = “cityId” id = “cityId” onchange =
    “iniSubCity(document.frmMain.provinceId,document.frmMain.cityId,document.frmMain.subCity);”
    eleName = “[ 所在城市 ]” checkValue = “IS_LONG”></ select>

    <select name = “subCity” id = “subCity” eleName = “[ 所在县区 ]”
    checkValue = “IS_LONG”></ select>
    <span class = “red”> * </ span></label></ td>
    这个代码时第二个,第三个 select 的光标固定不住,应该是跑到了第一个
    select 上去了,但因为是 select 所以看不到,但是上面的 input
    能看到。同样这个问题在 IE 中正常。我觉得这个也说明了我上面的说法。

既然解释器无法分辨重载方法,那就手动区分不同的方法:

标签如果用 $(id) 或者 getElementById
这两个方法取值时,要给该标签加上 id 的属性, IE 、 FF 才兼容。如
$(mobile): 如果填 写 mobile 的 inp…

复制代码 代码如下:

var MyClass=function(){
var AddNum=function(a,b){
return a+b;
}
var AddString=function(a,b){
return “I am here”+a+b;
}
this.Add=function(a,b){
if(typeof(a)==”number”)
return AddNum(a,b);
else
return AddString(a,b);
}
}
var MyObj = new MyClass();
var X = MyObj.Add(5,6);
var Y = MyObj.Add(“A”,”FFFFFF”);
alert(X); //结果:11
alert(Y); //结果:I am hereAFFFFFF

虚方法:

标签:,

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章

网站地图xml地图