﻿<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/"><channel><title>IT博客网-A JavaScript Fancier-随笔分类-javascript技巧总结</title><link>http://www.cnitblog.com/yemoo/category/3110.html</link><description>伟大的javascript技术研究中...</description><language>zh-cn</language><lastBuildDate>Tue, 29 Apr 2008 19:12:14 GMT</lastBuildDate><pubDate>Tue, 29 Apr 2008 19:12:14 GMT</pubDate><ttl>60</ttl><item><title>使Ext的Template可以解析二层的json数据</title><link>http://www.cnitblog.com/yemoo/archive/2008/04/30/43104.html</link><dc:creator>Yemoo'S JS Blog</dc:creator><author>Yemoo'S JS Blog</author><pubDate>Tue, 29 Apr 2008 16:16:00 GMT</pubDate><guid>http://www.cnitblog.com/yemoo/archive/2008/04/30/43104.html</guid><wfw:comment>http://www.cnitblog.com/yemoo/comments/43104.html</wfw:comment><comments>http://www.cnitblog.com/yemoo/archive/2008/04/30/43104.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.cnitblog.com/yemoo/comments/commentRss/43104.html</wfw:commentRss><trackback:ping>http://www.cnitblog.com/yemoo/services/trackbacks/43104.html</trackback:ping><description><![CDATA[<script type="text/javascript" src="http://www.cnitblog.com/Files/yemoo/gg1.js"></script><br><br><div style="BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 13px; PADDING-BOTTOM: 4px; BORDER-LEFT: #cccccc 1px solid; WIDTH: 98%; WORD-BREAK: break-all; PADDING-TOP: 4px; BORDER-BOTTOM: #cccccc 1px solid; BACKGROUND-COLOR: #eeeeee"><span style="COLOR: #000000">{id:&nbsp;'myid',&nbsp;cls:{o:'myclass'},&nbsp;name:&nbsp;'foo',&nbsp;value:&nbsp;'bar'}</span></div>
Ext的Template支持通过传入json数据的方式进行模板替换。<br><strong>API中有这样一段示例： </strong>
<div style="BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 13px; PADDING-BOTTOM: 4px; BORDER-LEFT: #cccccc 1px solid; WIDTH: 98%; WORD-BREAK: break-all; PADDING-TOP: 4px; BORDER-BOTTOM: #cccccc 1px solid; BACKGROUND-COLOR: #eeeeee"><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000">&nbsp;t&nbsp;</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">&nbsp;</span><span style="COLOR: #0000ff">new</span><span style="COLOR: #000000">&nbsp;Ext.Template(<br>&nbsp;&nbsp;&nbsp;&nbsp;'</span><span style="COLOR: #000000">&lt;</span><span style="COLOR: #000000">div&nbsp;name</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">{id}</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">&gt;</span><span style="COLOR: #000000">',<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'</span><span style="COLOR: #000000">&lt;</span><span style="COLOR: #000000">span&nbsp;class</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">{cls}</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">&gt;</span><span style="COLOR: #000000">{name:trim}&nbsp;{value:ellipsis(</span><span style="COLOR: #000000">10</span><span style="COLOR: #000000">)}</span><span style="COLOR: #000000">&lt;/</span><span style="COLOR: #000000">span</span><span style="COLOR: #000000">&gt;</span><span style="COLOR: #000000">',<br>&nbsp;&nbsp;&nbsp;&nbsp;'</span><span style="COLOR: #000000">&lt;/</span><span style="COLOR: #000000">div</span><span style="COLOR: #000000">&gt;</span><span style="COLOR: #000000">'<br>);<br>t.append('some</span><span style="COLOR: #000000">-</span><span style="COLOR: #000000">element',&nbsp;{id:&nbsp;'myid',&nbsp;cls:&nbsp;'myclass',&nbsp;name:&nbsp;'foo',&nbsp;value:&nbsp;'bar'});</span></div>
<br><br><strong>稍作修改做个测试：</strong><br><br>
<div style="BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 13px; PADDING-BOTTOM: 4px; BORDER-LEFT: #cccccc 1px solid; WIDTH: 98%; WORD-BREAK: break-all; PADDING-TOP: 4px; BORDER-BOTTOM: #cccccc 1px solid; BACKGROUND-COLOR: #eeeeee"><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000">&nbsp;t&nbsp;</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">&nbsp;</span><span style="COLOR: #0000ff">new</span><span style="COLOR: #000000">&nbsp;Ext.Template(<br>&nbsp;&nbsp;&nbsp;&nbsp;'</span><span style="COLOR: #000000">&lt;</span><span style="COLOR: #000000">div&nbsp;name</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">{id}</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">&gt;</span><span style="COLOR: #000000">',<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'</span><span style="COLOR: #000000">&lt;</span><span style="COLOR: #000000">span&nbsp;class</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">{cls}</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">&gt;</span><span style="COLOR: #000000">{name}&nbsp;{value}</span><span style="COLOR: #000000">&lt;/</span><span style="COLOR: #000000">span</span><span style="COLOR: #000000">&gt;</span><span style="COLOR: #000000">',<br>&nbsp;&nbsp;&nbsp;&nbsp;'</span><span style="COLOR: #000000">&lt;/</span><span style="COLOR: #000000">div</span><span style="COLOR: #000000">&gt;</span><span style="COLOR: #000000">'<br>);<br></span><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000">&nbsp;dt</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">t.apply({id:&nbsp;'myid',&nbsp;cls:&nbsp;'myclass',&nbsp;name:&nbsp;'foo',&nbsp;value:&nbsp;'bar'});<br>alert(dt);<br></span></div>
<br>运行上面的代码会弹出&lt;div name="myid"&gt;&lt;span class="myclass"&gt;foo bar&lt;/span&gt;&lt;/div&gt;说明替换成功。<br><br>但如果又这样一个模板数据：<br><br><br>我们想在替换时将模板中原cls部分替换为cls.o的值，也就是myclass，该怎么做呢？是不是想直接用{cls.o}，你可以试下，绝对无效，没有替换。因为template匹配替换是直接对{}中冒号前的字符串与JSON变量进行匹配的。当然找不到cls.o这个串所以也就不能匹配。<br>好在Template支持对数据的解析处理。<br>我们可以自己定义一个解析函数即可。其实很简单：<br>
<div style="BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 13px; PADDING-BOTTOM: 4px; BORDER-LEFT: #cccccc 1px solid; WIDTH: 98%; WORD-BREAK: break-all; PADDING-TOP: 4px; BORDER-BOTTOM: #cccccc 1px solid; BACKGROUND-COLOR: #eeeeee"><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000">&nbsp;t&nbsp;</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">&nbsp;</span><span style="COLOR: #0000ff">new</span><span style="COLOR: #000000">&nbsp;Ext.Template(<br>&nbsp;&nbsp;&nbsp;&nbsp;'</span><span style="COLOR: #000000">&lt;</span><span style="COLOR: #000000">div&nbsp;name</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">{id}</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">&gt;</span><span style="COLOR: #000000">',<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'</span><span style="COLOR: #000000">&lt;</span><span style="COLOR: #000000">span&nbsp;class</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">{cls:this.parseJSON}</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">&gt;</span><span style="COLOR: #000000">{name}&nbsp;{value}</span><span style="COLOR: #000000">&lt;/</span><span style="COLOR: #000000">span</span><span style="COLOR: #000000">&gt;</span><span style="COLOR: #000000">',<br>&nbsp;&nbsp;&nbsp;&nbsp;'</span><span style="COLOR: #000000">&lt;/</span><span style="COLOR: #000000">div</span><span style="COLOR: #000000">&gt;</span><span style="COLOR: #000000">'<br>);<br>t.parseJSON</span><span style="COLOR: #000000">=</span><span style="COLOR: #0000ff">function</span><span style="COLOR: #000000">(data){</span><span style="COLOR: #0000ff">return</span><span style="COLOR: #000000">&nbsp;data.o};<br></span><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000">&nbsp;dt</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">t.apply({id:&nbsp;'myid',&nbsp;cls:&nbsp;{o:'myclass'},&nbsp;name:&nbsp;'foo',&nbsp;value:&nbsp;'bar'});<br>alert(dt)</span></div>
<br>我们定义了一个叫parseJSON的解析方法，在模板中访问顶层的cls然后对cls(是一个object)的值进行处理（直接访问它的o属性）即可。<script type="text/javascript" src="http://www.cnitblog.com/Files/yemoo/gg2.js"></script><br><img src ="http://www.cnitblog.com/yemoo/aggbug/43104.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.cnitblog.com/yemoo/" target="_blank">Yemoo'S JS Blog</a> 2008-04-30 00:16 <a href="http://www.cnitblog.com/yemoo/archive/2008/04/30/43104.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>undefined==null！</title><link>http://www.cnitblog.com/yemoo/archive/2008/03/31/41723.html</link><dc:creator>Yemoo'S JS Blog</dc:creator><author>Yemoo'S JS Blog</author><pubDate>Mon, 31 Mar 2008 03:54:00 GMT</pubDate><guid>http://www.cnitblog.com/yemoo/archive/2008/03/31/41723.html</guid><wfw:comment>http://www.cnitblog.com/yemoo/comments/41723.html</wfw:comment><comments>http://www.cnitblog.com/yemoo/archive/2008/03/31/41723.html#Feedback</comments><slash:comments>1</slash:comments><wfw:commentRss>http://www.cnitblog.com/yemoo/comments/commentRss/41723.html</wfw:commentRss><trackback:ping>http://www.cnitblog.com/yemoo/services/trackbacks/41723.html</trackback:ping><description><![CDATA[<script type="text/javascript" src="http://www.cnitblog.com/Files/yemoo/gg1.js"></script><br><br>貌似以前也看过null==undefined，null!==undefined，但也一直没有在意。<br><br>近日看过去别人的一程序源码，到处都有一些如if(x!=undefined&amp;&amp;x!=null&amp;&amp;x!="")之类的判断，突然觉得写的很啰嗦，俺一般都直接if(x){}因为不论null、undefined、""在条件判断中其实都是false，何需如此啰嗦？（不过要注意如果你的x==0也是合法值的话就不能使用if(x){}来做条件判断了）<br><br>为了证明这种多余，俺也特意做了以下测试：<br>var x;<br>alert(x)<br>if(x==null){<br>&nbsp;&nbsp;&nbsp;&nbsp;alert('failed')<br>}<br><br>其中x为一个未初始化的变量，即undefined。<br>运行以上代码：先后弹出undefined和failed，说明x==null是符合条件的。<br><br>我们可以直接alert(null==undefined)其实也可以发现返回了true。<br><br>这都说明进行x==null||x==undefined或x!=null&amp;&amp;x!=undefined之类的写法纯属多余！<br><br>一般只需判断null或undefined一个即可。<br><script type="text/javascript" src="http://www.cnitblog.com/Files/yemoo/gg2.js"></script>&lt; 
 <img src ="http://www.cnitblog.com/yemoo/aggbug/41723.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.cnitblog.com/yemoo/" target="_blank">Yemoo'S JS Blog</a> 2008-03-31 11:54 <a href="http://www.cnitblog.com/yemoo/archive/2008/03/31/41723.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>JS文件传参及处理技巧</title><link>http://www.cnitblog.com/yemoo/archive/2008/03/11/40799.html</link><dc:creator>Yemoo'S JS Blog</dc:creator><author>Yemoo'S JS Blog</author><pubDate>Tue, 11 Mar 2008 11:18:00 GMT</pubDate><guid>http://www.cnitblog.com/yemoo/archive/2008/03/11/40799.html</guid><wfw:comment>http://www.cnitblog.com/yemoo/comments/40799.html</wfw:comment><comments>http://www.cnitblog.com/yemoo/archive/2008/03/11/40799.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.cnitblog.com/yemoo/comments/commentRss/40799.html</wfw:commentRss><trackback:ping>http://www.cnitblog.com/yemoo/services/trackbacks/40799.html</trackback:ping><description><![CDATA[<script type="text/javascript" src="http://www.cnitblog.com/Files/yemoo/gg1.js"></script><br><br>其实为js文件传参是很久就接触过的一个问题，只是一直没有放在心上，今天在无忧看到又有人问这个问题，今日总结一下。<br><br><strong>解决思路：</strong><br><br>1、首先获取到当前JS文件的SRC属性，这里有一个小技巧：我们只需要获取当前页面最后一个script标记内容即可。<br>为什么？？<span style="COLOR: #ff0000">因为JS是顺序解析的，当前JS脚本解析时后面的js都还没有解析到，当然就认为自己就是最后一个script了。</span>此外，这样获取还有一个好处：<span style="COLOR: #ff0000">我们可以多次引用同一个文件且传入不同的参数，这样可以在js文件中根据参数不同做不同处理，很巧妙把！简直就是动态语言了。</span><br><strong>代码如下：<br><br></strong>
