IT博客网-A JavaScript Fancier-随笔分类-javascript代码研究http://www.cnitblog.com/yemoo/category/3109.html伟大的javascript技术研究中...zh-cnFri, 26 Oct 2007 05:27:30 GMTFri, 26 Oct 2007 05:27:30 GMT60增强程序的灵活性--使用JSON作为函数的参数http://www.cnitblog.com/yemoo/archive/2007/10/26/35373.htmlYemoo'S JS BlogYemoo'S JS BlogFri, 26 Oct 2007 04:24:00 GMThttp://www.cnitblog.com/yemoo/archive/2007/10/26/35373.htmlhttp://www.cnitblog.com/yemoo/comments/35373.htmlhttp://www.cnitblog.com/yemoo/archive/2007/10/26/35373.html#Feedback0http://www.cnitblog.com/yemoo/comments/commentRss/35373.htmlhttp://www.cnitblog.com/yemoo/services/trackbacks/35373.html
var rootMenu=new Ext.tree.TreeNode({
        text:"示例中心",
        expanded:true
    });

Ext.MessageBox.show({
            title:"消息提示区内容",
            msg:hArea.dom.innerHTML,
            width:200,
            buttons:Ext.MessageBox.OK,
            animEl:hArea
        });

使用过Ext的朋友可能会发现，在其所有的API中大量用到了JSON对象，Ext使用类如配置的方式来生成各个页面对象等，其特点就是函数的参数大都是json对象，其主要特点就是函数的参数大都是json对象。
如

等等此类的用法在Ext中到处可见，那么那样写有什么优点呢？为什么不直接写函数参数而要通过JSON对象作为参数传入？

今日查看了Ext的帮助说明才真正认识到使用json对象作为函数参数的优点。
总结两点：

1、程序灵活性高，容易扩展和使用。
我们可以随时为一个函数添加/删除参数或在任意参数位置添加新参数，而不会像传统参数一样必须按照规定的顺序书写，而且每次添加或删除函数某个参数都要函数内容进行修改。而使用JSON作为参数可以不用考虑参数顺序。
看下面代码演示：
<script type="text/javascript">
  <!--
  //普通方法
  function commonArg(name,age,desc){
    var userinfo="name: "+name+","+"age: "+age+"\ndescription: "+desc;
    alert(userinfo);
  }
  commonArg("yemoo",22,"a boy!")//每次调用都必须按照规定的参数顺序书写，如果写成commonArg(22,"yemoo","desc")则返回信息就不对，每次都必须记忆每个参数意义及顺序
  
  //JSON参数法
  function jsonArg(info){
    var userinfo="name: "+info.name+"\tage: "+info.age+"\ndescription: "+info.desc;
    alert(userinfo);
  }
  jsonArg({name:"blue",age:22,desc:"a gril?"});
  jsonArg({desc:"not a people!",name:"sss",age:0});
  //参数位置可以随意写
  //-->
  </script>

普通函数缺点很明显：必须记忆参数意义和顺序。而使用JSON的方法则不需要。

2、使用者对函数的调用非常方便，特别是在只需要传入其中几个或一个参数时。
看下面的代码演示：
<script type="text/javascript">
  <!--
  //普通方法
  function commonArg(name,age,desc){
    var userinfo="name: "+(name||"empty")+"\tage: "+(age||0)+"\ndescription: "+desc||"empty";
    alert(userinfo);
  }
  //当只需要设定后面的参数时前面每个参数都需要设置为null
  commonArg("tempUser");
  commonArg(null,null,"a boy!");
  commonArg(null,20);
  
  //JSON参数法
  function jsonArg(info){
    var userinfo="name: "+(info.name||"empty")+"\tage: "+(info.age||0)+"\ndescription: "+(info.desc||"empty");
    alert(userinfo);
  }
  //每次只需要设置需要设定参数项
  jsonArg({name:"tempUser"});
  jsonArg({desc:"a boy!"});
  jsonArg({age:20});
  //-->
  </script>

JSON方法优点很明显：每次只需传入需要的参数即可，而不用考虑其他参数。

JSON真是一个好用的东西，不用在ajax方面还是在js的其他方面都体现了其方便灵活的特性，的确应该好好去挖掘和学习json。



