IT博客网-A JavaScript Fancier-随笔分类-javascript技巧总结http://www.cnitblog.com/yemoo/category/3110.html伟大的javascript技术研究中...zh-cnTue, 29 Apr 2008 19:12:14 GMTTue, 29 Apr 2008 19:12:14 GMT60使Ext的Template可以解析二层的json数据http://www.cnitblog.com/yemoo/archive/2008/04/30/43104.htmlYemoo'S JS BlogYemoo'S JS BlogTue, 29 Apr 2008 16:16:00 GMThttp://www.cnitblog.com/yemoo/archive/2008/04/30/43104.htmlhttp://www.cnitblog.com/yemoo/comments/43104.htmlhttp://www.cnitblog.com/yemoo/archive/2008/04/30/43104.html#Feedback0http://www.cnitblog.com/yemoo/comments/commentRss/43104.htmlhttp://www.cnitblog.com/yemoo/services/trackbacks/43104.html

{id: 'myid', cls:{o:'myclass'}, name: 'foo', value: 'bar'}
Ext的Template支持通过传入json数据的方式进行模板替换。
API中有这样一段示例：
var t = new Ext.Template(
    '<div name="{id}">',
        '<span class="{cls}">{name:trim} {value:ellipsis(10)}</span>',
    '</div>'
);
t.append('some-element', {id: 'myid', cls: 'myclass', name: 'foo', value: 'bar'});


稍作修改做个测试：

var t = new Ext.Template(
    '<div name="{id}">',
        '<span class="{cls}">{name} {value}</span>',
    '</div>'
);
var dt=t.apply({id: 'myid', cls: 'myclass', name: 'foo', value: 'bar'});
alert(dt);

运行上面的代码会弹出<div name="myid"><span class="myclass">foo bar</span></div>说明替换成功。

但如果又这样一个模板数据：


我们想在替换时将模板中原cls部分替换为cls.o的值，也就是myclass，该怎么做呢？是不是想直接用{cls.o}，你可以试下，绝对无效，没有替换。因为template匹配替换是直接对{}中冒号前的字符串与JSON变量进行匹配的。当然找不到cls.o这个串所以也就不能匹配。
好在Template支持对数据的解析处理。
我们可以自己定义一个解析函数即可。其实很简单：
var t = new Ext.Template(
    '<div name="{id}">',
        '<span class="{cls:this.parseJSON}">{name} {value}</span>',
    '</div>'
);
t.parseJSON=function(data){return data.o};
var dt=t.apply({id: 'myid', cls: {o:'myclass'}, name: 'foo', value: 'bar'});
alert(dt)

我们定义了一个叫parseJSON的解析方法，在模板中访问顶层的cls然后对cls(是一个object)的值进行处理（直接访问它的o属性）即可。


Yemoo'S JS Blog 2008-04-30 00:16 发表评论
]]>undefined==null！http://www.cnitblog.com/yemoo/archive/2008/03/31/41723.htmlYemoo'S JS BlogYemoo'S JS BlogMon, 31 Mar 2008 03:54:00 GMThttp://www.cnitblog.com/yemoo/archive/2008/03/31/41723.htmlhttp://www.cnitblog.com/yemoo/comments/41723.htmlhttp://www.cnitblog.com/yemoo/archive/2008/03/31/41723.html#Feedback1http://www.cnitblog.com/yemoo/comments/commentRss/41723.htmlhttp://www.cnitblog.com/yemoo/services/trackbacks/41723.html

貌似以前也看过null==undefined，null!==undefined，但也一直没有在意。

近日看过去别人的一程序源码，到处都有一些如if(x!=undefined&&x!=null&&x!="")之类的判断，突然觉得写的很啰嗦，俺一般都直接if(x){}因为不论null、undefined、""在条件判断中其实都是false，何需如此啰嗦？（不过要注意如果你的x==0也是合法值的话就不能使用if(x){}来做条件判断了）

为了证明这种多余，俺也特意做了以下测试：
var x;
alert(x)
if(x==null){
    alert('failed')
}