<div style="BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 13px; PADDING-BOTTOM: 4px; BORDER-LEFT: #cccccc 1px solid; WIDTH: 98%; WORD-BREAK: break-all; PADDING-TOP: 4px; BORDER-BOTTOM: #cccccc 1px solid; BACKGROUND-COLOR: #eeeeee"><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000">&nbsp;scripts</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">document.getElementsByTagName(</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">script</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">);<br></span><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000">&nbsp;curJS</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">scripts[scripts.length</span><span style="COLOR: #000000">-</span><span style="COLOR: #000000">1</span><span style="COLOR: #000000">];&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #008000">//</span><span style="COLOR: #008000">curJS就是我们当前的js文件</span></div>
<br><br>得到这个就好办了，通过curJS.src即可获取到完整的路径内容（包括参数）。<br><br>2、下面的就是解析参数内容了，解析的过程相当简单，相信很多人都容易完成这一步。<br>但我们要对一个特殊情况进行处理：<span style="COLOR: #ff0000">如果一个参数被传入了多次，则要将该参数值转换为数组存储每一个传入的值。</span><br><br><strong>演示地址：</strong><a href="http://www.ajaxbbs.net/test/getArgs/" target=_blank><u><font color=#0000ff>http://www.ajaxbbs.net/test/getArgs/</font></u></a><br><br><strong>完整测试脚本如下：<br></strong>
<div style="BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 13px; PADDING-BOTTOM: 4px; BORDER-LEFT: #cccccc 1px solid; WIDTH: 98%; WORD-BREAK: break-all; PADDING-TOP: 4px; BORDER-BOTTOM: #cccccc 1px solid; BACKGROUND-COLOR: #eeeeee"><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000">&nbsp;getArgs</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">(</span><span style="COLOR: #0000ff">function</span><span style="COLOR: #000000">(){<br>&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000">&nbsp;sc</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">document.getElementsByTagName('script');<br>&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000">&nbsp;paramsArr</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">sc[sc.length</span><span style="COLOR: #000000">-</span><span style="COLOR: #000000">1</span><span style="COLOR: #000000">].src.split('</span><span style="COLOR: #000000">?</span><span style="COLOR: #000000">')[</span><span style="COLOR: #000000">1</span><span style="COLOR: #000000">].split('</span><span style="COLOR: #000000">&amp;</span><span style="COLOR: #000000">');<br>&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000">&nbsp;args</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">{},argsStr</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">[],param,t,name,value;<br>&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #0000ff">for</span><span style="COLOR: #000000">(</span><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000">&nbsp;i</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">0</span><span style="COLOR: #000000">,len</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">paramsArr.length;i</span><span style="COLOR: #000000">&lt;</span><span style="COLOR: #000000">len;i</span><span style="COLOR: #000000">++</span><span style="COLOR: #000000">){<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;param</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">paramsArr[i].split('</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">');<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">param[</span><span style="COLOR: #000000">0</span><span style="COLOR: #000000">],value</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">param[</span><span style="COLOR: #000000">1</span><span style="COLOR: #000000">];<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #0000ff">if</span><span style="COLOR: #000000">(</span><span style="COLOR: #0000ff">typeof</span><span style="COLOR: #000000">&nbsp;args[name]</span><span style="COLOR: #000000">==</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">undefined</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">){&nbsp;</span><span style="COLOR: #008000">//</span><span style="COLOR: #008000">参数尚不存在</span><span style="COLOR: #008000"><br></span><span style="COLOR: #000000">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;args[name]</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">value;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</span><span style="COLOR: #0000ff">else</span><span style="COLOR: #000000">&nbsp;</span><span style="COLOR: #0000ff">if</span><span style="COLOR: #000000">(</span><span style="COLOR: #0000ff">typeof</span><span style="COLOR: #000000">&nbsp;args[name]</span><span style="COLOR: #000000">==</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">string</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">){&nbsp;</span><span style="COLOR: #008000">//</span><span style="COLOR: #008000">参数已经存在则保存为数组</span><span style="COLOR: #008000"><br></span><span style="COLOR: #000000">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;args[name]</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">[args[name]]<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;args[name].push(value);<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</span><span style="COLOR: #0000ff">else</span><span style="COLOR: #000000">{&nbsp;&nbsp;</span><span style="COLOR: #008000">//</span><span style="COLOR: #008000">已经是数组的</span><span style="COLOR: #008000"><br></span><span style="COLOR: #000000">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;args[name].push(value);<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br>&nbsp;&nbsp;&nbsp;&nbsp;}<br>&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #008000">/*</span><span style="COLOR: #008000">在实际应用中下面的showArg和args.toString可以删掉，这里只是为了测试函数getArgs返回的内容</span><span style="COLOR: #008000">*/</span><span style="COLOR: #000000"><br>&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000">&nbsp;showArg</span><span style="COLOR: #000000">=</span><span style="COLOR: #0000ff">function</span><span style="COLOR: #000000">(x){&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #008000">//</span><span style="COLOR: #008000">转换不同数据的显示方式</span><span style="COLOR: #008000"><br></span><span style="COLOR: #000000">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #0000ff">if</span><span style="COLOR: #000000">(</span><span style="COLOR: #0000ff">typeof</span><span style="COLOR: #000000">(x)</span><span style="COLOR: #000000">==</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">string</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">&amp;&amp;!/</span><span style="COLOR: #000000">\d</span><span style="COLOR: #000000">+/</span><span style="COLOR: #000000">.test(x))&nbsp;</span><span style="COLOR: #0000ff">return</span><span style="COLOR: #000000">&nbsp;</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">'</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">+</span><span style="COLOR: #000000">x</span><span style="COLOR: #000000">+</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">'</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #008000">//</span><span style="COLOR: #008000">字符串</span><span style="COLOR: #008000"><br></span><span style="COLOR: #000000">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #0000ff">if</span><span style="COLOR: #000000">(x&nbsp;</span><span style="COLOR: #0000ff">instanceof</span><span style="COLOR: #000000">&nbsp;Array)&nbsp;</span><span style="COLOR: #0000ff">return</span><span style="COLOR: #000000">&nbsp;</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">[</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">+</span><span style="COLOR: #000000">x</span><span style="COLOR: #000000">+</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">]</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">&nbsp;</span><span style="COLOR: #008000">//</span><span style="COLOR: #008000">数组</span><span style="COLOR: #008000"><br></span><span style="COLOR: #000000">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #0000ff">return</span><span style="COLOR: #000000">&nbsp;x;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #008000">//</span><span style="COLOR: #008000">数字</span><span style="COLOR: #008000"><br></span><span style="COLOR: #000000">&nbsp;&nbsp;&nbsp;&nbsp;}<br>&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #008000">//</span><span style="COLOR: #008000">组装成json格式</span><span style="COLOR: #008000"><br></span><span style="COLOR: #000000">&nbsp;&nbsp;&nbsp;&nbsp;args.toString</span><span style="COLOR: #000000">=</span><span style="COLOR: #0000ff">function</span><span style="COLOR: #000000">(){<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #0000ff">for</span><span style="COLOR: #000000">(</span><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000">&nbsp;i&nbsp;</span><span style="COLOR: #0000ff">in</span><span style="COLOR: #000000">&nbsp;args)&nbsp;argsStr.push(i</span><span style="COLOR: #000000">+</span><span style="COLOR: #000000">':'</span><span style="COLOR: #000000">+</span><span style="COLOR: #000000">showArg(args[i]));<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #0000ff">return</span><span style="COLOR: #000000">&nbsp;'{'</span><span style="COLOR: #000000">+</span><span style="COLOR: #000000">argsStr.join(',')</span><span style="COLOR: #000000">+</span><span style="COLOR: #000000">'}';<br>&nbsp;&nbsp;&nbsp;&nbsp;}<br>&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #0000ff">return</span><span style="COLOR: #000000">&nbsp;</span><span style="COLOR: #0000ff">function</span><span style="COLOR: #000000">(){</span><span style="COLOR: #0000ff">return</span><span style="COLOR: #000000">&nbsp;args;}&nbsp;</span><span style="COLOR: #008000">//</span><span style="COLOR: #008000">以json格式返回获取的所有参数</span><span style="COLOR: #008000"><br></span><span style="COLOR: #000000">})();<br><br>alert(getArgs());<br>alert(</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">username:</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">+</span><span style="COLOR: #000000">getArgs()[</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">username</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">]);</span></div>
<br><br><strong>测试示例的HTML源码：<br></strong>
<div style="BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 13px; PADDING-BOTTOM: 4px; BORDER-LEFT: #cccccc 1px solid; WIDTH: 98%; WORD-BREAK: break-all; PADDING-TOP: 4px; BORDER-BOTTOM: #cccccc 1px solid; BACKGROUND-COLOR: #eeeeee"><img src="http://www.cnitblog.com/images/OutliningIndicators/None.gif" align=top><span style="COLOR: #0000ff">&lt;!</span><span style="COLOR: #ff00ff">DOCTYPE&nbsp;html&nbsp;PUBLIC&nbsp;"-//W3C//DTD&nbsp;XHTML&nbsp;1.0&nbsp;Transitional//EN"&nbsp;"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"</span><span style="COLOR: #0000ff">&gt;</span><span style="COLOR: #000000"><br><img src="http://www.cnitblog.com/images/OutliningIndicators/None.gif" align=top></span><span style="COLOR: #0000ff">&lt;</span><span style="COLOR: #800000">html&nbsp;</span><span style="COLOR: #ff0000">xmlns</span><span style="COLOR: #0000ff">="http://www.w3.org/1999/xhtml"</span><span style="COLOR: #0000ff">&gt;</span><span style="COLOR: #000000"><br><img src="http://www.cnitblog.com/images/OutliningIndicators/None.gif" align=top></span><span style="COLOR: #0000ff">&lt;</span><span style="COLOR: #800000">head</span><span style="COLOR: #0000ff">&gt;</span><span style="COLOR: #000000"><br><img src="http://www.cnitblog.com/images/OutliningIndicators/None.gif" align=top>&nbsp;&nbsp;</span><span style="COLOR: #0000ff">&lt;</span><span style="COLOR: #800000">title</span><span style="COLOR: #0000ff">&gt;</span><span style="COLOR: #000000">&nbsp;new&nbsp;document&nbsp;</span><span style="COLOR: #0000ff">&lt;/</span><span style="COLOR: #800000">title</span><span style="COLOR: #0000ff">&gt;</span><span style="COLOR: #000000"><br><img src="http://www.cnitblog.com/images/OutliningIndicators/None.gif" align=top>&nbsp;&nbsp;</span><span style="COLOR: #0000ff">&lt;</span><span style="COLOR: #800000">meta&nbsp;</span><span style="COLOR: #ff0000">name</span><span style="COLOR: #0000ff">="generator"</span><span style="COLOR: #ff0000">&nbsp;content</span><span style="COLOR: #0000ff">="editplus"</span><span style="COLOR: #ff0000">&nbsp;</span><span style="COLOR: #0000ff">/&gt;</span><span style="COLOR: #000000"><br><img src="http://www.cnitblog.com/images/OutliningIndicators/None.gif" align=top>&nbsp;&nbsp;</span><span style="COLOR: #0000ff">&lt;</span><span style="COLOR: #800000">meta&nbsp;</span><span style="COLOR: #ff0000">name</span><span style="COLOR: #0000ff">="author"</span><span style="COLOR: #ff0000">&nbsp;content</span><span style="COLOR: #0000ff">=""</span><span style="COLOR: #ff0000">&nbsp;</span><span style="COLOR: #0000ff">/&gt;</span><span style="COLOR: #000000"><br><img src="http://www.cnitblog.com/images/OutliningIndicators/None.gif" align=top>&nbsp;&nbsp;</span><span style="COLOR: #0000ff">&lt;</span><span style="COLOR: #800000">meta&nbsp;</span><span style="COLOR: #ff0000">name</span><span style="COLOR: #0000ff">="keywords"</span><span style="COLOR: #ff0000">&nbsp;content</span><span style="COLOR: #0000ff">=""</span><span style="COLOR: #ff0000">&nbsp;</span><span style="COLOR: #0000ff">/&gt;</span><span style="COLOR: #000000"><br><img src="http://www.cnitblog.com/images/OutliningIndicators/None.gif" align=top>&nbsp;&nbsp;</span><span style="COLOR: #0000ff">&lt;</span><span style="COLOR: #800000">meta&nbsp;</span><span style="COLOR: #ff0000">name</span><span style="COLOR: #0000ff">="description"</span><span style="COLOR: #ff0000">&nbsp;content</span><span style="COLOR: #0000ff">=""</span><span style="COLOR: #ff0000">&nbsp;</span><span style="COLOR: #0000ff">/&gt;</span><span style="COLOR: #000000"><br><img src="http://www.cnitblog.com/images/OutliningIndicators/None.gif" align=top>&nbsp;&nbsp;</span><span style="COLOR: #0000ff">&lt;</span><span style="COLOR: #800000">script&nbsp;</span><span style="COLOR: #ff0000">type</span><span style="COLOR: #0000ff">="text/javascript"</span><span style="COLOR: #ff0000">&nbsp;src</span><span style="COLOR: #0000ff">="test.js?id=4&amp;username=yemoo&amp;id=1&amp;uid=110"</span><span style="COLOR: #0000ff">&gt;&lt;/</span><span style="COLOR: #800000">script</span><span style="COLOR: #0000ff">&gt;</span><span style="COLOR: #000000"><br><img src="http://www.cnitblog.com/images/OutliningIndicators/None.gif" align=top>&nbsp;&nbsp;</span><span style="COLOR: #0000ff">&lt;</span><span style="COLOR: #800000">script&nbsp;</span><span style="COLOR: #ff0000">type</span><span style="COLOR: #0000ff">="text/javascript"</span><span style="COLOR: #ff0000">&nbsp;src</span><span style="COLOR: #0000ff">="test.js?id=5&amp;username=ajaxbbs&amp;id=7&amp;uid=253"</span><span style="COLOR: #0000ff">&gt;&lt;/</span><span style="COLOR: #800000">script</span><span style="COLOR: #0000ff">&gt;</span><span style="COLOR: #000000"><br><img src="http://www.cnitblog.com/images/OutliningIndicators/None.gif" align=top>&nbsp;&nbsp;</span><span style="COLOR: #0000ff">&lt;</span><span style="COLOR: #800000">script&nbsp;</span><span style="COLOR: #ff0000">type</span><span style="COLOR: #0000ff">="text/javascript"</span><span style="COLOR: #ff0000">&nbsp;src</span><span style="COLOR: #0000ff">="test.js?id=6&amp;username=jack&amp;id=8&amp;uid=258"</span><span style="COLOR: #0000ff">&gt;&lt;/</span><span style="COLOR: #800000">script</span><span style="COLOR: #0000ff">&gt;</span><span style="COLOR: #000000"><br><img src="http://www.cnitblog.com/images/OutliningIndicators/None.gif" align=top></span><span style="COLOR: #0000ff">&lt;/</span><span style="COLOR: #800000">head</span><span style="COLOR: #0000ff">&gt;</span><span style="COLOR: #000000"><br><img src="http://www.cnitblog.com/images/OutliningIndicators/None.gif" align=top></span><span style="COLOR: #0000ff">&lt;</span><span style="COLOR: #800000">body</span><span style="COLOR: #0000ff">&gt;</span><span style="COLOR: #000000"><br><img src="http://www.cnitblog.com/images/OutliningIndicators/None.gif" align=top></span><span style="COLOR: #0000ff">&lt;/</span><span style="COLOR: #800000">body</span><span style="COLOR: #0000ff">&gt;</span><span style="COLOR: #000000"><br><img src="http://www.cnitblog.com/images/OutliningIndicators/None.gif" align=top></span><span style="COLOR: #0000ff">&lt;/</span><span style="COLOR: #800000">html</span><span style="COLOR: #0000ff">&gt;</span><span style="COLOR: #000000"><br><strong><img src="http://www.cnitblog.com/images/OutliningIndicators/None.gif" align=top></strong></span></div>
<br><script type="text/javascript" src="http://www.cnitblog.com/Files/yemoo/gg2.js"></script><img src ="http://www.cnitblog.com/yemoo/aggbug/40799.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.cnitblog.com/yemoo/" target="_blank">Yemoo'S JS Blog</a> 2008-03-11 19:18 <a href="http://www.cnitblog.com/yemoo/archive/2008/03/11/40799.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>三种For循环写法的性能比较</title><link>http://www.cnitblog.com/yemoo/archive/2007/12/18/37851.html</link><dc:creator>Yemoo'S JS Blog</dc:creator><author>Yemoo'S JS Blog</author><pubDate>Tue, 18 Dec 2007 15:47:00 GMT</pubDate><guid>http://www.cnitblog.com/yemoo/archive/2007/12/18/37851.html</guid><wfw:comment>http://www.cnitblog.com/yemoo/comments/37851.html</wfw:comment><comments>http://www.cnitblog.com/yemoo/archive/2007/12/18/37851.html#Feedback</comments><slash:comments>1</slash:comments><wfw:commentRss>http://www.cnitblog.com/yemoo/comments/commentRss/37851.html</wfw:commentRss><trackback:ping>http://www.cnitblog.com/yemoo/services/trackbacks/37851.html</trackback:ping><description><![CDATA[<script type="text/javascript" src="http://www.cnitblog.com/Files/yemoo/gg1.js"></script><br><br>循环作为程序语言的三大逻辑控制结构之一，在实际开发是经常会遇到的。<br>在JavaScript程序的循环结构使用上，我们经常会遇到这种应用。<br>根据一个对象的长度进行循环并对对象每个每个元素进行处理。<br><br>如
<div style="BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 13px; PADDING-BOTTOM: 4px; BORDER-LEFT: #cccccc 1px solid; WIDTH: 98%; WORD-BREAK: break-all; PADDING-TOP: 4px; BORDER-BOTTOM: #cccccc 1px solid; BACKGROUND-COLOR: #eeeeee"><span style="COLOR: #0000ff">for</span><span style="COLOR: #000000">(</span><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000">&nbsp;i</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">0</span><span style="COLOR: #000000">;i</span><span style="COLOR: #000000">&lt;</span><span style="COLOR: #000000">a.length;i</span><span style="COLOR: #000000">++</span><span style="COLOR: #000000">){<br>&nbsp;&nbsp;&nbsp;&nbsp;sum</span><span style="COLOR: #000000">+=</span><span style="COLOR: #000000">a[i]<br>}</span></div>
<br>以上只是一个简单的示例，对于如上程序，很多程序开发者都研究过关于其执行效率的问题。<br>因此就出现了以下的两种写法：
<div style="BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 13px; PADDING-BOTTOM: 4px; BORDER-LEFT: #cccccc 1px solid; WIDTH: 98%; WORD-BREAK: break-all; PADDING-TOP: 4px; BORDER-BOTTOM: #cccccc 1px solid; BACKGROUND-COLOR: #eeeeee"><span style="COLOR: #0000ff">for</span><span style="COLOR: #000000">(</span><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000">&nbsp;i</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">0</span><span style="COLOR: #000000">,iLen</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">a.length;i</span><span style="COLOR: #000000">&lt;</span><span style="COLOR: #000000">iLen;i</span><span style="COLOR: #000000">++</span><span style="COLOR: #000000">){<br>&nbsp;&nbsp;&nbsp;&nbsp;sum</span><span style="COLOR: #000000">+=</span><span style="COLOR: #000000">a[i]<br>}</span></div>
<br>
<div style="BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 13px; PADDING-BOTTOM: 4px; BORDER-LEFT: #cccccc 1px solid; WIDTH: 98%; WORD-BREAK: break-all; PADDING-TOP: 4px; BORDER-BOTTOM: #cccccc 1px solid; BACKGROUND-COLOR: #eeeeee"><span style="COLOR: #0000ff">for</span><span style="COLOR: #000000">(</span><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000">&nbsp;i</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">0</span><span style="COLOR: #000000">,item;item</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">a[i];i</span><span style="COLOR: #000000">++</span><span style="COLOR: #000000">){<br>&nbsp;&nbsp;&nbsp;&nbsp;sum</span><span style="COLOR: #000000">+=</span><span style="COLOR: #000000">item;<br>}<br>或<br></span><span style="COLOR: #0000ff">for</span><span style="COLOR: #000000">(</span><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000">&nbsp;i</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">0</span><span style="COLOR: #000000">,item;(item</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">a[i])</span><span style="COLOR: #000000">!=</span><span style="COLOR: #000000">undefined;i</span><span style="COLOR: #000000">++</span><span style="COLOR: #000000">){<br>&nbsp;&nbsp;&nbsp;&nbsp;sum</span><span style="COLOR: #000000">+=</span><span style="COLOR: #000000">item;<br>}</span></div>
<br><br>对于三种写法其性能到底有多大差异呢？到底哪个的效率更高呢？<br><br>我在自己的机器上对其做了测试：<br>发现在10000条数据以下时三者执行速度差别不大，差别大概在0.01m左右，而且测试结果不稳定。<br>然后将数据变为50w条进行测试：<br>三种方法测试结果分别为：<br>1182<br>981<br>1673（而且出现&#8220;程序执行缓慢，是否取消该脚本&#8221;的提示）<br><br>1572<br>1462<br>12067（同样出现了脚本加载缓慢的提示）<br><br>尽管数据并不是非常稳定，但还是能从中发现点什么的。<br><br><span style="COLOR: #008000">速度最快的是第二种写法：即保存对象长度，避免每次都计算</span>。<br><span style="COLOR: #ff0000">速度最慢的是第三种写法：即不关系对象的长度，而根据当前项是否存在来循环。</span><br><br>之前我一直以为是第三种写法速度应该是最快的（因为不用计算长度），今日一测才发现第三种的执行效率如此低下，看来还是避免使用。当然，很多时候我们可能还是不得不使用这第三种写法。<br><br><strong>测试程序如下：（建议分开对三个程序进行测试，特别是在FF下）</strong>
<div style="BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 13px; PADDING-BOTTOM: 4px; BORDER-LEFT: #cccccc 1px solid; WIDTH: 98%; WORD-BREAK: break-all; PADDING-TOP: 4px; BORDER-BOTTOM: #cccccc 1px solid; BACKGROUND-COLOR: #eeeeee"><span style="COLOR: #000000">&lt;</span><span style="COLOR: #000000">script&nbsp;type</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">text/javascript</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">&gt;</span><span style="COLOR: #000000"><br>&nbsp;&nbsp;</span><span style="COLOR: #000000">&lt;!--</span><span style="COLOR: #000000"><br>&nbsp;&nbsp;</span><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000">&nbsp;a</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">[];<br>&nbsp;&nbsp;</span><span style="COLOR: #0000ff">for</span><span style="COLOR: #000000">(</span><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000">&nbsp;i</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">0</span><span style="COLOR: #000000">;i</span><span style="COLOR: #000000">&lt;</span><span style="COLOR: #000000">500000</span><span style="COLOR: #000000">;i</span><span style="COLOR: #000000">++</span><span style="COLOR: #000000">){<br>&nbsp;&nbsp;&nbsp;&nbsp;a.push(</span><span style="COLOR: #000000">100</span><span style="COLOR: #000000">);<br>&nbsp;&nbsp;}<br>&nbsp;&nbsp;</span><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000">&nbsp;sum</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">0</span><span style="COLOR: #000000">;<br>&nbsp;&nbsp;</span><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000">&nbsp;timer1</span><span style="COLOR: #000000">=</span><span style="COLOR: #0000ff">new</span><span style="COLOR: #000000">&nbsp;Date().getTime();<br>&nbsp;&nbsp;</span><span style="COLOR: #0000ff">for</span><span style="COLOR: #000000">(</span><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000">&nbsp;i</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">0</span><span style="COLOR: #000000">;i</span><span style="COLOR: #000000">&lt;</span><span style="COLOR: #000000">a.length;i</span><span style="COLOR: #000000">++</span><span style="COLOR: #000000">){<br>&nbsp;&nbsp;&nbsp;&nbsp;sum</span><span style="COLOR: #000000">+=</span><span style="COLOR: #000000">a[i];<br>&nbsp;&nbsp;}<br>&nbsp;&nbsp;alert(sum</span><span style="COLOR: #000000">+</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">\ntime:</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">+</span><span style="COLOR: #000000">(</span><span style="COLOR: #0000ff">new</span><span style="COLOR: #000000">&nbsp;Date().getTime()</span><span style="COLOR: #000000">-</span><span style="COLOR: #000000">timer1));<br><br>&nbsp;&nbsp;sum</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">0</span><span style="COLOR: #000000">;<br>&nbsp;&nbsp;</span><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000">&nbsp;timer2</span><span style="COLOR: #000000">=</span><span style="COLOR: #0000ff">new</span><span style="COLOR: #000000">&nbsp;Date().getTime();<br>&nbsp;&nbsp;</span><span style="COLOR: #0000ff">for</span><span style="COLOR: #000000">(</span><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000">&nbsp;i</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">0</span><span style="COLOR: #000000">,iLen</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">a.length;i</span><span style="COLOR: #000000">&lt;</span><span style="COLOR: #000000">iLen;i</span><span style="COLOR: #000000">++</span><span style="COLOR: #000000">){<br>&nbsp;&nbsp;&nbsp;&nbsp;sum</span><span style="COLOR: #000000">+=</span><span style="COLOR: #000000">a[i];<br>&nbsp;&nbsp;}<br>&nbsp;&nbsp;alert(sum</span><span style="COLOR: #000000">+</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">\ntime:</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">+</span><span style="COLOR: #000000">(</span><span style="COLOR: #0000ff">new</span><span style="COLOR: #000000">&nbsp;Date().getTime()</span><span style="COLOR: #000000">-</span><span style="COLOR: #000000">timer2));<br><br>&nbsp;&nbsp;sum</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">0</span><span style="COLOR: #000000">;<br>&nbsp;&nbsp;</span><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000">&nbsp;timer3</span><span style="COLOR: #000000">=</span><span style="COLOR: #0000ff">new</span><span style="COLOR: #000000">&nbsp;Date().getTime();<br>&nbsp;&nbsp;</span><span style="COLOR: #0000ff">for</span><span style="COLOR: #000000">(</span><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000">&nbsp;i</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">0</span><span style="COLOR: #000000">,item;item</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">a[i];i</span><span style="COLOR: #000000">++</span><span style="COLOR: #000000">){<br>&nbsp;&nbsp;&nbsp;&nbsp;sum</span><span style="COLOR: #000000">+=</span><span style="COLOR: #000000">item;<br>&nbsp;&nbsp;}<br>&nbsp;&nbsp;alert(sum</span><span style="COLOR: #000000">+</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">\ntime:</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">+</span><span style="COLOR: #000000">(</span><span style="COLOR: #0000ff">new</span><span style="COLOR: #000000">&nbsp;Date().getTime()</span><span style="COLOR: #000000">-</span><span style="COLOR: #000000">timer3));<br>&nbsp;&nbsp;</span><span style="COLOR: #008000">//</span><span style="COLOR: #008000">--&gt;</span><span style="COLOR: #008000"><br></span><span style="COLOR: #000000">&nbsp;&nbsp;</span><span style="COLOR: #000000">&lt;/</span><span style="COLOR: #000000">script</span><span style="COLOR: #000000">&gt;</span></div><p><script type="text/javascript" src="http://www.cnitblog.com/Files/yemoo/gg2.js"></script><img src ="http://www.cnitblog.com/yemoo/aggbug/37851.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.cnitblog.com/yemoo/" target="_blank">Yemoo'S JS Blog</a> 2007-12-18 23:47 <a href="http://www.cnitblog.com/yemoo/archive/2007/12/18/37851.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>IE及FF下关于setTimeout传参的研究总结</title><link>http://www.cnitblog.com/yemoo/archive/2007/12/18/37845.html</link><dc:creator>Yemoo'S JS Blog</dc:creator><author>Yemoo'S JS Blog</author><pubDate>Tue, 18 Dec 2007 14:34:00 GMT</pubDate><guid>http://www.cnitblog.com/yemoo/archive/2007/12/18/37845.html</guid><wfw:comment>http://www.cnitblog.com/yemoo/comments/37845.html</wfw:comment><comments>http://www.cnitblog.com/yemoo/archive/2007/12/18/37845.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.cnitblog.com/yemoo/comments/commentRss/37845.html</wfw:commentRss><trackback:ping>http://www.cnitblog.com/yemoo/services/trackbacks/37845.html</trackback:ping><description><![CDATA[<script type="text/javascript" src="http://www.cnitblog.com/Files/yemoo/gg1.js"></script><br><br>&nbsp;&nbsp;&nbsp;&nbsp;昨晚看《JavaScript核心技术》的BOM一章，上面写到setTimeout除了我们知道的两个参数（执行的函数，延迟时间）外后面还可以传一些参数，这些参数就是传递给&#8220;执行函数&#8221;的参数。<br><br>如 setTimeout(function add1(x,y){alert(x+y)},2000,3,5)会在2秒后弹出8，也许现在都明白这些参数的含义了。<br><br>近日突然想起于是测了一下，却失望的发现在IE下会弹出NaN，然后在add1里弹出arguments.length返回0，可见并没有将后面的两个参数传入add1中，不过在FF下确实是可以传入到add1中，看来又是一个IE/FF不兼容的特性，如此的一个特性其实挺好的，不晓得IE为何就不支持呢？每次都要在外面套一层Function真是麻烦。<br><br>接着在FF下测试setTimeout(function add1(){alert(arugments.length)},2000);执行后居然返回1，明明没有传参的，接着执行setTimeout(function add1(){alert(arugments.length)},2000,3);返回2，这不是多出了一个参数吗？<br><br>然后alert了最后的参数，发现延迟不同每次返回结果也都不同，而且都是数字。难道是setTimeout函数本身的执行时间？恩，应该是这样的，setTimeout本身执行也会有时间开销的。<br><br><strong>作如下测试： <br><br></strong>
<div style="BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 13px; PADDING-BOTTOM: 4px; BORDER-LEFT: #cccccc 1px solid; WIDTH: 98%; WORD-BREAK: break-all; PADDING-TOP: 4px; BORDER-BOTTOM: #cccccc 1px solid; BACKGROUND-COLOR: #eeeeee"><span style="COLOR: #0000ff">function</span><span style="COLOR: #000000">&nbsp;add(){<br>&nbsp;&nbsp;&nbsp;&nbsp;alert((</span><span style="COLOR: #0000ff">new</span><span style="COLOR: #000000">&nbsp;Date().getTime()</span><span style="COLOR: #000000">-</span><span style="COLOR: #000000">t)</span><span style="COLOR: #000000">+</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">,</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">+</span><span style="COLOR: #000000">arguments[</span><span style="COLOR: #000000">0</span><span style="COLOR: #000000">]);<br>}<br></span><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000">&nbsp;t</span><span style="COLOR: #000000">=</span><span style="COLOR: #0000ff">new</span><span style="COLOR: #000000">&nbsp;Date().getTime();<br>setTimeout(add,</span><span style="COLOR: #000000">1000</span><span style="COLOR: #000000">);</span></div>
<br><span style="COLOR: #008000">对延迟进行修改测试出了以下数据：</span><br>延迟时间&nbsp;&nbsp;&nbsp;&nbsp;弹出内容<br>1000&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 1009,8<br>2000&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 1998 -2<br>3000&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 3006 6<br><br>发现一个小规律：<span style="COLOR: #ff0000">执行时间差-那个奇怪的参数约等于延迟时间。</span><br>那个参数有点像setTimeout的执行的时间，但怎么会有负值呢？<span style="COLOR: #ff0000">它的意义大概就是实际延迟时间与设定延迟时间的差值吧。</span><br><br>这个问题就到这里吧。<br><br><strong>还有一个问题，能否在IE下实现如FF下setTimeout的功能呢？</strong><br>网上查了一下，已经有人去实现了这个，偶对其做简单改造，发布出来，其中对于计算差值的一行在实际中可以去掉，这里只是为了模拟和FF下完全一样的接口效果。<br><br>实现方法也并不复杂，主要利用了JS的call和apply，对call和apply不熟悉的可以先查看一下他们的用法。<br>
<div style="BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 13px; PADDING-BOTTOM: 4px; BORDER-LEFT: #cccccc 1px solid; WIDTH: 98%; WORD-BREAK: break-all; PADDING-TOP: 4px; BORDER-BOTTOM: #cccccc 1px solid; BACKGROUND-COLOR: #eeeeee"><span style="COLOR: #000000">&lt;</span><span style="COLOR: #000000">script&nbsp;type</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">text/javascript</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">&gt;</span><span style="COLOR: #000000"><br>&nbsp;&nbsp;</span><span style="COLOR: #000000">&lt;!--</span><span style="COLOR: #000000"><br>&nbsp;&nbsp;&nbsp;&nbsp;(</span><span style="COLOR: #0000ff">function</span><span style="COLOR: #000000">(){<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000">&nbsp;st&nbsp;</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">&nbsp;window.setTimeout;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.setTimeout&nbsp;</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">&nbsp;</span><span style="COLOR: #0000ff">function</span><span style="COLOR: #000000">(fn,&nbsp;mDelay)&nbsp;{<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000">&nbsp;t</span><span style="COLOR: #000000">=</span><span style="COLOR: #0000ff">new</span><span style="COLOR: #000000">&nbsp;Date().getTime();<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #0000ff">if</span><span style="COLOR: #000000">(</span><span style="COLOR: #0000ff">typeof</span><span style="COLOR: #000000">&nbsp;fn&nbsp;</span><span style="COLOR: #000000">==</span><span style="COLOR: #000000">&nbsp;'</span><span style="COLOR: #0000ff">function</span><span style="COLOR: #000000">'){<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000">&nbsp;args&nbsp;</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">&nbsp;Array.prototype.slice.call(arguments,</span><span style="COLOR: #000000">2</span><span style="COLOR: #000000">);<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000">&nbsp;f&nbsp;</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">&nbsp;</span><span style="COLOR: #0000ff">function</span><span style="COLOR: #000000">(){<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;args.push(</span><span style="COLOR: #0000ff">new</span><span style="COLOR: #000000">&nbsp;Date().getTime()</span><span style="COLOR: #000000">-</span><span style="COLOR: #000000">t</span><span style="COLOR: #000000">-</span><span style="COLOR: #000000">mDelay);&nbsp;&nbsp;</span><span style="COLOR: #008000">//</span><span style="COLOR: #008000">该行用于实现对实际延迟和设定延迟的差值，同FF的最后一个参数，无实际意义</span><span style="COLOR: #008000"><br></span><span style="COLOR: #000000">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fn.apply(</span><span style="COLOR: #0000ff">null</span><span style="COLOR: #000000">,&nbsp;args)<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;};<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #0000ff">return</span><span style="COLOR: #000000">&nbsp;st(f,&nbsp;mDelay);<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #0000ff">return</span><span style="COLOR: #000000">&nbsp;st(fn,mDelay);<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br>&nbsp;&nbsp;&nbsp;&nbsp;})();<br><br>&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #0000ff">function</span><span style="COLOR: #000000">&nbsp;test(x,y,z){<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(x</span><span style="COLOR: #000000">+</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">,</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">+</span><span style="COLOR: #000000">y</span><span style="COLOR: #000000">+</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">,</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">+</span><span style="COLOR: #000000">z);<br>&nbsp;&nbsp;&nbsp;&nbsp;}<br>&nbsp;&nbsp;&nbsp;&nbsp;setTimeout(test,</span><span style="COLOR: #000000">1000</span><span style="COLOR: #000000">,'arg1','arg2');<br>&nbsp;&nbsp;</span><span style="COLOR: #008000">//</span><span style="COLOR: #008000">--&gt;</span><span style="COLOR: #008000"><br></span><span style="COLOR: #000000">&nbsp;&nbsp;</span><span style="COLOR: #000000">&lt;/</span><span style="COLOR: #000000">script</span><span style="COLOR: #000000">&gt;</span></div>
<br><script type="text/javascript" src="http://www.cnitblog.com/Files/yemoo/gg2.js"></script><img src ="http://www.cnitblog.com/yemoo/aggbug/37845.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.cnitblog.com/yemoo/" target="_blank">Yemoo'S JS Blog</a> 2007-12-18 22:34 <a href="http://www.cnitblog.com/yemoo/archive/2007/12/18/37845.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>用js实现模板替换机制</title><link>http://www.cnitblog.com/yemoo/archive/2007/12/05/37365.html</link><dc:creator>Yemoo'S JS Blog</dc:creator><author>Yemoo'S JS Blog</author><pubDate>Wed, 05 Dec 2007 09:44:00 GMT</pubDate><guid>http://www.cnitblog.com/yemoo/archive/2007/12/05/37365.html</guid><wfw:comment>http://www.cnitblog.com/yemoo/comments/37365.html</wfw:comment><comments>http://www.cnitblog.com/yemoo/archive/2007/12/05/37365.html#Feedback</comments><slash:comments>2</slash:comments><wfw:commentRss>http://www.cnitblog.com/yemoo/comments/commentRss/37365.html</wfw:commentRss><trackback:ping>http://www.cnitblog.com/yemoo/services/trackbacks/37365.html</trackback:ping><description><![CDATA[<script type="text/javascript" src="http://www.cnitblog.com/Files/yemoo/gg1.js"></script><br><br>Ext中为String扩展了一个静态方法format用于实现对字符串类模板机制的格式化。<br><br>如String.format("{0},{1},{2}","a","b","c");返回a,b,c。<br><br>看了一下其实现方式觉得比较优雅，而且该函数在实际当中也很有实用价值，于是自己就将其略加改造，实现对字符串的模板替换。<br><br><strong>代码如下：</strong><br>
<div style="BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 13px; PADDING-BOTTOM: 4px; BORDER-LEFT: #cccccc 1px solid; WIDTH: 98%; WORD-BREAK: break-all; PADDING-TOP: 4px; BORDER-BOTTOM: #cccccc 1px solid; BACKGROUND-COLOR: #eeeeee"><span style="COLOR: #000000">String.prototype.template</span><span style="COLOR: #000000">=</span><span style="COLOR: #0000ff">function</span><span style="COLOR: #000000">(){<br>&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000">&nbsp;args</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">arguments;<br>&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #0000ff">return</span><span style="COLOR: #000000">&nbsp;</span><span style="COLOR: #0000ff">this</span><span style="COLOR: #000000">.replace(</span><span style="COLOR: #000000">/</span><span style="COLOR: #000000">\{(\d</span><span style="COLOR: #000000">+</span><span style="COLOR: #000000">)\}</span><span style="COLOR: #000000">/</span><span style="COLOR: #000000">g,&nbsp;</span><span style="COLOR: #0000ff">function</span><span style="COLOR: #000000">(m,&nbsp;i){<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #0000ff">return</span><span style="COLOR: #000000">&nbsp;args[i];<br>&nbsp;&nbsp;&nbsp;&nbsp;});<br>}<br><br></span><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000">&nbsp;a</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">arg1:{0},arg2:{1},arg3:{2}</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">;<br>alert(a.template(</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">a</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">,</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">b</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">,</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">c</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">));&nbsp;&nbsp;</span><span style="COLOR: #008000">//</span><span style="COLOR: #008000">arg1:a,arg2:b,arg3:c</span><span style="COLOR: #008000"><br></span><span style="COLOR: #000000">alert(a.template(</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">1</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">,</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">2</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">,</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">3</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">));&nbsp;</span><span style="COLOR: #008000">//</span><span style="COLOR: #008000">arg1:1,arg2:2,arg3:3</span></div>
<br>主要用replace+巧妙的正则实现。<br><br>调用方式很简单，首先建立一个模板字符串。如a="{0},{1}"，每个模板字符用{数字}表示。<br>然后直接调用a.template("arg1","arg2","arg3");<br>传入的参数与模板中定义的模板字符会对应着被替换。<br><p><script type="text/javascript" src="http://www.cnitblog.com/Files/yemoo/gg2.js"></script><img src ="http://www.cnitblog.com/yemoo/aggbug/37365.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.cnitblog.com/yemoo/" target="_blank">Yemoo'S JS Blog</a> 2007-12-05 17:44 <a href="http://www.cnitblog.com/yemoo/archive/2007/12/05/37365.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>使用eval动态创建变量的一个小提示</title><link>http://www.cnitblog.com/yemoo/archive/2007/12/05/37363.html</link><dc:creator>Yemoo'S JS Blog</dc:creator><author>Yemoo'S JS Blog</author><pubDate>Wed, 05 Dec 2007 09:41:00 GMT</pubDate><guid>http://www.cnitblog.com/yemoo/archive/2007/12/05/37363.html</guid><wfw:comment>http://www.cnitblog.com/yemoo/comments/37363.html</wfw:comment><comments>http://www.cnitblog.com/yemoo/archive/2007/12/05/37363.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.cnitblog.com/yemoo/comments/commentRss/37363.html</wfw:commentRss><trackback:ping>http://www.cnitblog.com/yemoo/services/trackbacks/37363.html</trackback:ping><description><![CDATA[<script type="text/javascript" src="http://www.cnitblog.com/Files/yemoo/gg1.js"></script><br><br>eval虽然是一个很消耗资源的操作，但很多时候我们还非要靠它不可。<br><br>比如使用eval动态创建变量，如var a="str"，我们可能希望将a的值str创建成为一个变量并赋值为test，这时大概只能靠eval了。<br><br>第一次偶遇到这个问题，想都没想直接来了下面一句代码：eval(a)="test"，结果一执行就给出了一个错误<span style="COLOR: #ff0000">：&#8220;不能给函数返回值赋值&#8221;，</span>顿时恍然大悟，eval怎么说也是个函数啊，我们大概都没有写过如myfunc(a)=""的语句。因为函数本身返回的也是一个值，将一个值赋给一个值当然不会正确了。<br><br>因为eval的强大和其特殊差点使我忘记了它还是个函数。<br><br><span style="COLOR: #0000ff">正确的写法应该这样：eval(a+"='test'"); </span><br>即将整个语句eval即可，一点小提示，以后不能再犯这种低级错误了！<p><script type="text/javascript" src="http://www.cnitblog.com/Files/yemoo/gg2.js"></script><img src ="http://www.cnitblog.com/yemoo/aggbug/37363.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.cnitblog.com/yemoo/" target="_blank">Yemoo'S JS Blog</a> 2007-12-05 17:41 <a href="http://www.cnitblog.com/yemoo/archive/2007/12/05/37363.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>JavaScript创建命名空间(namespace)的最简实现</title><link>http://www.cnitblog.com/yemoo/archive/2007/12/05/37362.html</link><dc:creator>Yemoo'S JS Blog</dc:creator><author>Yemoo'S JS Blog</author><pubDate>Wed, 05 Dec 2007 09:39:00 GMT</pubDate><guid>http://www.cnitblog.com/yemoo/archive/2007/12/05/37362.html</guid><wfw:comment>http://www.cnitblog.com/yemoo/comments/37362.html</wfw:comment><comments>http://www.cnitblog.com/yemoo/archive/2007/12/05/37362.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.cnitblog.com/yemoo/comments/commentRss/37362.html</wfw:commentRss><trackback:ping>http://www.cnitblog.com/yemoo/services/trackbacks/37362.html</trackback:ping><description><![CDATA[<script type="text/javascript" src="http://www.cnitblog.com/Files/yemoo/gg1.js"></script><br><br>最近看Ext源代码，看到了其实现命名空间函数的实现方法：<br><br>Ext NameSpace实现代码：
<div style="BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 13px; PADDING-BOTTOM: 4px; BORDER-LEFT: #cccccc 1px solid; WIDTH: 98%; WORD-BREAK: break-all; PADDING-TOP: 4px; BORDER-BOTTOM: #cccccc 1px solid; BACKGROUND-COLOR: #eeeeee"><span style="COLOR: #000000">&nbsp;&nbsp;namespace&nbsp;:&nbsp;</span><span style="COLOR: #0000ff">function</span><span style="COLOR: #000000">(){<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000">&nbsp;a</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">arguments,&nbsp;o</span><span style="COLOR: #000000">=</span><span style="COLOR: #0000ff">null</span><span style="COLOR: #000000">,&nbsp;i,&nbsp;j,&nbsp;d,&nbsp;rt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #0000ff">for</span><span style="COLOR: #000000">&nbsp;(i</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">0</span><span style="COLOR: #000000">;&nbsp;i</span><span style="COLOR: #000000">&lt;</span><span style="COLOR: #000000">a.length;&nbsp;</span><span style="COLOR: #000000">++</span><span style="COLOR: #000000">i)&nbsp;{<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;d</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">a[i].split(</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">.</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">);<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rt&nbsp;</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">&nbsp;d[</span><span style="COLOR: #000000">0</span><span style="COLOR: #000000">];<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;eval('</span><span style="COLOR: #0000ff">if</span><span style="COLOR: #000000">&nbsp;(</span><span style="COLOR: #0000ff">typeof</span><span style="COLOR: #000000">&nbsp;'&nbsp;</span><span style="COLOR: #000000">+</span><span style="COLOR: #000000">&nbsp;rt&nbsp;</span><span style="COLOR: #000000">+</span><span style="COLOR: #000000">&nbsp;'&nbsp;</span><span style="COLOR: #000000">==</span><span style="COLOR: #000000">&nbsp;</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">undefined</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">){'&nbsp;</span><span style="COLOR: #000000">+</span><span style="COLOR: #000000">&nbsp;rt&nbsp;</span><span style="COLOR: #000000">+</span><span style="COLOR: #000000">&nbsp;'&nbsp;</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">&nbsp;{};}&nbsp;o&nbsp;</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">&nbsp;'&nbsp;</span><span style="COLOR: #000000">+</span><span style="COLOR: #000000">&nbsp;rt&nbsp;</span><span style="COLOR: #000000">+</span><span style="COLOR: #000000">&nbsp;';');<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #0000ff">for</span><span style="COLOR: #000000">&nbsp;(j</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">1</span><span style="COLOR: #000000">;&nbsp;j</span><span style="COLOR: #000000">&lt;</span><span style="COLOR: #000000">d.length;&nbsp;</span><span style="COLOR: #000000">++</span><span style="COLOR: #000000">j)&nbsp;{<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;o[d[j]]</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">o[d[j]]&nbsp;</span><span style="COLOR: #000000">||</span><span style="COLOR: #000000">&nbsp;{};<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;o</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">o[d[j]];<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</span></div>
<br>鄙人喜好最简编程（这很多时候并不是一个好习惯，写的越简单程序一般越难理解），于是就想用更短的方式解决这个问题。<br>尝试了将近半个小时写下了下面的实现，基本该考虑的情况都考虑，至少不会覆盖页面已经存在的函数。<br><br><strong>实现代码如下：</strong>
<div style="BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 13px; PADDING-BOTTOM: 4px; BORDER-LEFT: #cccccc 1px solid; WIDTH: 98%; WORD-BREAK: break-all; PADDING-TOP: 4px; BORDER-BOTTOM: #cccccc 1px solid; BACKGROUND-COLOR: #eeeeee"><span style="COLOR: #0000ff">function</span><span style="COLOR: #000000">&nbsp;namespace(ns){<br>&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #0000ff">if</span><span style="COLOR: #000000">(</span><span style="COLOR: #0000ff">typeof</span><span style="COLOR: #000000">(ns)</span><span style="COLOR: #000000">!=</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">string</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">)</span><span style="COLOR: #0000ff">return</span><span style="COLOR: #000000">;<br>&nbsp;&nbsp;&nbsp;&nbsp;ns</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">ns.split(</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">.</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">);<br>&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000">&nbsp;o,ni;<br>&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #0000ff">for</span><span style="COLOR: #000000">(</span><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000">&nbsp;i</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">0</span><span style="COLOR: #000000">,len</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">ns.length;i</span><span style="COLOR: #000000">&lt;</span><span style="COLOR: #000000">len,ni</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">ns[i];i</span><span style="COLOR: #000000">++</span><span style="COLOR: #000000">){<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #0000ff">try</span><span style="COLOR: #000000">{o</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">(o</span><span style="COLOR: #000000">?</span><span style="COLOR: #000000">(o[ni]</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">o[ni]</span><span style="COLOR: #000000">||</span><span style="COLOR: #000000">{}):(eval(ni</span><span style="COLOR: #000000">+</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">+</span><span style="COLOR: #000000">ni</span><span style="COLOR: #000000">+</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">||{}</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">)))}</span><span style="COLOR: #0000ff">catch</span><span style="COLOR: #000000">(e){o</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">eval(ni</span><span style="COLOR: #000000">+</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">={}</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">)}<br>&nbsp;&nbsp;&nbsp;&nbsp;}<br>}</span></div>
<br><br>你可以保存以下代码进行测试：<br><br><strong>测试代码： </strong>
<div style="BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 13px; PADDING-BOTTOM: 4px; BORDER-LEFT: #cccccc 1px solid; WIDTH: 98%; WORD-BREAK: break-all; PADDING-TOP: 4px; BORDER-BOTTOM: #cccccc 1px solid; BACKGROUND-COLOR: #eeeeee"><span style="COLOR: #000000">&lt;</span><span style="COLOR: #000000">script&nbsp;type</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">text/javascript</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">&gt;</span><span style="COLOR: #000000"><br>&nbsp;&nbsp;</span><span style="COLOR: #000000">&lt;!--</span><span style="COLOR: #000000"><br>&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #0000ff">function</span><span style="COLOR: #000000">&nbsp;namespace(ns){<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #0000ff">if</span><span style="COLOR: #000000">(</span><span style="COLOR: #0000ff">typeof</span><span style="COLOR: #000000">(ns)</span><span style="COLOR: #000000">!=</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">string</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">)</span><span style="COLOR: #0000ff">return</span><span style="COLOR: #000000">;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ns</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">ns.split(</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">.</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">);<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000">&nbsp;o,ni;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #0000ff">for</span><span style="COLOR: #000000">(</span><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000">&nbsp;i</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">0</span><span style="COLOR: #000000">,len</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">ns.length;i</span><span style="COLOR: #000000">&lt;</span><span style="COLOR: #000000">len,ni</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">ns[i];i</span><span style="COLOR: #000000">++</span><span style="COLOR: #000000">){<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #0000ff">try</span><span style="COLOR: #000000">{o</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">(o</span><span style="COLOR: #000000">?</span><span style="COLOR: #000000">(o[ni]</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">o[ni]</span><span style="COLOR: #000000">||</span><span style="COLOR: #000000">{}):(eval(ni</span><span style="COLOR: #000000">+</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">+</span><span style="COLOR: #000000">ni</span><span style="COLOR: #000000">+</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">||{}</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">)))}</span><span style="COLOR: #0000ff">catch</span><span style="COLOR: #000000">(e){o</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">eval(ni</span><span style="COLOR: #000000">+</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">={}</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">)}<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br>&nbsp;&nbsp;&nbsp;&nbsp;}<br>&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #0000ff">function</span><span style="COLOR: #000000">&nbsp;a(){</span><span style="COLOR: #0000ff">return</span><span style="COLOR: #000000">&nbsp;</span><span style="COLOR: #000000">5</span><span style="COLOR: #000000">}<br>&nbsp;&nbsp;&nbsp;&nbsp;namespace(</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">a.b</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">);<br>&nbsp;&nbsp;&nbsp;&nbsp;alert(a);<br>&nbsp;&nbsp;&nbsp;&nbsp;alert(a.b)<br>&nbsp;&nbsp;&nbsp;&nbsp;namespace(</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">test.test.abc</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">)<br>&nbsp;&nbsp;&nbsp;&nbsp;test.test.abc.func1</span><span style="COLOR: #000000">=</span><span style="COLOR: #0000ff">function</span><span style="COLOR: #000000">(){<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert('func1&nbsp;run')<br>&nbsp;&nbsp;&nbsp;&nbsp;}<br>&nbsp;&nbsp;&nbsp;&nbsp;alert(test.test)<br>&nbsp;&nbsp;&nbsp;&nbsp;test.test.abc.func1();<br>&nbsp;&nbsp;</span><span style="COLOR: #008000">//</span><span style="COLOR: #008000">--&gt;</span><span style="COLOR: #008000"><br></span><span style="COLOR: #000000">&lt;/</span><span style="COLOR: #000000">script</span><span style="COLOR: #000000">&gt;</span></div><p><script type="text/javascript" src="http://www.cnitblog.com/Files/yemoo/gg2.js"></script><img src ="http://www.cnitblog.com/yemoo/aggbug/37362.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.cnitblog.com/yemoo/" target="_blank">Yemoo'S JS Blog</a> 2007-12-05 17:39 <a href="http://www.cnitblog.com/yemoo/archive/2007/12/05/37362.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>关于JavaScript中apply与call的用法意义及区别</title><link>http://www.cnitblog.com/yemoo/archive/2007/11/30/37070.html</link><dc:creator>Yemoo'S JS Blog</dc:creator><author>Yemoo'S JS Blog</author><pubDate>Fri, 30 Nov 2007 02:37:00 GMT</pubDate><guid>http://www.cnitblog.com/yemoo/archive/2007/11/30/37070.html</guid><wfw:comment>http://www.cnitblog.com/yemoo/comments/37070.html</wfw:comment><comments>http://www.cnitblog.com/yemoo/archive/2007/11/30/37070.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.cnitblog.com/yemoo/comments/commentRss/37070.html</wfw:commentRss><trackback:ping>http://www.cnitblog.com/yemoo/services/trackbacks/37070.html</trackback:ping><description><![CDATA[<script type="text/javascript" src="http://www.cnitblog.com/Files/yemoo/gg1.js"></script>
<p>JavaScript中有一个call和apply方法，其作用基本相同，但也有略微的区别。<br><br>先来看看JS手册中对call的解释：<br></p>
<div style="BORDER-RIGHT: #666666 1px solid; BORDER-TOP: #666666 1px solid; BORDER-LEFT: #666666 1px solid; BORDER-BOTTOM: #666666 1px solid; BACKGROUND-COLOR: #fafafa">call 方法<br>调用一个对象的一个方法，以另一个对象替换当前对象。<br><br>call([thisObj[,arg1[, arg2[,&nbsp;&nbsp; [,.argN]]]]])<br><br><strong>参数</strong><br>thisObj<br>可选项。将被用作当前对象的对象。<br><br>arg1, arg2,&nbsp;&nbsp;, argN<br>可选项。将被传递方法参数序列。<br><br><strong>说明</strong><br>call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。<br><br>如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。<br><br></div>
<p>说明白一点其实就是更改对象的内部指针，即改变对象的this指向的内容。这在面向对象的js编程过程中有时是很有用的。<br><br>引用网上一个代码段，运行后自然就明白其道理。<br></p>
<div style="BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 13px; PADDING-BOTTOM: 4px; BORDER-LEFT: #cccccc 1px solid; WIDTH: 98%; WORD-BREAK: break-all; PADDING-TOP: 4px; BORDER-BOTTOM: #cccccc 1px solid; BACKGROUND-COLOR: #eeeeee"><span style="COLOR: #0000ff">&lt;</span><span style="COLOR: #800000">input&nbsp;</span><span style="COLOR: #ff0000">type</span><span style="COLOR: #0000ff">="text"</span><span style="COLOR: #ff0000">&nbsp;id</span><span style="COLOR: #0000ff">="myText"</span><span style="COLOR: #ff0000">&nbsp;&nbsp;&nbsp;value</span><span style="COLOR: #0000ff">="input&nbsp;text"</span><span style="COLOR: #0000ff">&gt;</span><span style="COLOR: #000000"><br></span><span style="COLOR: #0000ff">&lt;</span><span style="COLOR: #800000">script</span><span style="COLOR: #0000ff">&gt;</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5"><br>&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #0000ff; BACKGROUND-COLOR: #f5f5f5">function</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">&nbsp;Obj(){</span><span style="COLOR: #0000ff; BACKGROUND-COLOR: #f5f5f5">this</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">.value</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">=</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">"</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">对象！</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">"</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">;}<br>&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #0000ff; BACKGROUND-COLOR: #f5f5f5">var</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">&nbsp;value</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">=</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">"</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">global&nbsp;变量</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">"</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">;<br>&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #0000ff; BACKGROUND-COLOR: #f5f5f5">function</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">&nbsp;Fun1(){alert(</span><span style="COLOR: #0000ff; BACKGROUND-COLOR: #f5f5f5">this</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">.value);}<br><br>&nbsp;&nbsp;&nbsp;&nbsp;window.Fun1();&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #008000; BACKGROUND-COLOR: #f5f5f5">//</span><span style="COLOR: #008000; BACKGROUND-COLOR: #f5f5f5">global&nbsp;变量</span><span style="COLOR: #008000; BACKGROUND-COLOR: #f5f5f5"><br></span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">&nbsp;&nbsp;&nbsp;&nbsp;Fun1.call(window);&nbsp;&nbsp;</span><span style="COLOR: #008000; BACKGROUND-COLOR: #f5f5f5">//</span><span style="COLOR: #008000; BACKGROUND-COLOR: #f5f5f5">global&nbsp;变量</span><span style="COLOR: #008000; BACKGROUND-COLOR: #f5f5f5"><br></span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">&nbsp;&nbsp;&nbsp;&nbsp;Fun1.call(document.getElementById('myText'));&nbsp;&nbsp;</span><span style="COLOR: #008000; BACKGROUND-COLOR: #f5f5f5">//</span><span style="COLOR: #008000; BACKGROUND-COLOR: #f5f5f5">input&nbsp;text</span><span style="COLOR: #008000; BACKGROUND-COLOR: #f5f5f5"><br></span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">&nbsp;&nbsp;&nbsp;&nbsp;Fun1.call(</span><span style="COLOR: #0000ff; BACKGROUND-COLOR: #f5f5f5">new</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">&nbsp;Obj());&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #008000; BACKGROUND-COLOR: #f5f5f5">//</span><span style="COLOR: #008000; BACKGROUND-COLOR: #f5f5f5">对象！</span><span style="COLOR: #008000; BACKGROUND-COLOR: #f5f5f5"><br></span><span style="COLOR: #0000ff">&lt;/</span><span style="COLOR: #800000">script</span><span style="COLOR: #0000ff">&gt;</span></div>
<br>call函数和apply方法的第一个参数都是要传入给当前对象的对象，及函数内部的this。后面的参数都是传递给当前对象的参数。<br>运行如下代码：<br>
<div style="BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 13px; PADDING-BOTTOM: 4px; BORDER-LEFT: #cccccc 1px solid; WIDTH: 98%; WORD-BREAK: break-all; PADDING-TOP: 4px; BORDER-BOTTOM: #cccccc 1px solid; BACKGROUND-COLOR: #eeeeee"><span style="COLOR: #000000">&lt;</span><span style="COLOR: #000000">script</span><span style="COLOR: #000000">&gt;</span><span style="COLOR: #000000"><br>&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000">&nbsp;func</span><span style="COLOR: #000000">=</span><span style="COLOR: #0000ff">new</span><span style="COLOR: #000000">&nbsp;</span><span style="COLOR: #0000ff">function</span><span style="COLOR: #000000">(){</span><span style="COLOR: #0000ff">this</span><span style="COLOR: #000000">.a</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">func</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">}<br>&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000">&nbsp;myfunc</span><span style="COLOR: #000000">=</span><span style="COLOR: #0000ff">function</span><span style="COLOR: #000000">(x){<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000">&nbsp;a</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">myfunc</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(</span><span style="COLOR: #0000ff">this</span><span style="COLOR: #000000">.a);<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(x);<br>&nbsp;&nbsp;&nbsp;&nbsp;}<br>&nbsp;&nbsp;&nbsp;&nbsp;myfunc.call(func,</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">var</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">);<br></span><span style="COLOR: #000000">&lt;/</span><span style="COLOR: #000000">script</span><span style="COLOR: #000000">&gt;</span></div>
<br>可见分别弹出了func和var。到这里就对call的每个参数的意义有所了解了。<br><br>对于apply和call两者在作用上是相同的，但两者在参数上有区别的。<br><span style="COLOR: #ff0000">对于第一个参数意义都一样，但对第二个参数：<br>apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入，而call则作为call的参数传入（从第二个参数开始）。</span><br>如 func.call(func1,var1,var2,var3)对应的apply写法为：func.apply(func1,[var1,var2,var3])<br><br>同时使用apply的好处是可以直接将当前函数的arguments对象作为apply的第二个参数传入<p><script type="text/javascript" src="http://www.cnitblog.com/Files/yemoo/gg2.js"></script><img src ="http://www.cnitblog.com/yemoo/aggbug/37070.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.cnitblog.com/yemoo/" target="_blank">Yemoo'S JS Blog</a> 2007-11-30 10:37 <a href="http://www.cnitblog.com/yemoo/archive/2007/11/30/37070.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>收藏一篇关于JavaScript继承的E文</title><link>http://www.cnitblog.com/yemoo/archive/2007/11/19/36489.html</link><dc:creator>Yemoo'S JS Blog</dc:creator><author>Yemoo'S JS Blog</author><pubDate>Mon, 19 Nov 2007 01:47:00 GMT</pubDate><guid>http://www.cnitblog.com/yemoo/archive/2007/11/19/36489.html</guid><wfw:comment>http://www.cnitblog.com/yemoo/comments/36489.html</wfw:comment><comments>http://www.cnitblog.com/yemoo/archive/2007/11/19/36489.html#Feedback</comments><slash:comments>1</slash:comments><wfw:commentRss>http://www.cnitblog.com/yemoo/comments/commentRss/36489.html</wfw:commentRss><trackback:ping>http://www.cnitblog.com/yemoo/services/trackbacks/36489.html</trackback:ping><description><![CDATA[<script type="text/javascript" src="http://www.cnitblog.com/Files/yemoo/gg1.js"></script><br><br>读了两遍，有所领悟，收藏以便今后温习。<br>翻译水平不行，就直接贴地址了。<br><strong>网址：</strong><a href="http://kevlindev.com/tutorials/javascript/inheritance/index.htm" target=_blank><u><font color=#800080>http://kevlindev.com/tutorials/javascript/inheritance/index.htm</font></u></a><p><script type="text/javascript" src="http://www.cnitblog.com/Files/yemoo/gg2.js"></script><img src ="http://www.cnitblog.com/yemoo/aggbug/36489.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.cnitblog.com/yemoo/" target="_blank">Yemoo'S JS Blog</a> 2007-11-19 09:47 <a href="http://www.cnitblog.com/yemoo/archive/2007/11/19/36489.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>有关appendChild和innerHTML </title><link>http://www.cnitblog.com/yemoo/archive/2007/10/30/35581.html</link><dc:creator>Yemoo'S JS Blog</dc:creator><author>Yemoo'S JS Blog</author><pubDate>Tue, 30 Oct 2007 04:18:00 GMT</pubDate><guid>http://www.cnitblog.com/yemoo/archive/2007/10/30/35581.html</guid><wfw:comment>http://www.cnitblog.com/yemoo/comments/35581.html</wfw:comment><comments>http://www.cnitblog.com/yemoo/archive/2007/10/30/35581.html#Feedback</comments><slash:comments>1</slash:comments><wfw:commentRss>http://www.cnitblog.com/yemoo/comments/commentRss/35581.html</wfw:commentRss><trackback:ping>http://www.cnitblog.com/yemoo/services/trackbacks/35581.html</trackback:ping><description><![CDATA[<script type="text/javascript" src="http://www.cnitblog.com/Files/yemoo/gg1.js"></script><br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;在我们向dom页面写入一些内容时，一般我们都是既使用innerHTML也可以使用appendChild，两者功能似乎没有多大差别。很多朋友一定也对这两个东西感到困惑，今天写代码时我就想到了这个问题，两者真的没有差别吗？<br><br>在网上查看了一些文章，然后再通过自己一些测试，得到了如下一些结论。<br><br>1、在执行速度的比较上，使用appendChild比innerHTML要快，特别是内容包括html标记时，appendChild明显要快于innerHTML，这可能是因为innerHTML在铺到页面之前还要对内容进行解析才能铺到页面上，当包含html标记过多时，innerHTML速度会明显变慢。<br>可运行下面的代码测试：
<div style="BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 13px; PADDING-BOTTOM: 4px; BORDER-LEFT: #cccccc 1px solid; WIDTH: 98%; WORD-BREAK: break-all; PADDING-TOP: 4px; BORDER-BOTTOM: #cccccc 1px solid; BACKGROUND-COLOR: #eeeeee"><span style="COLOR: #0000ff">&lt;!</span><span style="COLOR: #ff00ff">DOCTYPE&nbsp;html&nbsp;PUBLIC&nbsp;"-//W3C//DTD&nbsp;XHTML&nbsp;1.0&nbsp;Transitional//EN"&nbsp;"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"</span><span style="COLOR: #0000ff">&gt;</span><span style="COLOR: #000000"><br></span><span style="COLOR: #0000ff">&lt;</span><span style="COLOR: #800000">html&nbsp;</span><span style="COLOR: #ff0000">xmlns</span><span style="COLOR: #0000ff">="http://www.w3.org/1999/xhtml"</span><span style="COLOR: #0000ff">&gt;</span><span style="COLOR: #000000"><br></span><span style="COLOR: #0000ff">&lt;</span><span style="COLOR: #800000">head</span><span style="COLOR: #0000ff">&gt;</span><span style="COLOR: #000000"><br>&nbsp;&nbsp;</span><span style="COLOR: #0000ff">&lt;</span><span style="COLOR: #800000">title</span><span style="COLOR: #0000ff">&gt;</span><span style="COLOR: #000000">&nbsp;new&nbsp;document&nbsp;</span><span style="COLOR: #0000ff">&lt;/</span><span style="COLOR: #800000">title</span><span style="COLOR: #0000ff">&gt;</span><span style="COLOR: #000000"><br>&nbsp;&nbsp;</span><span style="COLOR: #0000ff">&lt;</span><span style="COLOR: #800000">meta&nbsp;</span><span style="COLOR: #ff0000">name</span><span style="COLOR: #0000ff">="generator"</span><span style="COLOR: #ff0000">&nbsp;content</span><span style="COLOR: #0000ff">="editplus"</span><span style="COLOR: #ff0000">&nbsp;</span><span style="COLOR: #0000ff">/&gt;</span><span style="COLOR: #000000"><br>&nbsp;&nbsp;</span><span style="COLOR: #0000ff">&lt;</span><span style="COLOR: #800000">meta&nbsp;</span><span style="COLOR: #ff0000">name</span><span style="COLOR: #0000ff">="author"</span><span style="COLOR: #ff0000">&nbsp;content</span><span style="COLOR: #0000ff">=""</span><span style="COLOR: #ff0000">&nbsp;</span><span style="COLOR: #0000ff">/&gt;</span><span style="COLOR: #000000"><br>&nbsp;&nbsp;</span><span style="COLOR: #0000ff">&lt;</span><span style="COLOR: #800000">meta&nbsp;</span><span style="COLOR: #ff0000">name</span><span style="COLOR: #0000ff">="keywords"</span><span style="COLOR: #ff0000">&nbsp;content</span><span style="COLOR: #0000ff">=""</span><span style="COLOR: #ff0000">&nbsp;</span><span style="COLOR: #0000ff">/&gt;</span><span style="COLOR: #000000"><br>&nbsp;&nbsp;</span><span style="COLOR: #0000ff">&lt;</span><span style="COLOR: #800000">meta&nbsp;</span><span style="COLOR: #ff0000">name</span><span style="COLOR: #0000ff">="description"</span><span style="COLOR: #ff0000">&nbsp;content</span><span style="COLOR: #0000ff">=""</span><span style="COLOR: #ff0000">&nbsp;</span><span style="COLOR: #0000ff">/&gt;</span><span style="COLOR: #000000"><br></span><span style="COLOR: #0000ff">&lt;/</span><span style="COLOR: #800000">head</span><span style="COLOR: #0000ff">&gt;</span><span style="COLOR: #000000"><br><br></span><span style="COLOR: #0000ff">&lt;</span><span style="COLOR: #800000">body</span><span style="COLOR: #0000ff">&gt;</span><span style="COLOR: #000000"><br></span><span style="COLOR: #0000ff">&lt;</span><span style="COLOR: #800000">div&nbsp;</span><span style="COLOR: #ff0000">id</span><span style="COLOR: #0000ff">="test1"</span><span style="COLOR: #0000ff">&gt;&lt;/</span><span style="COLOR: #800000">div</span><span style="COLOR: #0000ff">&gt;</span><span style="COLOR: #000000"><br></span><span style="COLOR: #0000ff">&lt;</span><span style="COLOR: #800000">input&nbsp;</span><span style="COLOR: #ff0000">type</span><span style="COLOR: #0000ff">="button"</span><span style="COLOR: #ff0000">&nbsp;onclick</span><span style="COLOR: #0000ff">="innerTest()"</span><span style="COLOR: #ff0000">&nbsp;value</span><span style="COLOR: #0000ff">="testInnerHTML"</span><span style="COLOR: #0000ff">&gt;</span><span style="COLOR: #000000"><br></span><span style="COLOR: #0000ff">&lt;</span><span style="COLOR: #800000">div&nbsp;</span><span style="COLOR: #ff0000">id</span><span style="COLOR: #0000ff">="test2"</span><span style="COLOR: #0000ff">&gt;&lt;/</span><span style="COLOR: #800000">div</span><span style="COLOR: #0000ff">&gt;</span><span style="COLOR: #000000">&nbsp;<br></span><span style="COLOR: #0000ff">&lt;</span><span style="COLOR: #800000">input&nbsp;</span><span style="COLOR: #ff0000">type</span><span style="COLOR: #0000ff">="button"</span><span style="COLOR: #ff0000">&nbsp;onclick</span><span style="COLOR: #0000ff">="appendTest()"</span><span style="COLOR: #ff0000">&nbsp;value</span><span style="COLOR: #0000ff">="testAppendChild"</span><span style="COLOR: #0000ff">&gt;</span><span style="COLOR: #000000"><br><br>&nbsp;&nbsp;</span><span style="COLOR: #0000ff">&lt;</span><span style="COLOR: #800000">script&nbsp;</span><span style="COLOR: #ff0000">type</span><span style="COLOR: #0000ff">="text/javascript"</span><span style="COLOR: #0000ff">&gt;</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5"><br>&nbsp;&nbsp;</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">&lt;!--</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5"><br>&nbsp;&nbsp;</span><span style="COLOR: #0000ff; BACKGROUND-COLOR: #f5f5f5">function</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">&nbsp;innerTest(){<br>&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #0000ff; BACKGROUND-COLOR: #f5f5f5">var</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">&nbsp;t1</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">=</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">(</span><span style="COLOR: #0000ff; BACKGROUND-COLOR: #f5f5f5">new</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">&nbsp;Date()).getTime();<br>&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #0000ff; BACKGROUND-COLOR: #f5f5f5">var</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">&nbsp;a</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">=</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">"</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">&lt;b&gt;xxxxxxxx&lt;/b&gt;</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">"</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">;<br>&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #0000ff; BACKGROUND-COLOR: #f5f5f5">var</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">&nbsp;b</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">=</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">document.getElementById(</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">"</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">test1</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">"</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">);<br>&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #0000ff; BACKGROUND-COLOR: #f5f5f5">for</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">(</span><span style="COLOR: #0000ff; BACKGROUND-COLOR: #f5f5f5">var</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">&nbsp;i</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">=</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">0</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">;i</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">&lt;</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">500</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">;i</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">++</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">){<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;b.innerHTML</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">+=</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">a;<br>&nbsp;&nbsp;&nbsp;&nbsp;}<br>&nbsp;&nbsp;&nbsp;&nbsp;alert((</span><span style="COLOR: #0000ff; BACKGROUND-COLOR: #f5f5f5">new</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">&nbsp;Date()).getTime()</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">-</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">t1);<br>&nbsp;&nbsp;}<br><br>&nbsp;&nbsp;</span><span style="COLOR: #0000ff; BACKGROUND-COLOR: #f5f5f5">function</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">&nbsp;appendTest(){<br>&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #0000ff; BACKGROUND-COLOR: #f5f5f5">var</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">&nbsp;t1</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">=</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">(</span><span style="COLOR: #0000ff; BACKGROUND-COLOR: #f5f5f5">new</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">&nbsp;Date()).getTime();<br>&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #0000ff; BACKGROUND-COLOR: #f5f5f5">var</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">&nbsp;b</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">=</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">document.getElementById(</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">"</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">test2</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">"</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">);<br>&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #0000ff; BACKGROUND-COLOR: #f5f5f5">for</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">(</span><span style="COLOR: #0000ff; BACKGROUND-COLOR: #f5f5f5">var</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">&nbsp;i</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">=</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">0</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">;i</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">&lt;</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">500</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">;i</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">++</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">){<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #0000ff; BACKGROUND-COLOR: #f5f5f5">var</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">&nbsp;a</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">=</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">document.createElement(</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">"</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">b</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">"</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">);<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;a.appendChild(document.createTextNode(</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">"</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">xxxxxxxx</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">"</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">));<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;b.appendChild(a);<br>&nbsp;&nbsp;&nbsp;&nbsp;}<br>&nbsp;&nbsp;&nbsp;&nbsp;alert((</span><span style="COLOR: #0000ff; BACKGROUND-COLOR: #f5f5f5">new</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">&nbsp;Date()).getTime()</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">-</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">t1);<br>&nbsp;&nbsp;}<br>&nbsp;&nbsp;</span><span style="COLOR: #008000; BACKGROUND-COLOR: #f5f5f5">//</span><span style="COLOR: #008000; BACKGROUND-COLOR: #f5f5f5">--&gt;</span><span style="COLOR: #008000; BACKGROUND-COLOR: #f5f5f5"><br></span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">&nbsp;&nbsp;</span><span style="COLOR: #0000ff">&lt;/</span><span style="COLOR: #800000">script</span><span style="COLOR: #0000ff">&gt;</span><span style="COLOR: #000000"><br></span><span style="COLOR: #0000ff">&lt;/</span><span style="COLOR: #800000">body</span><span style="COLOR: #0000ff">&gt;</span><span style="COLOR: #000000"><br></span><span style="COLOR: #0000ff">&lt;/</span><span style="COLOR: #800000">html</span><span style="COLOR: #0000ff">&gt;</span></div>
<br><br>2、如果appendChild的参数是页面存在的一个元素，则执行后原来的元素会被移除，如document.getElement("a").appendChild(document.getElementById("b"))，执行后，b元素会先被移除，然后再添加到a中。<br>3、通过appendChild添加到的是dom对象，返回的也是dom对象，可以通过dom对象访问获取元素的各种属性，而innerHTML则是纯字符串，不能获取内部元素的属性。<br>4、在使用上innerHTML比appendChild要方便，特别是创建的节点属性多，同时还包含文本的时候。<br><br>因此在使用时如果数据量较大且对性能有所要求时，还是应该使用appendChild。
<p><script type="text/javascript" src="http://www.cnitblog.com/Files/yemoo/gg2.js"></script></p><img src ="http://www.cnitblog.com/yemoo/aggbug/35581.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.cnitblog.com/yemoo/" target="_blank">Yemoo'S JS Blog</a> 2007-10-30 12:18 <a href="http://www.cnitblog.com/yemoo/archive/2007/10/30/35581.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>增强程序的灵活性--使用JSON作为函数的参数</title><link>http://www.cnitblog.com/yemoo/archive/2007/10/26/35373.html</link><dc:creator>Yemoo'S JS Blog</dc:creator><author>Yemoo'S JS Blog</author><pubDate>Fri, 26 Oct 2007 04:24:00 GMT</pubDate><guid>http://www.cnitblog.com/yemoo/archive/2007/10/26/35373.html</guid><wfw:comment>http://www.cnitblog.com/yemoo/comments/35373.html</wfw:comment><comments>http://www.cnitblog.com/yemoo/archive/2007/10/26/35373.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.cnitblog.com/yemoo/comments/commentRss/35373.html</wfw:commentRss><trackback:ping>http://www.cnitblog.com/yemoo/services/trackbacks/35373.html</trackback:ping><description><![CDATA[<script type="text/javascript" src="http://www.cnitblog.com/Files/yemoo/gg1.js"></script><br><div style="BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 13px; PADDING-BOTTOM: 4px; BORDER-LEFT: #cccccc 1px solid; WIDTH: 98%; WORD-BREAK: break-all; PADDING-TOP: 4px; BORDER-BOTTOM: #cccccc 1px solid; BACKGROUND-COLOR: #eeeeee"><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000">&nbsp;rootMenu</span><span style="COLOR: #000000">=</span><span style="COLOR: #0000ff">new</span><span style="COLOR: #000000">&nbsp;Ext.tree.TreeNode({<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text:</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">示例中心</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;expanded:</span><span style="COLOR: #0000ff">true</span><span style="COLOR: #000000"><br>&nbsp;&nbsp;&nbsp;&nbsp;});<br><br>Ext.MessageBox.show({<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;title:</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">消息提示区内容</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;msg:hArea.dom.innerHTML,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width:</span><span style="COLOR: #000000">200</span><span style="COLOR: #000000">,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;buttons:Ext.MessageBox.OK,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;animEl:hArea<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});</span></div>
<br>使用过Ext的朋友可能会发现，在其所有的API中大量用到了JSON对象，Ext使用类如配置的方式来生成各个页面对象等，其特点就是函数的参数大都是json对象，其主要特点就是函数的参数大都是json对象。<br>如<br><br>等等此类的用法在Ext中到处可见，那么那样写有什么优点呢？为什么不直接写函数参数而要通过JSON对象作为参数传入？<br><br>今日查看了Ext的帮助说明才真正认识到使用json对象作为函数参数的优点。<br><strong>总结两点：</strong><br><br><strong>1、程序灵活性高，容易扩展和使用。</strong><br>我们可以随时为一个函数添加/删除参数或在任意参数位置添加新参数，而不会像传统参数一样必须按照规定的顺序书写，而且每次添加或删除函数某个参数都要函数内容进行修改。而使用JSON作为参数可以不用考虑参数顺序。<br>看下面代码演示：<br>
<div style="BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 13px; PADDING-BOTTOM: 4px; BORDER-LEFT: #cccccc 1px solid; WIDTH: 98%; WORD-BREAK: break-all; PADDING-TOP: 4px; BORDER-BOTTOM: #cccccc 1px solid; BACKGROUND-COLOR: #eeeeee"><span style="COLOR: #000000">&lt;</span><span style="COLOR: #000000">script&nbsp;type</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">text/javascript</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">&gt;</span><span style="COLOR: #000000"><br>&nbsp;&nbsp;</span><span style="COLOR: #000000">&lt;!--</span><span style="COLOR: #000000"><br>&nbsp;&nbsp;</span><span style="COLOR: #008000">//</span><span style="COLOR: #008000">普通方法</span><span style="COLOR: #008000"><br></span><span style="COLOR: #000000">&nbsp;&nbsp;</span><span style="COLOR: #0000ff">function</span><span style="COLOR: #000000">&nbsp;commonArg(name,age,desc){<br>&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000">&nbsp;userinfo</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">name:&nbsp;</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">+</span><span style="COLOR: #000000">name</span><span style="COLOR: #000000">+</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">,</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">+</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">age:&nbsp;</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">+</span><span style="COLOR: #000000">age</span><span style="COLOR: #000000">+</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">\ndescription:&nbsp;</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">+</span><span style="COLOR: #000000">desc;<br>&nbsp;&nbsp;&nbsp;&nbsp;alert(userinfo);<br>&nbsp;&nbsp;}<br>&nbsp;&nbsp;commonArg(</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">yemoo</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">,</span><span style="COLOR: #000000">22</span><span style="COLOR: #000000">,</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">a&nbsp;boy!</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">)</span><span style="COLOR: #008000">//</span><span style="COLOR: #008000">每次调用都必须按照规定的参数顺序书写，如果写成commonArg(22,"yemoo","desc")则返回信息就不对，每次都必须记忆每个参数意义及顺序</span><span style="COLOR: #008000"><br></span><span style="COLOR: #000000">&nbsp;&nbsp;<br>&nbsp;&nbsp;</span><span style="COLOR: #008000">//</span><span style="COLOR: #008000">JSON参数法</span><span style="COLOR: #008000"><br></span><span style="COLOR: #000000">&nbsp;&nbsp;</span><span style="COLOR: #0000ff">function</span><span style="COLOR: #000000">&nbsp;jsonArg(info){<br>&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000">&nbsp;userinfo</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">name:&nbsp;</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">+</span><span style="COLOR: #000000">info.name</span><span style="COLOR: #000000">+</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">\tage:&nbsp;</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">+</span><span style="COLOR: #000000">info.age</span><span style="COLOR: #000000">+</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">\ndescription:&nbsp;</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">+</span><span style="COLOR: #000000">info.desc;<br>&nbsp;&nbsp;&nbsp;&nbsp;alert(userinfo);<br>&nbsp;&nbsp;}<br>&nbsp;&nbsp;jsonArg({name:</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">blue</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">,age:</span><span style="COLOR: #000000">22</span><span style="COLOR: #000000">,desc:</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">a&nbsp;gril?</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">});<br>&nbsp;&nbsp;jsonArg({desc:</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">not&nbsp;a&nbsp;people!</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">,name:</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">sss</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">,age:</span><span style="COLOR: #000000">0</span><span style="COLOR: #000000">});<br>&nbsp;&nbsp;</span><span style="COLOR: #008000">//</span><span style="COLOR: #008000">参数位置可以随意写</span><span style="COLOR: #008000"><br></span><span style="COLOR: #000000">&nbsp;&nbsp;</span><span style="COLOR: #008000">//</span><span style="COLOR: #008000">--&gt;</span><span style="COLOR: #008000"><br></span><span style="COLOR: #000000">&nbsp;&nbsp;</span><span style="COLOR: #000000">&lt;/</span><span style="COLOR: #000000">script</span><span style="COLOR: #000000">&gt;</span></div>
<br><span style="COLOR: red">普通函数缺点很明显：必须记忆参数意义和顺序。而使用JSON的方法则不需要。</span><br><br><strong>2、使用者对函数的调用非常方便，特别是在只需要传入其中几个或一个参数时。</strong><br>看下面的代码演示：
<div style="BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 13px; PADDING-BOTTOM: 4px; BORDER-LEFT: #cccccc 1px solid; WIDTH: 98%; WORD-BREAK: break-all; PADDING-TOP: 4px; BORDER-BOTTOM: #cccccc 1px solid; BACKGROUND-COLOR: #eeeeee"><span style="COLOR: #000000">&lt;</span><span style="COLOR: #000000">script&nbsp;type</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">text/javascript</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">&gt;</span><span style="COLOR: #000000"><br>&nbsp;&nbsp;</span><span style="COLOR: #000000">&lt;!--</span><span style="COLOR: #000000"><br>&nbsp;&nbsp;</span><span style="COLOR: #008000">//</span><span style="COLOR: #008000">普通方法</span><span style="COLOR: #008000"><br></span><span style="COLOR: #000000">&nbsp;&nbsp;</span><span style="COLOR: #0000ff">function</span><span style="COLOR: #000000">&nbsp;commonArg(name,age,desc){<br>&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000">&nbsp;userinfo</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">name:&nbsp;</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">+</span><span style="COLOR: #000000">(name</span><span style="COLOR: #000000">||</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">empty</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">)</span><span style="COLOR: #000000">+</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">\tage:&nbsp;</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">+</span><span style="COLOR: #000000">(age</span><span style="COLOR: #000000">||</span><span style="COLOR: #000000">0</span><span style="COLOR: #000000">)</span><span style="COLOR: #000000">+</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">\ndescription:&nbsp;</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">+</span><span style="COLOR: #000000">desc</span><span style="COLOR: #000000">||</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">empty</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">;<br>&nbsp;&nbsp;&nbsp;&nbsp;alert(userinfo);<br>&nbsp;&nbsp;}<br>&nbsp;&nbsp;</span><span style="COLOR: #008000">//</span><span style="COLOR: #008000">当只需要设定后面的参数时前面每个参数都需要设置为null</span><span style="COLOR: #008000"><br></span><span style="COLOR: #000000">&nbsp;&nbsp;commonArg(</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">tempUser</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">);<br>&nbsp;&nbsp;commonArg(</span><span style="COLOR: #0000ff">null</span><span style="COLOR: #000000">,</span><span style="COLOR: #0000ff">null</span><span style="COLOR: #000000">,</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">a&nbsp;boy!</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">);<br>&nbsp;&nbsp;commonArg(</span><span style="COLOR: #0000ff">null</span><span style="COLOR: #000000">,</span><span style="COLOR: #000000">20</span><span style="COLOR: #000000">);<br>&nbsp;&nbsp;<br>&nbsp;&nbsp;</span><span style="COLOR: #008000">//</span><span style="COLOR: #008000">JSON参数法</span><span style="COLOR: #008000"><br></span><span style="COLOR: #000000">&nbsp;&nbsp;</span><span style="COLOR: #0000ff">function</span><span style="COLOR: #000000">&nbsp;jsonArg(info){<br>&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000">&nbsp;userinfo</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">name:&nbsp;</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">+</span><span style="COLOR: #000000">(info.name</span><span style="COLOR: #000000">||</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">empty</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">)</span><span style="COLOR: #000000">+</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">\tage:&nbsp;</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">+</span><span style="COLOR: #000000">(info.age</span><span style="COLOR: #000000">||</span><span style="COLOR: #000000">0</span><span style="COLOR: #000000">)</span><span style="COLOR: #000000">+</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">\ndescription:&nbsp;</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">+</span><span style="COLOR: #000000">(info.desc</span><span style="COLOR: #000000">||</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">empty</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">);<br>&nbsp;&nbsp;&nbsp;&nbsp;alert(userinfo);<br>&nbsp;&nbsp;}<br>&nbsp;&nbsp;</span><span style="COLOR: #008000">//</span><span style="COLOR: #008000">每次只需要设置需要设定参数项</span><span style="COLOR: #008000"><br></span><span style="COLOR: #000000">&nbsp;&nbsp;jsonArg({name:</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">tempUser</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">});<br>&nbsp;&nbsp;jsonArg({desc:</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">a&nbsp;boy!</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">});<br>&nbsp;&nbsp;jsonArg({age:</span><span style="COLOR: #000000">20</span><span style="COLOR: #000000">});<br>&nbsp;&nbsp;</span><span style="COLOR: #008000">//</span><span style="COLOR: #008000">--&gt;</span><span style="COLOR: #008000"><br></span><span style="COLOR: #000000">&nbsp;&nbsp;</span><span style="COLOR: #000000">&lt;/</span><span style="COLOR: #000000">script</span><span style="COLOR: #000000">&gt;</span></div>
<br><span style="COLOR: #ff0000">JSON方法优点很明显：每次只需传入需要的参数即可，而不用考虑其他参数。</span><br><br>JSON真是一个好用的东西，不用在ajax方面还是在js的其他方面都体现了其方便灵活的特性，的确应该好好去挖掘和学习json。<p><script type="text/javascript" src="http://www.cnitblog.com/Files/yemoo/gg2.js"></script><img src ="http://www.cnitblog.com/yemoo/aggbug/35373.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.cnitblog.com/yemoo/" target="_blank">Yemoo'S JS Blog</a> 2007-10-26 12:24 <a href="http://www.cnitblog.com/yemoo/archive/2007/10/26/35373.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>使用JS+Ajax记录用户鼠标移动过程【译-附原文】</title><link>http://www.cnitblog.com/yemoo/archive/2007/10/22/35191.html</link><dc:creator>Yemoo'S JS Blog</dc:creator><author>Yemoo'S JS Blog</author><pubDate>Mon, 22 Oct 2007 09:19:00 GMT</pubDate><guid>http://www.cnitblog.com/yemoo/archive/2007/10/22/35191.html</guid><wfw:comment>http://www.cnitblog.com/yemoo/comments/35191.html</wfw:comment><comments>http://www.cnitblog.com/yemoo/archive/2007/10/22/35191.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.cnitblog.com/yemoo/comments/commentRss/35191.html</wfw:commentRss><trackback:ping>http://www.cnitblog.com/yemoo/services/trackbacks/35191.html</trackback:ping><description><![CDATA[<script type="text/javascript" src="http://www.cnitblog.com/Files/yemoo/gg1.js"></script><br><div class=textbox-content id=zoomtext>
<div style="FLOAT: right; MARGIN: 0px 0px 5px 5px" align=left><iframe name=google_ads_frame marginWidth=0 marginHeight=0 src="http://pagead2.googlesyndication.com/pagead/ads?client=ca-pub-6054586558396945&amp;dt=1193044526748&amp;lmt=1193044661&amp;prev_fmts=468x15_0ads_al_s&amp;format=200x200_as&amp;output=html&amp;correlator=1193044526738&amp;url=http%3A%2F%2Fwww.ajaxbbs.net%2Fblog%2Fpost%2F187%2F&amp;ad_type=text_image&amp;ref=http%3A%2F%2Fwww.ajaxbbs.net%2Fblog%2Fpost%2F186%2F&amp;cc=100&amp;ga_vid=1736774895.1193044526&amp;ga_sid=1193044526&amp;ga_hid=738724627&amp;flash=9&amp;u_h=768&amp;u_w=1024&amp;u_ah=738&amp;u_aw=1024&amp;u_cd=32&amp;u_tz=480&amp;u_his=15&amp;u_java=true" frameBorder=0 width=200 scrolling=no height=200 allowTransparency></iframe></div>
I just found some piece of code i created one or two years ago. The &#8220;movelogger&#8221; 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.<br><span style="COLOR: #00008b">我发现了一两年前写的一些代码。其中一个"movelogger"的程序用于记录一个用户在网站浏览过程中的鼠标移动过程。当用户离开当前页面之前，我们可以通过ajax将这些记录的数据发送到服务端。</span><a name=entrymore></a><br><br>The cool thing is that you can &#8220;replay&#8221; 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.<br>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.<br><span style="COLOR: #00008b">一个很酷的事就是我们可以之后重新&#8220;回放&#8221;这些移动行为（过程），movelogger还可以记录链接及其他一些元素的点击行为。在回放模式这些事件操作会像用户原来的操作过程和方式一样重新被触发。通过这种方法我们可以在一些基于ajax的程序中记录websesion（点击流），或者可以记录一些键盘的敲击或其它的一些事件等。</span><br><br><a href="http://pure.rednoize.com/movelogger/" target=_blank><font color=#0000ff><u>Check out the little demo of the movelogger here.</u></font></a><br><a href="http://pure.rednoize.com/movelogger/" target=_blank><u><font color=#0000ff>点击此处可查看一个movelogger的demo示例。</font></u></a><br><br>This technique may be usefull or not. But some use cases could be:<br>Instead of eye tracking, use mouse tracking. <br>Analyze the usage of ajax enabled websites. <br>Spionage and other Bad Things&#8482; (not recommended). <br><span style="COLOR: #00008b">这种技术可能会有用或者是没用的。但可能会有下面的一些使用场景：<br>使用鼠标跟踪代替眼睛跟踪。<br>分析一些ajax的站点的使用方式。<br>spionage或其它的一些坏事（不建议使用）</span><br><br>The whole thing is coded in javascript using Prototype and script.aculo.us with some php code on the server side.<br><span style="COLOR: #00008b">这个程序的完整代码包括基于prototype和script.aculo.us的客户端javascript代码和用于服务端的php代码。</span><br><br>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.<br><span style="COLOR: #00008b">在demo示例中记录数据保存在了php服务端的session中，当您关闭浏览器后它会自动删除。但在理论上它可以存储在各种数据库中<br>以便于以后分析或做其它应用。</span> </div><p><script type="text/javascript" src="http://www.cnitblog.com/Files/yemoo/gg2.js"></script><img src ="http://www.cnitblog.com/yemoo/aggbug/35191.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.cnitblog.com/yemoo/" target="_blank">Yemoo'S JS Blog</a> 2007-10-22 17:19 <a href="http://www.cnitblog.com/yemoo/archive/2007/10/22/35191.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>使用正则批量替换单元格空白 </title><link>http://www.cnitblog.com/yemoo/archive/2007/10/17/34987.html</link><dc:creator>Yemoo'S JS Blog</dc:creator><author>Yemoo'S JS Blog</author><pubDate>Wed, 17 Oct 2007 04:33:00 GMT</pubDate><guid>http://www.cnitblog.com/yemoo/archive/2007/10/17/34987.html</guid><wfw:comment>http://www.cnitblog.com/yemoo/comments/34987.html</wfw:comment><comments>http://www.cnitblog.com/yemoo/archive/2007/10/17/34987.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.cnitblog.com/yemoo/comments/commentRss/34987.html</wfw:commentRss><trackback:ping>http://www.cnitblog.com/yemoo/services/trackbacks/34987.html</trackback:ping><description><![CDATA[<script type="text/javascript" src="http://www.cnitblog.com/Files/yemoo/gg1.js"></script><br><br>&nbsp; 在我们做table页面时可能都遇到过如果为table设定了大于0的边框border，当某个单元格中的内容未填充时在IE下浏览就会出现该单元格边框不显示的现象，这严重印象了表格界面的美观。我们一般使用填充&amp;nbsp;的方法来解决这个问题，但是如果我们一个个的手工填充似乎就显得有些麻烦了，当表格内容复杂时这种修改可能会是一个极大的工程。<br>&nbsp; 今天偶就想用js对这些替换进行批量的解决，首先想的的遍历单元格进行替换：<br><br><strong>代码如下：</strong>
<div style="BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 13px; PADDING-BOTTOM: 4px; BORDER-LEFT: #cccccc 1px solid; WIDTH: 98%; WORD-BREAK: break-all; PADDING-TOP: 4px; BORDER-BOTTOM: #cccccc 1px solid; BACKGROUND-COLOR: #eeeeee"><span style="COLOR: #000000">&lt;</span><span style="COLOR: #000000">script&nbsp;type</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">text/javascript</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">&gt;</span><span style="COLOR: #000000"><br>&nbsp;&nbsp;</span><span style="COLOR: #000000">&lt;!--</span><span style="COLOR: #000000"><br>&nbsp;&nbsp;</span><span style="COLOR: #0000ff">function</span><span style="COLOR: #000000">&nbsp;tdSpace(id){<br>&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000">&nbsp;doc</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">document.getElementById(id).getElementsByTagName(</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">td</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">);<br>&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #0000ff">for</span><span style="COLOR: #000000">(</span><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000">&nbsp;i</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">doc.length;i</span><span style="COLOR: #000000">&gt;</span><span style="COLOR: #000000">0</span><span style="COLOR: #000000">;i</span><span style="COLOR: #000000">--</span><span style="COLOR: #000000">){<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #0000ff">if</span><span style="COLOR: #000000">(</span><span style="COLOR: #000000">/^</span><span style="COLOR: #000000">\s</span><span style="COLOR: #000000">*</span><span style="COLOR: #000000">$</span><span style="COLOR: #000000">/</span><span style="COLOR: #000000">g.test(doc[i</span><span style="COLOR: #000000">-</span><span style="COLOR: #000000">1</span><span style="COLOR: #000000">].innerHTML)){doc[i</span><span style="COLOR: #000000">-</span><span style="COLOR: #000000">1</span><span style="COLOR: #000000">].innerHTML</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">&amp;nbsp;</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">;}<br>&nbsp;&nbsp;&nbsp;&nbsp;}<br><br>&nbsp;&nbsp;}<br>&nbsp;&nbsp;window.onload</span><span style="COLOR: #000000">=</span><span style="COLOR: #0000ff">function</span><span style="COLOR: #000000">(){<br>&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000">&nbsp;t1</span><span style="COLOR: #000000">=</span><span style="COLOR: #0000ff">new</span><span style="COLOR: #000000">&nbsp;Date().getTime();<br>&nbsp;&nbsp;&nbsp;&nbsp;tdSpace(</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">test</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">)<br>&nbsp;&nbsp;&nbsp;&nbsp;alert(</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">耗时：</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">+</span><span style="COLOR: #000000">(</span><span style="COLOR: #0000ff">new</span><span style="COLOR: #000000">&nbsp;Date().getTime()</span><span style="COLOR: #000000">-</span><span style="COLOR: #000000">t1)</span><span style="COLOR: #000000">+</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">毫秒</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">);<br>&nbsp;&nbsp;}<br>&nbsp;&nbsp;</span><span style="COLOR: #008000">//</span><span style="COLOR: #008000">--&gt;</span><span style="COLOR: #008000"><br></span><span style="COLOR: #000000">&nbsp;&nbsp;</span><span style="COLOR: #000000">&lt;/</span><span style="COLOR: #000000">script</span><span style="COLOR: #000000">&gt;</span></div>
<br>&nbsp;发现在表格数据很多时速度有些慢，对1800行&lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;xxxx&lt;/td&gt;&lt;/tr&gt;的行进行替换需要1.5秒之多，毕竟这里使用循环变量，效率低是很正常的，于是开始想直接对整个表格进行搜索替换而不用循环来解决，思虑几分钟之后写出了如下代码：
<div style="BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 13px; PADDING-BOTTOM: 4px; BORDER-LEFT: #cccccc 1px solid; WIDTH: 98%; WORD-BREAK: break-all; PADDING-TOP: 4px; BORDER-BOTTOM: #cccccc 1px solid; BACKGROUND-COLOR: #eeeeee"><span style="COLOR: #000000">&lt;</span><span style="COLOR: #000000">script&nbsp;type</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">text/javascript</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">&gt;</span><span style="COLOR: #000000"><br>&nbsp;&nbsp;</span><span style="COLOR: #000000">&lt;!--</span><span style="COLOR: #000000"><br>&nbsp;&nbsp;</span><span style="COLOR: #0000ff">function</span><span style="COLOR: #000000">&nbsp;tdSpace(id){<br>&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000">&nbsp;doc</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">document.getElementById(id);<br>&nbsp;&nbsp;&nbsp;&nbsp;doc.outerHTML</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">doc.outerHTML.replace(</span><span style="COLOR: #000000">/</span><span style="COLOR: #000000">(</span><span style="COLOR: #000000">&lt;</span><span style="COLOR: #000000">td[</span><span style="COLOR: #000000">^&gt;</span><span style="COLOR: #000000">]</span><span style="COLOR: #000000">*&gt;</span><span style="COLOR: #000000">)\s</span><span style="COLOR: #000000">*</span><span style="COLOR: #000000">(</span><span style="COLOR: #000000">&lt;</span><span style="COLOR: #000000">\</span><span style="COLOR: #000000">/</span><span style="COLOR: #000000">td</span><span style="COLOR: #000000">&gt;</span><span style="COLOR: #000000">)</span><span style="COLOR: #000000">/</span><span style="COLOR: #000000">ig,</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">$1&amp;nbsp;$2</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">);<br>&nbsp;&nbsp;}<br>&nbsp;&nbsp;window.onload</span><span style="COLOR: #000000">=</span><span style="COLOR: #0000ff">function</span><span style="COLOR: #000000">(){<br>&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000">&nbsp;t1</span><span style="COLOR: #000000">=</span><span style="COLOR: #0000ff">new</span><span style="COLOR: #000000">&nbsp;Date().getTime();<br>&nbsp;&nbsp;&nbsp;&nbsp;tdSpace(</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">test</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">)<br>&nbsp;&nbsp;&nbsp;&nbsp;alert(</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">耗时：</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">+</span><span style="COLOR: #000000">(</span><span style="COLOR: #0000ff">new</span><span style="COLOR: #000000">&nbsp;Date().getTime()</span><span style="COLOR: #000000">-</span><span style="COLOR: #000000">t1)</span><span style="COLOR: #000000">+</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">毫秒</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">);<br>&nbsp;&nbsp;}<br>&nbsp;&nbsp;</span><span style="COLOR: #008000">//</span><span style="COLOR: #008000">--&gt;</span><span style="COLOR: #008000"><br></span><span style="COLOR: #000000">&nbsp;&nbsp;</span><span style="COLOR: #000000">&lt;/</span><span style="COLOR: #000000">script</span><span style="COLOR: #000000">&gt;</span></div>
<br>执行了一下，效率的确提高了很多，和上面同样多的数据基本只需要60-70毫秒左右，这基本可以满足要求了。<br><br>考虑到只需要对ie做如上处理且在FF下不支持outerHTML的写法，再加上一个简单的浏览器判断搞定。<br><br><strong>最终代码：</strong>
<div style="BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 13px; PADDING-BOTTOM: 4px; BORDER-LEFT: #cccccc 1px solid; WIDTH: 98%; WORD-BREAK: break-all; PADDING-TOP: 4px; BORDER-BOTTOM: #cccccc 1px solid; BACKGROUND-COLOR: #eeeeee"><span style="COLOR: #000000">&lt;</span><span style="COLOR: #000000">script&nbsp;type</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">text/javascript</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">&gt;</span><span style="COLOR: #000000"><br>&nbsp;&nbsp;</span><span style="COLOR: #000000">&lt;!--</span><span style="COLOR: #000000"><br>&nbsp;&nbsp;</span><span style="COLOR: #0000ff">function</span><span style="COLOR: #000000">&nbsp;[color</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">#FF0000]tdSpace[</span><span style="COLOR: #000000">/</span><span style="COLOR: #000000">color](id){<br>&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #0000ff">if</span><span style="COLOR: #000000">(</span><span style="COLOR: #000000">!</span><span style="COLOR: #000000">document.all)</span><span style="COLOR: #0000ff">return</span><span style="COLOR: #000000">;<br>&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000">&nbsp;doc</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">document.getElementById(id);<br>&nbsp;&nbsp;&nbsp;&nbsp;doc.outerHTML</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">doc.outerHTML.replace(</span><span style="COLOR: #000000">/</span><span style="COLOR: #000000">(</span><span style="COLOR: #000000">&lt;</span><span style="COLOR: #000000">td[</span><span style="COLOR: #000000">^&gt;</span><span style="COLOR: #000000">]</span><span style="COLOR: #000000">*&gt;</span><span style="COLOR: #000000">)\s</span><span style="COLOR: #000000">*</span><span style="COLOR: #000000">(</span><span style="COLOR: #000000">&lt;</span><span style="COLOR: #000000">\</span><span style="COLOR: #000000">/</span><span style="COLOR: #000000">td</span><span style="COLOR: #000000">&gt;</span><span style="COLOR: #000000">)</span><span style="COLOR: #000000">/</span><span style="COLOR: #000000">ig,</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">$1&amp;nbsp;$2</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">);<br>&nbsp;&nbsp;}<br>&nbsp;&nbsp;window.onload</span><span style="COLOR: #000000">=</span><span style="COLOR: #0000ff">function</span><span style="COLOR: #000000">(){<br>&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000">&nbsp;t1</span><span style="COLOR: #000000">=</span><span style="COLOR: #0000ff">new</span><span style="COLOR: #000000">&nbsp;Date().getTime();<br>&nbsp;&nbsp;&nbsp;&nbsp;tdSpace(</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">test</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">)<br>&nbsp;&nbsp;&nbsp;&nbsp;alert(</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">耗时：</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">+</span><span style="COLOR: #000000">(</span><span style="COLOR: #0000ff">new</span><span style="COLOR: #000000">&nbsp;Date().getTime()</span><span style="COLOR: #000000">-</span><span style="COLOR: #000000">t1)</span><span style="COLOR: #000000">+</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">毫秒</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">);<br>&nbsp;&nbsp;}<br>&nbsp;&nbsp;</span><span style="COLOR: #008000">//</span><span style="COLOR: #008000">--&gt;</span><span style="COLOR: #008000"><br></span><span style="COLOR: #000000">&nbsp;&nbsp;</span><span style="COLOR: #000000">&lt;/</span><span style="COLOR: #000000">script</span><span style="COLOR: #000000">&gt;</span></div>
<br><span style="COLOR: #0000ff">在需要对表格内的单元格做空白处理时只需调用tdSpace即可，参数为table的id。</span><br><br><strong>演示地址：</strong><a href="http://ajaxbbs.net/test/replaceTdSpace.html" target=_blank><u><font color=#0000ff>http://ajaxbbs.net/test/replaceTdSpace.html</font></u></a> <p><script type="text/javascript" src="http://www.cnitblog.com/Files/yemoo/gg2.js"></script><img src ="http://www.cnitblog.com/yemoo/aggbug/34987.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.cnitblog.com/yemoo/" target="_blank">Yemoo'S JS Blog</a> 2007-10-17 12:33 <a href="http://www.cnitblog.com/yemoo/archive/2007/10/17/34987.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>iframe src为图片时的高度自适应 </title><link>http://www.cnitblog.com/yemoo/archive/2007/10/12/34768.html</link><dc:creator>Yemoo'S JS Blog</dc:creator><author>Yemoo'S JS Blog</author><pubDate>Fri, 12 Oct 2007 08:21:00 GMT</pubDate><guid>http://www.cnitblog.com/yemoo/archive/2007/10/12/34768.html</guid><wfw:comment>http://www.cnitblog.com/yemoo/comments/34768.html</wfw:comment><comments>http://www.cnitblog.com/yemoo/archive/2007/10/12/34768.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.cnitblog.com/yemoo/comments/commentRss/34768.html</wfw:commentRss><trackback:ping>http://www.cnitblog.com/yemoo/services/trackbacks/34768.html</trackback:ping><description><![CDATA[<script type="text/javascript" src="http://www.cnitblog.com/Files/yemoo/gg1.js"></script><br><br>&nbsp;&nbsp;&nbsp;&nbsp; 对于iframe高度自适应的问题，网上已经被讨论n次了，一般通过在iframe加载完毕时访问iframe内页body的offsetHeight和offsetWidth然后更新iframe的高宽来实现。<br>&nbsp;&nbsp;&nbsp;&nbsp;今日遇到的自适应问题与以往有一些不同，这次的src是一张图片，而且是一张大小不确定的图片（从数据库取出来的数据生成的），在此使用以往的方式似乎就没有那么灵验了。突然想到img标记的高宽是可以获取到的。于是突然有了思路。<br><br><strong>解决办法如下：</strong><br>先动态生成一个img元素，在iframe页面加载完成时(onload)将其src赋给img标记，然后获取该img的高宽，再动态修改iframe高宽即可，同时不要忘了设定iframe页面body的margin和padding为0，否则会由于padding和margin默认不为0的缘故导致出现滚动条。<br><br><strong>测试代码如下：</strong><br>
<div style="BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 13px; PADDING-BOTTOM: 4px; BORDER-LEFT: #cccccc 1px solid; WIDTH: 98%; WORD-BREAK: break-all; PADDING-TOP: 4px; BORDER-BOTTOM: #cccccc 1px solid; BACKGROUND-COLOR: #eeeeee"><span style="COLOR: #0000ff">&lt;!</span><span style="COLOR: #ff00ff">DOCTYPE&nbsp;html&nbsp;PUBLIC&nbsp;"-//W3C//DTD&nbsp;XHTML&nbsp;1.0&nbsp;Transitional//EN"&nbsp;"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"</span><span style="COLOR: #0000ff">&gt;</span><span style="COLOR: #000000"><br></span><span style="COLOR: #0000ff">&lt;</span><span style="COLOR: #800000">html&nbsp;</span><span style="COLOR: #ff0000">xmlns</span><span style="COLOR: #0000ff">="http://www.w3.org/1999/xhtml"</span><span style="COLOR: #0000ff">&gt;</span><span style="COLOR: #000000"><br></span><span style="COLOR: #0000ff">&lt;</span><span style="COLOR: #800000">head</span><span style="COLOR: #0000ff">&gt;</span><span style="COLOR: #000000"><br>&nbsp;&nbsp;</span><span style="COLOR: #0000ff">&lt;</span><span style="COLOR: #800000">title</span><span style="COLOR: #0000ff">&gt;</span><span style="COLOR: #000000">&nbsp;new&nbsp;document&nbsp;</span><span style="COLOR: #0000ff">&lt;/</span><span style="COLOR: #800000">title</span><span style="COLOR: #0000ff">&gt;</span><span style="COLOR: #000000"><br>&nbsp;&nbsp;</span><span style="COLOR: #0000ff">&lt;</span><span style="COLOR: #800000">meta&nbsp;</span><span style="COLOR: #ff0000">name</span><span style="COLOR: #0000ff">="generator"</span><span style="COLOR: #ff0000">&nbsp;content</span><span style="COLOR: #0000ff">="editplus"</span><span style="COLOR: #ff0000">&nbsp;</span><span style="COLOR: #0000ff">/&gt;</span><span style="COLOR: #000000"><br>&nbsp;&nbsp;</span><span style="COLOR: #0000ff">&lt;</span><span style="COLOR: #800000">meta&nbsp;</span><span style="COLOR: #ff0000">name</span><span style="COLOR: #0000ff">="author"</span><span style="COLOR: #ff0000">&nbsp;content</span><span style="COLOR: #0000ff">=""</span><span style="COLOR: #ff0000">&nbsp;</span><span style="COLOR: #0000ff">/&gt;</span><span style="COLOR: #000000"><br>&nbsp;&nbsp;</span><span style="COLOR: #0000ff">&lt;</span><span style="COLOR: #800000">meta&nbsp;</span><span style="COLOR: #ff0000">name</span><span style="COLOR: #0000ff">="keywords"</span><span style="COLOR: #ff0000">&nbsp;content</span><span style="COLOR: #0000ff">=""</span><span style="COLOR: #ff0000">&nbsp;</span><span style="COLOR: #0000ff">/&gt;</span><span style="COLOR: #000000"><br>&nbsp;&nbsp;</span><span style="COLOR: #0000ff">&lt;</span><span style="COLOR: #800000">meta&nbsp;</span><span style="COLOR: #ff0000">name</span><span style="COLOR: #0000ff">="description"</span><span style="COLOR: #ff0000">&nbsp;content</span><span style="COLOR: #0000ff">=""</span><span style="COLOR: #ff0000">&nbsp;</span><span style="COLOR: #0000ff">/&gt;</span><span style="COLOR: #000000"><br>&nbsp;&nbsp;</span><span style="COLOR: #0000ff">&lt;</span><span style="COLOR: #800000">script&nbsp;</span><span style="COLOR: #ff0000">type</span><span style="COLOR: #0000ff">="text/javascript"</span><span style="COLOR: #0000ff">&gt;</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5"><br>&nbsp;&nbsp;</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">&lt;!--</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5"><br>&nbsp;&nbsp;</span><span style="COLOR: #0000ff; BACKGROUND-COLOR: #f5f5f5">function</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">&nbsp;resize(obj){<br>&nbsp;&nbsp;</span><span style="COLOR: #0000ff; BACKGROUND-COLOR: #f5f5f5">var</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">&nbsp;ifrm</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">=</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">obj.contentWindow.document.body;<br>&nbsp;&nbsp;ifrm.style.cssText</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">=</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">"</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">margin:0px;padding:0px;overflow:hidden</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">"</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">;<br>&nbsp;&nbsp;</span><span style="COLOR: #0000ff; BACKGROUND-COLOR: #f5f5f5">var</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">&nbsp;div</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">=</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">document.createElement(</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">"</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">img</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">"</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">);<br>&nbsp;&nbsp;div.src</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">=</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">obj.src;<br>&nbsp;&nbsp;obj.height</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">=</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">div.height;<br>&nbsp;&nbsp;obj.width</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">=</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">div.width;<br>&nbsp;&nbsp;}<br>&nbsp;&nbsp;</span><span style="COLOR: #008000; BACKGROUND-COLOR: #f5f5f5">//</span><span style="COLOR: #008000; BACKGROUND-COLOR: #f5f5f5">--&gt;</span><span style="COLOR: #008000; BACKGROUND-COLOR: #f5f5f5"><br></span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">&nbsp;&nbsp;</span><span style="COLOR: #0000ff">&lt;/</span><span style="COLOR: #800000">script</span><span style="COLOR: #0000ff">&gt;</span><span style="COLOR: #000000"><br></span><span style="COLOR: #0000ff">&lt;/</span><span style="COLOR: #800000">head</span><span style="COLOR: #0000ff">&gt;</span><span style="COLOR: #000000"><br><br></span><span style="COLOR: #0000ff">&lt;</span><span style="COLOR: #800000">body</span><span style="COLOR: #0000ff">&gt;</span><span style="COLOR: #000000"><br></span><span style="COLOR: #0000ff">&lt;</span><span style="COLOR: #800000">input&nbsp;</span><span style="COLOR: #ff0000">type</span><span style="COLOR: #0000ff">="button"</span><span style="COLOR: #ff0000">&nbsp;value</span><span style="COLOR: #0000ff">="test"</span><span style="COLOR: #ff0000">&nbsp;onclick</span><span style="COLOR: #0000ff">="document.getElementById('a').style.display=''"</span><span style="COLOR: #0000ff">&gt;</span><span style="COLOR: #000000"><br>&nbsp;&nbsp;</span><span style="COLOR: #0000ff">&lt;</span><span style="COLOR: #800000">iframe&nbsp;</span><span style="COLOR: #ff0000">src</span><span style="COLOR: #0000ff">="1.jpg"</span><span style="COLOR: #ff0000">&nbsp;id</span><span style="COLOR: #0000ff">="a"</span><span style="COLOR: #ff0000">&nbsp;style</span><span style="COLOR: #0000ff">="display:none"</span><span style="COLOR: #ff0000">&nbsp;scrolling</span><span style="COLOR: #0000ff">="auto"</span><span style="COLOR: #ff0000">&nbsp;onload</span><span style="COLOR: #0000ff">="resize(this)"</span><span style="COLOR: #0000ff">&gt;&lt;/</span><span style="COLOR: #800000">iframe</span><span style="COLOR: #0000ff">&gt;</span><span style="COLOR: #000000"><br></span><span style="COLOR: #0000ff">&lt;/</span><span style="COLOR: #800000">body</span><span style="COLOR: #0000ff">&gt;</span><span style="COLOR: #000000"><br></span><span style="COLOR: #0000ff">&lt;/</span><span style="COLOR: #800000">html</span><span style="COLOR: #0000ff">&gt;</span></div><p><script type="text/javascript" src="http://www.cnitblog.com/Files/yemoo/gg2.js"></script><img src ="http://www.cnitblog.com/yemoo/aggbug/34768.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.cnitblog.com/yemoo/" target="_blank">Yemoo'S JS Blog</a> 2007-10-12 16:21 <a href="http://www.cnitblog.com/yemoo/archive/2007/10/12/34768.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>JS中的instanceof和typeof </title><link>http://www.cnitblog.com/yemoo/archive/2007/10/10/34642.html</link><dc:creator>Yemoo'S JS Blog</dc:creator><author>Yemoo'S JS Blog</author><pubDate>Wed, 10 Oct 2007 07:15:00 GMT</pubDate><guid>http://www.cnitblog.com/yemoo/archive/2007/10/10/34642.html</guid><wfw:comment>http://www.cnitblog.com/yemoo/comments/34642.html</wfw:comment><comments>http://www.cnitblog.com/yemoo/archive/2007/10/10/34642.html#Feedback</comments><slash:comments>1</slash:comments><wfw:commentRss>http://www.cnitblog.com/yemoo/comments/commentRss/34642.html</wfw:commentRss><trackback:ping>http://www.cnitblog.com/yemoo/services/trackbacks/34642.html</trackback:ping><description><![CDATA[<script type="text/javascript" src="http://www.cnitblog.com/Files/yemoo/gg1.js"></script><br><br>&nbsp;&nbsp; 对于instanceof和typeof，以前偶尔的用到过，特别是typeof用到的相对更多一些，今日研究ext源码，很多地方都用到了instanceof，突然觉得他们两个有些相似但也应该有他们区别，网上看了一些文章，对它们之间的关系有了一定的了解。<br><br>instanceof和typeof都能用来判断一个变量是否为空或是什么类型的变量。<br>typeof用以获取一个变量的类型，typeof一般只能返回如下几个结果：<span style="COLOR: #0000ff"><a name=entrymore></a>number,boolean,string,function,object,undefined</span>。我们可以使用typeof来获取一个变量是否存在，如if(typeof a!="undefined"){}，而不要去使用if(a)因为如果a不存在（未声明）则会出错，对于Array,Null等特殊对象使用typeof一律返回object，这正是typeof的局限性。<br><br>如果我们希望获取一个对象是否是数组，或判断某个变量是否是某个对象的实例则要选择使用instanceof。instanceof用于判断一个变量是否某个对象的实例，如var a=new Array();alert(a instanceof Array);会返回true，同时alert(a instanceof Object)也会返回true;这是因为Array是object的子类。再如：function test(){};var a=new test();alert(a instanceof test)会返回true。<br><br>谈到instanceof我们要多插入一个问题，就是function的arguments，我们大家也许都认为arguments是一个Array，但如果使用instaceof去测试会发现arguments不是一个Array对象，尽管看起来很像。 <p><script type="text/javascript" src="http://www.cnitblog.com/Files/yemoo/gg2.js"></script><img src ="http://www.cnitblog.com/yemoo/aggbug/34642.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.cnitblog.com/yemoo/" target="_blank">Yemoo'S JS Blog</a> 2007-10-10 15:15 <a href="http://www.cnitblog.com/yemoo/archive/2007/10/10/34642.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>转换字符串为json对象的方法 </title><link>http://www.cnitblog.com/yemoo/archive/2007/10/08/34526.html</link><dc:creator>Yemoo'S JS Blog</dc:creator><author>Yemoo'S JS Blog</author><pubDate>Mon, 08 Oct 2007 06:17:00 GMT</pubDate><guid>http://www.cnitblog.com/yemoo/archive/2007/10/08/34526.html</guid><wfw:comment>http://www.cnitblog.com/yemoo/comments/34526.html</wfw:comment><comments>http://www.cnitblog.com/yemoo/archive/2007/10/08/34526.html#Feedback</comments><slash:comments>2</slash:comments><wfw:commentRss>http://www.cnitblog.com/yemoo/comments/commentRss/34526.html</wfw:commentRss><trackback:ping>http://www.cnitblog.com/yemoo/services/trackbacks/34526.html</trackback:ping><description><![CDATA[<script type="text/javascript" src="http://www.cnitblog.com/Files/yemoo/gg1.js"></script><br><br><p>&nbsp;&nbsp;&nbsp; JSON是一种便于操作使用的轻量级数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。具体介绍请查看：<a href="http://www.json.org/">http://www.json.org</a>。</p>
<p>很多时候我们需要组装字符串为json对象，首先要组合字符串，然后转换为json对象，如下面的例子：</p>
<div style="BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 13px; PADDING-BOTTOM: 4px; BORDER-LEFT: #cccccc 1px solid; WIDTH: 98%; WORD-BREAK: break-all; PADDING-TOP: 4px; BORDER-BOTTOM: #cccccc 1px solid; BACKGROUND-COLOR: #eeeeee"><span style="COLOR: #000000">&lt;</span><span style="COLOR: #000000">script&nbsp;type</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">text/javascript</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">&gt;</span><span style="COLOR: #000000"><br>&nbsp;&nbsp;</span><span style="COLOR: #000000">&lt;!--</span><span style="COLOR: #000000"><br>&nbsp;&nbsp;</span><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000">&nbsp;a</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">50</span><span style="COLOR: #000000">,b</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">xxx</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">;<br>&nbsp;&nbsp;</span><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000">&nbsp;arr</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">{id:</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">+</span><span style="COLOR: #000000">a</span><span style="COLOR: #000000">+</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">,name:'</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">+</span><span style="COLOR: #000000">b</span><span style="COLOR: #000000">+</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">'}</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">;<br>&nbsp;&nbsp;</span><span style="COLOR: #008000">//</span><span style="COLOR: #008000">--&gt;</span><span style="COLOR: #008000"><br></span><span style="COLOR: #000000">&lt;/</span><span style="COLOR: #000000">script</span><span style="COLOR: #000000">&gt;</span></div>
<p>组合成了字符串arr，下一步就是转换成对象了，很快我们会想到使用eval方法，但如果这样做转换会出现错误，今日偶就这样尝试了，那该如何转换成json对象呢？郁闷许久，之后在json官网提供的json.js文件中找到了解决办法，方法如下：<br>在字符串两端再加上括号然后eval就ok了。测试代码如下：</p>
<div style="BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 13px; PADDING-BOTTOM: 4px; BORDER-LEFT: #cccccc 1px solid; WIDTH: 98%; WORD-BREAK: break-all; PADDING-TOP: 4px; BORDER-BOTTOM: #cccccc 1px solid; BACKGROUND-COLOR: #eeeeee"><span style="COLOR: #000000">&lt;</span><span style="COLOR: #000000">script&nbsp;type</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">text/javascript</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">&gt;</span><span style="COLOR: #000000"><br>&nbsp;&nbsp;</span><span style="COLOR: #000000">&lt;!--</span><span style="COLOR: #000000"><br>&nbsp;&nbsp;</span><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000">&nbsp;a</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">50</span><span style="COLOR: #000000">,b</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">xxx</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">;<br>&nbsp;&nbsp;</span><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000">&nbsp;arr</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">{id:</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">+</span><span style="COLOR: #000000">a</span><span style="COLOR: #000000">+</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">,name:'</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">+</span><span style="COLOR: #000000">b</span><span style="COLOR: #000000">+</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">'}</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">;<br>&nbsp;&nbsp;arr</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">eval('('</span><span style="COLOR: #000000">+</span><span style="COLOR: #000000">arr</span><span style="COLOR: #000000">+</span><span style="COLOR: #000000">')')<br>&nbsp;&nbsp;alert(arr.name);<br>&nbsp;&nbsp;</span><span style="COLOR: #008000">//</span><span style="COLOR: #008000">--&gt;</span><span style="COLOR: #008000"><br></span><span style="COLOR: #000000">&lt;/</span><span style="COLOR: #000000">script</span><span style="COLOR: #000000">&gt;</span></div>
<p><br>上面代码执行后会弹出&#8220;xxx&#8221;，说明已经成功转换为json对象了，一个似乎很简单的问题，不过还是郁闷了半天才解决掉，还是记到blog上以加深印象，也希望能帮助遇到此问题的朋友早日解除郁闷。 <br></p><br><script type="text/javascript" src="http://www.cnitblog.com/Files/yemoo/gg2.js"></script><img src ="http://www.cnitblog.com/yemoo/aggbug/34526.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.cnitblog.com/yemoo/" target="_blank">Yemoo'S JS Blog</a> 2007-10-08 14:17 <a href="http://www.cnitblog.com/yemoo/archive/2007/10/08/34526.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>判断浏览器刷新与关闭的代码</title><link>http://www.cnitblog.com/yemoo/archive/2007/09/30/34258.html</link><dc:creator>Yemoo'S JS Blog</dc:creator><author>Yemoo'S JS Blog</author><pubDate>Sun, 30 Sep 2007 08:23:00 GMT</pubDate><guid>http://www.cnitblog.com/yemoo/archive/2007/09/30/34258.html</guid><wfw:comment>http://www.cnitblog.com/yemoo/comments/34258.html</wfw:comment><comments>http://www.cnitblog.com/yemoo/archive/2007/09/30/34258.html#Feedback</comments><slash:comments>4</slash:comments><wfw:commentRss>http://www.cnitblog.com/yemoo/comments/commentRss/34258.html</wfw:commentRss><trackback:ping>http://www.cnitblog.com/yemoo/services/trackbacks/34258.html</trackback:ping><description><![CDATA[<script type="text/javascript" src="http://www.cnitblog.com/Files/yemoo/gg1.js"></script><br><br>当浏览器退出时会触发onunload事件，因此我们可以使用onunload事件做一些在页面关闭时要执行的操作，如提示用户信息等。但或许在实际应用中我们都发现一个问题，刷新浏览器同样会触发onunload事件，也就是只要是离开该页面就会触发onunload事件，或许刷新时我们并不想执行onunload定义的操作，或者我们只想在刷新时执行某操作，这样我们就遇到了一些麻烦。<br>本以为这种问题没有什么解决办法，没想到还是有牛人用很牛的办法解决了这个办法，这里俺就把找到的两段代码共享出来，希望对正好需要解决此问题朋友有所帮助。<br><br>方法一：<br>
<div style="BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 13px; PADDING-BOTTOM: 4px; BORDER-LEFT: #cccccc 1px solid; WIDTH: 98%; WORD-BREAK: break-all; PADDING-TOP: 4px; BORDER-BOTTOM: #cccccc 1px solid; BACKGROUND-COLOR: #eeeeee"><span style="COLOR: #0000ff">&lt;</span><span style="COLOR: #800000">HTML</span><span style="COLOR: #0000ff">&gt;</span><span style="COLOR: #000000">&nbsp;<br></span><span style="COLOR: #0000ff">&lt;</span><span style="COLOR: #800000">HEAD</span><span style="COLOR: #0000ff">&gt;</span><span style="COLOR: #000000">&nbsp;<br></span><span style="COLOR: #0000ff">&lt;</span><span style="COLOR: #800000">TITLE</span><span style="COLOR: #0000ff">&gt;</span><span style="COLOR: #000000">判断是刷新还是关闭－www.51windows.Net</span><span style="COLOR: #0000ff">&lt;/</span><span style="COLOR: #800000">TITLE</span><span style="COLOR: #0000ff">&gt;</span><span style="COLOR: #000000">&nbsp;<br></span><span style="COLOR: #0000ff">&lt;</span><span style="COLOR: #800000">meta&nbsp;</span><span style="COLOR: #ff0000">http-equiv</span><span style="COLOR: #0000ff">="Content-Type"</span><span style="COLOR: #ff0000">&nbsp;content</span><span style="COLOR: #0000ff">="text/html;&nbsp;charset=gb2312"</span><span style="COLOR: #0000ff">&gt;</span><span style="COLOR: #000000">&nbsp;<br></span><span style="COLOR: #0000ff">&lt;</span><span style="COLOR: #800000">META&nbsp;</span><span style="COLOR: #ff0000">NAME</span><span style="COLOR: #0000ff">="Author"</span><span style="COLOR: #ff0000">&nbsp;CONTENT</span><span style="COLOR: #0000ff">="51windows,海娃,haiwa"</span><span style="COLOR: #0000ff">&gt;</span><span style="COLOR: #000000">&nbsp;<br></span><span style="COLOR: #0000ff">&lt;</span><span style="COLOR: #800000">META&nbsp;</span><span style="COLOR: #ff0000">NAME</span><span style="COLOR: #0000ff">="Description"</span><span style="COLOR: #ff0000">&nbsp;CONTENT</span><span style="COLOR: #0000ff">="Power&nbsp;by&nbsp;51windows.Net"</span><span style="COLOR: #0000ff">&gt;</span><span style="COLOR: #000000">&nbsp;<br></span><span style="COLOR: #0000ff">&lt;/</span><span style="COLOR: #800000">HEAD</span><span style="COLOR: #0000ff">&gt;</span><span style="COLOR: #000000">&nbsp;<br><br></span><span style="COLOR: #0000ff">&lt;</span><span style="COLOR: #800000">script</span><span style="COLOR: #0000ff">&gt;</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">&nbsp;<br></span><span style="COLOR: #0000ff; BACKGROUND-COLOR: #f5f5f5">function</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">&nbsp;CloseOpen(event)&nbsp;{&nbsp;<br></span><span style="COLOR: #0000ff; BACKGROUND-COLOR: #f5f5f5">if</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">(event.clientX</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">&lt;=</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">0</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">&nbsp;</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">&amp;&amp;</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">&nbsp;event.clientY</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">&lt;</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">0</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">)&nbsp;{&nbsp;<br>alert(</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">"</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">关闭</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">"</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">);&nbsp;<br>}&nbsp;<br></span><span style="COLOR: #0000ff; BACKGROUND-COLOR: #f5f5f5">else</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">&nbsp;<br>{&nbsp;<br>alert(</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">"</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">刷新或离开</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">"</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">);&nbsp;<br>}&nbsp;<br>}&nbsp;<br></span><span style="COLOR: #0000ff">&lt;/</span><span style="COLOR: #800000">script</span><span style="COLOR: #0000ff">&gt;</span><span style="COLOR: #000000">&nbsp;<br></span><span style="COLOR: #0000ff">&lt;</span><span style="COLOR: #800000">body&nbsp;</span><span style="COLOR: #ff0000">onunload</span><span style="COLOR: #0000ff">="CloseOpen(event)"</span><span style="COLOR: #0000ff">&gt;</span><span style="COLOR: #000000">&nbsp;<br></span><span style="COLOR: #0000ff">&lt;/</span><span style="COLOR: #800000">BODY</span><span style="COLOR: #0000ff">&gt;</span><span style="COLOR: #000000">&nbsp;<br></span><span style="COLOR: #0000ff">&lt;/</span><span style="COLOR: #800000">HTML</span><span style="COLOR: #0000ff">&gt;</span><span style="COLOR: #000000">&nbsp;<br></span><span style="COLOR: #0000ff">&lt;</span><span style="COLOR: #800000">div&nbsp;</span><span style="COLOR: #ff0000">style</span><span style="COLOR: #0000ff">="position:&nbsp;absolute;&nbsp;top:&nbsp;10;&nbsp;right:&nbsp;10;&nbsp;width:&nbsp;148;&nbsp;height:&nbsp;18;cursor:hand"</span><span style="COLOR: #0000ff">&gt;</span><span style="COLOR: #000000">&nbsp;<br></span><span style="COLOR: #0000ff">&lt;</span><span style="COLOR: #800000">input&nbsp;</span><span style="COLOR: #ff0000">type</span><span style="COLOR: #0000ff">="button"</span><span style="COLOR: #ff0000">&nbsp;name</span><span style="COLOR: #0000ff">="Button"</span><span style="COLOR: #ff0000">&nbsp;value</span><span style="COLOR: #0000ff">="查看源代码"</span><span style="COLOR: #ff0000">&nbsp;onClick</span><span style="COLOR: #0000ff">=&nbsp;'window.location&nbsp;=&nbsp;"view-source:"</span><span style="COLOR: #ff0000">&nbsp;+&nbsp;window.location.href'</span><span style="COLOR: #0000ff">&gt;&lt;/</span><span style="COLOR: #800000">div</span><span style="COLOR: #0000ff">&gt;</span><span style="COLOR: #000000">&nbsp;</span></div>
<br><br>第二种做法：<br>
<div style="BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 13px; PADDING-BOTTOM: 4px; BORDER-LEFT: #cccccc 1px solid; WIDTH: 98%; WORD-BREAK: break-all; PADDING-TOP: 4px; BORDER-BOTTOM: #cccccc 1px solid; BACKGROUND-COLOR: #eeeeee"><span style="COLOR: #0000ff">&lt;</span><span style="COLOR: #800000">script&nbsp;</span><span style="COLOR: #ff0000">language</span><span style="COLOR: #0000ff">="javascript"</span><span style="COLOR: #0000ff">&gt;</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">&nbsp;<br>window.onbeforeunload&nbsp;</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">=</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">&nbsp;</span><span style="COLOR: #0000ff; BACKGROUND-COLOR: #f5f5f5">function</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">()&nbsp;</span><span style="COLOR: #008000; BACKGROUND-COLOR: #f5f5f5">//</span><span style="COLOR: #008000; BACKGROUND-COLOR: #f5f5f5">author:&nbsp;meizz&nbsp;</span><span style="COLOR: #008000; BACKGROUND-COLOR: #f5f5f5"><br></span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">{&nbsp;<br></span><span style="COLOR: #0000ff; BACKGROUND-COLOR: #f5f5f5">var</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">&nbsp;n&nbsp;</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">=</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">&nbsp;window.event.screenX&nbsp;</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">-</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">&nbsp;window.screenLeft;&nbsp;<br></span><span style="COLOR: #0000ff; BACKGROUND-COLOR: #f5f5f5">var</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">&nbsp;b&nbsp;</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">=</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">&nbsp;n&nbsp;</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">&gt;</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">&nbsp;document.documentElement.scrollWidth</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">-</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">20</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">;&nbsp;<br></span><span style="COLOR: #0000ff; BACKGROUND-COLOR: #f5f5f5">if</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">(b&nbsp;</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">&amp;&amp;</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">&nbsp;window.event.clientY&nbsp;</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">&lt;</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">&nbsp;</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">0</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">&nbsp;</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">||</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">&nbsp;window.event.altKey)&nbsp;<br>{&nbsp;<br>alert(</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">"</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">是关闭而非刷新</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">"</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">);&nbsp;<br>window.event.returnValue&nbsp;</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">=</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">&nbsp;</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">""</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">;&nbsp;</span><span style="COLOR: #008000; BACKGROUND-COLOR: #f5f5f5">//</span><span style="COLOR: #008000; BACKGROUND-COLOR: #f5f5f5">这里可以放置你想做的操作代码&nbsp;</span><span style="COLOR: #008000; BACKGROUND-COLOR: #f5f5f5"><br></span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">}&nbsp;<br>}&nbsp;<br></span><span style="COLOR: #0000ff">&lt;/</span><span style="COLOR: #800000">script</span><span style="COLOR: #0000ff">&gt;</span></div><br>
<script type="text/javascript" src="http://www.cnitblog.com/Files/yemoo/gg2.js"></script><img src ="http://www.cnitblog.com/yemoo/aggbug/34258.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.cnitblog.com/yemoo/" target="_blank">Yemoo'S JS Blog</a> 2007-09-30 16:23 <a href="http://www.cnitblog.com/yemoo/archive/2007/09/30/34258.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>超链接js事件导致IE6中GIF动画停止的解决办法</title><link>http://www.cnitblog.com/yemoo/archive/2007/09/28/34142.html</link><dc:creator>Yemoo'S JS Blog</dc:creator><author>Yemoo'S JS Blog</author><pubDate>Fri, 28 Sep 2007 04:26:00 GMT</pubDate><guid>http://www.cnitblog.com/yemoo/archive/2007/09/28/34142.html</guid><wfw:comment>http://www.cnitblog.com/yemoo/comments/34142.html</wfw:comment><comments>http://www.cnitblog.com/yemoo/archive/2007/09/28/34142.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.cnitblog.com/yemoo/comments/commentRss/34142.html</wfw:commentRss><trackback:ping>http://www.cnitblog.com/yemoo/services/trackbacks/34142.html</trackback:ping><description><![CDATA[<script type="text/javascript" src="http://www.cnitblog.com/Files/yemoo/gg1.js"></script><br><br>其实这个也是曾经让俺头疼的一个问题，当时怎么都找不到原因，后来才知道这是IE6浏览器的一个bug，不过后来也没有在注意过这个问题。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;今日在蓝色经典发现有网友遇到了同样的问题，而且下面的回复者似乎也都不太清楚是什么造成，感觉还是有很多朋友会遇到这种问题的。于是在此对此bug出现的原因解释下下希望对各位有用！<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;造成GIF停止的代码语句一般都是如下形式：
<div style="BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 13px; PADDING-BOTTOM: 4px; BORDER-LEFT: #cccccc 1px solid; WIDTH: 98%; WORD-BREAK: break-all; PADDING-TOP: 4px; BORDER-BOTTOM: #cccccc 1px solid; BACKGROUND-COLOR: #eeeeee"><span style="COLOR: #0000ff">&lt;</span><span style="COLOR: #800000">a&nbsp;</span><span style="COLOR: #ff0000">href</span><span style="COLOR: #0000ff">="javascript:函数调用或js语句"</span><span style="COLOR: #0000ff">&gt;</span><span style="COLOR: #000000">超链接</span><span style="COLOR: #0000ff">&lt;/</span><span style="COLOR: #800000">a</span><span style="COLOR: #0000ff">&gt;</span></div>
<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;如果你的gif突然停止，请检查您的代码是否有类如上面的语句调用!<br>&nbsp;&nbsp;&nbsp;&nbsp; <span style="COLOR: #0000ff">尽管将js语句直接写在链接的href属性上是允许的，但有时就会造成页面gif动画全部停止的现象。</span><br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;因此建议将js还是写在元素的事件上更合适，如<br>
<div style="BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 13px; PADDING-BOTTOM: 4px; BORDER-LEFT: #cccccc 1px solid; WIDTH: 98%; WORD-BREAK: break-all; PADDING-TOP: 4px; BORDER-BOTTOM: #cccccc 1px solid; BACKGROUND-COLOR: #eeeeee"><span style="COLOR: #0000ff">&lt;</span><span style="COLOR: #800000">a&nbsp;</span><span style="COLOR: #ff0000">onclick</span><span style="COLOR: #0000ff">="函数调用或js语句;return&nbsp;false"</span><span style="COLOR: #ff0000">&nbsp;href</span><span style="COLOR: #0000ff">="#"</span><span style="COLOR: #0000ff">&gt;</span><span style="COLOR: #000000">超链接</span><span style="COLOR: #0000ff">&lt;/</span><span style="COLOR: #800000">a</span><span style="COLOR: #0000ff">&gt;</span></div>
<br>这样就可以避免gif停止的问题了。<br>
<script type="text/javascript" src="http://www.cnitblog.com/Files/yemoo/gg2.js"></script><img src ="http://www.cnitblog.com/yemoo/aggbug/34142.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.cnitblog.com/yemoo/" target="_blank">Yemoo'S JS Blog</a> 2007-09-28 12:26 <a href="http://www.cnitblog.com/yemoo/archive/2007/09/28/34142.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>不能同时打开多个全屏窗口的解决办法</title><link>http://www.cnitblog.com/yemoo/archive/2007/09/27/34076.html</link><dc:creator>Yemoo'S JS Blog</dc:creator><author>Yemoo'S JS Blog</author><pubDate>Thu, 27 Sep 2007 01:21:00 GMT</pubDate><guid>http://www.cnitblog.com/yemoo/archive/2007/09/27/34076.html</guid><wfw:comment>http://www.cnitblog.com/yemoo/comments/34076.html</wfw:comment><comments>http://www.cnitblog.com/yemoo/archive/2007/09/27/34076.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.cnitblog.com/yemoo/comments/commentRss/34076.html</wfw:commentRss><trackback:ping>http://www.cnitblog.com/yemoo/services/trackbacks/34076.html</trackback:ping><description><![CDATA[<script type="text/javascript" src="http://www.cnitblog.com/Files/yemoo/gg1.js"></script><br><br>您的系统登陆后是否是全屏的？如果是，您是否发现当保持你已经登入的系统全屏窗口后再次通过系统登录时仍然是一个全屏窗口，或者直接全屏窗口变成白板？或者提示&#8220;拒绝访问&#8221;的js错误？<br><br>偶所在公司的一些项目都出现了这种问题，当一个系统在一个机器上同时登录多个帐号（弹出多次全屏窗口）时，新开的窗口会将之前的全屏刷成白板。开始以为是IE的bug，没多在意，之后发现很多人都提这个问题，于是决定去探究下是否有解决办法。想到window.open弹出全屏，首先想到是否窗口名冲突，开始查看window.open的调用，找到如下代码：<br>
<div style="BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 13px; PADDING-BOTTOM: 4px; BORDER-LEFT: #cccccc 1px solid; WIDTH: 98%; WORD-BREAK: break-all; PADDING-TOP: 4px; BORDER-BOTTOM: #cccccc 1px solid; BACKGROUND-COLOR: #eeeeee"><span style="COLOR: #000000">workspace&nbsp;</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">&nbsp;window.open(targetURL,&nbsp;</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">workspace</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">,&nbsp;</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">fullscreen=0,menubar=0,toolbar=0,directories=0,location=0,status=1,scrollbars=0</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">);</span></div>
<br>想想不可能是workspace变量冲突，因为它只是一个页面级变量，新开的页面不会和之前页面定义的变量冲突，在看发现了window.open的第二个参数workspace，这个参数的意义之前我没有在意过，以为没有什么意义，突然感觉这个应该是代表窗口的名字，以便程序可以通过该名字来识别该窗口。如果定义了这个名字，那么在第二次弹出窗口时因为能找到workspace窗口所以并没有重新打开而是在workspace页面内重新写内容了。完全正确。之后偶特意写代码测试了。当然，这样就好解决了，只要把这个参数省略或定义不同的名字就可以解决这个问题。<br><br>看下面的测试：<br><a href="http://www.ajaxbbs.net/test/testWindowOpen/sameArg2.html" target=_blank><font color=#0000ff><u>window.open的第二个参数定义了相同名字</u></font></a><br><br><a href="http://www.ajaxbbs.net/test/testWindowOpen/noArg2.html" target=_blank><u><font color=#0000ff>window.open的第二个参数定义了不同名字</font></u></a>
<p><script type="text/javascript" src="http://www.cnitblog.com/Files/yemoo/gg2.js"></script></p> <img src ="http://www.cnitblog.com/yemoo/aggbug/34076.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.cnitblog.com/yemoo/" target="_blank">Yemoo'S JS Blog</a> 2007-09-27 09:21 <a href="http://www.cnitblog.com/yemoo/archive/2007/09/27/34076.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>实现JS对象的克隆 </title><link>http://www.cnitblog.com/yemoo/archive/2007/09/25/34018.html</link><dc:creator>Yemoo'S JS Blog</dc:creator><author>Yemoo'S JS Blog</author><pubDate>Tue, 25 Sep 2007 10:32:00 GMT</pubDate><guid>http://www.cnitblog.com/yemoo/archive/2007/09/25/34018.html</guid><wfw:comment>http://www.cnitblog.com/yemoo/comments/34018.html</wfw:comment><comments>http://www.cnitblog.com/yemoo/archive/2007/09/25/34018.html#Feedback</comments><slash:comments>2</slash:comments><wfw:commentRss>http://www.cnitblog.com/yemoo/comments/commentRss/34018.html</wfw:commentRss><trackback:ping>http://www.cnitblog.com/yemoo/services/trackbacks/34018.html</trackback:ping><description><![CDATA[<script type="text/javascript" src="http://www.cnitblog.com/Files/yemoo/gg1.js"></script><br>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;在js里没有类似JAVA的clone方法，无法实现对对象的克隆，一般使用等号操作符来传递对象，但这样就造成了指针关联问题，修改任何一个对象，其关联的对象也会被改变，但很多时候我们只想得到一个对象的拷贝，而非引用。今日偶就遇到了这个问题，以前还真没有注意过这个，朋友给找了两个方法，感觉写的都不错。只是实现稍有不同，但大体原理是相对的，即<span style="COLOR: red">逐项复制对象内容</span>。<br>相信这段代码对很多web开发的朋友都会有用。</p>
<p><strong>方法一：定义一个clone方法来实现。</strong></p>
<div style="BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 13px; PADDING-BOTTOM: 4px; BORDER-LEFT: #cccccc 1px solid; WIDTH: 98%; WORD-BREAK: break-all; PADDING-TOP: 4px; BORDER-BOTTOM: #cccccc 1px solid; BACKGROUND-COLOR: #eeeeee"><span style="COLOR: #0000ff">function</span><span style="COLOR: #000000">&nbsp;clone(myObj){<br>&nbsp;&nbsp;</span><span style="COLOR: #0000ff">if</span><span style="COLOR: #000000">(</span><span style="COLOR: #0000ff">typeof</span><span style="COLOR: #000000">(myObj)&nbsp;</span><span style="COLOR: #000000">!=</span><span style="COLOR: #000000">&nbsp;'object')&nbsp;</span><span style="COLOR: #0000ff">return</span><span style="COLOR: #000000">&nbsp;myObj;<br>&nbsp;&nbsp;</span><span style="COLOR: #0000ff">if</span><span style="COLOR: #000000">(myObj&nbsp;</span><span style="COLOR: #000000">==</span><span style="COLOR: #000000">&nbsp;</span><span style="COLOR: #0000ff">null</span><span style="COLOR: #000000">)&nbsp;</span><span style="COLOR: #0000ff">return</span><span style="COLOR: #000000">&nbsp;myObj;<br>&nbsp;&nbsp;<br>&nbsp;&nbsp;</span><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000">&nbsp;myNewObj&nbsp;</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">&nbsp;</span><span style="COLOR: #0000ff">new</span><span style="COLOR: #000000">&nbsp;Object();<br>&nbsp;&nbsp;<br>&nbsp;&nbsp;</span><span style="COLOR: #0000ff">for</span><span style="COLOR: #000000">(</span><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000">&nbsp;i&nbsp;</span><span style="COLOR: #0000ff">in</span><span style="COLOR: #000000">&nbsp;myObj)<br>&nbsp;&nbsp;&nbsp;&nbsp;myNewObj[i]&nbsp;</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">&nbsp;clone(myObj[i]);<br>&nbsp;&nbsp;<br>&nbsp;&nbsp;</span><span style="COLOR: #0000ff">return</span><span style="COLOR: #000000">&nbsp;myNewObj;<br>}</span></div>
<p><br><strong>方法二：通过object原型扩展实现</strong></p>
<div style="BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 13px; PADDING-BOTTOM: 4px; BORDER-LEFT: #cccccc 1px solid; WIDTH: 98%; WORD-BREAK: break-all; PADDING-TOP: 4px; BORDER-BOTTOM: #cccccc 1px solid; BACKGROUND-COLOR: #eeeeee"><span style="COLOR: #000000">Object.prototype.Clone&nbsp;</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">&nbsp;</span><span style="COLOR: #0000ff">function</span><span style="COLOR: #000000">()<br>{<br>&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000">&nbsp;objClone;<br>&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #0000ff">if</span><span style="COLOR: #000000">&nbsp;(&nbsp;</span><span style="COLOR: #0000ff">this</span><span style="COLOR: #000000">.constructor&nbsp;</span><span style="COLOR: #000000">==</span><span style="COLOR: #000000">&nbsp;Object&nbsp;)&nbsp;objClone&nbsp;</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">&nbsp;</span><span style="COLOR: #0000ff">new</span><span style="COLOR: #000000">&nbsp;</span><span style="COLOR: #0000ff">this</span><span style="COLOR: #000000">.constructor();&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #0000ff">else</span><span style="COLOR: #000000">&nbsp;objClone&nbsp;</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">&nbsp;</span><span style="COLOR: #0000ff">new</span><span style="COLOR: #000000">&nbsp;</span><span style="COLOR: #0000ff">this</span><span style="COLOR: #000000">.constructor(</span><span style="COLOR: #0000ff">this</span><span style="COLOR: #000000">.valueOf());&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #0000ff">for</span><span style="COLOR: #000000">&nbsp;(&nbsp;</span><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000">&nbsp;key&nbsp;</span><span style="COLOR: #0000ff">in</span><span style="COLOR: #000000">&nbsp;</span><span style="COLOR: #0000ff">this</span><span style="COLOR: #000000">&nbsp;)<br>&nbsp;&nbsp;&nbsp;&nbsp;{<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #0000ff">if</span><span style="COLOR: #000000">&nbsp;(&nbsp;objClone[key]&nbsp;</span><span style="COLOR: #000000">!=</span><span style="COLOR: #000000">&nbsp;</span><span style="COLOR: #0000ff">this</span><span style="COLOR: #000000">[key]&nbsp;)<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #0000ff">if</span><span style="COLOR: #000000">&nbsp;(&nbsp;</span><span style="COLOR: #0000ff">typeof</span><span style="COLOR: #000000">(</span><span style="COLOR: #0000ff">this</span><span style="COLOR: #000000">[key])&nbsp;</span><span style="COLOR: #000000">==</span><span style="COLOR: #000000">&nbsp;'object'&nbsp;)<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;objClone[key]&nbsp;</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">&nbsp;</span><span style="COLOR: #0000ff">this</span><span style="COLOR: #000000">[key].Clone();<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #0000ff">else</span><span style="COLOR: #000000"><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;objClone[key]&nbsp;</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">&nbsp;</span><span style="COLOR: #0000ff">this</span><span style="COLOR: #000000">[key];<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br>&nbsp;&nbsp;&nbsp;&nbsp;}<br>&nbsp;&nbsp;&nbsp;&nbsp;objClone.toString&nbsp;</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">&nbsp;</span><span style="COLOR: #0000ff">this</span><span style="COLOR: #000000">.toString;<br>&nbsp;&nbsp;&nbsp;&nbsp;objClone.valueOf&nbsp;</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">&nbsp;</span><span style="COLOR: #0000ff">this</span><span style="COLOR: #000000">.valueOf;<br>&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #0000ff">return</span><span style="COLOR: #000000">&nbsp;objClone;&nbsp;<br>}&nbsp;&nbsp;</span></div><p>
<script type="text/javascript" src="http://www.cnitblog.com/Files/yemoo/gg2.js"></script><img src ="http://www.cnitblog.com/yemoo/aggbug/34018.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.cnitblog.com/yemoo/" target="_blank">Yemoo'S JS Blog</a> 2007-09-25 18:32 <a href="http://www.cnitblog.com/yemoo/archive/2007/09/25/34018.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>function, new function, new Function【转自鸟食轩】</title><link>http://www.cnitblog.com/yemoo/archive/2007/09/25/34017.html</link><dc:creator>Yemoo'S JS Blog</dc:creator><author>Yemoo'S JS Blog</author><pubDate>Tue, 25 Sep 2007 10:30:00 GMT</pubDate><guid>http://www.cnitblog.com/yemoo/archive/2007/09/25/34017.html</guid><wfw:comment>http://www.cnitblog.com/yemoo/comments/34017.html</wfw:comment><comments>http://www.cnitblog.com/yemoo/archive/2007/09/25/34017.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.cnitblog.com/yemoo/comments/commentRss/34017.html</wfw:commentRss><trackback:ping>http://www.cnitblog.com/yemoo/services/trackbacks/34017.html</trackback:ping><description><![CDATA[<script type="text/javascript" src="http://www.cnitblog.com/Files/yemoo/gg1.js"></script><br><p>函数是JavaScript中很重要的一个语言元素，并且提供了一个function关键字和内置对象Function，下面是其可能的用法和它们之间的关系。</p>
<p><strong>使用方法一：</strong></p>
<div style="BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 13px; PADDING-BOTTOM: 4px; BORDER-LEFT: #cccccc 1px solid; WIDTH: 98%; WORD-BREAK: break-all; PADDING-TOP: 4px; BORDER-BOTTOM: #cccccc 1px solid; BACKGROUND-COLOR: #eeeeee"><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000">&nbsp;foo01&nbsp;</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">&nbsp;</span><span style="COLOR: #0000ff">function</span><span style="COLOR: #000000">()&nbsp;</span><span style="COLOR: #008000">//</span><span style="COLOR: #008000">or&nbsp;fun01&nbsp;=&nbsp;function()</span><span style="COLOR: #008000"><br></span><span style="COLOR: #000000">{<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000">&nbsp;temp&nbsp;</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">&nbsp;</span><span style="COLOR: #000000">100</span><span style="COLOR: #000000">;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #0000ff">this</span><span style="COLOR: #000000">.temp&nbsp;</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">&nbsp;</span><span style="COLOR: #000000">200</span><span style="COLOR: #000000">;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #0000ff">return</span><span style="COLOR: #000000">&nbsp;temp&nbsp;</span><span style="COLOR: #000000">+</span><span style="COLOR: #000000">&nbsp;</span><span style="COLOR: #0000ff">this</span><span style="COLOR: #000000">.temp;<br>}<br><br>alert(</span><span style="COLOR: #0000ff">typeof</span><span style="COLOR: #000000">(foo01));<br>alert(foo01());&nbsp;<br><br></span></div>
<p>&nbsp;&nbsp; <br><span style="COLOR: #0000ff">运行结果：</span><br>function<br>300&nbsp; <br>最普通的function使用方式，定一个JavaScript函数。两种写法表现出来的运行效果完全相同，唯一的却别是后一种写法有较高的初始化优先级。在大扩号内的变量作用域中，this指代foo01的所有者，即window对象。</p>
<p><strong><br>使用方法二：</strong></p>
<div style="BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 13px; PADDING-BOTTOM: 4px; BORDER-LEFT: #cccccc 1px solid; WIDTH: 98%; WORD-BREAK: break-all; PADDING-TOP: 4px; BORDER-BOTTOM: #cccccc 1px solid; BACKGROUND-COLOR: #eeeeee"><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000">&nbsp;foo02&nbsp;</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">&nbsp;</span><span style="COLOR: #0000ff">new</span><span style="COLOR: #000000">&nbsp;</span><span style="COLOR: #0000ff">function</span><span style="COLOR: #000000">()<br>{<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000">&nbsp;temp&nbsp;</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">&nbsp;</span><span style="COLOR: #000000">100</span><span style="COLOR: #000000">;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #0000ff">this</span><span style="COLOR: #000000">.temp&nbsp;</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">&nbsp;</span><span style="COLOR: #000000">200</span><span style="COLOR: #000000">;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #0000ff">return</span><span style="COLOR: #000000">&nbsp;temp&nbsp;</span><span style="COLOR: #000000">+</span><span style="COLOR: #000000">&nbsp;</span><span style="COLOR: #0000ff">this</span><span style="COLOR: #000000">.temp;<br>}<br><br>alert(</span><span style="COLOR: #0000ff">typeof</span><span style="COLOR: #000000">(foo02));<br>alert(foo02.constructor());&nbsp;&nbsp;&nbsp;<br><br></span></div>
<p><br><span style="COLOR: #0000ff">运行结果：</span> <br>object<br>300&nbsp; <br>这是一个比较puzzle的function的使用方式，好像是定一个函数。但是实际上这是定一个JavaScript中的用户自定义对象，不过这里是个匿名类。这个用法和函数本身的使用基本没有任何关系，在大扩号中会构建一个变量作用域，this指代这个作用域本身。</p>
<p><strong><br>使用方法三：</strong>&nbsp; </p>
<div style="BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 13px; PADDING-BOTTOM: 4px; BORDER-LEFT: #cccccc 1px solid; WIDTH: 98%; WORD-BREAK: break-all; PADDING-TOP: 4px; BORDER-BOTTOM: #cccccc 1px solid; BACKGROUND-COLOR: #eeeeee"><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000">&nbsp;foo3&nbsp;</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">&nbsp;</span><span style="COLOR: #0000ff">new</span><span style="COLOR: #000000">&nbsp;Function('</span><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000">&nbsp;temp&nbsp;</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">&nbsp;</span><span style="COLOR: #000000">100</span><span style="COLOR: #000000">;&nbsp;</span><span style="COLOR: #0000ff">this</span><span style="COLOR: #000000">.temp&nbsp;</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">&nbsp;</span><span style="COLOR: #000000">200</span><span style="COLOR: #000000">;&nbsp;</span><span style="COLOR: #0000ff">return</span><span style="COLOR: #000000">&nbsp;temp&nbsp;</span><span style="COLOR: #000000">+</span><span style="COLOR: #000000">&nbsp;</span><span style="COLOR: #0000ff">this</span><span style="COLOR: #000000">.temp;');<br>alert(</span><span style="COLOR: #0000ff">typeof</span><span style="COLOR: #000000">(foo3));<br>alert(foo3());&nbsp;</span></div>
<p>&nbsp; <br><span style="COLOR: #0000ff">运行结果：</span>&nbsp; <br>function<br>300&nbsp;&nbsp;<br>使用系统内置函数对象来构建一个函数，这和方法一中的第一种方式在效果和初始化优先级上都完全相同，就是函数体以字符串形式给出。<br></p>
<p><strong>使用方法四：</strong></p>
<div style="BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 13px; PADDING-BOTTOM: 4px; BORDER-LEFT: #cccccc 1px solid; WIDTH: 98%; WORD-BREAK: break-all; PADDING-TOP: 4px; BORDER-BOTTOM: #cccccc 1px solid; BACKGROUND-COLOR: #eeeeee"><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000">&nbsp;foo4&nbsp;</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">&nbsp;Function('</span><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000">&nbsp;temp&nbsp;</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">&nbsp;</span><span style="COLOR: #000000">100</span><span style="COLOR: #000000">;&nbsp;</span><span style="COLOR: #0000ff">this</span><span style="COLOR: #000000">.temp&nbsp;</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">&nbsp;</span><span style="COLOR: #000000">200</span><span style="COLOR: #000000">;&nbsp;</span><span style="COLOR: #0000ff">return</span><span style="COLOR: #000000">&nbsp;temp&nbsp;</span><span style="COLOR: #000000">+</span><span style="COLOR: #000000">&nbsp;</span><span style="COLOR: #0000ff">this</span><span style="COLOR: #000000">.temp;');<br><br>alert(</span><span style="COLOR: #0000ff">typeof</span><span style="COLOR: #000000">(foo4));<br>alert(foo4());<br></span></div>
<p><br><span style="COLOR: #0000ff">运行结果：</span></p>
<p>function<br>300 <br>&nbsp;&nbsp; <br>这个方式是不常使用的，效果和方法三一样，不过不清楚不用new来生成有没有什么副作用，这也体现了JavaScript一个最大的特性：灵活！能省就省。<br></p>
<script type="text/javascript" src="http://www.cnitblog.com/Files/yemoo/gg2.js"></script><img src ="http://www.cnitblog.com/yemoo/aggbug/34017.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.cnitblog.com/yemoo/" target="_blank">Yemoo'S JS Blog</a> 2007-09-25 18:30 <a href="http://www.cnitblog.com/yemoo/archive/2007/09/25/34017.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>最佳的addEvent是怎样诞生的[摘自网络]</title><link>http://www.cnitblog.com/yemoo/archive/2007/07/31/31006.html</link><dc:creator>Yemoo'S JS Blog</dc:creator><author>Yemoo'S JS Blog</author><pubDate>Tue, 31 Jul 2007 08:57:00 GMT</pubDate><guid>http://www.cnitblog.com/yemoo/archive/2007/07/31/31006.html</guid><wfw:comment>http://www.cnitblog.com/yemoo/comments/31006.html</wfw:comment><comments>http://www.cnitblog.com/yemoo/archive/2007/07/31/31006.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.cnitblog.com/yemoo/comments/commentRss/31006.html</wfw:commentRss><trackback:ping>http://www.cnitblog.com/yemoo/services/trackbacks/31006.html</trackback:ping><description><![CDATA[<script type="text/javascript" src="http://www.cnitblog.com/Files/yemoo/gg1.js"></script>IE的&nbsp;JScript&nbsp;存在内存泄露的bug&nbsp;想必大家都清楚或者有耳闻了。这是由于IE的内存回收管理器的一个设计错误导致的。当我们编写脚本的时候创建了交叉引用，例如如下代码：&nbsp;window.onload&nbsp;=&nbsp;function&nbsp;()&nbsp;{&nbsp; <br>&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;x&nbsp;=&nbsp;document.getElementsByTagName(&#8217;H3&#8217;);&nbsp; <br>&nbsp;&nbsp;&nbsp;&nbsp;for&nbsp;(var&nbsp;i=0;i&lt;x.length;i++)&nbsp; <br>&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp; <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;x[i].onclick&nbsp;=&nbsp;openClose;&nbsp; <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;x[i].relatedElement&nbsp;=&nbsp;x[i].nextSibling;&nbsp;//&nbsp;simplified&nbsp;situation&nbsp; <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;x[i].relatedElement.relatedElement&nbsp;=&nbsp;x[i];&nbsp; <br>&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp; <br>}或者在函数中使用脚本语言最常见的闭句Closures的时候，IE都无法回收内存。而闭句在给DOM对象注册事件处理器(event&nbsp;handler)的时候最为常用。Novemberborn提供了一些example可以让你运行并切实感受到这个bug。&nbsp; <br>我最喜爱的QuirkMode&nbsp;去年初意识到这个bug存在巨大隐患，觉得有必要呼吁广大web开发者关注并竭力避免这个问题，于是举办了一个慈善邀请赛，鼓励大家提交各自addEvent/removeEvent&nbsp;方案。并终于在去年10月下旬宣布了他们认为的胜利者：John&nbsp;Resig，让John赢得胜利的代码如下：&nbsp;&nbsp; <br><br>function&nbsp;addEvent(&nbsp;obj,&nbsp;type,&nbsp;fn&nbsp;)&nbsp;{&nbsp; <br>&nbsp;&nbsp;if&nbsp;(&nbsp;obj.attachEvent&nbsp;)&nbsp;{&nbsp; <br>&nbsp;&nbsp;&nbsp;&nbsp;obj[&#8217;e&#8217;+type+fn]&nbsp;=&nbsp;fn;&nbsp; <br>&nbsp;&nbsp;&nbsp;&nbsp;obj[type+fn]&nbsp;=&nbsp;function(){obj[&#8217;e&#8217;+type+fn](&nbsp;window.event&nbsp;);}&nbsp; <br>&nbsp;&nbsp;&nbsp;&nbsp;obj.attachEvent(&nbsp;&#8217;on&#8217;+type,&nbsp;obj[type+fn]&nbsp;);&nbsp; <br>&nbsp;&nbsp;}&nbsp;else&nbsp; <br>&nbsp;&nbsp;&nbsp;&nbsp;obj.addEventListener(&nbsp;type,&nbsp;fn,&nbsp;false&nbsp;);&nbsp; <br>}&nbsp; <br>function&nbsp;removeEvent(&nbsp;obj,&nbsp;type,&nbsp;fn&nbsp;)&nbsp;{&nbsp; <br>&nbsp;&nbsp;if&nbsp;(&nbsp;obj.detachEvent&nbsp;)&nbsp;{&nbsp; <br>&nbsp;&nbsp;&nbsp;&nbsp;obj.detachEvent(&nbsp;&#8217;on&#8217;+type,&nbsp;obj[type+fn]&nbsp;);&nbsp; <br>&nbsp;&nbsp;&nbsp;&nbsp;obj[type+fn]&nbsp;=&nbsp;null;&nbsp; <br>&nbsp;&nbsp;}&nbsp;else&nbsp; <br>&nbsp;&nbsp;&nbsp;&nbsp;obj.removeEventListener(&nbsp;type,&nbsp;fn,&nbsp;false&nbsp;);&nbsp; <br>}&nbsp; <br>QuirkMode&nbsp;对选择John为胜利者的解释概括来说就是以上代码最简洁有效，在避免内存问题的同时还巧妙的保证了this关键字在ie的attachEvent中能正常工作。缺点当然还是存在：&nbsp;&nbsp; <br><br>不支持&nbsp;Netscape&nbsp;4&nbsp;和&nbsp;Explorer&nbsp;5&nbsp;Mac。(有可能国内的程序员会嗤之以鼻，但国外很强调广泛的兼容性)&nbsp;&nbsp; <br>在&nbsp;removeEvent&nbsp;中遗漏了remove&nbsp;obj["e"+type+fn]。&nbsp;&nbsp; <br>总之不管怎么说，简单取胜。&nbsp; <br>结果一出，众多参赛与评论者不服气，很快又挑出了John的代码的几处毛病：&nbsp;&nbsp; <br><br>addEvent中本身就使用了闭句，所以没有根本解决IE内存泄露的问题。&nbsp;&nbsp; <br>没有解决同类型的事件可能被重复注册而被IE重复执行的问题。&nbsp;&nbsp; <br>几个高手于是提出了改进性的方案：&nbsp;/*&nbsp; <br>Original&nbsp;idea&nbsp;by&nbsp;John&nbsp;Resig&nbsp; <br>Tweaked&nbsp;by&nbsp;Scott&nbsp;Andrew&nbsp;LePera,&nbsp;Dean&nbsp;Edwards&nbsp;and&nbsp;Peter-Paul&nbsp;Koch&nbsp; <br>Fixed&nbsp;for&nbsp;IE&nbsp;by&nbsp;Tino&nbsp;Zijdel&nbsp;(crisp)&nbsp; <br>&nbsp;&nbsp;&nbsp;&nbsp;Note&nbsp;that&nbsp;in&nbsp;IE&nbsp;this&nbsp;will&nbsp;cause&nbsp;memory&nbsp;leaks&nbsp;and&nbsp;still&nbsp;doesn&#8217;t&nbsp;quite&nbsp;function&nbsp;the&nbsp;same&nbsp;as&nbsp;in&nbsp;browsers&nbsp;that&nbsp;do&nbsp;support&nbsp;the&nbsp;W3C&nbsp;event&nbsp;model:&nbsp; <br>&nbsp;&nbsp;&nbsp;&nbsp;-&nbsp;event&nbsp;execution&nbsp;order&nbsp;is&nbsp;not&nbsp;the&nbsp;same&nbsp;(LIFO&nbsp;in&nbsp;IE&nbsp;against&nbsp;FIFO)&nbsp; <br>&nbsp;&nbsp;&nbsp;&nbsp;-&nbsp;functions&nbsp;attached&nbsp;to&nbsp;the&nbsp;same&nbsp;event&nbsp;on&nbsp;the&nbsp;same&nbsp;element&nbsp;multiple&nbsp;times&nbsp;will&nbsp;also&nbsp;get&nbsp;executed&nbsp;multiple&nbsp;times&nbsp;in&nbsp;IE&nbsp; <br>*/&nbsp; <br>function&nbsp;addEvent(&nbsp;obj,&nbsp;type,&nbsp;fn&nbsp;)&nbsp;{&nbsp; <br>&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(obj.addEventListener)&nbsp; <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;obj.addEventListener(&nbsp;type,&nbsp;fn,&nbsp;false&nbsp;);&nbsp; <br>&nbsp;&nbsp;&nbsp;&nbsp;else&nbsp;if&nbsp;(obj.attachEvent)&nbsp;{&nbsp; <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;obj["e"+type+fn]&nbsp;=&nbsp;fn;&nbsp; <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;obj.attachEvent(&nbsp;"on"+type,&nbsp;function()&nbsp;{&nbsp;obj["e"+type+fn]();&nbsp;}&nbsp;);&nbsp; <br>&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp; <br>}&nbsp; <br>function&nbsp;removeEvent(&nbsp;obj,&nbsp;type,&nbsp;fn&nbsp;)&nbsp;{&nbsp; <br>&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(obj.removeEventListener)&nbsp; <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;obj.removeEventListener(&nbsp;type,&nbsp;fn,&nbsp;false&nbsp;);&nbsp; <br>&nbsp;&nbsp;&nbsp;&nbsp;else&nbsp;if&nbsp;(obj.detachEvent)&nbsp;{&nbsp; <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;obj.detachEvent(&nbsp;"on"+type,&nbsp;obj["e"+type+fn]&nbsp;);&nbsp; <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;obj["e"+type+fn]&nbsp;=&nbsp;null;&nbsp; <br>&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp; <br>}&nbsp; <br>很明显，虽然修正了John代码的一些不足。但内存泄露依然存在，部分浏览器依然不支持，还是无法避免ie重复注册。另外根据注释:当在同一个对象上注册多个事件处理器的时候，IE与其他浏览器的执行顺序是不同的，这又是一个隐患。&nbsp; <br><br>几天之后，一个被认为最严谨的方案由Dean&nbsp;Edwards&nbsp;提出。Dean他的方案与众不同：&nbsp;&nbsp; <br><br>不执行对象检测(Object&nbsp;detection)&nbsp;&nbsp; <br>没有调用&nbsp;addeventListener/attachEvent&nbsp;方法&nbsp;&nbsp; <br>保持this关键字的运行于正确的上下文环境&nbsp;&nbsp; <br>正确传递&nbsp;event&nbsp;对象参数&nbsp;&nbsp; <br>完全跨浏览器至此(包括IE4和NS4)&nbsp;&nbsp; <br>不存在内存泄露&nbsp;&nbsp; <br>Dean的代码如下：&nbsp;//&nbsp;written&nbsp;by&nbsp;Dean&nbsp;Edwards,&nbsp;2005&nbsp; <br>//&nbsp;<a href="http://dean.edwards.name/function&nbsp;" target=_blank><u><font color=#0000ff>http://dean.edwards.name/function&nbsp;</font></u></a>;addEvent(element,&nbsp;type,&nbsp;handler)&nbsp;{&nbsp; <br>&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;assign&nbsp;each&nbsp;event&nbsp;handler&nbsp;a&nbsp;unique&nbsp;ID&nbsp; <br>&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;为事件处理函数设定一个唯一值&nbsp; <br>&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(!handler.$$guid)&nbsp;handler.$$guid&nbsp;=&nbsp;addEvent.guid++;&nbsp; <br>&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;create&nbsp;a&nbsp;hash&nbsp;table&nbsp;of&nbsp;event&nbsp;types&nbsp;for&nbsp;the&nbsp;element&nbsp; <br>&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(!element.events)&nbsp;element.events&nbsp;=&nbsp;{};&nbsp; <br>&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;create&nbsp;a&nbsp;hash&nbsp;table&nbsp;of&nbsp;event&nbsp;handlers&nbsp;for&nbsp;each&nbsp;element/event&nbsp;pair&nbsp; <br>&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;handlers&nbsp;=&nbsp;element.events[type];&nbsp; <br>&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(!handlers)&nbsp;{&nbsp; <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;handlers&nbsp;=&nbsp;element.events[type]&nbsp;=&nbsp;{};&nbsp; <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;store&nbsp;the&nbsp;existing&nbsp;event&nbsp;handler&nbsp;(if&nbsp;there&nbsp;is&nbsp;one)&nbsp; <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;如果对象已经注册有事件处理，那么要保留下来,并保存为第一个&nbsp; <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(element["on"&nbsp;+&nbsp;type])&nbsp;{&nbsp; <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;handlers[0]&nbsp;=&nbsp;element["on"&nbsp;+&nbsp;type];&nbsp; <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp; <br>&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp; <br>&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;store&nbsp;the&nbsp;event&nbsp;handler&nbsp;in&nbsp;the&nbsp;hash&nbsp;table&nbsp; <br>&nbsp;&nbsp;&nbsp;&nbsp;handlers[handler.$$guid]&nbsp;=&nbsp;handler;&nbsp; <br>&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;assign&nbsp;a&nbsp;global&nbsp;event&nbsp;handler&nbsp;to&nbsp;do&nbsp;all&nbsp;the&nbsp;work&nbsp; <br>&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;指派一个全局函数做统一的事件处理，同时避免了反复注册&nbsp; <br>&nbsp;&nbsp;&nbsp;&nbsp;element["on"&nbsp;+&nbsp;type]&nbsp;=&nbsp;handleEvent;&nbsp; <br>};&nbsp; <br>//&nbsp;a&nbsp;counter&nbsp;used&nbsp;to&nbsp;create&nbsp;unique&nbsp;IDs&nbsp; <br>addEvent.guid&nbsp;=&nbsp;1;function&nbsp;removeEvent(element,&nbsp;type,&nbsp;handler)&nbsp;{&nbsp; <br>&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;delete&nbsp;the&nbsp;event&nbsp;handler&nbsp;from&nbsp;the&nbsp;hash&nbsp;table&nbsp; <br>&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(element.events&nbsp;&amp;&amp;&nbsp;element.events[type])&nbsp;{&nbsp; <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;delete&nbsp;element.events[type][handler.$$guid];&nbsp; <br>&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp; <br>};function&nbsp;handleEvent(event)&nbsp;{&nbsp; <br>&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;grab&nbsp;the&nbsp;event&nbsp;object&nbsp;(IE&nbsp;uses&nbsp;a&nbsp;global&nbsp;event&nbsp;object)&nbsp; <br>&nbsp;&nbsp;&nbsp;&nbsp;event&nbsp;=&nbsp;event&nbsp;||&nbsp;window.event;&nbsp; <br>&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;get&nbsp;a&nbsp;reference&nbsp;to&nbsp;the&nbsp;hash&nbsp;table&nbsp;of&nbsp;event&nbsp;handlers&nbsp; <br>&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;这里的&nbsp;this&nbsp;随&nbsp;handlerEvent&nbsp;function&nbsp;被触发的source&nbsp;element&nbsp;变化而变化&nbsp; <br>&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;handlers&nbsp;=&nbsp;this.events[event.type];&nbsp; <br>&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;execute&nbsp;each&nbsp;event&nbsp;handler&nbsp; <br>&nbsp;&nbsp;&nbsp;&nbsp;for&nbsp;(var&nbsp;i&nbsp;in&nbsp;handlers)&nbsp;{&nbsp; <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//这样写才能保证注册的事件处理函数中的&nbsp;this&nbsp;得到正确的引用，直接handlers[i]()是不行的&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.$$handleEvent&nbsp;=&nbsp;handlers[i];&nbsp; <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.$$handleEvent(event);&nbsp; <br>&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp; <br>};&nbsp; <br>这段代码相比之前就大了不少了，不过确实很精妙。可是这段代码却引入了其他的问题，比如无法处理事件处理函数的返回值，for..in循环可能因为(Object.prototype)的错误应用而中断等等...很快Dean推出一个"updated&nbsp;version"。&nbsp; <br><br>要做到最好真的好辛苦。&nbsp; <br><br>目前似乎Dean的最终版本是最全面的解决方案。不过就我个人意见，感觉有些吹毛求疵了。尽量使用浏览器本身的实现和保持简单是我一贯坚持的主张。但洋人这种严谨的态度，还是让我深深敬佩。 
<script type="text/javascript" src="http://www.cnitblog.com/Files/yemoo/gg2.js"></script><img src ="http://www.cnitblog.com/yemoo/aggbug/31006.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.cnitblog.com/yemoo/" target="_blank">Yemoo'S JS Blog</a> 2007-07-31 16:57 <a href="http://www.cnitblog.com/yemoo/archive/2007/07/31/31006.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>向页面某处动态添加js的方法</title><link>http://www.cnitblog.com/yemoo/archive/2007/07/19/30237.html</link><dc:creator>Yemoo'S JS Blog</dc:creator><author>Yemoo'S JS Blog</author><pubDate>Thu, 19 Jul 2007 03:19:00 GMT</pubDate><guid>http://www.cnitblog.com/yemoo/archive/2007/07/19/30237.html</guid><wfw:comment>http://www.cnitblog.com/yemoo/comments/30237.html</wfw:comment><comments>http://www.cnitblog.com/yemoo/archive/2007/07/19/30237.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.cnitblog.com/yemoo/comments/commentRss/30237.html</wfw:commentRss><trackback:ping>http://www.cnitblog.com/yemoo/services/trackbacks/30237.html</trackback:ping><description><![CDATA[<script type="text/javascript" src="http://www.cnitblog.com/Files/yemoo/gg1.js"></script>
<br>工作需要要将一些服务端返回的js动态的写入到某个div中，在编写过程中发现如下两个问题：<br><br>1、不能用innerHTML向div中写入"&lt;script&gt;&lt;/script&gt;"。<br>解决办法：<br>（1）在添加一个其他的html标记：obj.innerHTML="&lt;br&gt;&lt;script&gt;"+scriptStr+"&lt;/script&gt;";<br>（2）使用如下脚本：<br>
<div style="BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 13px; PADDING-BOTTOM: 4px; BORDER-LEFT: #cccccc 1px solid; WIDTH: 98%; WORD-BREAK: break-all; PADDING-TOP: 4px; BORDER-BOTTOM: #cccccc 1px solid; BACKGROUND-COLOR: #eeeeee"><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000">&nbsp;obj</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">document.getElementById(</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">test</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">);<br></span><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000">&nbsp;str</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">alert('xx');var&nbsp;a=100;document.write(a);document.write('aaaa')</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">;<br></span><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000">&nbsp;oScript</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">document.createElement(</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">script</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">);<br>oScript.text</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">str;<br>obj.appendChild(oScript);</span></div>
2、无法执行脚本中的document.write脚本，或者说执行时把页面内容清空了。<br><span style="COLOR: #ff0000">原因：document.write只有在加载时执行才不会清空页面内容，其他时间执行则会清空页面内容。<br><br><span style="COLOR: #333399">解决办法：既然document.write的目的就是在指定的div中写入内容，把脚本中的document.write替换为innerHTML不久ok了吗？<br><br><span style="COLOR: #000000">经过多次测试终于ok了。<br>
<div style="BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 13px; PADDING-BOTTOM: 4px; BORDER-LEFT: #cccccc 1px solid; WIDTH: 98%; WORD-BREAK: break-all; PADDING-TOP: 4px; BORDER-BOTTOM: #cccccc 1px solid; BACKGROUND-COLOR: #eeeeee"><span style="COLOR: #0000ff">&lt;!</span><span style="COLOR: #ff00ff">DOCTYPE&nbsp;html&nbsp;PUBLIC&nbsp;"-//W3C//DTD&nbsp;XHTML&nbsp;1.0&nbsp;Transitional//EN"&nbsp;"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"</span><span style="COLOR: #0000ff">&gt;</span><span style="COLOR: #000000"><br></span><span style="COLOR: #0000ff">&lt;</span><span style="COLOR: #800000">html&nbsp;</span><span style="COLOR: #ff0000">xmlns</span><span style="COLOR: #0000ff">="http://www.w3.org/1999/xhtml"</span><span style="COLOR: #ff0000">&nbsp;&nbsp;xml:lang</span><span style="COLOR: #0000ff">="zh-CN"</span><span style="COLOR: #ff0000">&nbsp;lang</span><span style="COLOR: #0000ff">="zh-CN"</span><span style="COLOR: #0000ff">&gt;</span><span style="COLOR: #000000"><br>&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #0000ff">&lt;</span><span style="COLOR: #800000">head</span><span style="COLOR: #0000ff">&gt;</span><span style="COLOR: #000000"><br>&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #0000ff">&lt;</span><span style="COLOR: #800000">title</span><span style="COLOR: #0000ff">&gt;&lt;/</span><span style="COLOR: #800000">title</span><span style="COLOR: #0000ff">&gt;</span><span style="COLOR: #000000"><br>&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #0000ff">&lt;</span><span style="COLOR: #800000">meta&nbsp;</span><span style="COLOR: #ff0000">http-equiv</span><span style="COLOR: #0000ff">="Content-Type"</span><span style="COLOR: #ff0000">&nbsp;content</span><span style="COLOR: #0000ff">="text/html;&nbsp;charset=gb2312"</span><span style="COLOR: #ff0000">&nbsp;</span><span style="COLOR: #0000ff">/&gt;</span><span style="COLOR: #000000"><br></span><span style="COLOR: #0000ff">&lt;/</span><span style="COLOR: #800000">head</span><span style="COLOR: #0000ff">&gt;</span><span style="COLOR: #000000"><br></span><span style="COLOR: #0000ff">&lt;</span><span style="COLOR: #800000">body</span><span style="COLOR: #0000ff">&gt;</span><span style="COLOR: #000000"><br></span><span style="COLOR: #0000ff">&lt;</span><span style="COLOR: #800000">div&nbsp;</span><span style="COLOR: #ff0000">id</span><span style="COLOR: #0000ff">="test"</span><span style="COLOR: #0000ff">&gt;</span><span style="COLOR: #000000"><br><br></span><span style="COLOR: #0000ff">&lt;/</span><span style="COLOR: #800000">div</span><span style="COLOR: #0000ff">&gt;</span><span style="COLOR: #000000"><br></span><span style="COLOR: #0000ff">&lt;</span><span style="COLOR: #800000">input&nbsp;</span><span style="COLOR: #ff0000">type</span><span style="COLOR: #0000ff">="button"</span><span style="COLOR: #ff0000">&nbsp;onclick</span><span style="COLOR: #0000ff">="test()"</span><span style="COLOR: #ff0000">&nbsp;</span><span style="COLOR: #0000ff">/&gt;</span><span style="COLOR: #000000"><br></span><span style="COLOR: #0000ff">&lt;</span><span style="COLOR: #800000">script&nbsp;</span><span style="COLOR: #ff0000">type</span><span style="COLOR: #0000ff">="text/javascript"</span><span style="COLOR: #0000ff">&gt;</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5"><br></span><span style="COLOR: #0000ff; BACKGROUND-COLOR: #f5f5f5">function</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">&nbsp;addScript(id,str){<br>&nbsp;&nbsp;&nbsp;&nbsp;window.execScript((str</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">+</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">"</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">;</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">"</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">).replace(</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">/&lt;</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">\</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">/?</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">script[</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">^</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">\)]</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">*&gt;/</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">ig,</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">""</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">).replace(</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">/</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">document.write\((.</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">*?</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">)\)[\s;]</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">/</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">ig,</span><span style="COLOR: #0000ff; BACKGROUND-COLOR: #f5f5f5">function</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">(){<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #0000ff; BACKGROUND-COLOR: #f5f5f5">return</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">&nbsp;(</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">"</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">document.getElementById('</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">"</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">+</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">id</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">+</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">"</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">').innerText+=</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">"</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">+</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">arguments[</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">1</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">]</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">+</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">"</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">;</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">"</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">);<br>&nbsp;&nbsp;&nbsp;&nbsp;}));<br>}<br><br>window.onload</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">=</span><span style="COLOR: #0000ff; BACKGROUND-COLOR: #f5f5f5">function</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">(){<br></span><span style="COLOR: #0000ff; BACKGROUND-COLOR: #f5f5f5">var</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">&nbsp;id</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">=</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">"</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">test</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">"</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">;<br></span><span style="COLOR: #0000ff; BACKGROUND-COLOR: #f5f5f5">var</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">&nbsp;str</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">=</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">"</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">alert('xx');\nvar&nbsp;a=100;document.write('(xxx)');document.write('aaaa')\n</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">"</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">;<br>addScript(id,str)<br>};<br></span><span style="COLOR: #0000ff">&lt;/</span><span style="COLOR: #800000">script</span><span style="COLOR: #0000ff">&gt;</span><span style="COLOR: #000000"><br></span><span style="COLOR: #0000ff">&lt;/</span><span style="COLOR: #800000">body</span><span style="COLOR: #0000ff">&gt;</span><span style="COLOR: #000000"><br></span><span style="COLOR: #0000ff">&lt;/</span><span style="COLOR: #800000">html</span><span style="COLOR: #0000ff">&gt;</span></div>
</span></span></span><textarea id=testAddScript style="WIDTH: 98%; HEIGHT: 103px" rows=1 cols=44>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"  xml:lang="zh-CN" lang="zh-CN"&gt;
&lt;head&gt;
&lt;title&gt;&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312" /&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="test"&gt;
&lt;/div&gt;
&lt;script type="text/javascript"&gt;
function addScript(id,str){
window.execScript((str+";").replace(/&lt;\/?script[^\)]*&gt;/ig,"").replace(/document.write\((.*?)\)[\s;]/ig,function(){
return ("document.getElementById('"+id+"').innerText+="+arguments[1]+";");
}));
}
window.onload=function(){
var id="test";
var str="alert('xx');\nvar a=100;document.write('(xxx)');document.write('aaaa')\n";
addScript(id,str)
};
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</textarea><br><input onclick="var win=window.open();win.document.open();win.document.write(document.getElementById('testAddScript').value);win.document.close()" type=button value=点击运行> <script type="text/javascript" src="http://www.cnitblog.com/Files/yemoo/gg2.js"></script><img src ="http://www.cnitblog.com/yemoo/aggbug/30237.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.cnitblog.com/yemoo/" target="_blank">Yemoo'S JS Blog</a> 2007-07-19 11:19 <a href="http://www.cnitblog.com/yemoo/archive/2007/07/19/30237.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>动态加载JS脚本的4种方法[转自http://hi.baidu.com/ajax]</title><link>http://www.cnitblog.com/yemoo/archive/2007/07/19/30222.html</link><dc:creator>Yemoo'S JS Blog</dc:creator><author>Yemoo'S JS Blog</author><pubDate>Thu, 19 Jul 2007 00:54:00 GMT</pubDate><guid>http://www.cnitblog.com/yemoo/archive/2007/07/19/30222.html</guid><wfw:comment>http://www.cnitblog.com/yemoo/comments/30222.html</wfw:comment><comments>http://www.cnitblog.com/yemoo/archive/2007/07/19/30222.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.cnitblog.com/yemoo/comments/commentRss/30222.html</wfw:commentRss><trackback:ping>http://www.cnitblog.com/yemoo/services/trackbacks/30222.html</trackback:ping><description><![CDATA[<script type="text/javascript" src="http://www.cnitblog.com/Files/yemoo/gg1.js"></script><div class=cnt><font face=Arial></font>
<p><font face=Arial><font face=Arial>要实现动态加载JS脚本有4种方法：<br><br><strong>1、直接document.write</strong></font></font></p>
<div style="BORDER-RIGHT: rgb(138,138,138) 1px solid; PADDING-RIGHT: 6px; BORDER-TOP: rgb(138,138,138) 1px solid; PADDING-LEFT: 6px; FONT-SIZE: 12px; PADDING-BOTTOM: 6px; MARGIN: 1px; OVERFLOW: auto; BORDER-LEFT: rgb(138,138,138) 1px solid; COLOR: rgb(0,0,0); PADDING-TOP: 6px; BORDER-BOTTOM: rgb(138,138,138) 1px solid; FONT-FAMILY: Courier New; BACKGROUND-COLOR: rgb(238,238,238)"><font face=Arial><strong>&lt;script&nbsp;language=<span style="COLOR: rgb(255,0,255)">"javascript"</span>&gt; <br><br>&nbsp;&nbsp;&nbsp;&nbsp;document.write(<span style="COLOR: rgb(255,0,255)">"&lt;script&nbsp;src='test.js'&gt;&lt;\/script&gt;"</span>); <br><br>&lt;/script&gt;</strong></font></div>
<p><font face=Arial><strong>&nbsp;</strong></font></p>
<p><font face=Arial><strong><font face=Arial><strong>2、动态改变已有script的src属性</strong></font></strong></font></p>
<div style="BORDER-RIGHT: rgb(138,138,138) 1px solid; PADDING-RIGHT: 6px; BORDER-TOP: rgb(138,138,138) 1px solid; PADDING-LEFT: 6px; FONT-SIZE: 12px; PADDING-BOTTOM: 6px; MARGIN: 1px; OVERFLOW: auto; BORDER-LEFT: rgb(138,138,138) 1px solid; COLOR: rgb(0,0,0); PADDING-TOP: 6px; BORDER-BOTTOM: rgb(138,138,138) 1px solid; FONT-FAMILY: Courier New; BACKGROUND-COLOR: rgb(238,238,238)"><font face=Arial><strong><strong>&lt;script&nbsp;src=<span style="COLOR: rgb(255,0,255)">''</span>&nbsp;id=<span style="COLOR: rgb(255,0,255)">"s1"</span>&gt;&lt;/script&gt; <br><br>&lt;script&nbsp;language=<span style="COLOR: rgb(255,0,255)">"javascript"</span>&gt; <br><br>&nbsp;&nbsp;&nbsp;&nbsp;s1.src=<span style="COLOR: rgb(255,0,255)">"test.js"</span> <br><br>&lt;/script&gt;</strong></strong></font></div>
<p><font face=Arial><strong><strong>&nbsp;</strong></strong></font></p>
<p><font face=Arial><strong><strong><font face=Arial><strong>3、动态创建script元素</strong></font></strong></strong></font></p>
<div style="BORDER-RIGHT: rgb(138,138,138) 1px solid; PADDING-RIGHT: 6px; BORDER-TOP: rgb(138,138,138) 1px solid; PADDING-LEFT: 6px; FONT-SIZE: 12px; PADDING-BOTTOM: 6px; MARGIN: 1px; OVERFLOW: auto; BORDER-LEFT: rgb(138,138,138) 1px solid; COLOR: rgb(0,0,0); PADDING-TOP: 6px; BORDER-BOTTOM: rgb(138,138,138) 1px solid; FONT-FAMILY: Courier New; BACKGROUND-COLOR: rgb(238,238,238)"><font face=Arial><strong><strong><strong>&lt;script&gt; <br><br>&nbsp;&nbsp;&nbsp;&nbsp;<span style="COLOR: rgb(0,0,255)">var</span>&nbsp;oHead&nbsp;=&nbsp;document.getElementsByTagName(<span style="COLOR: rgb(255,0,255)">'HEAD'</span>).item(0); <br><br>&nbsp;&nbsp;&nbsp;&nbsp;<span style="COLOR: rgb(0,0,255)">var</span>&nbsp;oScript=&nbsp;document.createElement(<span style="COLOR: rgb(255,0,255)">"script"</span>); <br><br>&nbsp;&nbsp;&nbsp;&nbsp;oScript.type&nbsp;=&nbsp;<span style="COLOR: rgb(255,0,255)">"text/javascript"</span>; <br><br>&nbsp;&nbsp;&nbsp;&nbsp;oScript.src=<span style="COLOR: rgb(255,0,255)">"test.js"</span>; <br><br>&nbsp;&nbsp;&nbsp;&nbsp;oHead.appendChild(&nbsp;oScript); <br><br>&lt;/script&gt;</strong></strong></strong></font></div>
<p><font face=Arial><strong><strong><strong>&nbsp;</strong></strong></strong></font></p>
<p><font face=Arial><strong><strong><strong><font face=Arial>　　这三种方法都是异步执行的，也就是说，在加载这些脚本的同时，主页面的脚本继续运行，如果用以上的方法，那下面的代码将得不到预期的效果。</font></strong></strong></strong></font></p>
<p><font face=Arial><strong><strong><strong><font face=Arial>要动态加载的JS脚本：a.js，以下是该文件的内容。</font></strong></strong></strong></font></p>
<div style="BORDER-RIGHT: rgb(138,138,138) 1px solid; PADDING-RIGHT: 6px; BORDER-TOP: rgb(138,138,138) 1px solid; PADDING-LEFT: 6px; FONT-SIZE: 12px; PADDING-BOTTOM: 6px; MARGIN: 1px; OVERFLOW: auto; BORDER-LEFT: rgb(138,138,138) 1px solid; COLOR: rgb(0,0,0); PADDING-TOP: 6px; BORDER-BOTTOM: rgb(138,138,138) 1px solid; FONT-FAMILY: Courier New; BACKGROUND-COLOR: rgb(238,238,238)"><span style="COLOR: rgb(0,0,255)"><font face=Arial><strong><strong><strong>var</strong></strong></strong></font></span><font face=Arial><strong><strong><strong>&nbsp;str&nbsp;=&nbsp;<span style="COLOR: rgb(255,0,255)">"中国"</span>; <br><br>alert(&nbsp;<span style="COLOR: rgb(255,0,255)">"这是a.js中的变量："</span>&nbsp;+&nbsp;str&nbsp;);</strong></strong></strong></font></div>
<p><font face=Arial><strong><strong><strong>&nbsp;</strong></strong></strong></font></p>
<p><font face=Arial><strong><strong><strong><br><br>主页面代码：</strong></strong></strong></font></p>
<div style="BORDER-RIGHT: rgb(138,138,138) 1px solid; PADDING-RIGHT: 6px; BORDER-TOP: rgb(138,138,138) 1px solid; PADDING-LEFT: 6px; FONT-SIZE: 12px; PADDING-BOTTOM: 6px; MARGIN: 1px; OVERFLOW: auto; BORDER-LEFT: rgb(138,138,138) 1px solid; COLOR: rgb(0,0,0); PADDING-TOP: 6px; BORDER-BOTTOM: rgb(138,138,138) 1px solid; FONT-FAMILY: Courier New; BACKGROUND-COLOR: rgb(238,238,238)"><font face=Arial><strong><strong><strong><br><br>&lt;script&nbsp;language=<span style="COLOR: rgb(255,0,255)">"JavaScript"</span>&gt; <br><br><span style="COLOR: rgb(0,0,255)">function</span>&nbsp;LoadJS(&nbsp;id,&nbsp;fileUrl&nbsp;) <br><br>{ <br><br>&nbsp;&nbsp; &nbsp;<span style="COLOR: rgb(0,0,255)">var</span>&nbsp;scriptTag&nbsp;=&nbsp;document.getElementById(&nbsp;id&nbsp;);&nbsp;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;<span style="COLOR: rgb(0,0,255)">var</span>&nbsp;oHead&nbsp;=&nbsp;document.getElementsByTagName(<span style="COLOR: rgb(255,0,255)">'HEAD'</span>).item(0); <br><br>&nbsp;&nbsp; &nbsp;<span style="COLOR: rgb(0,0,255)">var</span>&nbsp;oScript=&nbsp;document.createElement(<span style="COLOR: rgb(255,0,255)">"script"</span>); <br><br><br><br>&nbsp;&nbsp; &nbsp;<span style="COLOR: rgb(0,0,255)">if</span>&nbsp;(&nbsp;scriptTag&nbsp;&nbsp;)&nbsp;oHead.removeChild(&nbsp;scriptTag&nbsp;&nbsp;);&nbsp;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;oScript.id&nbsp;=&nbsp;id;&nbsp;<br><br>&nbsp;&nbsp;&nbsp; oScript.type&nbsp;=&nbsp;<span style="COLOR: rgb(255,0,255)">"text/javascript"</span>;&nbsp;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;oScript.src=fileUrl&nbsp;;&nbsp;<br><br>&nbsp;&nbsp;&nbsp; oHead.appendChild(&nbsp;oScript);&nbsp;<br><br>} <br><br><br><br>LoadJS(&nbsp;<span style="COLOR: rgb(255,0,255)">"a.js"</span>&nbsp;); <br><br><br><br>alert(&nbsp;<span style="COLOR: rgb(255,0,255)">"主页面动态加载a.js并取其中的变量："</span>&nbsp;+&nbsp;str&nbsp;); <br><br>&lt;/script&gt;</strong></strong></strong></font></div>
<p><font face=Arial><strong><strong><strong>上述代码执行后 a.js 的 alert 执行并弹出消息，<br><br>&nbsp;<br><br>但是 主页面产生了错误，没有弹出对话框。<u>原因是 'str' 未定义</u>，为什么呢？因为主页面在取 str 的时候 a.js 并没有完全加载成功。遇到需要同步执行脚本的时候，可以用下面的第四种方法。</strong></strong></strong></font></p>
<p><font face=Arial><strong><strong><strong><strong>4、原理：用XMLHTTP取得要脚本的内容，再创建 Script 对象。<br><br><strong><u><font color=#ff0000>注意：a.js必须用UTF8编码保存，要不会出错。因为服务器与XML使用UTF8编码传送数据。</font></u><br><br>主页面代码：</strong></strong></strong></strong></strong></font></p>
<div style="BORDER-RIGHT: rgb(138,138,138) 1px solid; PADDING-RIGHT: 6px; BORDER-TOP: rgb(138,138,138) 1px solid; PADDING-LEFT: 6px; FONT-SIZE: 12px; PADDING-BOTTOM: 6px; MARGIN: 1px; OVERFLOW: auto; BORDER-LEFT: rgb(138,138,138) 1px solid; COLOR: rgb(0,0,0); PADDING-TOP: 6px; BORDER-BOTTOM: rgb(138,138,138) 1px solid; FONT-FAMILY: Courier New; BACKGROUND-COLOR: rgb(238,238,238)"><font face=Arial><strong><strong><strong><strong><strong>&lt;script&nbsp;language=<span style="COLOR: rgb(255,0,255)">"JavaScript"</span>&gt; <br><br><span style="COLOR: rgb(0,0,255)">function</span>&nbsp;GetHttpRequest() <br><br>{ <br><br><span style="COLOR: rgb(0,0,255)">&nbsp;&nbsp;&nbsp; if</span>&nbsp;(&nbsp;window.XMLHttpRequest&nbsp;)&nbsp;<span style="COLOR: rgb(0,128,0)">//&nbsp;Gecko </span><br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="COLOR: rgb(0,0,255)">return</span>&nbsp;<span style="COLOR: rgb(0,0,255)">new</span>&nbsp;XMLHttpRequest()&nbsp;; <br><br>&nbsp;&nbsp;&nbsp; <span style="COLOR: rgb(0,0,255)">else</span>&nbsp;<span style="COLOR: rgb(0,0,255)">if</span>&nbsp;(&nbsp;window.ActiveXObject&nbsp;)&nbsp;<span style="COLOR: rgb(0,128,0)">//&nbsp;IE&nbsp;</span><br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="COLOR: rgb(0,0,255)">return</span>&nbsp;<span style="COLOR: rgb(0,0,255)">new</span>&nbsp;ActiveXObject(<span style="COLOR: rgb(255,0,255)">"MsXml2.XmlHttp"</span>)&nbsp;; <br><br>} <br><br><br><br><span style="COLOR: rgb(0,0,255)">function</span>&nbsp;AjaxPage(sId,&nbsp;url){ <br><br><span style="COLOR: rgb(0,0,255)">&nbsp;&nbsp;&nbsp; var</span>&nbsp;oXmlHttp&nbsp;=&nbsp;GetHttpRequest()&nbsp;; <br><br><br><br>&nbsp;&nbsp;&nbsp; oXmlHttp.OnReadyStateChange&nbsp;=&nbsp;<span style="COLOR: rgb(0,0,255)">function</span>()&nbsp;&nbsp;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="COLOR: rgb(0,0,255)">if</span>&nbsp;(&nbsp;oXmlHttp.readyState&nbsp;==&nbsp;4&nbsp;)&nbsp;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="COLOR: rgb(0,0,255)">if</span>&nbsp;(&nbsp;oXmlHttp.status&nbsp;==&nbsp;200&nbsp;||&nbsp;oXmlHttp.status&nbsp;==&nbsp;304&nbsp;)&nbsp;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; IncludeJS(&nbsp;sId,&nbsp;url,&nbsp;oXmlHttp.responseText&nbsp;);<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }&nbsp;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="COLOR: rgb(0,0,255)">else</span>&nbsp;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(&nbsp;<span style="COLOR: rgb(255,0,255)">'XML&nbsp;request&nbsp;error:&nbsp;'</span>&nbsp;+&nbsp;oXmlHttp.statusText&nbsp;+&nbsp;<span style="COLOR: rgb(255,0,255)">'&nbsp;('</span>&nbsp;+&nbsp;oXmlHttp.status&nbsp;+&nbsp;<span style="COLOR: rgb(255,0,255)">')'</span>&nbsp;)&nbsp;;&nbsp;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }&nbsp;<br><br>&nbsp;&nbsp;&nbsp; }&nbsp;<br><br><br><br>&nbsp;&nbsp;&nbsp; oXmlHttp.open(<span style="COLOR: rgb(255,0,255)">'GET'</span>,&nbsp;url,&nbsp;<span style="COLOR: rgb(0,0,255)">true</span>);&nbsp;<br><br>&nbsp;&nbsp;&nbsp; oXmlHttp.send(<span style="COLOR: rgb(0,0,255)">null</span>); <br><br>} <br><br><br><br><span style="COLOR: rgb(0,0,255)">function</span>&nbsp;IncludeJS(sId,&nbsp;fileUrl,&nbsp;source) <br><br>{&nbsp;<br><br><span style="COLOR: rgb(0,0,255)">&nbsp;&nbsp;&nbsp; if</span>&nbsp;(&nbsp;(&nbsp;source&nbsp;!=&nbsp;<span style="COLOR: rgb(0,0,255)">null</span>&nbsp;)&nbsp;&amp;&amp;&nbsp;(&nbsp;!document.getElementById(&nbsp;sId&nbsp;)&nbsp;)&nbsp;){&nbsp;<br><br><span style="COLOR: rgb(0,0,255)">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var</span>&nbsp;oHead&nbsp;=&nbsp;document.getElementsByTagName(<span style="COLOR: rgb(255,0,255)">'HEAD'</span>).item(0);&nbsp;<br><br><span style="COLOR: rgb(0,0,255)">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var</span>&nbsp;oScript&nbsp;=&nbsp;document.createElement(&nbsp;<span style="COLOR: rgb(255,0,255)">"script"</span>&nbsp;);&nbsp;<br><br><br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; oScript.language&nbsp;=&nbsp;<span style="COLOR: rgb(255,0,255)">"javascript"</span>;&nbsp;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; oScript.type&nbsp;=&nbsp;<span style="COLOR: rgb(255,0,255)">"text/javascript"</span>;&nbsp;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; oScript.id&nbsp;=&nbsp;sId;&nbsp;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; oScript.defer&nbsp;=&nbsp;<span style="COLOR: rgb(0,0,255)">true</span>;&nbsp;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; oScript.text&nbsp;=&nbsp;source;&nbsp;<br><br><br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; oHead.appendChild(&nbsp;oScript&nbsp;);&nbsp;<br><br>&nbsp;&nbsp;&nbsp; } <br><br>} <br><br><br><br>AjaxPage(&nbsp;<span style="COLOR: rgb(255,0,255)">"scrA"</span>,&nbsp;<span style="COLOR: rgb(255,0,255)">"b.js"</span>&nbsp;); <br><br><br><br>alert(&nbsp;<span style="COLOR: rgb(255,0,255)">"主页面动态加载JS脚本。"</span>); <br><br>alert(&nbsp;<span style="COLOR: rgb(255,0,255)">"主页面动态加载a.js并取其中的变量："</span>&nbsp;+&nbsp;str&nbsp;); <br><br>&lt;/script&gt;</strong></strong></strong></strong></strong></font></div>
<p><font face=Arial><strong><strong><strong><strong><strong>现在完成了一个JS脚本的动态加载。</strong></strong></strong></strong></strong></font></p>
<p>var&nbsp;Rash=true; <br>var&nbsp;msg=""; <br>function&nbsp;norash() <br>{ <br>if&nbsp;(confirm("确定要取消吗")) <br>Rash=false; <br>} <br>&nbsp;function&nbsp;rashit() <br>{ <br>setInterval('getrss()',Inttime); <br>} <br>function&nbsp;getrss() <br>{ <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(Rash==true) <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;head=document.getElementsByTagName('head').item(0); <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;script=document.createElement('script'); <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;script.src='INCLUDE/AutoUpdate.asp'; <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;script.type='text/javascript'; <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;script.defer=true; <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void(head.appendChild(script)); <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.status=msg; <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} <br>} <br>rashit();</p>
</div>
 <script type="text/javascript" src="http://www.cnitblog.com/Files/yemoo/gg2.js"></script><img src ="http://www.cnitblog.com/yemoo/aggbug/30222.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.cnitblog.com/yemoo/" target="_blank">Yemoo'S JS Blog</a> 2007-07-19 08:54 <a href="http://www.cnitblog.com/yemoo/archive/2007/07/19/30222.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>JS模拟实现JAVA的StringBuffer类【摘自快乐笛子的博客】</title><link>http://www.cnitblog.com/yemoo/archive/2007/07/04/29432.html</link><dc:creator>Yemoo'S JS Blog</dc:creator><author>Yemoo'S JS Blog</author><pubDate>Wed, 04 Jul 2007 00:41:00 GMT</pubDate><guid>http://www.cnitblog.com/yemoo/archive/2007/07/04/29432.html</guid><wfw:comment>http://www.cnitblog.com/yemoo/comments/29432.html</wfw:comment><comments>http://www.cnitblog.com/yemoo/archive/2007/07/04/29432.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.cnitblog.com/yemoo/comments/commentRss/29432.html</wfw:commentRss><trackback:ping>http://www.cnitblog.com/yemoo/services/trackbacks/29432.html</trackback:ping><description><![CDATA[<script type="text/javascript" src="http://www.cnitblog.com/Files/yemoo/gg1.js"></script><p>在做大字符串连接时，常用 += 来连接字符串，但这种连接符的效率随着字符串的增大迅速降低，比如下面输出1000个5行5列的表格：</p>
<div style="BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 13px; PADDING-BOTTOM: 4px; BORDER-LEFT: #cccccc 1px solid; WIDTH: 98%; WORD-BREAK: break-all; PADDING-TOP: 4px; BORDER-BOTTOM: #cccccc 1px solid; BACKGROUND-COLOR: #eeeeee"><span style="COLOR: #000000">&lt;</span><span style="COLOR: #000000">script</span><span style="COLOR: #000000">&gt;</span><span style="COLOR: #000000"><br></span><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000">&nbsp;d1&nbsp;</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">&nbsp;</span><span style="COLOR: #0000ff">new</span><span style="COLOR: #000000">&nbsp;Date();<br></span><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000">&nbsp;str&nbsp;</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">&nbsp;</span><span style="COLOR: #000000">""</span><span style="COLOR: #000000">;<br></span><span style="COLOR: #0000ff">for</span><span style="COLOR: #000000">&nbsp;(i</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">0</span><span style="COLOR: #000000">;&nbsp;i</span><span style="COLOR: #000000">&lt;</span><span style="COLOR: #000000">1000</span><span style="COLOR: #000000">;&nbsp;i</span><span style="COLOR: #000000">++</span><span style="COLOR: #000000">){<br>&nbsp;str&nbsp;</span><span style="COLOR: #000000">+=</span><span style="COLOR: #000000">&nbsp;</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">&lt;table&nbsp;width=</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">300</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">&nbsp;border=</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">1</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">&nbsp;cellpadding=</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">5</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">&nbsp;cellspacing=</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">1</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">&gt;&nbsp;&lt;tr&gt;&nbsp;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;2&lt;/td&gt;&lt;td&gt;3&lt;/td&gt;&lt;td&gt;4&lt;/td&gt;&lt;td&gt;5&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;11&lt;/td&gt;&lt;td&gt;22&lt;/td&gt;<br>&lt;td&gt;33&lt;/td&gt;&lt;td&gt;44&lt;/td&gt;&lt;td&gt;55&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;111&lt;/td&gt;&lt;td&gt;222&lt;/td&gt;&lt;td&gt;333&lt;/td&gt;<br>&lt;td&gt;444&lt;/td&gt;&lt;td&gt;555&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;1111&lt;/td&gt;&lt;td&gt;2222&lt;/td&gt;&lt;td&gt;3333&lt;/td&gt;&lt;td&gt;4444&lt;/td&gt;<br>&lt;td&gt;5555&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;11111&lt;/td&gt;&lt;td&gt;22222&lt;/td&gt;&lt;td&gt;33333&lt;/td&gt;&lt;td&gt;44444&lt;/td&gt;<br>&lt;td&gt;55555&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000"><br>}<br>document.write(str)<br></span><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000">&nbsp;d2&nbsp;</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">&nbsp;</span><span style="COLOR: #0000ff">new</span><span style="COLOR: #000000">&nbsp;Date();<br>alert(d2</span><span style="COLOR: #000000">-</span><span style="COLOR: #000000">d1);<br></span><span style="COLOR: #000000">&lt;/</span><span style="COLOR: #000000">script</span><span style="COLOR: #000000">&gt;</span><span style="COLOR: #000000"><br></span></div>
我的硬件配置使用 ＋＝的连接办法约需要1950毫秒。<br><br>在前面几篇日志已经证明到，大字符串的连接最好使用数组，把每个子串放入数组元素，再执行join()连接起来，其效率比＋＝有明显的提高。<br><br>因此，可以由此原理写一个简单的 StringBuffer 类，在遇到大字符串连接时可以派上用场。<br>
<div style="BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 13px; PADDING-BOTTOM: 4px; BORDER-LEFT: #cccccc 1px solid; WIDTH: 98%; WORD-BREAK: break-all; PADDING-TOP: 4px; BORDER-BOTTOM: #cccccc 1px solid; BACKGROUND-COLOR: #eeeeee"><span style="COLOR: #000000"><br></span><span style="COLOR: #0000ff">function</span><span style="COLOR: #000000">&nbsp;StringBuffer(){<br></span><span style="COLOR: #0000ff">this</span><span style="COLOR: #000000">.data&nbsp;</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">&nbsp;[];<br>}<br>StringBuffer.prototype.append&nbsp;</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">&nbsp;</span><span style="COLOR: #0000ff">function</span><span style="COLOR: #000000">(){<br></span><span style="COLOR: #0000ff">this</span><span style="COLOR: #000000">.data.push(arguments[</span><span style="COLOR: #000000">0</span><span style="COLOR: #000000">]);<br></span><span style="COLOR: #0000ff">return</span><span style="COLOR: #000000">&nbsp;</span><span style="COLOR: #0000ff">this</span><span style="COLOR: #000000">;<br>}<br>StringBuffer.prototype.toString&nbsp;</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">&nbsp;</span><span style="COLOR: #0000ff">function</span><span style="COLOR: #000000">(){<br></span><span style="COLOR: #0000ff">return</span><span style="COLOR: #000000">&nbsp;</span><span style="COLOR: #0000ff">this</span><span style="COLOR: #000000">.data.join(</span><span style="COLOR: #000000">""</span><span style="COLOR: #000000">);<br>}<br><br></span></div>
<br>代码很简单，再应用到上面的例子，看看执行时间要多少：<br>
<div style="BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 13px; PADDING-BOTTOM: 4px; BORDER-LEFT: #cccccc 1px solid; WIDTH: 98%; WORD-BREAK: break-all; PADDING-TOP: 4px; BORDER-BOTTOM: #cccccc 1px solid; BACKGROUND-COLOR: #eeeeee"><span style="COLOR: #000000">&lt;</span><span style="COLOR: #000000">script</span><span style="COLOR: #000000">&gt;</span><span style="COLOR: #000000"><br></span><span style="COLOR: #0000ff">function</span><span style="COLOR: #000000">&nbsp;StringBuffer(){<br>&nbsp;</span><span style="COLOR: #0000ff">this</span><span style="COLOR: #000000">.data&nbsp;</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">&nbsp;[];<br>}<br>StringBuffer.prototype.append&nbsp;</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">&nbsp;</span><span style="COLOR: #0000ff">function</span><span style="COLOR: #000000">(){<br>&nbsp;</span><span style="COLOR: #0000ff">this</span><span style="COLOR: #000000">.data.push(arguments[</span><span style="COLOR: #000000">0</span><span style="COLOR: #000000">]);&nbsp;<br>}<br>StringBuffer.prototype.toString&nbsp;</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">&nbsp;</span><span style="COLOR: #0000ff">function</span><span style="COLOR: #000000">(){<br>&nbsp;</span><span style="COLOR: #0000ff">return</span><span style="COLOR: #000000">&nbsp;</span><span style="COLOR: #0000ff">this</span><span style="COLOR: #000000">.data.join(</span><span style="COLOR: #000000">""</span><span style="COLOR: #000000">);<br>}<br></span><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000">&nbsp;d1&nbsp;</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">&nbsp;</span><span style="COLOR: #0000ff">new</span><span style="COLOR: #000000">&nbsp;Date();<br></span><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000">&nbsp;a&nbsp;</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">&nbsp;</span><span style="COLOR: #0000ff">new</span><span style="COLOR: #000000">&nbsp;StringBuffer();<br></span><span style="COLOR: #0000ff">for</span><span style="COLOR: #000000">&nbsp;(i</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">0</span><span style="COLOR: #000000">;&nbsp;i</span><span style="COLOR: #000000">&lt;</span><span style="COLOR: #000000">1000</span><span style="COLOR: #000000">;&nbsp;i</span><span style="COLOR: #000000">++</span><span style="COLOR: #000000">){<br>&nbsp;a.append(</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">&lt;table&nbsp;width=</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">300</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">&nbsp;border=</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">1</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">&nbsp;cellpadding=</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">5</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">&nbsp;cellspacing=</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">1</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">&gt;&nbsp;&lt;tr&gt;&nbsp;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;2&lt;/td&gt;&lt;td&gt;3&lt;/td&gt;&lt;td&gt;4&lt;/td&gt;&lt;td&gt;5&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;11&lt;/td&gt;&lt;td&gt;22&lt;/td&gt;<br>&lt;td&gt;33&lt;/td&gt;&lt;td&gt;44&lt;/td&gt;&lt;td&gt;55&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;111&lt;/td&gt;&lt;td&gt;222&lt;/td&gt;&lt;td&gt;333&lt;/td&gt;<br>&lt;td&gt;444&lt;/td&gt;&lt;td&gt;555&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;1111&lt;/td&gt;&lt;td&gt;2222&lt;/td&gt;&lt;td&gt;3333&lt;/td&gt;&lt;td&gt;4444&lt;/td&gt;<br>&lt;td&gt;5555&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;11111&lt;/td&gt;&lt;td&gt;22222&lt;/td&gt;&lt;td&gt;33333&lt;/td&gt;&lt;td&gt;44444&lt;/td&gt;<br>&lt;td&gt;55555&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">);<br>}&nbsp;<br>&nbsp;<br><br>document.write(a.toString())<br><br></span><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000">&nbsp;d2&nbsp;</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">&nbsp;</span><span style="COLOR: #0000ff">new</span><span style="COLOR: #000000">&nbsp;Date();<br>alert(d2</span><span style="COLOR: #000000">-</span><span style="COLOR: #000000">d1);<br></span><span style="COLOR: #000000">&lt;/</span><span style="COLOR: #000000">script</span><span style="COLOR: #000000">&gt;</span></div>
结果是耗时431毫秒，是＋＝连接方法效率的4～5倍。
 <script type="text/javascript" src="http://www.cnitblog.com/Files/yemoo/gg2.js"></script><img src ="http://www.cnitblog.com/yemoo/aggbug/29432.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.cnitblog.com/yemoo/" target="_blank">Yemoo'S JS Blog</a> 2007-07-04 08:41 <a href="http://www.cnitblog.com/yemoo/archive/2007/07/04/29432.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>Javascript 获取浏览器窗口中文档（视口）可用尺寸的方法[转自codebit.cn]</title><link>http://www.cnitblog.com/yemoo/archive/2007/06/06/28107.html</link><dc:creator>Yemoo'S JS Blog</dc:creator><author>Yemoo'S JS Blog</author><pubDate>Wed, 06 Jun 2007 01:49:00 GMT</pubDate><guid>http://www.cnitblog.com/yemoo/archive/2007/06/06/28107.html</guid><wfw:comment>http://www.cnitblog.com/yemoo/comments/28107.html</wfw:comment><comments>http://www.cnitblog.com/yemoo/archive/2007/06/06/28107.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.cnitblog.com/yemoo/comments/commentRss/28107.html</wfw:commentRss><trackback:ping>http://www.cnitblog.com/yemoo/services/trackbacks/28107.html</trackback:ping><description><![CDATA[<script type="text/javascript" src="http://www.cnitblog.com/Files/yemoo/gg1.js"></script>
由于浏览器的差异，许多信息的获取都要考虑兼容性，窗口中文档可用尺寸是一个经常需要用到的信息，由于浏览器不同甚至版本不同，获取的方法也不一样，本文介绍的函数能够兼容各种浏览器，获取这一信息。同时，文章中对浏览器处理这一信息的差异也做了详细说明。<br><br>本文所说的&#8220;浏览器窗口中文档（下面简称&#8220;视口&#8221;）可用尺寸&#8221;指浏览器中文档显示区域的尺寸，不包括标题栏、工具栏、滚动条等内容。<br><br>在处理这一信息时，不同浏览器和同一浏览器不同版本中有一些差别，说明如下：<br><br>（1）在&nbsp;IE4、IE5&nbsp;和&nbsp;没有声明&nbsp;DOCTYPE&nbsp;的&nbsp;IE6&nbsp;中，视口的这一信息保存在&#8220;body&#8221;元素中，可以用&nbsp;document.body.offsetWidth&nbsp;/&nbsp;offsetHeight&nbsp;获取，<br><br>（2）在声明了DOCTYPE&nbsp;的&nbsp;IE6&nbsp;中&nbsp;，视口的这一信息保存在&nbsp;document.documentElement&nbsp;中，可以用&nbsp;document.documentElement.clientWidth&nbsp;/&nbsp;clientHeight&nbsp;获取。<br><br>（3）除了&nbsp;IE&nbsp;以外的所有浏览器都将此信息保存在&nbsp;window&nbsp;对象中，可以用&nbsp;window.innerWidth&nbsp;/&nbsp;innerHeight&nbsp;获取。<br><br><br>因此，综合上面的说明，我们可以用下面的方式获取浏览器窗口中文档（视口）可用尺寸：<br>
<div style="BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 13px; PADDING-BOTTOM: 4px; BORDER-LEFT: #cccccc 1px solid; WIDTH: 98%; WORD-BREAK: break-all; PADDING-TOP: 4px; BORDER-BOTTOM: #cccccc 1px solid; BACKGROUND-COLOR: #eeeeee"><span style="COLOR: #000000">&lt;</span><span style="COLOR: #000000">script&nbsp;type</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">text/javascript</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">&gt;</span><span style="COLOR: #000000"><br></span><span style="COLOR: #008000">//</span><span style="COLOR: #008000">&nbsp;说明：Javascript&nbsp;获取浏览器窗口中文档（视口）可用尺寸的方法&nbsp;</span><span style="COLOR: #008000"><br>//</span><span style="COLOR: #008000">&nbsp;整理：http://www.CodeBit.cn&nbsp;&nbsp;</span><span style="COLOR: #008000"><br></span><span style="COLOR: #0000ff">function</span><span style="COLOR: #000000">&nbsp;getViewportInfo()&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000">&nbsp;w&nbsp;</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">&nbsp;(window.innerWidth)&nbsp;</span><span style="COLOR: #000000">?</span><span style="COLOR: #000000">&nbsp;window.innerWidth&nbsp;:&nbsp;(document.documentElement&nbsp;</span><span style="COLOR: #000000">&amp;&amp;</span><span style="COLOR: #000000">&nbsp;document.documentElement.clientWidth)&nbsp;</span><span style="COLOR: #000000">?</span><span style="COLOR: #000000">&nbsp;document.documentElement.clientWidth&nbsp;:&nbsp;document.body.offsetWidth;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000">&nbsp;h&nbsp;</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">&nbsp;(window.innerHeight)&nbsp;</span><span style="COLOR: #000000">?</span><span style="COLOR: #000000">&nbsp;window.innerHeight&nbsp;:&nbsp;(document.documentElement&nbsp;</span><span style="COLOR: #000000">&amp;&amp;</span><span style="COLOR: #000000">&nbsp;document.documentElement.clientHeight)&nbsp;</span><span style="COLOR: #000000">?</span><span style="COLOR: #000000">&nbsp;document.documentElement.clientHeight&nbsp;:&nbsp;document.body.offsetHeight;&nbsp;&nbsp;&nbsp;&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="COLOR: #0000ff">return</span><span style="COLOR: #000000">&nbsp;{w:w,h:h};&nbsp;<br>};&nbsp;<br></span><span style="COLOR: #000000">&lt;/</span><span style="COLOR: #000000">script</span><span style="COLOR: #000000">&gt;</span><span style="COLOR: #000000">&nbsp;</span></div>
 <script type="text/javascript" src="http://www.cnitblog.com/Files/yemoo/gg2.js"></script><img src ="http://www.cnitblog.com/yemoo/aggbug/28107.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.cnitblog.com/yemoo/" target="_blank">Yemoo'S JS Blog</a> 2007-06-06 09:49 <a href="http://www.cnitblog.com/yemoo/archive/2007/06/06/28107.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>常用正则表达式【摘自51js】</title><link>http://www.cnitblog.com/yemoo/archive/2007/05/09/26774.html</link><dc:creator>Yemoo'S JS Blog</dc:creator><author>Yemoo'S JS Blog</author><pubDate>Wed, 09 May 2007 05:58:00 GMT</pubDate><guid>http://www.cnitblog.com/yemoo/archive/2007/05/09/26774.html</guid><wfw:comment>http://www.cnitblog.com/yemoo/comments/26774.html</wfw:comment><comments>http://www.cnitblog.com/yemoo/archive/2007/05/09/26774.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.cnitblog.com/yemoo/comments/commentRss/26774.html</wfw:commentRss><trackback:ping>http://www.cnitblog.com/yemoo/services/trackbacks/26774.html</trackback:ping><description><![CDATA[<script type="text/javascript" src="http://www.cnitblog.com/Files/yemoo/gg1.js"></script><div class=t_msgfont id=message497945>正则表达式用于字符串处理、表单验证等场合，实用高效。现将一些常用的表达式收集于此，以备不时之需。<br><br><br>匹配中文字符的正则表达式： [\u4e00-\u9fa5]<br>评注：匹配中文还真是个头疼的事，有了这个表达式就好办了<br><br>匹配双字节字符(包括汉字在内)：[^\x00-\xff]<br>评注：可以用来计算字符串的长度（一个双字节字符长度计2，ASCII字符计1）<br><br>匹配空白行的正则表达式：\n\s*\r<br>评注：可以用来删除空白行<br><br>匹配HTML标记的正则表达式：&lt;(\S*?)[^&gt;]*&gt;.*?&lt;/\1&gt;|&lt;.*? /&gt;<br>评注：网上流传的版本太糟糕，上面这个也仅仅能匹配部分，对于复杂的嵌套标记依旧无能为力<br><br>匹配首尾空白字符的正则表达式：^\s*|\s*$<br>评注：可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等)，非常有用的表达式<br><br>匹配Email地址的正则表达式：\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*<br>评注：表单验证时很实用<br><br>匹配网址URL的正则表达式：[a-zA-z]+://[^\s]*<br>评注：网上流传的版本功能很有限，上面这个基本可以满足需求<br><br>匹配帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)：^[a-zA-Z][a-zA-Z0-9_]{4,15}$<br>评注：表单验证时很实用<br><br>匹配国内电话号码：\d{3}-\d{8}|\d{4}-\d{7}<br>评注：匹配形式如 0511-4405222 或 021-87888822<br><br>匹配腾讯QQ号：[1-9][0-9]{4,}<br>评注：腾讯QQ号从10000开始<br><br>匹配中国邮政编码：[1-9]\d{5}(?!\d)<br>评注：中国邮政编码为6位数字<br><br>匹配身份证：\d{15}|\d{18}<br>评注：中国的身份证为15位或18位<br><br>匹配ip地址：\d+\.\d+\.\d+\.\d+<br>评注：提取ip地址时有用<br><br>匹配特定数字：<br>^[1-9]\d*$　 　 //匹配正整数<br>^-[1-9]\d*$ 　 //匹配负整数<br>^-?[1-9]\d*$　　 //匹配整数<br>^[1-9]\d*|0$　 //匹配非负整数（正整数 + 0）<br>^-[1-9]\d*|0$　　 //匹配非正整数（负整数 + 0）<br>^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$　　 //匹配正浮点数<br>^-([1-9]\d*\.\d*|0\.\d*[1-9]\d*)$　 //匹配负浮点数<br>^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0)$　 //匹配浮点数<br>^[1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0$　　 //匹配非负浮点数（正浮点数 + 0）<br>^(-([1-9]\d*\.\d*|0\.\d*[1-9]\d*))|0?\.0+|0$　　//匹配非正浮点数（负浮点数 + 0）<br>评注：处理大量数据时有用，具体应用时注意修正<br><br>匹配特定字符串：<br>^[A-Za-z]+$　　//匹配由26个英文字母组成的字符串<br>^[A-Z]+$　　//匹配由26个英文字母的大写组成的字符串<br>^[a-z]+$　　//匹配由26个英文字母的小写组成的字符串<br>^[A-Za-z0-9]+$　　//匹配由数字和26个英文字母组成的字符串<br>^\w+$　　//匹配由数字、26个英文字母或者下划线组成的字符串<br>评注：最基本也是最常用的一些表达式<br><br>原载地址：<a href="http://lifesinger.3322.org/myblog/?p=185" target=_blank><u><font color=#0000ff>http://lifesinger.3322.org/myblog/?p=185</font></u></a></div>
 <script type="text/javascript" src="http://www.cnitblog.com/Files/yemoo/gg2.js"></script><img src ="http://www.cnitblog.com/yemoo/aggbug/26774.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.cnitblog.com/yemoo/" target="_blank">Yemoo'S JS Blog</a> 2007-05-09 13:58 <a href="http://www.cnitblog.com/yemoo/archive/2007/05/09/26774.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>在IE下的JS编程需注意的内存释放问题[摘自CNLEI.Blog]</title><link>http://www.cnitblog.com/yemoo/archive/2007/05/09/26768.html</link><dc:creator>Yemoo'S JS Blog</dc:creator><author>Yemoo'S JS Blog</author><pubDate>Wed, 09 May 2007 03:34:00 GMT</pubDate><guid>http://www.cnitblog.com/yemoo/archive/2007/05/09/26768.html</guid><wfw:comment>http://www.cnitblog.com/yemoo/comments/26768.html</wfw:comment><comments>http://www.cnitblog.com/yemoo/archive/2007/05/09/26768.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.cnitblog.com/yemoo/comments/commentRss/26768.html</wfw:commentRss><trackback:ping>http://www.cnitblog.com/yemoo/services/trackbacks/26768.html</trackback:ping><description><![CDATA[Author: mingyuan5 <br>From: http://bbs.51js.com/redirect.php?tid=51770<br><br>
<div class=t_msgfont id=message418403>在IE下的JS编程中，以下的编程方式都会造成即使关闭IE也无法释放内存的问题，下面分类给出：<br><br><font color=red>1、给DOM对象添加的属性是一个对象的引用。范例：</font><br>var MyObject = {};<br>document.getElementById('myDiv').myProp = MyObject;<br><font color=green>解决方法</font>：<br>在window.onunload事件中写上: document.getElementById('myDiv').myProp = null;<br><br><br><font color=red>2、DOM对象与JS对象相互引用。范例：</font><br>function Encapsulator(element) {<br>&nbsp;&nbsp;this.elementReference = element;<br>&nbsp;&nbsp;element.myProp = this;<br>}<br>new&nbsp;&nbsp;Encapsulator(document.getElementById('myDiv'));<br><font color=green>解决方法</font>：<br>在onunload事件中写上: document.getElementById('myDiv').myProp = null;<br><br><br><font color=red>3、给DOM对象用attachEvent绑定事件。范例：</font><br>function doClick() {}<br>element.attachEvent("onclick", doClick);<br><font color=green>解决方法</font>：<br>在onunload事件中写上: element.detachEvent('onclick', doClick);<br><br><br><font color=red>4、从外到内执行appendChild。这时即使调用removeChild也无法释放。范例：</font><br>var parentDiv =&nbsp;&nbsp;document.createElement("div");<br>var childDiv = document.createElement("div");<br>document.body.appendChild(parentDiv);<br>parentDiv.appendChild(childDiv);<br><font color=green>解决方法</font>：<br>从内到外执行appendChild:<br>var parentDiv =&nbsp;&nbsp;document.createElement("div");<br>var childDiv = document.createElement("div");<br>parentDiv.appendChild(childDiv);<br>document.body.appendChild(parentDiv);<br><br><br><font color=red>5、反复重写同一个属性会造成内存大量占用(但关闭IE后内存会被释放)。范例：</font><br>for(i = 0; i &lt; 5000; i++) {<br>&nbsp;&nbsp;hostElement.text = "asdfasdfasdf";<br>}<br>这种方式相当于定义了5000个属性！<br><font color=green>解决方法：</font><br>其实没什么解决方法:P~~~就是编程的时候尽量避免出现这种情况咯~~<br><br><br><font color=maroon>说明：</font><br>1、以上资料均来源于微软官方的MSDN站点，链接地址：<br><a href="http://msdn.microsoft.com/library/default.asp?url=/library/en-us/IETechCol/dnwebgen/ie_leak_patterns.asp" target=_blank><u><font color=#0000ff>http://msdn.microsoft.com/librar ... e_leak_patterns.asp</font></u></a><br>大家可以到上面这个地址中看到详细的说明，包括范例和图例都有。只是我英文不太好，看不太懂，如果我上述有失误或有需要补充的地方请大家指出。<br><br>2、对于第一条，事实上包括 element.onclick = funcRef 这种写法也算在其中，因为这也是一个对对象的引用。在页面onunload时应该释放掉。<br><br>3、对于第三条，在MSDN的英文说明中好像是说即使调用detachEvent也无法释放内存，因为在attachEvent的时候就已经造成内存&#8220;LEAK&#8221;了，不过detachEvent后情况还是会好一点。不知道是不是这样，请英文好的亲能够指出。<br><br>4、在实际编程中，这些内存问题的实际影响并不大，尤其是给客户使用时，客户对此绝不会有察觉，然而这些问题对于程序员来说却始终是个心病 --- 有这样的BUG心里总会觉得不舒服吧？能解决则给与解决，这样是最好的。事实上我在webfx.eae.net这样顶级的JS源码站点中，在它们的源码里都会看到采用上述解决方式进行内存的释放管理。<br></div>
<br><br><br>================================================================================================ <br>Post: Rimifon<br><strong>理解并解决IE的内存泄漏方式</strong><br><br>
<div class=t_msgfont id=message482582><strong>Web开发的发展</strong><br><br>&nbsp; &nbsp; 在过去一些的时候，Web开发人员并没有太多的去关注内存泄露问题。那时的页面间联系大都比较简单，并主要使用不同的连接地址在同一<br><br>个站点中导航，这样的设计方式是非常有利于浏览器释放资源的。即使Web页面运行中真的出现了资源泄漏，那它的影响也是非常有限而且常常<br><br>是不会被人在意的。<br><br>&nbsp; &nbsp; 今天人们对Web应用有了高更的要求。一个页面很可能数小时不会发生URL跳转，并同时通过Web服务动态的更新页面内容。复杂的事件关联<br><br>设计、基于对象的JScript和DHTML技术的广泛采用，使得代码的能力达到了其承受的极限。在这样的情况和改变下，弄清楚内存泄露方式变得<br><br>非常的急迫，特别是过去这些问题都被传统的页面导航方法给屏蔽了。<br><br>&nbsp; &nbsp; 还算好的事情是，当你明确了希望寻找什么时，内存泄露方式是比较容易被确定的。大多数你能遇到的泄露问题我们都已经知道，你只需<br><br>要少量额外的工作就会给你带来好处。虽然在一些页面中少量的小泄漏问题仍会发生，但是主要的问题还是很容易解决的。<br><br>泄露方式<br><br>&nbsp; &nbsp; 在接下来的内容中，我们会讨论内存泄露方式，并为每种方式给出示例。其中一个重要的示例是JScript中的Closure技术，另一个示例是<br><br>在事件执行中使用Closures。当你熟悉本示例后，你就能找出并修改你已有的大多数内存泄漏问题，但是其它Closure相关的问题可能又会被忽<br><br>视。<br><br>现在让我们来看看这些个方式都有什么：<br><br>1、循环引用(Circular References) — IE浏览器的COM组件产生的对象实例和网页脚本引擎产生的对象实例相互引用，就会造成内存泄漏。<br><br>这也是Web页面中我们遇到的最常见和主要的泄漏方式；<br><br>2、内部函数引用(Closures) — Closures可以看成是目前引起大量问题的循环应用的一种特殊形式。由于依赖指定的关键字和语法结构，<br><br>Closures调用是比较容易被我们发现的；<br><br>3、页面交叉泄漏(Cross-Page Leaks) — 页面交叉泄漏其实是一种较小的泄漏，它通常在你浏览过程中，由于内部对象薄计引起。下面我们<br><br>会讨论DOM插入顺序的问题，在那个示例中你会发现只需要改动少量的代码，我们就可以避免对象薄计对对象构建带来的影响；<br><br>4、貌似泄漏(Pseudo-Leaks) — 这个不是真正的意义上的泄漏，不过如果你不了解它，你可能会在你的可用内存资源变得越来越少的时候极<br><br>度郁闷。为了演示这个问题，我们将通过重写Script元素中的内容来引发大量内存的"泄漏"。<br><br>循环引用<br><br>&nbsp; &nbsp; 循环引用基本上是所有泄漏的始作俑者。通常情况下，脚本引擎通过垃圾收集器(GC)来处理循环引用，但是某些未知因数可能会妨碍从其<br><br>环境中释放资源。对于IE来说，某些DOM对象实例的状态是脚本无法得知的。下面是它们的基本原则：<br><img onmousewheel="return imgzoom(this);" onmouseover="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" onclick="if(!this.resized) {return true;} else {window.open('http://msdn2.microsoft.com/zh-cn/library/Bb250448.ie_leak_patterns_fig01(en-us,VS.85).gif');}" alt="" src="http://msdn2.microsoft.com/zh-cn/library/Bb250448.ie_leak_patterns_fig01(en-us,VS.85).gif" onload="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" border=0><br>&nbsp; &nbsp; <br>&nbsp; &nbsp; Figure 1: 基本的循环引用模型<br><br>&nbsp; &nbsp; 本模型中引起的泄漏问题基于COM的引用计数。脚本引擎对象会维持对DOM对象的引用，并在清理和释放DOM对象指针前等待所有引用的移除<br><br>。在我们的示例中，我们的脚本引擎对象上有两个引用：脚本引擎作用域和DOM对象的expando属性。当终止脚本引擎时第一个引用会释放，DOM<br><br>对象引用由于在等待脚本擎的释放而并不会被释放。你可能会认为检测并修复假设的这类问题会非常的容易，但事实上这样基本的的示例只是<br><br>冰山一角。你可能会在30个对象链的末尾发生循环引用，这样的问题排查起来将会是一场噩梦。<br><br>&nbsp; &nbsp; 如果你仍不清楚这种泄漏方式在HTML代码里到底怎样，你可以通过一个全局脚本变量和一个DOM对象来引发并展现它。<br>
<pre class="code cod0" rows="10" cols="95">&lt;html&gt;
&lt;head&gt;
&lt;script language="JScript"&gt;
var myGlobalObject;
function SetupLeak()
{
// First set up the script scope to element reference
myGlobalObject = document.getElementById("LeakedDiv");
// Next set up the element to script scope reference
document.getElementById("LeakedDiv").expandoProperty = myGlobalObject;
}
function BreakLeak()
{
document.getElementById("LeakedDiv").expandoProperty = null;
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body onload="SetupLeak()" onunload="BreakLeak()"&gt;
&lt;div id="LeakedDiv"&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
<br><br>你可以使用直接赋null值得方式来破坏该泄漏情形。在页面文档卸载前赋null值，将会让脚本引擎知道对象间的引用链没<br><br>有了。现在它将能正常的清理引用并释放DOM对象。在这个示例中，作为Web开发员的你因该更多的了解了对象间的关系。<br><br>&nbsp; &nbsp; 作为一个基本的情形，循环引用可能还有更多不同的复杂表现。对基于对象的JScript，一个通常用法是通过封装JScript对象来扩充DOM对<br><br>象。在构建过程中，你常常会把DOM对象的引用放入JScript对象中，同时在DOM对象中也存放上对新近创建的JScript对象的引用。你的这种应<br><br>用模式将非常便于两个对象之间的相互访问。这是一个非常直接的循环引用问题，但是由于使用不用的语法形式可能并不会让你在意。要破环<br><br>这种使用情景可能变得更加复杂，当然你同样可以使用简单的示例以便于清楚的讨论。<br>
<pre class="code cod1" rows="10" cols="95">&lt;html&gt;
&lt;head&gt;
&lt;script language="JScript"&gt;
function Encapsulator(element)
{
// Set up our element
this.elementReference = element;
// Make our circular reference
element.expandoProperty = this;
}
function SetupLeak()
{
// The leak happens all at once
new Encapsulator(document.getElementById("LeakedDiv"));
}
function BreakLeak()
{
document.getElementById("LeakedDiv").expandoProperty = null;
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body onload="SetupLeak()" onunload="BreakLeak()"&gt;
&lt;div id="LeakedDiv"&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
<br><br>更复杂的办法还有记录所有需要解除引用的对象和属性，然后在Web文档卸载的时候统一清理，但大多数时候你可能会再造<br><br>成额外的泄漏情形，而并没有解决你的问题。<br><br><strong>闭包函数(Closures)</strong><br>&nbsp; &nbsp; 由于闭包函数会使程序员在不知不觉中创建出循环引用，所以它对资源泄漏常常有着不可推卸的责任。而在闭包函数自己被释放前，我们很难判断父函数的参数以及它的局部变量是否能被释放。实际上闭包函数的使用已经很普通，以致人们频繁的遇到这类问题时我们却束手无策。在详细了解了闭包背后的问题和一些特殊的闭包泄漏示例后，我们将结合循环引用的图示找到闭包的所在，并找出这些不受欢迎的引用来至何处。<br><img onmousewheel="return imgzoom(this);" onmouseover="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" onclick="if(!this.resized) {return true;} else {window.open('http://msdn2.microsoft.com/zh-cn/library/Bb250448.ie_leak_patterns_fig02(en-us,VS.85).gif');}" alt="" src="http://msdn2.microsoft.com/zh-cn/library/Bb250448.ie_leak_patterns_fig02(en-us,VS.85).gif" onload="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" border=0><br><br><strong>Figure 2. 闭包函数引起的循环引用</strong><br><br>&nbsp; &nbsp; 普通的循环引用，是两个不可探知的对象相互引用造成的，但是闭包却不同。代替直接造成引用，闭包函数则取而代之从其父函数作用域中引入信息。通常，函数的局部变量和参数只能在该被调函数自身的生命周期里使用。当存在闭包函数后，这些变量和参数的引用会和闭包函数一起存在，但由于闭包函数可以超越其父函数的生命周期而存在，所以父函数中的局部变量和参数也仍然能被访问。在下面的示例中，参数1将在函数调用终止时正常被释放。当我们加入了一个闭包函数后，一个额外的引用产生，并且这个引用在闭包函数释放前都不会被释放。如果你碰巧将闭包函数放入了事件之中，那么你不得不手动从那个事件中将其移出。如果你把闭包函数作为了一个expando属性，那么你也需要通过置null将其清除。<br><br>&nbsp; &nbsp; 同时闭包会在每次调用中创建，也就是说当你调用包含闭包的函数两次，你将得到两个独立的闭包，而且每个闭包都分别拥有对参数的引用。由于这些显而易见的因素，闭包确实非常用以带来泄漏。下面的示例将展示使用闭包的主要泄漏因素：<br>
<pre class="code cod2" rows="10" cols="95">&lt;html&gt;
&lt;head&gt;
&lt;script language="JScript"&gt;
function AttachEvents(element)
{
// This structure causes element to ref ClickEventHandler
element.attachEvent("onclick", ClickEventHandler);
function ClickEventHandler()
{
// This closure refs element
}
}
function SetupLeak()
{
// The leak happens all at once
AttachEvents(document.getElementById("LeakedDiv"));
}
function BreakLeak()
{
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body onload="SetupLeak()" onunload="BreakLeak()"&gt;
&lt;div id="LeakedDiv"&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
<br><br>如果你对怎么避免这类泄漏感到疑惑，我将告诉你处理它并不像处理普通循环引用那么简单。"闭包"被看作函数作用域中的一个临时对象。一旦函数执行退出，你将失去对闭包本身的引用，那么你将怎样去调用detachEvent方法来清除引用呢？在Scott Isaacs的MSN Spaces上有一种解决这个问题的有趣方法。这个方法使用一个额外的引用(原文叫second closure，可是这个示例里致始致终只有一个closure)协助window对象执行onUnload事件，由于这个额外的引用和闭包的引用存在于同一个对象域中，于是我们可以借助它来释放事件引用，从而完成引用移除。为了简单起见我们将闭包的引用暂存在一个expando属性中，下面的示例将向你演示释放事件引用和清除expando属性。<br>
<pre class="code cod3" rows="10" cols="95">&lt;html&gt;
&lt;head&gt;
&lt;script language="JScript"&gt;
function AttachEvents(element)
{
// In order to remove this we need to put
// it somewhere. Creates another ref
element.expandoClick = ClickEventHandler;
// This structure causes element to ref ClickEventHandler
element.attachEvent("onclick", element.expandoClick);
function ClickEventHandler()
{
// This closure refs element
}
}
function SetupLeak()
{
// The leak happens all at once
AttachEvents(document.getElementById("LeakedDiv"));
}
function BreakLeak()
{
document.getElementById("LeakedDiv").detachEvent("onclick",
document.getElementById("LeakedDiv").expandoClick);
document.getElementById("LeakedDiv").expandoClick = null;
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body onload="SetupLeak()" onunload="BreakLeak()"&gt;
&lt;div id="LeakedDiv"&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
<br><br>在这篇KB文章中，实际上建议我们除非迫不得已尽量不要创建使用闭包。文章中的示例，给我们演示了非闭包的事件引用方式，即把闭包函数放到页面的全局作用域中。当闭包函数成为普通函数后，它将不再继承其父函数的参数和局部变量，所以我们也就不用担心基于闭包的循环引用了。在非必要的时候不使用闭包这样的编程方式可以尽量使我们的代码避免这样的问题。<br><br>&nbsp; &nbsp; 最后，脚本引擎开发组的Eric Lippert，给我们带来了一篇关于闭包使用<a href="http://blogs.msdn.com/ericlippert/archive/2003/09/17/53028.aspx" target=_blank><u><font color=#0000ff>通俗易懂的好文章</font></u></a>。他的最终建议也是希望在真正必要的时候才使用闭包函数。虽然他的文章没有提及闭包会使用的真正场景，但是这儿已有的大量示例非常有助于大家起步。<br><br><strong>页面交叉泄漏(Cross-Page Leaks) </strong><br>&nbsp; &nbsp;这种基于插入顺序而常常引起的泄漏问题，主要是由于对象创建过程中的临时对象未能被及时清理和释放造成的。它一般在动态创建页面元素，并将其添加到页面DOM中时发生。一个最简单的示例场景是我们动态创建两个对象，并创建一个子元素和父元素间的临时域（译者注：这里的域(Scope)应该是指管理元素之间层次结构关系的对象）。然后，当你将这两个父子结构元素构成的的树添加到页面DOM树中时，这两个元素将会继承页面DOM中的层次管理域对象，并泄漏之前创建的那个临时域对象。下面的图示示例了两种动态创建并添加元素到页面DOM中的方法。在第一种方法中，我们将每个子元素添加到它的直接父元素中，最后再将创建好的整棵子树添加到页面DOM中。当一些相关条件合适时，这种方法将会由于临时对象问题引起泄漏。在第二种方法中，我们自顶向下创建动态元素，并使它们被创建后立即加入到页面DOM结构中去。由于每个被加入的元素继承了页面DOM中的结构域对象，我们不需要创建任何的临时域。这是避免潜在内存泄漏发生的好方法。<br><img onmousewheel="return imgzoom(this);" onmouseover="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" onclick="if(!this.resized) {return true;} else {window.open('http://msdn2.microsoft.com/zh-cn/library/Bb250448.ie_leak_patterns_fig03(en-us,VS.85).gif');}" alt="" src="http://msdn2.microsoft.com/zh-cn/library/Bb250448.ie_leak_patterns_fig03(en-us,VS.85).gif" onload="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" border=0><br>&nbsp; &nbsp; <br><strong>Figure 3. DOM插入顺序泄漏模型</strong><br><br>&nbsp; &nbsp; 接下来，我们将给出一个躲避了大多数泄漏检测算法的泄漏示例。因为我们实际上没有泄漏任何可见的元素，并且由于被泄漏的对象太小从而你可能根本不会注意这个问题。为了使我们的示例产生泄漏，在动态创建的元素结构中将不得不内联的包含一个脚本函数指针。在我们设置好这些元素间的相互隶属关系后这将会使我们泄漏内部临时脚本对象。由于这个泄漏很小，我们不得不将示例执行成千上万次。事实上，一个对象的泄漏只有很少的字节。在运行示例并将浏览器导航到一个空白页面，你将会看到两个版本代码在内存使用上的区别。当我们使用第一种方法，将子元素加入其父元素再将构成的子树加入页面DOM，我们的内存使用量会有微小的上升。这就是一个交叉导航泄漏，只有当我们重新启动IE进程这些泄漏的内存才会被释放。如果你使用第二种方法将父元素加入页面DOM再将子元素加入其父元素中，同样运行若干次后，你的内存使用量将不会再上升，这时你会发现你已经修复了交叉导航泄漏的问题。<br>
<pre class="code cod4" rows="10" cols="95">&lt;html&gt;
&lt;head&gt;
&lt;script language="JScript"&gt;
function LeakMemory()
{
var hostElement = document.getElementById("hostElement");
// Do it a lot, look at Task Manager for memory response
for(i = 0; i &lt; 5000; i++)
{
var parentDiv =
document.createElement("&lt;div onClick='foo()'&gt;");
var childDiv =
document.createElement("&lt;div onClick='foo()'&gt;");
// This will leak a temporary object
parentDiv.appendChild(childDiv);
hostElement.appendChild(parentDiv);
hostElement.removeChild(parentDiv);
parentDiv.removeChild(childDiv);
parentDiv = null;
childDiv = null;
}
hostElement = null;
}
function CleanMemory()
{
var hostElement = document.getElementById("hostElement");
// Do it a lot, look at Task Manager for memory response
for(i = 0; i &lt; 5000; i++)
{
var parentDiv =
document.createElement("&lt;div onClick='foo()'&gt;");
var childDiv =
document.createElement("&lt;div onClick='foo()'&gt;");
// Changing the order is important, this won't leak
hostElement.appendChild(parentDiv);
parentDiv.appendChild(childDiv);
hostElement.removeChild(parentDiv);
parentDiv.removeChild(childDiv);
parentDiv = null;
childDiv = null;
}
hostElement = null;
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;button onclick="LeakMemory()"&gt;Memory Leaking Insert&lt;/button&gt;
&lt;button onclick="CleanMemory()"&gt;Clean Insert&lt;/button&gt;
&lt;div id="hostElement"&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
<br><br>这类泄漏应该被澄清，因为这个解决方法有悖于我们在IE中的一些有益经验。创建带有脚本对象的DOM元素，以及它们已进行的相互关联是了解这个泄漏的关键点。这实际上这对于泄漏来说是至关重要的，因为如果我们创建的DOM元素不包含任何的脚本对象，同时使用相同的方式将它们进行关联，我们是不会有任何泄漏问题的。示例中给出的第二种技巧对于关联大的子树结构可能更有效（由于在那个示例中我们一共只有两个元素，所以建立一个和页面DOM不相关的树结构并不会有什么效率问题）。第二个技巧是在创建元素的开始不关联任何的脚本对象，所以你可以安全的创建子树。当你把你的子树关联到页面DOM上后，再继续处理你需要的脚本事件。牢记并遵守关于循环引用和闭包函数的使用规则，你不会再在挂接事件时在你的代码中遇到不同的泄漏。<br><br>&nbsp; &nbsp; 我真的要指出这个问题，因为我们可以看出不是所有的内存泄漏都是可以很容易发现的。它们可能都是些微不足道的问题，但往往需要成千上万次的执行一个更小的泄漏场景才能使问题显现出来，就像DOM元素插入顺序引起的问题那样。如果你觉得使用所谓的"最佳"经验来编程，那么你就可以高枕无忧，但是这个示例让我们看到，即使是"最佳"经验似乎也可能带来泄漏。我们这里的解决方案希望能提高这些已有的好经验，或者介绍一些新经验使我们避免泄漏发生的可能。<br><br><strong>貌似泄漏(Pseudo-Leaks) </strong><br>&nbsp; &nbsp; 在大多数时候，一些APIs的实际的行为和它们预期的行为可能会导致你错误的判断内存泄漏。貌似泄漏大多数时候总是出现在同一个页面的动态脚本操作中，而在从一个页面跳转到空白页面的时候发生是非常少见的。那你怎么能象排除页面间泄漏那样来排除这个问题，并且在新任务运行中的内存使用量是否是你所期望的。我们将使用脚本文本的重写来作为一个貌似泄漏的示例。<br><br>&nbsp; &nbsp; 象DOM插入顺序问题那样，这个问题也需要依赖创建临时对象来产生"泄漏"。对一个脚本元素对象内部的脚本文本一而再再而三的反复重写，慢慢地你将开始泄漏各种已关联到被覆盖内容中的脚本引擎对象。特别地，和脚本调试有关的对象被作为完全的代码对象形式保留了下来。<br>
<pre class="code cod5" rows="10" cols="95">&lt;html&gt;
&lt;head&gt;
&lt;script language="JScript"&gt;
function LeakMemory()
{
// Do it a lot, look at Task Manager for memory response
for(i = 0; i &lt; 5000; i++)
{
hostElement.text = "function foo() { }";
}
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;button onclick="LeakMemory()"&gt;Memory Leaking Insert&lt;/button&gt;
&lt;script id="hostElement"&gt;function foo() { }&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
<br><br>如果你运行上面的示例代码并使用任务管理器查看，当从"泄漏"页面跳转到空白页面时，你并不会注意到任何脚本泄漏。因为这种脚本泄漏完全发生在页面内部，而且当你离开该页面时被使用的内存就会回收。对于我们原本所期望的行为来说这样的情况是糟糕的。你希望当重写了脚本内容后，原来的脚本对象就应该彻底的从页面中消失。但事实上，由于被覆盖的脚本对象可能已用作事件处理函数，并且还可能有一些未被清除的引用计数。正如你所看到的，这就是貌似泄漏。在表面上内存消耗量可能看起来非常的糟糕，但是这个原因是完全可以接受的。<br><br><strong>总结</strong><br>&nbsp; &nbsp; 每一位Web开发员可能都整理有一份自己的代码示例列表，当他们在代码中看到如列表中的代码时，他们会意识到泄漏的存在并会使用一些开发技巧来避免这些问题。这样的方法虽然简单便捷，但这也是今天Web页面内存泄漏普遍存在的原因。考虑我们所讨论的泄漏情景而不是关注独立的代码示例，你将会使用更加有效的策略来解决泄漏问题。这样的观念将使你在设计阶段就把问题估计到，并且确保你有计划来处理潜在的泄漏问题。使用编写加固代码（译者注：就是异常处理或清理对象等的代码）的习惯并且采取清理所有自己占用内存的方法。虽然对这个问题来说可能太夸张了，你也可能几乎从没有见到编写脚本却需要自己清理自己占用的内存的情况；使这个问题变得越来越显著的是，脚本变量和expando属性间存在的潜在泄漏可能。<br><br>&nbsp; &nbsp; 如果对模式和设计感兴趣，我强烈推荐Scott的这篇blog，因为其中演示了一个通用的移除基于闭包泄漏的示例代码。当然这需要我们使用更多的代码，但是这个实践是有效的，并且改进的场景非常容易在代码中定位并进行调试。类似的注入设计也可以用在基于expando属性引起的循环引用中，不过需要注意所注册的方法自身不要让泄漏(特别使用闭包的地方)跑掉。<br><br>About the author <br><br>Justin Rogers recently joined the Internet Explorer team as an Object Model developer working on extensibility and previously worked on such notable projects as the .NET QuickStart Tutorials, .NET Terrarium, and SQL Reporting Services Management Studio in SQL Server 2005.<br><br>（翻译来自：http://birdshome.cnblogs.com/archive/2006/05/28/IE_MemoryLeak.html）</div>
<img src ="http://www.cnitblog.com/yemoo/aggbug/26768.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.cnitblog.com/yemoo/" target="_blank">Yemoo'S JS Blog</a> 2007-05-09 11:34 <a href="http://www.cnitblog.com/yemoo/archive/2007/05/09/26768.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>制作TopnetTree的心得总结</title><link>http://www.cnitblog.com/yemoo/archive/2007/05/08/26726.html</link><dc:creator>Yemoo'S JS Blog</dc:creator><author>Yemoo'S JS Blog</author><pubDate>Tue, 08 May 2007 03:50:00 GMT</pubDate><guid>http://www.cnitblog.com/yemoo/archive/2007/05/08/26726.html</guid><wfw:comment>http://www.cnitblog.com/yemoo/comments/26726.html</wfw:comment><comments>http://www.cnitblog.com/yemoo/archive/2007/05/08/26726.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.cnitblog.com/yemoo/comments/commentRss/26726.html</wfw:commentRss><trackback:ping>http://www.cnitblog.com/yemoo/services/trackbacks/26726.html</trackback:ping><description><![CDATA[<script type="text/javascript" src="http://www.cnitblog.com/Files/yemoo/gg1.js"></script><p>1，使用json保存一些配置信息<br>2，对于要在页面中输出带有id等标识行属性的html元素，使用自增量为对象的每个新实例生成不同的标识。<br>3，对于一些需要在设定好每个参数的情况下才能初始化的内容，为实例设定一个表示是否初始化的变量（如this.__initalize__=0），并将初始化部分写在单独的方法（如__init__()）中，在该方法的尾部添加已初始化标识(this.__intalize__=1)。在执行该实例的的方法头部添加如下语句：<br>if(!this.__initalize__){this.__init__();}<br>if(!this.__initalize__){return ;}</p>
<p>4，对初入的每个参数进行合法性的判断，一般将判断写入初始化函数中。<br>5，js中的replace函数默认只替换找到的第一个字符，可以利用该特点结合组合字符串形成一个数组结构，如<br>var a="$aa";<br>for(var i=0;i&lt;5;i++){<br>&nbsp;a+="$"+i;<br>}<br>a=a.replace("$","");<br>这样便形成了一个以$为分隔符的数组。<br>6，使用document.write输出html元素及设定该html元素的外观的css文件时，如果同时输出内容和css，应该将css放于内容之后，否则效果不能被渲染。<br>7，巧妙运用&amp;&amp;和||代替一些if...else语句。如var a=b||"2";</p>
 <script type="text/javascript" src="http://www.cnitblog.com/Files/yemoo/gg2.js"></script><img src ="http://www.cnitblog.com/yemoo/aggbug/26726.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.cnitblog.com/yemoo/" target="_blank">Yemoo'S JS Blog</a> 2007-05-08 11:50 <a href="http://www.cnitblog.com/yemoo/archive/2007/05/08/26726.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item></channel></rss>