Yemoo'S JS Blog 2007-10-26 12:24 发表评论
]]>JSON变量值的巧妙传入方式(Ext2学习总结)http://www.cnitblog.com/yemoo/archive/2007/10/11/34714.htmlYemoo'S JS BlogYemoo'S JS BlogThu, 11 Oct 2007 08:48:00 GMThttp://www.cnitblog.com/yemoo/archive/2007/10/11/34714.htmlhttp://www.cnitblog.com/yemoo/comments/34714.htmlhttp://www.cnitblog.com/yemoo/archive/2007/10/11/34714.html#Feedback0http://www.cnitblog.com/yemoo/comments/commentRss/34714.htmlhttp://www.cnitblog.com/yemoo/services/trackbacks/34714.html

   这曾经是一个困扰我很久的问题，如果我们想把JSON的某个值设定为某个变量该怎么设置呢？
如var json={a:"xxx",b:"yyy"}
如果我们想将该语句中的值xxx,yyy分别保存在两个变量上，然后传入变量名，该如何设置呢？大概你不会想到这样吧？
var a="xxx";var b="yyy";var json={a:a,b:b}

我没有这样做过，一般的做法为：
var a="xxx",b="yyy";var json="{a:'"+a+"',b:'"+b+"'}";json=eval("("+json+")")

这样做的确挺麻烦的，但当初还真没有好办法。

今天在Ext中看到果真可以使用我们前面的那种写法，json会自动区分冒号前的是json名称值，后面的是传入的变量。
这样就简便多了。感叹一下：js语法真是妙！

以后可以这样用了：
var a="xxx";var b="yyy";var json={a:a,b:b}



Yemoo'S JS Blog 2007-10-11 16:48 发表评论
]]>document.compatMode介绍(Ext2学习总结) http://www.cnitblog.com/yemoo/archive/2007/10/11/34713.htmlYemoo'S JS BlogYemoo'S JS BlogThu, 11 Oct 2007 08:46:00 GMThttp://www.cnitblog.com/yemoo/archive/2007/10/11/34713.htmlhttp://www.cnitblog.com/yemoo/comments/34713.htmlhttp://www.cnitblog.com/yemoo/archive/2007/10/11/34713.html#Feedback0http://www.cnitblog.com/yemoo/comments/commentRss/34713.htmlhttp://www.cnitblog.com/yemoo/services/trackbacks/34713.html

   对于document.compatMode，很多朋友可能都根我一样很少接触，知道他的存在却不清楚他的用途。今天在ext中看到document.compatMode的使用，感觉这个对于我们开发兼容性的web页面还是很有帮助，我们都知道，IE对盒模型的渲染在Standards Mode和Quirks Mode是有很大差别的，在Standards Mode下对于盒模型的解释和其他的标准浏览器是一样，但在Quirks Mode模式下则有很大差别，而在不声明Doctype的情况下，IE默认又是Quirks Mode。所以为兼容性考虑，我们可能需要获取当前的文档渲染方式。
      document.compatMode正好派上用场，它有两种可能的返回值：BackCompat和CSS1Compat，对其解释如下：
BackCompat Standards-compliant mode is not switched on. (Quirks Mode)
CSS1Compat Standards-compliant mode is switched on. (Standards Mode)

     在实际的项目中，我们还需要在获取浏览是否IE，这样就可以得到IE的渲染模式了。在Ext中的代码：isBorderBox=isIE&&!isStrict。