其中x为一个未初始化的变量，即undefined。
运行以上代码：先后弹出undefined和failed，说明x==null是符合条件的。

我们可以直接alert(null==undefined)其实也可以发现返回了true。

这都说明进行x==null||x==undefined或x!=null&&x!=undefined之类的写法纯属多余！

一般只需判断null或undefined一个即可。
<

Yemoo'S JS Blog 2008-03-31 11:54 发表评论
]]>JS文件传参及处理技巧http://www.cnitblog.com/yemoo/archive/2008/03/11/40799.htmlYemoo'S JS BlogYemoo'S JS BlogTue, 11 Mar 2008 11:18:00 GMThttp://www.cnitblog.com/yemoo/archive/2008/03/11/40799.htmlhttp://www.cnitblog.com/yemoo/comments/40799.htmlhttp://www.cnitblog.com/yemoo/archive/2008/03/11/40799.html#Feedback0http://www.cnitblog.com/yemoo/comments/commentRss/40799.htmlhttp://www.cnitblog.com/yemoo/services/trackbacks/40799.html

其实为js文件传参是很久就接触过的一个问题，只是一直没有放在心上，今天在无忧看到又有人问这个问题，今日总结一下。

解决思路：

1、首先获取到当前JS文件的SRC属性，这里有一个小技巧：我们只需要获取当前页面最后一个script标记内容即可。
为什么？？因为JS是顺序解析的，当前JS脚本解析时后面的js都还没有解析到，当然就认为自己就是最后一个script了。此外，这样获取还有一个好处：我们可以多次引用同一个文件且传入不同的参数，这样可以在js文件中根据参数不同做不同处理，很巧妙把！简直就是动态语言了。
代码如下：
var scripts=document.getElementsByTagName("script");
var curJS=scripts[scripts.length-1];   //curJS就是我们当前的js文件


得到这个就好办了，通过curJS.src即可获取到完整的路径内容（包括参数）。

2、下面的就是解析参数内容了，解析的过程相当简单，相信很多人都容易完成这一步。
但我们要对一个特殊情况进行处理：如果一个参数被传入了多次，则要将该参数值转换为数组存储每一个传入的值。

演示地址：http://www.ajaxbbs.net/test/getArgs/

完整测试脚本如下：
var getArgs=(function(){
    var sc=document.getElementsByTagName('script');
    var paramsArr=sc[sc.length-1].src.split('?')[1].split('&');
    var args={},argsStr=[],param,t,name,value;
    for(var i=0,len=paramsArr.length;i<len;i++){
            param=paramsArr[i].split('=');
            name=param[0],value=param[1];
            if(typeof args[name]=="undefined"){ //参数尚不存在
                args[name]=value;
            }else if(typeof args[name]=="string"){ //参数已经存在则保存为数组
                args[name]=[args[name]]
                args[name].push(value);
            }else{  //已经是数组的
                args[name].push(value);
            }
    }
    /*在实际应用中下面的showArg和args.toString可以删掉，这里只是为了测试函数getArgs返回的内容*/
    var showArg=function(x){   //转换不同数据的显示方式
        if(typeof(x)=="string"&&!/\d+/.test(x)) return "'"+x+"'";   //字符串
        if(x instanceof Array) return "["+x+"]" //数组
        return x;   //数字
    }
    //组装成json格式
    args.toString=function(){
        for(var i in args) argsStr.push(i+':'+showArg(args[i]));
        return '{'+argsStr.join(',')+'}';
    }
    return function(){return args;} //以json格式返回获取的所有参数
})();

alert(getArgs());
alert("username:"+getArgs()["username"]);


测试示例的HTML源码：
<!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>
  <title> new document </title>
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <script type="text/javascript" src="test.js?id=4&username=yemoo&id=1&uid=110"></script>
  <script type="text/javascript" src="test.js?id=5&username=ajaxbbs&id=7&uid=253"></script>
  <script type="text/javascript" src="test.js?id=6&username=jack&id=8&uid=258"></script>
</head>
<body>
</body>
</html>



