<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>西红柿爱番茄 &#187; Watch</title>
	<atom:link href="http://www.ilovejs.net/archives/tag/watch/feed" rel="self" type="application/rss+xml" />
	<link>http://www.ilovejs.net</link>
	<description>到了创造为主的阶段，不忘继续学习</description>
	<lastBuildDate>Thu, 15 Dec 2011 06:18:39 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3</generator>
		<item>
		<title>Watch对象更新</title>
		<link>http://www.ilovejs.net/archives/1066</link>
		<comments>http://www.ilovejs.net/archives/1066#comments</comments>
		<pubDate>Wed, 28 Jul 2010 20:19:41 +0000</pubDate>
		<dc:creator>Supersha</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Watch]]></category>
		<category><![CDATA[测试工具]]></category>

		<guid isPermaLink="false">http://www.ilovejs.net/?p=1066</guid>
		<description><![CDATA[这次对Watch对象添加了一个新方法：iterate。主要是用于这样的情况，同时测试多个指定循环次数的情况，比如可以同时指定1000、2000、3000、4000&#8230;等等，通过iterate方法，就可以查看到几个测试用例在这几个循环次数下的时间消耗，iterate的用法如下： [javascript] Watch.iterate({ &#34;title&#34;:[&#34;getElementsByTagName&#34;,&#34;childNodes&#34;], &#34;loop&#34;:[1000,2000,4000,5000,10000,20000,40000,100000], &#34;interval&#34;:1500, &#34;fn&#34;:[ function(){ document.getElementById(&#34;div&#34;).getElementsByTagName(&#34;p&#34;);}, function(){ document.getElementById(&#34;div&#34;).childNodes;} ] }); [/javascript] iterate方法带有一个对象字面量参数，这个对象字面量的参数的属性包括title数组、loop循环次数数组、interval更新显示的时间间隔、fn测试函数数组。说起来可能比较虚，看例子吧：Watch.iterate()。]]></description>
			<content:encoded><![CDATA[<p>这次对Watch对象添加了一个新方法：iterate。主要是用于这样的情况，同时测试多个指定循环次数的情况，比如可以同时指定1000、2000、3000、4000&#8230;等等，通过iterate方法，就可以查看到几个测试用例在这几个循环次数下的时间消耗，iterate的用法如下：<br />
[javascript]<br />
Watch.iterate({<br />
  &quot;title&quot;:[&quot;getElementsByTagName&quot;,&quot;childNodes&quot;],<br />
  &quot;loop&quot;:[1000,2000,4000,5000,10000,20000,40000,100000],<br />
  &quot;interval&quot;:1500,<br />
  &quot;fn&quot;:[<br />
    function(){ document.getElementById(&quot;div&quot;).getElementsByTagName(&quot;p&quot;);},<br />
    function(){  document.getElementById(&quot;div&quot;).childNodes;}<br />
  ]<br />
});<br />
[/javascript]<br />
iterate方法带有一个对象字面量参数，这个对象字面量的参数的属性包括title数组、loop循环次数数组、interval更新显示的时间间隔、fn测试函数数组。说起来可能比较虚，看例子吧：<a  href="/lab/iterate/">Watch.iterate()</a>。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ilovejs.net/archives/1066/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>简单易用的测试代码执行时间对象&#8212;Watch</title>
		<link>http://www.ilovejs.net/archives/215</link>
		<comments>http://www.ilovejs.net/archives/215#comments</comments>
		<pubDate>Sat, 23 Jan 2010 18:37:09 +0000</pubDate>
		<dc:creator>Supersha</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Watch]]></category>
		<category><![CDATA[时间测试]]></category>

		<guid isPermaLink="false">http://www.ilovejs.net/?p=215</guid>
		<description><![CDATA[Updates:2010-6-4 今天看到Wait也写了个时间测试代码程序，就回过头来看看自己曾经写的Watch对象代码，代码看起来有些丑陋了。修改了report方法，整合了下代码，使其简洁许多，去掉了一些不必要的创建DOM元素的操作，给report方法添加了个参数，用于确认把测试结果内容插入到哪个DOM元素里，默认是document.body，其他都没怎么修改。同时，这次修改也修改了一个小bug，就是在调用了report方法之后，没有清除原来的时间和结果内容。这样在页面中同时调用了几个report的时候，结果数据累加了。 最新版本：Watch_1_4.js。 ===================================================================== 近段时间，由于需要测试很多代码的执行时间比较，测试代码需要重复编写，感觉很繁琐和机械化，所以就干脆封装了一个测试代码执行时间的对象&#8212;Watch。 Watch对象提供了start、stop、report、fns、execByTimes五个方法。顾名思义，start和stop是储存代码开始执行和结束时的时间，report方法用于显示测试结果。其他两个方法接下来会介绍，也都是非常简单的，目的都是用于简化测试代码的重复性编写，并且它可以很简单的嵌入到其他代码中。在使用Watch对象的时候需要引入Watch.js文件：&#60;script type=”text/javascript” src=”Watch.js”&#62;&#60;/script&#62; 一个简单的示例如下： [javascript] Watch.start(&#34;Cost times:&#34;); for(var i=0;i&#60;10000;i++){ document.createElement(&#34;iframe&#34;); } Watch.stop(); onload=function(){ //这句需要在onload事件中执行，因为需要插入DOM元素到document.body里。 Watch.report(); &#8230; <a href="http://www.ilovejs.net/archives/215" class="more-link">了解更多</a>]]></description>
			<content:encoded><![CDATA[<p>
<strong>Updates:</strong><em>2010-6-4</em>
</p>
<p>
今天看到Wait也写了个时间测试代码程序，就回过头来看看自己曾经写的Watch对象代码，代码看起来有些丑陋了。修改了report方法，整合了下代码，使其简洁许多，去掉了一些不必要的创建DOM元素的操作，给report方法添加了个参数，用于确认把测试结果内容插入到哪个DOM元素里，默认是document.body，其他都没怎么修改。同时，这次修改也修改了一个小bug，就是在调用了report方法之后，没有清除原来的时间和结果内容。这样在页面中同时调用了几个report的时候，结果数据累加了。
</p>
<p>
<img src="http://www.ilovejs.net/wp-content/uploads/2010/01/watch_1_4.gif" title="watch_1_4" width="252" height="78" />
</p>
<p>
最新版本：<a  href="http://www.ilovejs.net/lab/Watch_1_4.js">Watch_1_4.js</a>。
</p>
<p>
=====================================================================
</p>
<p>
近段时间，由于需要测试很多代码的执行时间比较，测试代码需要重复编写，感觉很繁琐和机械化，所以就干脆封装了一个测试代码执行时间的对象&#8212;Watch。<br />
<a href="http://www.ilovejs.net/wp-content/uploads/2010/01/watch.png" rel="wp-prettyPhoto[g215]"><img src="http://www.ilovejs.net/wp-content/uploads/2010/01/watch-300x126.png" alt="" title="watch" width="300" height="126" class="alignnone size-medium wp-image-216" /></a>
</p>
<p>
Watch对象提供了start、stop、report、fns、execByTimes五个方法。顾名思义，start和stop是储存代码开始执行和结束时的时间，report方法用于显示测试结果。其他两个方法接下来会介绍，也都是非常简单的，目的都是用于简化测试代码的重复性编写，并且它可以很简单的嵌入到其他代码中。在使用Watch对象的时候需要引入Watch.js文件：&lt;script type=”text/javascript” src=”Watch.js”&gt;&lt;/script&gt;
</p>
<p>一个简单的示例如下：<br />
[javascript]<br />
Watch.start(&quot;Cost times:&quot;);<br />
for(var i=0;i&lt;10000;i++){<br />
   document.createElement(&quot;iframe&quot;);<br />
}<br />
Watch.stop();</p>
<p>onload=function(){<br />
//这句需要在onload事件中执行，因为需要插入DOM元素到document.body里。<br />
Watch.report();<br />
}<br />
[/javascript]</p>
<p>
上面的示例的输出包括总时间，以及使用类似于进度条的形式来展示执行时间。《<a  href="http://www.ilovejs.net/lab/createElement.html">其他测试示例</a>》、《<a  href="http://www.ilovejs.net/lab/TestLoop.html">TestLoop</a>》
</p>
<p>关于fns方法，它用于执行参数内的全部函数，并记录每个函数的执行时间。<br />
[javascript]<br />
Watch.fns(function(){<br />
       document.createElement(&quot;iframe&quot;);<br />
  },function(){<br />
       document.createElement(&quot;div&quot;);<br />
  }&#8230;&#8230;.<br />
}<br />
[/javascript]<br />
execByTimes方法的功能跟fns类似，但是需要提供一个函数、一个时间执行次数times以及一个可选的参数title。如果你已经对重复编写for循环来执行某个函数或者一段用匿名函数封装的代码，这个方法将给你提供这方面的便利。<br />
[javascript]<br />
Watch.execByTimes(function(){<br />
     document.createElement(&quot;iframe&quot;);<br />
   },10000,&quot;Create iframe Element&quot;);<br />
[/javascript]</p>
<p>
上面讲述了Watch五个方法的使用方式，我是从中感受到了便利的。^_^
</p>
<p>《<a  href="http://www.ilovejs.net/lab/Watch.js">下载Watch对象源码文件</a>》或者《<a id="link-watch" href="#">直接查看源码</a>》</p>
<div id="watch-source" style="display:none">
[javascript]<br />
var Watch = {<br />
    result: [],<br />
    guid: -1,<br />
    totalTime: 0,<br />
    start: function(title){<br />
        this.result[++this.guid] = [title || this.guid, new Date().getTime()];<br />
    },<br />
    stop: function(){<br />
        var r = this.result[this.guid];<br />
        var t = new Date().getTime() &#8211; r[1];<br />
        this.totalTime += t;<br />
        r[1] = t;<br />
    },<br />
    report: function(){<br />
        this.guid = -1; //复原，重新开始计数<br />
        var div = document.createElement(&quot;div&quot;);<br />
		div.style.fontSize=&quot;12px&quot;;<br />
        document.body.appendChild(div);<br />
        var str = [];<br />
		str.push(&quot;&lt;p&gt;&lt;b&gt;The total times:&lt;/b&gt;&lt;span style=&#8217;color:#f00&#8242;&gt;&quot;+this.totalTime+&quot;&lt;/span&gt; ms.&lt;/p&gt;&quot;);<br />
        for (var i = 0, l = this.result.length; i &lt; l; i++) {<br />
			var temp=document.createElement(&quot;div&quot;);<br />
            var span = document.createElement(&quot;span&quot;);<br />
			var inner_span = document.createElement(&quot;span&quot;);</p>
<p>			temp.appendChild(span);<br />
			span.appendChild(inner_span);</p>
<p>			span.style.width=&quot;200px&quot;;<br />
		    span.style.display=&quot;inline-block&quot;;<br />
			span.style.backgroundColor=&quot;#eee&quot;;</p>
<p>            inner_span.style.backgroundColor = &quot;#f00&quot;;<br />
            inner_span.style.width = parseInt(200 * this.result[i][1] / this.totalTime) + &quot;px&quot;;<br />
			inner_span.style.display=&quot;inline-block&quot;;<br />
			inner_span.innerHTML=this.result[i][1];</p>
<p>            str.push(&quot;&lt;p&gt;&lt;span style=&#8217;width:150px; display:inline-block;&#8217;&gt;&quot; + this.result[i][0] + &quot;:&lt;/span&gt;  &quot;+temp.innerHTML+&quot;&lt;/p&gt;&quot;);</p>
<p>			temp=null;<br />
			span=null;<br />
			inner_span=null;<br />
        }<br />
        div.innerHTML = str.join(&quot;&quot;);<br />
    },<br />
	fns:function(){<br />
		var a=arguments;<br />
		for(var i=0,l=a.length;i&lt;l;i++){<br />
			this.start();<br />
			a[i]();<br />
			this.stop();<br />
		}<br />
	},<br />
	execByTimes:function(fn,times,title){<br />
		this.start(title);<br />
		while(times&#8211;){<br />
			fn();<br />
		}<br />
		this.stop();<br />
	}<br />
}<br />
[/javascript]
</p></div>
<p><script type="text/javascript">
var a=document.getElementById("link-watch");
var div=document.getElementById("watch-source");
a.onclick=function(){
   div.style.display="block";
   return false;
}
</script></p>
<p>
////////////////////////// <em>2010-01-28 updates</em>////////////////////////////
</p>
<p>
由于考虑到在使用Watch测试的过程中，需要在页面上打印一些说明性的信息，所以Watch对象增加了print的方法，示例可以浏览这个页面：《<a  href="http://www.ilovejs.net/lab/testDataAccess.html">测试页面</a>》。
</p>
<p>同时，Watch对象也修改了部分功能，最新修改版本：<a  href="http://www.ilovejs.net/lab/Watch_1_1.js">Watch_1_1.js</a></p>
<p>
////////////////////////// <em>2010-01-29 updates</em>////////////////////////////
</p>
<p>这次修正了fns方法之前没有设置title的参数，所以重写了fns的实现方式：<br />
[javascript]<br />
    fns: function(){<br />
        var a = arguments;<br />
        for (var i = 0, l = a.length; i &lt; l; i++) {<br />
            this.start(a[i][0]);<br />
            a[i][1]();<br />
            this.stop();<br />
        }<br />
    }<br />
[/javascript]<br />
fns方法内的参数不再是每一个函数，而是一个个数组，数组里第一个是title，第二个是函数，示例如下：<br />
[javascript]<br />
Watch.fns([&quot;Normal&quot;,function(){<br />
   ......<br />
}],[&quot;Special&quot;,function(){<br />
   ......<br />
}]);<br />
[/javascript]<br />
最新修改版本：<a  href="http://www.ilovejs.net/lab/Watch_1_2.js">Watch_1_2.js</a></p>
<p>
////////////////////////// <em>2010-01-30 updates</em>////////////////////////////
</p>
<p>
这次修正了当循环次数少的时候在IE下抛出“参数错误”的异常，同时加入了如果Javascript代码执行时间超过10s，就弹出提示框。虽然IE，FF，Google Chrome，Safari有内置了这个功能，可是Opera却没有。
</p>
<p>最新修改版本：<a  href="http://www.ilovejs.net/lab/Watch_1_3.js">Watch_1_3.js</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.ilovejs.net/archives/215/feed</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
	</channel>
</rss>