Yemoo'S JS Blog 2007-10-11 16:46 发表评论
]]>有关window.undefined=window.undefined写法的理解(Ext2学习总结) http://www.cnitblog.com/yemoo/archive/2007/10/11/34712.htmlYemoo'S JS BlogYemoo'S JS BlogThu, 11 Oct 2007 08:37:00 GMThttp://www.cnitblog.com/yemoo/archive/2007/10/11/34712.htmlhttp://www.cnitblog.com/yemoo/comments/34712.htmlhttp://www.cnitblog.com/yemoo/archive/2007/10/11/34712.html#Feedback0http://www.cnitblog.com/yemoo/comments/commentRss/34712.htmlhttp://www.cnitblog.com/yemoo/services/trackbacks/34712.html

  在jquery中我们见到window.undefined=window.undefined的写法，今日又在ext中见到window["undefined"]=window["undefined"]，对其写法非常不理解，将自身赋给自身有什么意义，在网上狂搜一番也没有明确的解释，后来看到ext注释写了这么一句：for old browsers，很明显是为了兼容老的浏览器，思虑半天，似乎有了些理解。

  在较老的浏览器中，如IE5之前的浏览器，undefined并不是window对象的一个子对象，并不是一个已实现的系统保留字，而是代表一个未定义类型，除了直接赋值和typeof()之外，其它任何对undefined的操作都将导致异常。如果需要知道一个变量是否是undefined，只能采用typeof()的方法：如var v;if (typeof(v) == 'undefined') {// ...}。如果使用if(a==="undefined")则会报“undefined未定义”的错误。
      因此为了兼容IE5及之前的浏览器，我们可以使用一些方法来解决这个问题。本文前面说到的就是其中一种方式。window.undefined=window.undefined;咋一看很难理解，写法有点bt，但理解一下就不觉得奇怪了，在较早的浏览器中因为window.undefined不存在所以会返回undefined，将此赋给等号前的window.undefined这样后面就可以直接使用if(a==="undefined")的判断方式了。在新版本的浏览器中window.undefined=undefined；因此不会造成什么负面影响。

  除了使用window.undefined=window.undefined和window["undefined"]=window["undefined"]外，还有很多别的办法来实现对IE5及之前浏览器的兼容，如
var undefined = void null;  //void函数永远返回undefined
var undefined = function(){}();
var undefined = void 0;
只要等号后的表达式返回undefined即可。


Yemoo'S JS Blog 2007-10-11 16:37 发表评论
]]>兼容FF/IE的insertAdjacentHTML方法【Ext2学习总结】http://www.cnitblog.com/yemoo/archive/2007/10/11/34711.htmlYemoo'S JS BlogYemoo'S JS BlogThu, 11 Oct 2007 08:36:00 GMThttp://www.cnitblog.com/yemoo/archive/2007/10/11/34711.htmlhttp://www.cnitblog.com/yemoo/comments/34711.htmlhttp://www.cnitblog.com/yemoo/archive/2007/10/11/34711.html#Feedback0http://www.cnitblog.com/yemoo/comments/commentRss/34711.htmlhttp://www.cnitblog.com/yemoo/services/trackbacks/34711.html

  今日研读大名鼎鼎的Ext框架源码，开始以为他们的代码一定超复杂难懂，但读了一点才发现，代码写的非常清晰易懂，设计严谨巧妙，确实一帮牛人之作。
废话不多说，说说今日收获：今日读到insertHtml部分发现这个方法其实是实现了兼容FF的insertAdjacentHTML方法，仔细看看感觉挺不错，于是提取出来，便于今后使用。

方法名称：insertHtml(where,el,html)

参数介绍：
where：插入位置。包括beforeBegin,beforeEnd,afterBegin,afterEnd。
el：用于参照插入位置的html元素对象
html：要插入的html代码

源码如下：
<script type="text/javascript">
  <!--
    function insertHtml(where, el, html){
        where = where.toLowerCase();
        if(el.insertAdjacentHTML){
            switch(where){
                case "beforebegin":
                    el.insertAdjacentHTML('BeforeBegin', html);
                    return el.previousSibling;
                case "afterbegin":
                    el.insertAdjacentHTML('AfterBegin', html);
                    return el.firstChild;
                case "beforeend":
                    el.insertAdjacentHTML('BeforeEnd', html);
                    return el.lastChild;
                case "afterend":
                    el.insertAdjacentHTML('AfterEnd', html);
                    return el.nextSibling;
            }
            throw 'Illegal insertion point -> "' + where + '"';
        }
  var range = el.ownerDocument.createRange();
        var frag;
        switch(where){
             case "beforebegin":
                range.setStartBefore(el);
                frag = range.createContextualFragment(html);
                el.parentNode.insertBefore(frag, el);
                return el.previousSibling;
             case "afterbegin":
                if(el.firstChild){
                    range.setStartBefore(el.firstChild);
                    frag = range.createContextualFragment(html);
                    el.insertBefore(frag, el.firstChild);
                    return el.firstChild;
                }else{
                    el.innerHTML = html;
                    return el.firstChild;
                }
            case "beforeend":
                if(el.lastChild){
                    range.setStartAfter(el.lastChild);
                    frag = range.createContextualFragment(html);
                    el.appendChild(frag);
                    return el.lastChild;
                }else{
                    el.innerHTML = html;
                    return el.lastChild;
                }
            case "afterend":
                range.setStartAfter(el);
                frag = range.createContextualFragment(html);
                el.parentNode.insertBefore(frag, el.nextSibling);
                return el.nextSibling;
            }
            throw 'Illegal insertion point -> "' + where + '"';
    }