Yemoo'S JS Blog 2008-03-11 19:18 发表评论
]]>三种For循环写法的性能比较http://www.cnitblog.com/yemoo/archive/2007/12/18/37851.htmlYemoo'S JS BlogYemoo'S JS BlogTue, 18 Dec 2007 15:47:00 GMThttp://www.cnitblog.com/yemoo/archive/2007/12/18/37851.htmlhttp://www.cnitblog.com/yemoo/comments/37851.htmlhttp://www.cnitblog.com/yemoo/archive/2007/12/18/37851.html#Feedback1http://www.cnitblog.com/yemoo/comments/commentRss/37851.htmlhttp://www.cnitblog.com/yemoo/services/trackbacks/37851.html

循环作为程序语言的三大逻辑控制结构之一，在实际开发是经常会遇到的。
在JavaScript程序的循环结构使用上，我们经常会遇到这种应用。
根据一个对象的长度进行循环并对对象每个每个元素进行处理。

如
for(var i=0;i<a.length;i++){
    sum+=a[i]
}

以上只是一个简单的示例，对于如上程序，很多程序开发者都研究过关于其执行效率的问题。
因此就出现了以下的两种写法：
for(var i=0,iLen=a.length;i<iLen;i++){
    sum+=a[i]
}

for(var i=0,item;item=a[i];i++){
    sum+=item;
}
或
for(var i=0,item;(item=a[i])!=undefined;i++){
    sum+=item;
}


对于三种写法其性能到底有多大差异呢？到底哪个的效率更高呢？

我在自己的机器上对其做了测试：
发现在10000条数据以下时三者执行速度差别不大，差别大概在0.01m左右，而且测试结果不稳定。
然后将数据变为50w条进行测试：
三种方法测试结果分别为：
1182
981
1673（而且出现“程序执行缓慢，是否取消该脚本”的提示）

1572
1462
12067（同样出现了脚本加载缓慢的提示）

尽管数据并不是非常稳定，但还是能从中发现点什么的。

速度最快的是第二种写法：即保存对象长度，避免每次都计算。
速度最慢的是第三种写法：即不关系对象的长度，而根据当前项是否存在来循环。

之前我一直以为是第三种写法速度应该是最快的（因为不用计算长度），今日一测才发现第三种的执行效率如此低下，看来还是避免使用。当然，很多时候我们可能还是不得不使用这第三种写法。

测试程序如下：（建议分开对三个程序进行测试，特别是在FF下）
<script type="text/javascript">
  <!--
  var a=[];
  for(var i=0;i<500000;i++){
    a.push(100);
  }
  var sum=0;
  var timer1=new Date().getTime();
  for(var i=0;i<a.length;i++){
    sum+=a[i];
  }
  alert(sum+"\ntime:"+(new Date().getTime()-timer1));

  sum=0;
  var timer2=new Date().getTime();
  for(var i=0,iLen=a.length;i<iLen;i++){
    sum+=a[i];
  }
  alert(sum+"\ntime:"+(new Date().getTime()-timer2));

  sum=0;
  var timer3=new Date().getTime();
  for(var i=0,item;item=a[i];i++){
    sum+=item;
  }
  alert(sum+"\ntime:"+(new Date().getTime()-timer3));
  //-->
  </script>



Yemoo'S JS Blog 2007-12-18 23:47 发表评论
]]>IE及FF下关于setTimeout传参的研究总结http://www.cnitblog.com/yemoo/archive/2007/12/18/37845.htmlYemoo'S JS BlogYemoo'S JS BlogTue, 18 Dec 2007 14:34:00 GMThttp://www.cnitblog.com/yemoo/archive/2007/12/18/37845.htmlhttp://www.cnitblog.com/yemoo/comments/37845.htmlhttp://www.cnitblog.com/yemoo/archive/2007/12/18/37845.html#Feedback0http://www.cnitblog.com/yemoo/comments/commentRss/37845.htmlhttp://www.cnitblog.com/yemoo/services/trackbacks/37845.html

    昨晚看《JavaScript核心技术》的BOM一章，上面写到setTimeout除了我们知道的两个参数（执行的函数，延迟时间）外后面还可以传一些参数，这些参数就是传递给“执行函数”的参数。