Yemoo'S JS Blog 2007-10-11 16:36 发表评论
]]>一段代码学习感想(使用面向对象方法将多维数组转换为一维数组)http://www.cnitblog.com/yemoo/archive/2007/01/07/21622.htmlYemoo'S JS BlogYemoo'S JS BlogSun, 07 Jan 2007 15:25:00 GMThttp://www.cnitblog.com/yemoo/archive/2007/01/07/21622.htmlhttp://www.cnitblog.com/yemoo/comments/21622.htmlhttp://www.cnitblog.com/yemoo/archive/2007/01/07/21622.html#Feedback0http://www.cnitblog.com/yemoo/comments/commentRss/21622.htmlhttp://www.cnitblog.com/yemoo/services/trackbacks/21622.html
 1 function selectOption(value,text){
 2     this.value=value;
 3     this.text=text;
 4 }
 5 
 6 function createSelect(selectName,selectOptions,currOptionValue){
 7     document.write("<select name="+selectName+">");
 8     for (var i=0;i<selectOptions.length;i++){
 9        if (selectOptions[i].value==currOptionValue){
10          document.write("<option value='"+selectOptions[i].value+"' selected>"+selectOptions[i].text+"</option>");
11        }else{
12          document.write("<option value='"+selectOptions[i].value+"'>"+selectOptions[i].text+"</option>");
13        }
14     }
15     document.write("</select>");
16 }
17 
18 function selectValidityDayTypes(value){
19     var validityDayTypes=new Array();
20     validityDayTypes[0]=new selectOption("","有效期");
21     validityDayTypes[1]=new selectOption("3","三天内");
22     validityDayTypes[2]=new selectOption("15","半个月");
23     validityDayTypes[3]=new selectOption("30","一个月");
24     validityDayTypes[4]=new selectOption("90","三个月");
25     validityDayTypes[5]=new selectOption("180","半年");
26     validityDayTypes[6]=new selectOption("365","一年");
27     validityDayTypes[7]=new selectOption("1000","长期");
28     createSelect("validityDay",validityDayTypes,value);
29 }
这是在某网站下载的一个js文件中的一个片段，该段js很容易看懂，但从中却使我学习到一点：通过建立对象的属性来将多维数组变为一维数组。

其中思想是，将第二维声明为一个类，然后将该维中的每个数组项设为该类的属性，这样既使数组易于理解，更易于使用和管理。

这个例子中将多个select选项使用数组形式表示出来，每个选项option又包括值和显示文字两部分。这里又可以使用数组来表示，但通过建立selectOption类来将值和显示文字设定为该类的属性来管理，这样操作和理解起来就容易的多了。

同时也学习到：对于网页重复性较多的内容应该写成一个模块（函数或类），然后只需输入不同的内容来显示内容即可，而不用重复写入一些内容，如select等。

以后需要加强自己的面向对象的思维习惯了，这样才能将一些复杂的问题变为简单问题来解决。

Yemoo'S JS Blog 2007-01-07 23:25 发表评论
]]>写了一个根据内容自动生成表格的函数http://www.cnitblog.com/yemoo/archive/2006/12/03/19885.htmlYemoo'S JS BlogYemoo'S JS BlogSat, 02 Dec 2006 18:18:00 GMThttp://www.cnitblog.com/yemoo/archive/2006/12/03/19885.htmlhttp://www.cnitblog.com/yemoo/comments/19885.htmlhttp://www.cnitblog.com/yemoo/archive/2006/12/03/19885.html#Feedback0http://www.cnitblog.com/yemoo/comments/commentRss/19885.htmlhttp://www.cnitblog.com/yemoo/services/trackbacks/19885.html
晚上突然看到以前做asp时写的一个根据数据库数据自动生成表格的程序。
要求是：
1，对于空内容，应该写为"<td>&nbsp;</td>",否则在ie会显示的很变态（ie当作该单元格不存在）。
2，当输出数据条数不等于表格的“长X宽”时，用"<td>&nbsp;</td>"自动填补最后一行空余的地方。