如 setTimeout(function add1(x,y){alert(x+y)},2000,3,5)会在2秒后弹出8，也许现在都明白这些参数的含义了。

近日突然想起于是测了一下，却失望的发现在IE下会弹出NaN，然后在add1里弹出arguments.length返回0，可见并没有将后面的两个参数传入add1中，不过在FF下确实是可以传入到add1中，看来又是一个IE/FF不兼容的特性，如此的一个特性其实挺好的，不晓得IE为何就不支持呢？每次都要在外面套一层Function真是麻烦。

接着在FF下测试setTimeout(function add1(){alert(arugments.length)},2000);执行后居然返回1，明明没有传参的，接着执行setTimeout(function add1(){alert(arugments.length)},2000,3);返回2，这不是多出了一个参数吗？

然后alert了最后的参数，发现延迟不同每次返回结果也都不同，而且都是数字。难道是setTimeout函数本身的执行时间？恩，应该是这样的，setTimeout本身执行也会有时间开销的。

作如下测试：

function add(){
    alert((new Date().getTime()-t)+","+arguments[0]);
}
var t=new Date().getTime();
setTimeout(add,1000);

对延迟进行修改测试出了以下数据：
延迟时间    弹出内容
1000         1009,8
2000         1998 -2
3000         3006 6

发现一个小规律：执行时间差-那个奇怪的参数约等于延迟时间。
那个参数有点像setTimeout的执行的时间，但怎么会有负值呢？它的意义大概就是实际延迟时间与设定延迟时间的差值吧。

这个问题就到这里吧。

还有一个问题，能否在IE下实现如FF下setTimeout的功能呢？
网上查了一下，已经有人去实现了这个，偶对其做简单改造，发布出来，其中对于计算差值的一行在实际中可以去掉，这里只是为了模拟和FF下完全一样的接口效果。

实现方法也并不复杂，主要利用了JS的call和apply，对call和apply不熟悉的可以先查看一下他们的用法。
<script type="text/javascript">
  <!--
    (function(){
        var st = window.setTimeout;
        window.setTimeout = function(fn, mDelay) {
            var t=new Date().getTime();
            if(typeof fn == 'function'){
                var args = Array.prototype.slice.call(arguments,2);
                var f = function(){
                    args.push(new Date().getTime()-t-mDelay);  //该行用于实现对实际延迟和设定延迟的差值，同FF的最后一个参数，无实际意义
                    fn.apply(null, args)
                };
                return st(f, mDelay);
            }
            return st(fn,mDelay);
        }
    })();

    function test(x,y,z){
        alert(x+","+y+","+z);
    }
    setTimeout(test,1000,'arg1','arg2');
  //-->
  </script>



Yemoo'S JS Blog 2007-12-18 22:34 发表评论
]]>用js实现模板替换机制http://www.cnitblog.com/yemoo/archive/2007/12/05/37365.htmlYemoo'S JS BlogYemoo'S JS BlogWed, 05 Dec 2007 09:44:00 GMThttp://www.cnitblog.com/yemoo/archive/2007/12/05/37365.htmlhttp://www.cnitblog.com/yemoo/comments/37365.htmlhttp://www.cnitblog.com/yemoo/archive/2007/12/05/37365.html#Feedback2http://www.cnitblog.com/yemoo/comments/commentRss/37365.htmlhttp://www.cnitblog.com/yemoo/services/trackbacks/37365.html

Ext中为String扩展了一个静态方法format用于实现对字符串类模板机制的格式化。

如String.format("{0},{1},{2}","a","b","c");返回a,b,c。

看了一下其实现方式觉得比较优雅，而且该函数在实际当中也很有实用价值，于是自己就将其略加改造，实现对字符串的模板替换。

代码如下：
String.prototype.template=function(){
    var args=arguments;
    return this.replace(/\{(\d+)\}/g, function(m, i){
        return args[i];
    });
}