其实也很简单，当时做asp时用了一个较复杂的算法（下面代码中MakeTable2），今天又想到一个更容易理解的算法（MakeTable1）,今天用js实现了下，不过郁闷的是感觉效率上都一样，这样还是用第一个比较好（容易理解，代码少）。
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<style type="text/css">
.style1 {
    font-size: x-small;
}
</style>
</head>

<body>
<span class="style1">
<script type="text/javascript">
/*
    函数作用：根据数组内容自动调整表格大小,对于空内容写入占位符，对于最后不足整行的用空单元格补足。
    函数思路：首先计算数组长度，并根据要显示列数计算实际需要行数，然后循环输出行列并根据索引输出数组元素，
             如果当前数组索引不小于数组长度或当前数组值为空则写入占位符单元格。
*/
function makeTable1(cols,a){    //cols为列数，a应该是一个用逗号分开的字符串
    //alert(a.split(',').length);
    var t1=new Date().getTime();
    a=a.split(',');    //显式转换为数组,否则ie不能识别为数组
    var l=a.length;    //得到数组的长度
    var rows=parseInt(l/cols)+(l%cols==0?0:1);    //计算出行数
    
    var outStr="<table border=\"1\" align=\"center\">";
    for(var i=0;i<rows;i++){
        outStr+="<tr>";
        for(var j=0;j<cols;j++){
            var temp=cols*i+j;    //计算当前索引
            outStr+=("<td width=\"80\" align=\"center\" height=\"80\">"+( (temp<l&&a[temp]!='') ? a[temp]:"&nbsp;")+"</td>");
        }
        outStr+="</tr>"
    }
    outStr+="</table>";
    document.write(outStr+"</br><center>执行时间："+(new Date().getTime()-t1)+"</center></br>");
    //alert(rows);
}
/*
    函数作用：同上
    函数思路：计算数组长度，然后根据长度循环输出元素值，如果当前循环变量值是列数的整数倍（余数为0），
             则输出行结束标记。否则输出列信息。然后计算当前循环变量值是否是列数的整数倍，如果不是，利用循环补足。直至补齐。
*/
function makeTable2(cols,a){
    var t2=new Date().getTime();
    a=a.split(',');
    var l=a.length;
    var outStr="<table border=\"1\" align=\"center\">";
    for(var i=0;i<l;i++){
        var temp=(i+1)%cols;
        if(i==0||temp==1){
            outStr+="<tr>";
        }
        
        outStr+=("<td width=\"80\" height=\"80\" align=\"center\">"+a[i]+"</td>");
        
        if(temp==0){
            outStr+="</tr>";
        }
    }
    
    var x=i%cols;
    if(x!=0){
        for(var i=0;i<(cols-x);i++){
            outStr+="<td>&nbsp;</td>";
        }
        outStr+="</tr>"
    }
    outStr+="</table>"
    document.write(outStr+"</br><center>执行时间："+(new Date().getTime()-t2)+"</center></br>");
}
var str="a,b,c,d,e,v,f,s,e,d,s,d,e,d,a,b,c,d,e,v,f,s,e,d,s,d,e,a,b,c,d,e,v,f,s,e,d,s,b,c,d,e,v,f,s,e,d,s,d,e,d,a,b,c,d,e,v,f,s,e,d,s,d,e,a,b,c,d,e,v,f,s,e,d,s,b,c,d,e,v,f,s,e,d,s,d,e,d,a,b,c,d,e,v,f,s,e,d,s,d,e,a,b,c,d,e,v,f,s,e,d,s,s,e,d,s,d,e,a,b,c,d,e,v,f,s,e,d,s,b,c,d,e,v,f,s,e,d,s,d,e,d,a,b,c,d,e,v,f,s,e,d,s,d,e,a,b,c,d,e,v,f,s,e,d,s";
str+=str;
str+=str;
makeTable1(5,str);
makeTable2(5,str);
</script>
</span>
</body>

</html>


Yemoo'S JS Blog 2006-12-03 02:18 发表评论
]]>兼容IE/FF的类title提示效果http://www.cnitblog.com/yemoo/archive/2006/06/26/12878.htmlYemoo'S JS BlogYemoo'S JS BlogMon, 26 Jun 2006 08:21:00 GMThttp://www.cnitblog.com/yemoo/archive/2006/06/26/12878.htmlhttp://www.cnitblog.com/yemoo/comments/12878.htmlhttp://www.cnitblog.com/yemoo/archive/2006/06/26/12878.html#Feedback0http://www.cnitblog.com/yemoo/comments/commentRss/12878.htmlhttp://www.cnitblog.com/yemoo/services/trackbacks/12878.html阅读全文

Yemoo'S JS Blog 2006-06-26 16:21 发表评论
]]>自动对select表单列表进行排序http://www.cnitblog.com/yemoo/archive/2006/06/20/12573.htmlYemoo'S JS BlogYemoo'S JS BlogTue, 20 Jun 2006 09:16:00 GMThttp://www.cnitblog.com/yemoo/archive/2006/06/20/12573.htmlhttp://www.cnitblog.com/yemoo/comments/12573.htmlhttp://www.cnitblog.com/yemoo/archive/2006/06/20/12573.html#Feedback0http://www.cnitblog.com/yemoo/comments/commentRss/12573.htmlhttp://www.cnitblog.com/yemoo/services/trackbacks/12573.html

主要有以下几点总结：
1，select控件本身支持字母索引。比如select控件处于焦点中的时候，按B键，option中相应的以B开头的选项就会显示出来。

2，
var t=[],tt=o.options;
  while (tt.length>0){
    t[t.length]=tt[0].text;
    tt.remove(0);
  }
这段代码写的较好，但一开始没有理解，
这段代码的作用是一项一项赋值select空间列表内容赋给另一个数组。
首先定义数组t=[](这种定义方法偶还是头次见到，孤陋寡闻了);用于存储原select控件列表内容。
tt=o.options;读取select空间内容，以数组形式存储在tt数组中。
t[t.length]=tt[0].text;这里时一个技巧，因为t.length总是比当前t的最大索引大1，所以这样写数组t可以自动增加空间。tt[0].text这里每次都读取第一个内容，然后用tt.remove(0);删除第一项内容，直至读取完毕。

3，
t.sort();
  for (var i=0,c;c=t[i];i++){
    tt.add(new Option(c));
  }这段代码对新数组内容按字母派讯，然后写入原select空间列表。



Yemoo'S JS Blog 2006-06-20 17:16 发表评论
]]>mail.163.com代码研究(三)http://www.cnitblog.com/yemoo/archive/2006/06/18/12470.htmlYemoo'S JS BlogYemoo'S JS BlogSun, 18 Jun 2006 15:39:00 GMThttp://www.cnitblog.com/yemoo/archive/2006/06/18/12470.htmlhttp://www.cnitblog.com/yemoo/comments/12470.htmlhttp://www.cnitblog.com/yemoo/archive/2006/06/18/12470.html#Feedback1http://www.cnitblog.com/yemoo/comments/commentRss/12470.htmlhttp://www.cnitblog.com/yemoo/services/trackbacks/12470.html