var a="arg1:{0},arg2:{1},arg3:{2}";
alert(a.template("a","b","c"));  //arg1:a,arg2:b,arg3:c
alert(a.template("1","2","3")); //arg1:1,arg2:2,arg3:3

主要用replace+巧妙的正则实现。

调用方式很简单，首先建立一个模板字符串。如a="{0},{1}"，每个模板字符用{数字}表示。
然后直接调用a.template("arg1","arg2","arg3");
传入的参数与模板中定义的模板字符会对应着被替换。



Yemoo'S JS Blog 2007-12-05 17:44 发表评论
]]>使用eval动态创建变量的一个小提示http://www.cnitblog.com/yemoo/archive/2007/12/05/37363.htmlYemoo'S JS BlogYemoo'S JS BlogWed, 05 Dec 2007 09:41:00 GMThttp://www.cnitblog.com/yemoo/archive/2007/12/05/37363.htmlhttp://www.cnitblog.com/yemoo/comments/37363.htmlhttp://www.cnitblog.com/yemoo/archive/2007/12/05/37363.html#Feedback0http://www.cnitblog.com/yemoo/comments/commentRss/37363.htmlhttp://www.cnitblog.com/yemoo/services/trackbacks/37363.html

eval虽然是一个很消耗资源的操作，但很多时候我们还非要靠它不可。

比如使用eval动态创建变量，如var a="str"，我们可能希望将a的值str创建成为一个变量并赋值为test，这时大概只能靠eval了。

第一次偶遇到这个问题，想都没想直接来了下面一句代码：eval(a)="test"，结果一执行就给出了一个错误：“不能给函数返回值赋值”，顿时恍然大悟，eval怎么说也是个函数啊，我们大概都没有写过如myfunc(a)=""的语句。因为函数本身返回的也是一个值，将一个值赋给一个值当然不会正确了。

因为eval的强大和其特殊差点使我忘记了它还是个函数。

正确的写法应该这样：eval(a+"='test'");
即将整个语句eval即可，一点小提示，以后不能再犯这种低级错误了！



Yemoo'S JS Blog 2007-12-05 17:41 发表评论
]]>JavaScript创建命名空间(namespace)的最简实现http://www.cnitblog.com/yemoo/archive/2007/12/05/37362.htmlYemoo'S JS BlogYemoo'S JS BlogWed, 05 Dec 2007 09:39:00 GMThttp://www.cnitblog.com/yemoo/archive/2007/12/05/37362.htmlhttp://www.cnitblog.com/yemoo/comments/37362.htmlhttp://www.cnitblog.com/yemoo/archive/2007/12/05/37362.html#Feedback0http://www.cnitblog.com/yemoo/comments/commentRss/37362.htmlhttp://www.cnitblog.com/yemoo/services/trackbacks/37362.html

最近看Ext源代码，看到了其实现命名空间函数的实现方法：

Ext NameSpace实现代码：
  namespace : function(){
            var a=arguments, o=null, i, j, d, rt;
            for (i=0; i<a.length; ++i) {
                d=a[i].split(".");
                rt = d[0];
                eval('if (typeof ' + rt + ' == "undefined"){' + rt + ' = {};} o = ' + rt + ';');
                for (j=1; j<d.length; ++j) {
                    o[d[j]]=o[d[j]] || {};
                    o=o[d[j]];
                }
            }
        }

鄙人喜好最简编程（这很多时候并不是一个好习惯，写的越简单程序一般越难理解），于是就想用更短的方式解决这个问题。
尝试了将近半个小时写下了下面的实现，基本该考虑的情况都考虑，至少不会覆盖页面已经存在的函数。

实现代码如下：
function namespace(ns){
    if(typeof(ns)!="string")return;
    ns=ns.split(".");
    var o,ni;
    for(var i=0,len=ns.length;i<len,ni=ns[i];i++){
       try{o=(o?(o[ni]=o[ni]||{}):(eval(ni+"="+ni+"||{}")))}catch(e){o=eval(ni+"={}")}
    }
}


你可以保存以下代码进行测试：

测试代码：
<script type="text/javascript">
  <!--
    function namespace(ns){
        if(typeof(ns)!="string")return;
        ns=ns.split(".");
        var o,ni;
        for(var i=0,len=ns.length;i<len,ni=ns[i];i++){
            try{o=(o?(o[ni]=o[ni]||{}):(eval(ni+"="+ni+"||{}")))}catch(e){o=eval(ni+"={}")}
        }
    }
    function a(){return 5}
    namespace("a.b");
    alert(a);
    alert(a.b)
    namespace("test.test.abc")
    test.test.abc.func1=function(){
        alert('func1 run')
    }
    alert(test.test)
    test.test.abc.func1();
  //-->
</script>



Yemoo'S JS Blog 2007-12-05 17:39 发表评论
]]>关于JavaScript中apply与call的用法意义及区别http://www.cnitblog.com/yemoo/archive/2007/11/30/37070.htmlYemoo'S JS BlogYemoo'S JS BlogFri, 30 Nov 2007 02:37:00 GMThttp://www.cnitblog.com/yemoo/archive/2007/11/30/37070.htmlhttp://www.cnitblog.com/yemoo/comments/37070.htmlhttp://www.cnitblog.com/yemoo/archive/2007/11/30/37070.html#Feedback0http://www.cnitblog.com/yemoo/comments/commentRss/37070.htmlhttp://www.cnitblog.com/yemoo/services/trackbacks/37070.html

JavaScript中有一个call和apply方法，其作用基本相同，但也有略微的区别。

先来看看JS手册中对call的解释：

call 方法
调用一个对象的一个方法，以另一个对象替换当前对象。

call([thisObj[,arg1[, arg2[,   [,.argN]]]]])

参数
thisObj
可选项。将被用作当前对象的对象。

arg1, arg2,  , argN
可选项。将被传递方法参数序列。

说明
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。

如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。

说明白一点其实就是更改对象的内部指针，即改变对象的this指向的内容。这在面向对象的js编程过程中有时是很有用的。

引用网上一个代码段，运行后自然就明白其道理。

<input type="text" id="myText"   value="input text">
<script>
    function Obj(){this.value="对象！";}
    var value="global 变量";
    function Fun1(){alert(this.value);}

    window.Fun1();   //global 变量
    Fun1.call(window);  //global 变量
    Fun1.call(document.getElementById('myText'));  //input text
    Fun1.call(new Obj());   //对象！
</script>

call函数和apply方法的第一个参数都是要传入给当前对象的对象，及函数内部的this。后面的参数都是传递给当前对象的参数。
运行如下代码：
<script>
   var func=new function(){this.a="func"}
    var myfunc=function(x){
        var a="myfunc";
        alert(this.a);
        alert(x);
    }
    myfunc.call(func,"var");
</script>

可见分别弹出了func和var。到这里就对call的每个参数的意义有所了解了。

对于apply和call两者在作用上是相同的，但两者在参数上有区别的。
对于第一个参数意义都一样，但对第二个参数：
apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入，而call则作为call的参数传入（从第二个参数开始）。
如 func.call(func1,var1,var2,var3)对应的apply写法为：func.apply(func1,[var1,var2,var3])

同时使用apply的好处是可以直接将当前函数的arguments对象作为apply的第二个参数传入



Yemoo'S JS Blog 2007-11-30 10:37 发表评论
]]>收藏一篇关于JavaScript继承的E文http://www.cnitblog.com/yemoo/archive/2007/11/19/36489.htmlYemoo'S JS BlogYemoo'S JS BlogMon, 19 Nov 2007 01:47:00 GMThttp://www.cnitblog.com/yemoo/archive/2007/11/19/36489.htmlhttp://www.cnitblog.com/yemoo/comments/36489.htmlhttp://www.cnitblog.com/yemoo/archive/2007/11/19/36489.html#Feedback1http://www.cnitblog.com/yemoo/comments/commentRss/36489.htmlhttp://www.cnitblog.com/yemoo/services/trackbacks/36489.html