这个代码是输入帐号密码登陆成功之后的页面的js代码:
<script language="JavaScript">
<!--
var s = "";
s = document.domain;
window.zDomain = s;
var gSID = "MBoujIFRhqQAkJVj";
var gUID="netman8410@163.com";
var gUser = "netman8410";
var gCssStylePath = "http://mimg.163.com/jsstyle/cmcss/163_blue_s.css";
var gDomain = "163.com";
var cosnm = "normal_fj20m_nf_64m";
var netfdr_host = "http://wp.mail.163.com";
var netDiskPath = "/netfolder/servlet/nfapp/main_list.html?";
var cos_netfolder = "1";
if(cos_netfolder != "1"){
    cos_netfolder = "0";
}
//-->
</script>
<!--上述代码是一些变量的初始化-->
<script language="JavaScript">
<!--
function fGetVersion()
{
    var userAgent = window.navigator.userAgent.toLowerCase();
    var AppName = "";
    var Version = "";
    var Sys = "";
    if(userAgent.indexOf("msie")>-1){
        AppName   = "msie";    
        Version    = userAgent.replace(/.+msie/gi,"").replace(/;.+/gi,"") - 0;    
    }else if(userAgent.toUpperCase().indexOf("firefox")>-1){
        AppName = "firefox";
        Version = userAgent.replace(/.+firefox\//gi,"").replace(/\(.*\)/g,"") - 0;
    }else if(userAgent.toUpperCase().indexOf("netscape")>-1){
        AppName = "netscape";
        Version = userAgent.replace(/.+netscape\//gi,"").replace(/\(.*\)/g,"") - 0;
    }
        if((AppName == "msie" && Version < 5) || (AppName == "firefox" && Version <1) || (AppName == "netscape" && Version<7.2) || userAgent.indexOf("macintosh") != -1 || userAgent.indexOf("konqueror") != -1 || userAgent.indexOf("safari") != -1 || userAgent.indexOf("camino") != -1){
        document.location.href = "http://mimg."+ gDomain +"/jsstyle/html/clientagenerror.htm";
    }
}
fGetVersion();
window.onload = function(){
    fGTO("indexFrame").src            = "http://mimg."+ gDomain +"/jsstyle/html/gblank0606131756.htm";
    fGTO("contentFrame").src        = "http://mimg."+ gDomain +"/jsstyle/html/blankpage.htm";
    fGTO("submitFrame").src            = "http://mimg."+ gDomain +"/jsstyle/html/blankpage.htm";
    fGTO("historyFrame").src            = "http://mimg."+ gDomain +"/jsstyle/html/history_1.htm";
    fGTO("debugFrame").src            = "http://mimg."+ gDomain +"/jsstyle/html/blankpage.htm";
    fGTO("jsFrame").src                    = "http://mimg."+ gDomain +"/jsstyle/html/globe0606131756.htm";
    fGTO("addressFrame").src            = "/coremail/fcg/ldvcapp?funcid=prtsearchres&sid=MBoujIFRhqQAkJVj&sortattr_N=&showlist=&ifirstv=&tempname=address/addrdata_ntes.htm&listnum=-1";
    fGTO("userFrame").src                = "/coremail/fcg/ldapapp?sid=MBoujIFRhqQAkJVj&funcid=opuserattr&optype=print&tempname=options/userattr.htm";
}

function fGTO(id){
    return document.getElementById(id);
}
function unload(){
    if( gDomain == "163.com"){
        window.open ( "http://popme.163.com/ad/popwin720300_freemail163.html", "vip_720", "width=720,height=300, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no");
    }else if( gDomain == "126.com"){
        window.open ( "http://popme.163.com/ad/popwin720300_freemail126.html", "vip_720", "width=720,height=300, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no");
    }
}
//-->
</script>
1,第一部分的js代码作用是初始化一些变量.由系统后台动态生成.
2,fGetVersion()函数在上一次代码分析中已经出现,这里不在解释.这里的作用是当浏览器版本不支持当前代码时自动转向到相应的显示页面.
3,window.onload = function()这样的写法是一种比较灵活的写法,便于使html与js更加独立.相当于在body标记里写上onload属性.在这里定义一个函数在页面加载时自动执行.
4,fGTO(id)函数相当于把document.getElementByID(id)简写.在上一个函数中fGTO("indexFrame").src之类几个地方是对对象src属性的直接操作,动态写入相应的内容,这里应用DOM对象.
5,unload()函数作用是在页面退出时弹出相应的页面.



Yemoo'S JS Blog 2006-06-18 23:39 发表评论
]]>mail.163.com代码研究(二)http://www.cnitblog.com/yemoo/archive/2006/06/18/12453.htmlYemoo'S JS BlogYemoo'S JS BlogSun, 18 Jun 2006 04:41:00 GMThttp://www.cnitblog.com/yemoo/archive/2006/06/18/12453.htmlhttp://www.cnitblog.com/yemoo/comments/12453.htmlhttp://www.cnitblog.com/yemoo/archive/2006/06/18/12453.html#Feedback0http://www.cnitblog.com/yemoo/comments/commentRss/12453.htmlhttp://www.cnitblog.com/yemoo/services/trackbacks/12453.html

具体代码如下:

function  fLoginFormSubmit()
{
     var  fm  =  window.document.login163;
     var  user  =  fm.username;
    user.value  =  fTrim( user.value);  // Trim the input value.

     if ( user.value  == ""