读了两遍，有所领悟，收藏以便今后温习。
翻译水平不行，就直接贴地址了。
网址：http://kevlindev.com/tutorials/javascript/inheritance/index.htm



Yemoo'S JS Blog 2007-11-19 09:47 发表评论
]]>有关appendChild和innerHTML http://www.cnitblog.com/yemoo/archive/2007/10/30/35581.htmlYemoo'S JS BlogYemoo'S JS BlogTue, 30 Oct 2007 04:18:00 GMThttp://www.cnitblog.com/yemoo/archive/2007/10/30/35581.htmlhttp://www.cnitblog.com/yemoo/comments/35581.htmlhttp://www.cnitblog.com/yemoo/archive/2007/10/30/35581.html#Feedback1http://www.cnitblog.com/yemoo/comments/commentRss/35581.htmlhttp://www.cnitblog.com/yemoo/services/trackbacks/35581.html

     在我们向dom页面写入一些内容时，一般我们都是既使用innerHTML也可以使用appendChild，两者功能似乎没有多大差别。很多朋友一定也对这两个东西感到困惑，今天写代码时我就想到了这个问题，两者真的没有差别吗？

在网上查看了一些文章，然后再通过自己一些测试，得到了如下一些结论。

1、在执行速度的比较上，使用appendChild比innerHTML要快，特别是内容包括html标记时，appendChild明显要快于innerHTML，这可能是因为innerHTML在铺到页面之前还要对内容进行解析才能铺到页面上，当包含html标记过多时，innerHTML速度会明显变慢。
可运行下面的代码测试：
<!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>
  <title> new document </title>
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
</head>

<body>
<div id="test1"></div>
<input type="button" onclick="innerTest()" value="testInnerHTML">
<div id="test2"></div> 
<input type="button" onclick="appendTest()" value="testAppendChild">

  <script type="text/javascript">
  <!--
  function innerTest(){
    var t1=(new Date()).getTime();
    var a="<b>xxxxxxxx</b>";
    var b=document.getElementById("test1");
    for(var i=0;i<500;i++){
      b.innerHTML+=a;
    }
    alert((new Date()).getTime()-t1);
  }

  function appendTest(){
    var t1=(new Date()).getTime();
    var b=document.getElementById("test2");
    for(var i=0;i<500;i++){
      var a=document.createElement("b");
      a.appendChild(document.createTextNode("xxxxxxxx"));
      b.appendChild(a);
    }
    alert((new Date()).getTime()-t1);
  }
  //-->
  </script>
</body>
</html>


2、如果appendChild的参数是页面存在的一个元素，则执行后原来的元素会被移除，如document.getElement("a").appendChild(document.getElementById("b"))，执行后，b元素会先被移除，然后再添加到a中。
3、通过appendChild添加到的是dom对象，返回的也是dom对象，可以通过dom对象访问获取元素的各种属性，而innerHTML则是纯字符串，不能获取内部元素的属性。
4、在使用上innerHTML比appendChild要方便，特别是创建的节点属性多，同时还包含文本的时候。

因此在使用时如果数据量较大且对性能有所要求时，还是应该使用appendChild。



Yemoo'S JS Blog 2007-10-30 12:18 发表评论
]]>增强程序的灵活性--使用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 发表评论
]]>使用JS+Ajax记录用户鼠标移动过程【译-附原文】http://www.cnitblog.com/yemoo/archive/2007/10/22/35191.htmlYemoo'S JS BlogYemoo'S JS BlogMon, 22 Oct 2007 09:19:00 GMThttp://www.cnitblog.com/yemoo/archive/2007/10/22/35191.htmlhttp://www.cnitblog.com/yemoo/comments/35191.htmlhttp://www.cnitblog.com/yemoo/archive/2007/10/22/35191.html#Feedback0http://www.cnitblog.com/yemoo/comments/commentRss/35191.htmlhttp://www.cnitblog.com/yemoo/services/trackbacks/35191.html
I just found some piece of code i created one or two years ago. The “movelogger” records the mouse movement a users does on a web site. Just before the user leaves the current page, the recorded data get posted back to the server using AJAX.
我发现了一两年前写的一些代码。其中一个"movelogger"的程序用于记录一个用户在网站浏览过程中的鼠标移动过程。当用户离开当前页面之前，我们可以通过ajax将这些记录的数据发送到服务端。

The cool thing is that you can “replay” these movements afterwards. The movelogger records clicks on links and other elements. In replay mode this events are fired in the exact same order as they have been recorded.
That way it would be possible to record a websesion (the click-flow) in a heavy AJAX based application. It would even be possible to record keyboard strokes and other type of events.
一个很酷的事就是我们可以之后重新“回放”这些移动行为（过程），movelogger还可以记录链接及其他一些元素的点击行为。在回放模式这些事件操作会像用户原来的操作过程和方式一样重新被触发。通过这种方法我们可以在一些基于ajax的程序中记录websesion（点击流），或者可以记录一些键盘的敲击或其它的一些事件等。

Check out the little demo of the movelogger here.
点击此处可查看一个movelogger的demo示例。

This technique may be usefull or not. But some use cases could be:
Instead of eye tracking, use mouse tracking.
Analyze the usage of ajax enabled websites.
Spionage and other Bad Things™ (not recommended).
这种技术可能会有用或者是没用的。但可能会有下面的一些使用场景：
使用鼠标跟踪代替眼睛跟踪。
分析一些ajax的站点的使用方式。
spionage或其它的一些坏事（不建议使用）

The whole thing is coded in javascript using Prototype and script.aculo.us with some php code on the server side.
这个程序的完整代码包括基于prototype和script.aculo.us的客户端javascript代码和用于服务端的php代码。

The data recorded on the demo website is stored only in the php session on the server and gets deleted automatically, soon after you close your browser. But theoreticaly it would be possible to store that data in some kind of database for further analysis.
在demo示例中记录数据保存在了php服务端的session中，当您关闭浏览器后它会自动删除。但在理论上它可以存储在各种数据库中
以便于以后分析或做其它应用。



Yemoo'S JS Blog 2007-10-22 17:19 发表评论
]]>使用正则批量替换单元格空白 http://www.cnitblog.com/yemoo/archive/2007/10/17/34987.htmlYemoo'S JS BlogYemoo'S JS BlogWed, 17 Oct 2007 04:33:00 GMThttp://www.cnitblog.com/yemoo/archive/2007/10/17/34987.htmlhttp://www.cnitblog.com/yemoo/comments/34987.htmlhttp://www.cnitblog.com/yemoo/archive/2007/10/17/34987.html#Feedback0http://www.cnitblog.com/yemoo/comments/commentRss/34987.htmlhttp://www.cnitblog.com/yemoo/services/trackbacks/34987.html

  在我们做table页面时可能都遇到过如果为table设定了大于0的边框border，当某个单元格中的内容未填充时在IE下浏览就会出现该单元格边框不显示的现象，这严重印象了表格界面的美观。我们一般使用填充&nbsp;的方法来解决这个问题，但是如果我们一个个的手工填充似乎就显得有些麻烦了，当表格内容复杂时这种修改可能会是一个极大的工程。
  今天偶就想用js对这些替换进行批量的解决，首先想的的遍历单元格进行替换：

代码如下：
<script type="text/javascript">
  <!--
  function tdSpace(id){
    var doc=document.getElementById(id).getElementsByTagName("td");
    for(var i=doc.length;i>0;i--){
      if(/^\s*$/g.test(doc[i-1].innerHTML)){doc[i-1].innerHTML="&nbsp;";}
    }

  }
  window.onload=function(){
    var t1=new Date().getTime();
    tdSpace("test")
    alert("耗时："+(new Date().getTime()-t1)+"毫秒");
  }
  //-->
  </script>

 发现在表格数据很多时速度有些慢，对1800行<tr><td></td><td>xxxx</td></tr>的行进行替换需要1.5秒之多，毕竟这里使用循环变量，效率低是很正常的，于是开始想直接对整个表格进行搜索替换而不用循环来解决，思虑几分钟之后写出了如下代码：