﻿<?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>BlogJava-捕风之巢-文章分类-web 页面开发</title><link>http://www.blogjava.net/zhhp1314520/category/16707.html</link><description /><language>zh-cn</language><lastBuildDate>Fri, 02 Mar 2007 06:37:22 GMT</lastBuildDate><pubDate>Fri, 02 Mar 2007 06:37:22 GMT</pubDate><ttl>60</ttl><item><title>禁止IE缓存的方法</title><link>http://www.blogjava.net/zhhp1314520/articles/ie_no_cache.html</link><dc:creator>捕风</dc:creator><author>捕风</author><pubDate>Fri, 02 Mar 2007 06:01:00 GMT</pubDate><guid>http://www.blogjava.net/zhhp1314520/articles/ie_no_cache.html</guid><wfw:comment>http://www.blogjava.net/zhhp1314520/comments/101465.html</wfw:comment><comments>http://www.blogjava.net/zhhp1314520/articles/ie_no_cache.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/zhhp1314520/comments/commentRss/101465.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/zhhp1314520/services/trackbacks/101465.html</trackback:ping><description><![CDATA[
		<p class="MsoNormal">
				<font face="宋体" color="red" size="1">
						<span style="FONT-SIZE: 9pt; COLOR: red; FONT-FAMILY: 宋体">禁止页面内容缓存：</span>
				</font>
				<font face="Arial" color="red" size="1">
						<span lang="EN-US" style="FONT-SIZE: 9pt; COLOR: red; FONT-FAMILY: Arial">
								<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" /?>
								<o:p>
								</o:p>
						</span>
				</font>
		</p>
		<p class="MsoNormal">
				<font face="Arial" color="navy" size="1">
						<span lang="EN-US" style="FONT-SIZE: 9pt; COLOR: navy; FONT-FAMILY: Arial">  HTM</span>
				</font>
				<font face="宋体" color="navy" size="1">
						<span style="FONT-SIZE: 9pt; COLOR: navy; FONT-FAMILY: 宋体">网页</span>
				</font>
				<font face="Arial" color="navy" size="1">
						<span lang="EN-US" style="FONT-SIZE: 9pt; COLOR: navy; FONT-FAMILY: Arial">  <o:p></o:p></span>
				</font>
		</p>
		<p class="MsoNormal">
				<font face="Arial" color="navy" size="1">
						<span lang="EN-US" style="FONT-SIZE: 9pt; COLOR: navy; FONT-FAMILY: Arial">  &lt;META   HTTP-EQUIV="pragma"   CONTENT="no-cache"&gt;  <o:p></o:p></span>
				</font>
		</p>
		<p class="MsoNormal">
				<font face="Arial" color="navy" size="1">
						<span lang="EN-US" style="FONT-SIZE: 9pt; COLOR: navy; FONT-FAMILY: Arial">  &lt;META   HTTP-EQUIV="Cache-Control"   CONTENT="no-cache,   must-revalidate"&gt;  <o:p></o:p></span>
				</font>
		</p>
		<p class="MsoNormal">
				<font face="Arial" color="navy" size="1">
						<span lang="EN-US" style="FONT-SIZE: 9pt; COLOR: navy; FONT-FAMILY: Arial">  &lt;META   HTTP-EQUIV="expires"   CONTENT="Wed,   26   Feb   1997   08:21:57   GMT"&gt;  <o:p></o:p></span>
				</font>
		</p>
		<p class="MsoNormal">
				<font face="Arial" color="navy" size="1">
						<span lang="EN-US" style="FONT-SIZE: 9pt; COLOR: navy; FONT-FAMILY: Arial">  ASP</span>
				</font>
				<font face="宋体" color="navy" size="1">
						<span style="FONT-SIZE: 9pt; COLOR: navy; FONT-FAMILY: 宋体">网页</span>
				</font>
				<font face="Arial" color="navy" size="1">
						<span lang="EN-US" style="FONT-SIZE: 9pt; COLOR: navy; FONT-FAMILY: Arial">  <o:p></o:p></span>
				</font>
		</p>
		<p class="MsoNormal">
				<font face="Arial" color="navy" size="1">
						<span lang="EN-US" style="FONT-SIZE: 9pt; COLOR: navy; FONT-FAMILY: Arial">  &lt;%  <o:p></o:p></span>
				</font>
		</p>
		<p class="MsoNormal">
				<font face="Arial" color="navy" size="1">
						<span lang="EN-US" style="FONT-SIZE: 9pt; COLOR: navy; FONT-FAMILY: Arial">      Response.Expires   =   -1  <o:p></o:p></span>
				</font>
		</p>
		<p class="MsoNormal">
				<font face="Arial" color="navy" size="1">
						<span lang="EN-US" style="FONT-SIZE: 9pt; COLOR: navy; FONT-FAMILY: Arial">      Response.ExpiresAbsolute   =   Now()   -   1  <o:p></o:p></span>
				</font>
		</p>
		<p class="MsoNormal">
				<font face="Arial" color="navy" size="1">
						<span lang="EN-US" style="FONT-SIZE: 9pt; COLOR: navy; FONT-FAMILY: Arial">      Response.cachecontrol   =   "no-cache"  <o:p></o:p></span>
				</font>
		</p>
		<p class="MsoNormal">
				<font face="Arial" color="navy" size="1">
						<span lang="EN-US" style="FONT-SIZE: 9pt; COLOR: navy; FONT-FAMILY: Arial">  %&gt;  <o:p></o:p></span>
				</font>
		</p>
		<p class="MsoNormal">
				<font face="Arial" color="navy" size="1">
						<span lang="EN-US" style="FONT-SIZE: 9pt; COLOR: navy; FONT-FAMILY: Arial">  PHP</span>
				</font>
				<font face="宋体" color="navy" size="1">
						<span style="FONT-SIZE: 9pt; COLOR: navy; FONT-FAMILY: 宋体">网页</span>
				</font>
				<font face="Arial" color="navy" size="1">
						<span lang="EN-US" style="FONT-SIZE: 9pt; COLOR: navy; FONT-FAMILY: Arial">  <o:p></o:p></span>
				</font>
		</p>
		<p class="MsoNormal">
				<font face="Arial" color="navy" size="1">
						<span lang="EN-US" style="FONT-SIZE: 9pt; COLOR: navy; FONT-FAMILY: Arial">  header("Expires:   Mon,   26   Jul   1997   05:00:00   GMT");  <o:p></o:p></span>
				</font>
		</p>
		<p class="MsoNormal">
				<font face="Arial" color="navy" size="1">
						<span lang="EN-US" style="FONT-SIZE: 9pt; COLOR: navy; FONT-FAMILY: Arial">  header("Cache-Control:   no-cache,   must-revalidate");  <o:p></o:p></span>
				</font>
		</p>
		<p class="MsoNormal">
				<font face="Arial" color="navy" size="1">
						<span lang="EN-US" style="FONT-SIZE: 9pt; COLOR: navy; FONT-FAMILY: Arial">  header("Pragma:   no-cache");  <o:p></o:p></span>
				</font>
		</p>
		<p class="MsoNormal">
				<font face="Arial" color="navy" size="1">
						<span lang="EN-US" style="FONT-SIZE: 9pt; COLOR: navy; FONT-FAMILY: Arial">  JSP  <o:p></o:p></span>
				</font>
		</p>
		<p class="MsoNormal">
				<font face="Arial" color="navy" size="1">
						<span lang="EN-US" style="FONT-SIZE: 9pt; COLOR: navy; FONT-FAMILY: Arial">          response.setHeader("Pragma","No-Cache");  <o:p></o:p></span>
				</font>
		</p>
		<p class="MsoNormal">
				<font face="Arial" color="navy" size="1">
						<span lang="EN-US" style="FONT-SIZE: 9pt; COLOR: navy; FONT-FAMILY: Arial">          response.setHeader("Cache-Control","No-Cache");  <o:p></o:p></span>
				</font>
		</p>
		<p class="MsoNormal">
				<font face="Arial" color="navy" size="1">
						<span lang="EN-US" style="FONT-SIZE: 9pt; COLOR: navy; FONT-FAMILY: Arial">          response.setDateHeader("Expires",   0);  <o:p></o:p></span>
				</font>
		</p>
		<p class="MsoNormal">
				<font face="Arial" color="navy" size="1">
						<span lang="EN-US" style="FONT-SIZE: 9pt; COLOR: navy; FONT-FAMILY: Arial">  C#</span>
				</font>
				<font face="宋体" color="navy" size="1">
						<span style="FONT-SIZE: 9pt; COLOR: navy; FONT-FAMILY: 宋体">中禁止</span>
				</font>
				<font face="Arial" color="navy" size="1">
						<span lang="EN-US" style="FONT-SIZE: 9pt; COLOR: navy; FONT-FAMILY: Arial">cache</span>
				</font>
				<font face="宋体" color="navy" size="1">
						<span style="FONT-SIZE: 9pt; COLOR: navy; FONT-FAMILY: 宋体">的方法！</span>
				</font>
				<font face="Arial" color="navy" size="1">
						<span lang="EN-US" style="FONT-SIZE: 9pt; COLOR: navy; FONT-FAMILY: Arial">  <o:p></o:p></span>
				</font>
		</p>
		<p class="MsoNormal">
				<font face="Arial" color="navy" size="1">
						<span lang="EN-US" style="FONT-SIZE: 9pt; COLOR: navy; FONT-FAMILY: Arial">  Response.Buffer=true;  <o:p></o:p></span>
				</font>
		</p>
		<p class="MsoNormal">
				<font face="Arial" color="navy" size="1">
						<span lang="EN-US" style="FONT-SIZE: 9pt; COLOR: navy; FONT-FAMILY: Arial">  Response.ExpiresAbsolute=System.DateTime.Now.AddSeconds(-1);  <o:p></o:p></span>
				</font>
		</p>
		<p class="MsoNormal">
				<font face="Arial" color="navy" size="1">
						<span lang="EN-US" style="FONT-SIZE: 9pt; COLOR: navy; FONT-FAMILY: Arial">  Response.Expires=0;  <o:p></o:p></span>
				</font>
		</p>
		<p class="MsoNormal">
				<font face="Arial" color="navy" size="1">
						<span lang="EN-US" style="FONT-SIZE: 9pt; COLOR: navy; FONT-FAMILY: Arial">  Response.CacheControl="no-cache";  <o:p></o:p></span>
				</font>
		</p>
		<p class="MsoNormal">
				<font face="Arial" color="navy" size="1">
						<span lang="EN-US" style="FONT-SIZE: 9pt; COLOR: navy; FONT-FAMILY: Arial">
								<o:p> </o:p>
						</span>
				</font>
		</p>
		<p class="MsoNormal">
				<font face="宋体" color="red" size="1">
						<span style="FONT-SIZE: 9pt; COLOR: red; FONT-FAMILY: 宋体">禁止图片缓存：</span>
				</font>
				<font face="Arial" color="red" size="1">
						<span lang="EN-US" style="FONT-SIZE: 9pt; COLOR: red; FONT-FAMILY: Arial">
								<o:p>
								</o:p>
						</span>
				</font>
		</p>
		<p class="MsoNormal">
				<font face="宋体" color="navy" size="1">
						<span style="FONT-SIZE: 9pt; COLOR: navy; FONT-FAMILY: 宋体">在图片后面加一个随机参数，如：</span>
				</font>
				<font face="Arial" color="navy" size="1">
						<span lang="EN-US" style="FONT-SIZE: 9pt; COLOR: navy; FONT-FAMILY: Arial">
								<o:p>
								</o:p>
						</span>
				</font>
		</p>
		<p class="MsoNormal">
				<font face="Arial" color="navy" size="1">
						<span lang="EN-US" style="FONT-SIZE: 9pt; COLOR: navy; FONT-FAMILY: Arial">&lt;img src=”images/bg.gif?temp_id=156404/&gt;<o:p></o:p></span>
				</font>
		</p>
		<p class="MsoNormal">
				<font face="Arial" color="navy" size="1">
						<span lang="EN-US" style="FONT-SIZE: 9pt; COLOR: navy; FONT-FAMILY: Arial">
								<o:p> </o:p>
						</span>
				</font>
		</p>
		<p class="MsoNormal">
				<font face="宋体" color="red" size="1">
						<span style="FONT-SIZE: 9pt; COLOR: red; FONT-FAMILY: 宋体">经测试，有效。</span>
				</font>
				<font face="Arial" color="red" size="1">
						<span lang="EN-US" style="FONT-SIZE: 9pt; COLOR: red; FONT-FAMILY: Arial">
								<o:p>
								</o:p>
						</span>
				</font>
		</p>
		<p class="MsoNormal">
				<font face="Arial" color="red" size="1">
						<span lang="EN-US" style="FONT-SIZE: 9pt; COLOR: red; FONT-FAMILY: Arial">
								<o:p> </o:p>
						</span>
				</font>
		</p>
<img src ="http://www.blogjava.net/zhhp1314520/aggbug/101465.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/zhhp1314520/" target="_blank">捕风</a> 2007-03-02 14:01 <a href="http://www.blogjava.net/zhhp1314520/articles/ie_no_cache.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>javascript中子类调用父类方法解决方案</title><link>http://www.blogjava.net/zhhp1314520/articles/js_child_parent.html</link><dc:creator>捕风</dc:creator><author>捕风</author><pubDate>Sun, 31 Dec 2006 07:55:00 GMT</pubDate><guid>http://www.blogjava.net/zhhp1314520/articles/js_child_parent.html</guid><wfw:comment>http://www.blogjava.net/zhhp1314520/comments/91181.html</wfw:comment><comments>http://www.blogjava.net/zhhp1314520/articles/js_child_parent.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/zhhp1314520/comments/commentRss/91181.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/zhhp1314520/services/trackbacks/91181.html</trackback:ping><description><![CDATA[几乎每位在开发JavaScript时尝试应用面向对象技术的开发者，或多或少都会问自己一个问题：“如何调用父类（super class）的方法？”在Ajax技术还没有目前这样炙手可热之前，这种问题很少出现，因为大多数开发者仅在进行客户端form验证或者简单的 DHTML/DOM操作时使用JavaScript。在那些简单的解决方案中，<u><a href="http://wiki.matrix.org.cn/Wiki.jsp?page=FunctionalPrograming" target="_new">函数式编程（functional programming）</a></u>是很有意义的，面向对象编程则处在次之重要的位置。现在，Ajax技术发展势头迅猛，开发者已经建立了一个调用大量客户端JavaScript、不断增长的、复杂的系统。因此，在JavaScript上尝试OO技术便成为了管理复杂性的一种手段。在此过程中，多数开发者很快便认识到：JavaScript 是一种原型化的（prototypical）语言，它缺少OO自身带来的多种便利。<br /><br />        OO设计的主旨和关于它的一些话题谈起来很大，但只着眼于Class的定义方式，我认为它是JavaScript开发者尝试解决问题的首选。因此，你可以在互联网上找到许多不同的问题解决案例，但在我看过它们后不免有些失望——这些案例都是在某个场合下适用，而不是放之四海而皆准的通法。而我对这个话题的兴趣来自于我的team在开发<u><a href="http://www.thinwire.com/" target="_new">ThinWire Ajax Framework</a></u>的影响。由于这个框架生成出对客户端代码的需求，才使我们“被迫”去实现可靠的、支持父类方法调用的OO模式。通过父类调用，你可以进一步依靠类的继承特性来核心化通用代码，从而更易于减少重复代码，去掉客户端<u><a href="http://wiki.matrix.org.cn/Wiki.jsp?page=CodeSmell" target="_new">代码的坏味道</a></u>。<br /><br />        下面罗列出了一些在我的研究过程中遇到的解决方式。最终，我没有从中找出一个可以接收的解决方案，于是我不得不实现一个自己的解决方案，你将在本文的结尾部分看到这个方案。<br /><br />        然而父类调用在这里是最重要的OO机制，因此我需要一个相应的工作模式，也正是因为在我的观点中原型化方式是丑陋的，所以我更需要一种更加自然地使用JavaScript定义类的方法。<br /><br /><b><span style="FONT-SIZE: 14px"><span style="COLOR: blue">More Solutions：</span></span></b><br /><br />        好吧，让我们进入讨论。正如开发者所察觉的那样，在JS中实现基本的继承是很容易的事，事实上有一些众所周知的方法：<br /><br /><b><span style="FONT-SIZE: 11px"><span style="COLOR: green">丑陋的Solution：</span></span></b><br /><br />        <i>没有进行父类调用的简单继承:</i><br /><pre class="overflow"><br />// 提前写好的JavaScript Class定义和继承<br />// 当然，这种代码很丑陋，散发着代码的坏味道。<br />function BaseClass() {<br />    //BaseClass constructor code goes here <br />}<br /><br />BaseClass.prototype.getName = function() {<br />    return "BaseClass";<br />}<br /><br />function SubClass() {<br />    //SubClass constructor code goes here <br />}<br /><br />//Inherit the methods of BaseClass<br />SubClass.prototype = new BaseClass();<br /><br />//Override the parent's getName method<br />SubClass.prototype.getName = function() {<br />    return "SubClass";<br />}<br /><br />//Alerts "SubClass"<br />alert(new SubClass().getName());<br /></pre><br /><br /><b><span style="FONT-SIZE: 11px"><span style="COLOR: green">导致<u><a href="http://www.cnblogs.com/birdshome/archive/2006/05/28/IE_MemoryLeak.html" target="_new">IE内存泄露</a></u>的Solution：</span></span></b><br /><br />        <i>这种实现方式能够导致在IE中的内存泄漏，你应该尽量避免：</i><br /><pre class="overflow"><br />// 运行时的JavaScript Class 定义和继承<br />// 看上去很传统，但这些脚本会导致在Internet Explorer中的内存泄漏.<br />function BaseClass() {<br />    this.getName = function() {<br />        return "BaseClass";<br />    };    <br /><br />    //BaseClass constructor code goes here <br />}<br /><br />function SubClass() {<br />    //在对象实例建立时重载父类的getName方法 <br />    this.getName = function() {<br />        return "SubClass";<br />    }<br /><br />    //SubClass constructor code goes here <br />}<br /><br />//Inherit the methods of BaseClass<br />SubClass.prototype = new BaseClass();<br /><br />//Alerts "SubClass"<br />alert(new SubClass().getName());<br /></pre>        <br /><br />        就像我在第一个实现方法中所注释的那样，第一个实现方法有些丑陋，但它相比引起内存泄漏的第二种方式便是首选了。<br /><br />        我把这两种方法放在这里的目的是指出你不应该使用它们。<br /><br /><b><span style="FONT-SIZE: 11px"><span style="COLOR: green">硬性编码的Solution：</span></span></b><br /><br />        让我们看一下第一个例子，它采用了标准的原型化方式，但问题是：它的子类方法如何调用父类（基类）方法？下面是一些开发者尝试并采用的方式：<br /><br />        <i>一种企图进行父类调用的“通病”:</i><br /><pre class="overflow"><br />function BaseClass() { }<br />BaseClass.prototype.getName = function() {<br />    return "BaseClass(" + this.getId() + ")";<br />}<br /><br />BaseClass.prototype.getId = function() {<br />    return 1;<br />}<br /><br />function SubClass() {}<br />SubClass.prototype = new BaseClass();<br />SubClass.prototype.getName = function() {<br />    //调用父类的getName()方法<br />    //哈哈，这是对父类调用的直接引用吗？<br />    return "SubClass(" + this.getId() + ") extends " +<br />        BaseClass.prototype.getName();<br />}<br /><br />SubClass.prototype.getId = function() {<br />    return 2;<br />}<br /><br />//输出结果："SubClass(2) extends BaseClass(1)";<br />//这是正确的输出吗?<br />alert(new SubClass().getName());<br /></pre><br /><br />         上面的代码是对第一段脚步进行修改后的版本，我去掉了一些注释和空格，使你能注意到新的getId()方法和对父类的调用。你一定急于知道通过这样对 BaseClass的硬性编码引用（hard coded reference），它是否能进行正确地调用BaseClass的方法?<br /><br />         一个正确的、多态的父类调用必做的事情是保证“this”引用指向当前对象实例和类方法。在这里，看上去和它应该输出的结果非常接近，看上去好像在 SubClass中调用了BaseClass的getName()方法。你发现问题了吗？这个问题是非常细小的，但却很重要决不能忽视。通过使用上面的父类调用语法，BaseClass的getName()方法被调用，它返回一个字符串：包括类名和“this.getId()”的返回值。问题在于 “this.getId()”应该返回2，而不是1。如果这和你所想的不同，你可以查看Java或者C#这类OO语言的多态性。<br /><br /><b><span style="FONT-SIZE: 11px"><span style="COLOR: green">改进后的硬性编码Solution：</span></span></b><br /><br />        你可以通过一个微小的改动来解决这个问题。<br /><br /><i>静态（硬编码）父类调用:</i><br /><pre class="overflow"><br />function BaseClass() { }<br />BaseClass.prototype.getName = function() {<br />    return "BaseClass(" + this.getId() + ")";<br />}<br /><br />BaseClass.prototype.getId = function() {<br />    return 1;<br />}<br /><br />function SubClass() {}<br />SubClass.prototype = new BaseClass();<br />SubClass.prototype.getName = function() {<br />    //一点魔法加上多态性！<br />    //但很明显，这还是一个直接引用!    <br />    return "SubClass(" + this.getId() + ") extends " +<br />        BaseClass.prototype.getName.call(this);<br />}<br /><br />SubClass.prototype.getId = function() {<br />    return 2;<br />}<br /><br />//输出结果："SubClass(2) extends BaseClass(2)";<br />//Hey, 我们得到了正确的输出!<br />alert(new SubClass().getName());<br /></pre><br /><br />        在<u><a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm" target="_new">ECMA-262 JavaScript/EcmaScript标准</a></u>中， Call()方法是所有Function实例的一个成员方法，这已经被所有的主流浏览器所支持。JavaScript把所有的function看作对象，因此每个function都具有方法和附着其上的属性。Call()方法允许你调用某个function，并在function的调用过程中确定 “this”变量应该是什么。JavaScript的function没有被紧紧地绑定到它所在的对象上，所以如果你没有显式地使用call()方法， “this”变量将成为function所在的对象。<br /><br />        另外一种方法是使用apply方法，它和call()方法类似，只在参数上存在不同：apply()方法接受参数的数组，而call()方法接受单个参数。<br /><br /><b><span style="FONT-SIZE: 11px"><span style="COLOR: green"><u><a href="http://en.wikipedia.org/wiki/Douglas_Crockford" target="_new">Douglas Crockford</a></u>的Solution:</span></span></b><br /><br />        现在回溯到上面的示例，在这个示例中唯一的问题就是父类引用是直接的、硬性编写的。它可以适用于小型的类继承环境，但对于具有较深层次的大型继承来讲，这些直接引用非常难于维护。<br /><br />        那么，有解决方法吗？不幸的是这里没有简单的解决方案。<br /><br />        JavaScript没有提供对通过“隐性引用”方式调用父类方法的支持，这里也没有在其它OO语言中使用的“super”变量的等价物。于是，一些开发者做出了自己的解决方案，但就像我前面提到的那样，每个解决方案都存在某种缺点。<br /><br />        例如，下面列出的众多著名方法之一：JavaScript大师<u>[ur=http://en.wikipedia.org/wiki/Douglas_Crockford]Douglas Crockford[/url]</u>在他的<u><a href="http://www.crockford.com/javascript/inheritance.html" target="_new">《Classical Inheritance in JavaScript》</a></u>中提出的方法。<br /><br />        Douglas Crockford的方法在多数情况下可以正常工作:<br /><br /><i>一次性支持代码：</i><br /><pre class="overflow"><br />//Crockford的方法：给所有的function都增加'inherits' 方法、<br />//每个类都增加了'uber'方法来调用父类方法<br />Function.prototype.inherits = function(parent) {<br />    var d = 0, p = (this.prototype = new parent());<br />    <br />    this.prototype.uber = function(name) {<br />        var f, r, t = d, v = parent.prototype;<br />        if (t) {<br />            while (t) {<br />                v = v.constructor.prototype;<br />                t -= 1;<br />            }<br />            f = v[name];<br />        } else {<br />            f = p[name];<br />            if (f == this[name]) {<br />                f = v[name];<br />            }<br />        }<br />        d += 1;<br />        r = f.apply(this, Array.prototype.slice.apply(arguments, [1]));<br />        d -= 1;<br />        return r;<br />    };<br />};<br /></pre><br /><br /><i>运行示例：</i><br /><pre class="overflow"><br />function BaseClass() { }<br />BaseClass.prototype.getName = function() {<br />    return "BaseClass(" + this.getId() + ")";<br />}<br /><br />BaseClass.prototype.getId = function() {<br />    return 1;<br />}<br /><br />function SubClass() {}<br />SubClass.inherits(BaseClass);<br />SubClass.prototype.getName = function() {<br />    //这里看上去非常的清晰，它调用了BaseClass的getName()方法<br />return "SubClass(" + this.getId() + ") extends " +<br />        this.uber("getName");<br />}<br /><br />SubClass.prototype.getId = function() {<br />    return 2;<br />}<br /><br />function TopClass() {}<br />TopClass.inherits(SubClass);<br />TopClass.prototype.getName = function() {<br />    //这里看上去非常的清晰，它调用了SubClass的getName()方法<br />    return "TopClass(" + this.getId() + ") extends " +<br />        this.uber("getName");<br />}<br /><br />TopClass.prototype.getId = function() {<br />    //Ok, 因此this.getId()应该总是<br />//返回调用SubClass的getId()方法的返回值（2）。<br />    return this.uber("getId");<br />}<br /><br />//输出结果："TopClass(2) extends SubClass(1) extends BaseClass(1)"<br />//嗯？后面的两次this.getId()调用都没有返回2.<br />//发生了什么？ <br />alert(new TopClass().getName());<br /></pre>        <br />         上面代码的第一部分包括了Crockford的“inherit”和“uber”方法代码。第二部分看上去和前面的示例很类似，除了我添加了用来演示 Crockford方式所存在问题的第三层继承关系。诚然，Crockford这位JavaScript大师的方法是我所找到的最可靠的方法之一，我很敬佩他在JavaScript编程方面做出的贡献。但是，如果你使用三个依次继承的类来考核他的代码，你将从输出中发现这里存在着细微的问题。<br /><br />         从输出结果看，第一次调用的this.getId()返回了TopClass当前的id值“2”，但在调用SubClass和BaseClass的 getName()方法时返回了“1”而不是“2”。从代码上看，在getName()方法中的父类调用行为是正确的，三个类的名字都被正确地显示出来。唯一的问题出现在this.uber("getId")这个父类调用被放入调用堆栈（call stack）时。因为此时当前对象是一个TopClass实例，而每次调用在调用堆栈中的this.getId()都应该返回调用TopClass的 getId()方法后的返回值。<br /><br />        而问题是TopClass的this.getId()方法通过this.uber ("getId")执行了父类调用，这三次this.getId()调用中的后两次错误地调用了BaseClass的getId()方法，这样便在输出结果中显示了两次“1”。正确的行为应该是调用三次SubClass的getId()方法，在输出结果中显示三次“2”。大家可以通过<u><a href="https://addons.mozilla.org/firefox/1843/" target="_new">FireFox的FireBug插件</a></u>进行代码debug进行观察。<br /><br />        这是十分难以描述的现象，我不能保证我能把它解释清楚。但是至少从上面的运行结果中可以看出它是错误的。<br /><br />        另外，Crockford的方法和其它一些方法的劣势在于每个父类调用都需要一个额外的方法调用和额外的某种处理。这是否成为你所面临的问题，取决于你所使用的父类调用深度。在<u><a href="http://www.thinwire.com/" target="_new">ThinWire</a></u>项目的客户端代码中使用了大量的父类调用，因此父类调用的可靠性和快速性在项目中是很重要的。<br /><br /><b><span style="FONT-SIZE: 11px"><span style="COLOR: green">我的初级Solution：</span></span></b><br /><br />        面对这样的窘境——<b>Crockford的方法出现问题、在互联网上没有找到符合要求的方法，我决定看看我自己是否可以发明一种可以满足要求的方法。</b>这花掉了我近一周的时间来使代码工作并满足各种情况，但我对它的工作情况很有信心，并且很快把它与framework集成在一起，TinWire的beta和beta2两个版本中都使用了这些“初级设计”的代码。<br /><br />        动态父类调用:<br /><br /><i>一次性支持代码：</i><br /><pre class="overflow"><br />//定义最顶级类<br />function Class() { }<br />Class.prototype.construct = function() {};<br />Class.__asMethod__ = function(func, superClass) {    <br />    return function() {<br />        var currentSuperClass = this.$;<br />        this.$ = superClass;<br />        var ret = func.apply(this, arguments);        <br />        this.$ = currentSuperClass;<br />        return ret;<br />    };<br />};<br /><br />Class.extend = function(def) {<br />    var classDef = function() {<br />        if (arguments[0] !== Class) { this.construct.apply(this, arguments); }<br />    };<br />    <br />    var proto = new this(Class);<br />    var superClass = this.prototype;<br />    <br />    for (var n in def) {<br />        var item = def[n];                        <br />        <br />        if (item instanceof Function) {<br />            item = Class.__asMethod__(item, superClass);<br />        }<br />        <br />        proto[n] = item;<br />    }<br /><br />    proto.$ = superClass;<br />    classDef.prototype = proto;<br />    <br />    //赋给这个新的子类同样的静态extend方法<br />    classDef.extend = this.extend;        <br />    return classDef;<br />};<br /></pre><br /><br /><i>运行示例：</i><br /><pre class="overflow"><br />//Hey, 注意一下这个类的定义方式<br />//看上去比其它方式要清楚些<br />var BaseClass = Class.extend({<br />    construct: function() { /* optional constructor method */ },<br />    <br />    getName: function() {<br />        return "BaseClass(" + this.getId() + ")";<br />    },<br />    <br />    getId: function() {<br />        return 1;<br />    }<br />});<br /><br />var SubClass = BaseClass.extend({<br />    getName: function() {<br />        //调用BaseClass的getName()方法<br />        return "SubClass(" + this.getId() + ") extends " +<br />            this.$.getName.call(this);<br />    },<br />    <br />    getId: function() {<br />        return 2;<br />    }<br />});<br /><br />var TopClass = SubClass.extend({<br />    getName: function() {<br />        //调用SubClass的getName()方法<br />        return "TopClass(" + this.getId() + ") extends " +<br />            this.$.getName.call(this);<br />    },<br />    <br />    getId: function() {<br />        //this.getId()总是返回调用父类的getId()方法的返回值（2）<br />        return this.$.getId.call(this);<br />    }<br />});<br /><br />//输出结果："TopClass(2) extends SubClass(2) extends BaseClass(2)"<br />//一切都正确!<br />alert(new TopClass().getName());<br /></pre><br />         这里是前面示例的，但是目前这种方式包括了通过“extend”方法实现的十分清晰的类定义模式和正确的父类调用语义。尤其是“extend”方法通过一个中间function封装了类定义中的每个方法，这个中间function在每次方法调用时首先把当前父类引用“$” 与正确的父类引用相互交换，然后把这个正确的父类引用传递给apply()进行方法调用，最后再将把当前父类引用“$” 与正确的父类引用交换回来。这种方式唯一的问题就是它需要一些中间function，它们会对性能产生不良影响。所以近来我重新审视了设计、完成了去掉了中间function了一种改良的方式。<br /><br /><b><span style="FONT-SIZE: 11px"><span style="COLOR: green">改良后的Solution：</span></span></b><br /><br />        动态父类调用快速版本:<br /><br /><i>一次性支持代码</i><br /><pre class="overflow"><br />//定义最顶级类<br />function Class() { }<br />Class.prototype.construct = function() {};<br />Class.extend = function(def) {<br />    var classDef = function() {<br />        if (arguments[0] !== Class) { this.construct.apply(this, arguments); }<br />    };<br />    <br />    var proto = new this(Class);<br />    var superClass = this.prototype;<br />    <br />    for (var n in def) {<br />        var item = def[n];                        <br />        if (item instanceof Function) item.$ = superClass;<br />        proto[n] = item;<br />    }<br /><br />    classDef.prototype = proto;<br />    <br />    //赋给这个新的子类同样的静态extend方法 <br />    classDef.extend = this.extend;        <br />    return classDef;<br />};<br /></pre><br /><br /><i>运行示例：</i><br /><pre class="overflow"><br />//Hey, 注意一下这个类的定义方式<br />//看上去比其它方式要清楚些<br />var BaseClass = Class.extend({<br />    construct: function() { /* optional constructor method */ },<br />        <br />    getName: function() {<br />        return "BaseClass(" + this.getId() + ")";<br />    },<br />    <br />    getId: function() {<br />        return 1;<br />    }<br />});<br /><br />var SubClass = BaseClass.extend({<br />    getName: function() {<br />        //调用BaseClass的getName()方法<br />        return "SubClass(" + this.getId() + ") extends " +<br />            arguments.callee.$.getName.call(this);<br />    },<br />    <br />    getId: function() {<br />        return 2;<br />    }<br />});<br /><br />var TopClass = SubClass.extend({<br />    getName: function() {<br />        //调用SubClass的getName()方法<br />        return "TopClass(" + this.getId() + ") extends " +<br />            arguments.callee.$.getName.call(this);<br />    },<br />    <br />    getId: function() {<br />        // this.getId()总是返回调用父类的getId()方法的返回值（2） <br />        return arguments.callee.$.getId.call(this);<br />    }<br />});<br /><br />//输出结果："TopClass(2) extends SubClass(2) extends BaseClass(2)"<br />//工作正常！而且没有任何中间function<br />alert(new TopClass().getName());<br /></pre><br />        这是最后的设计，它使用了JavaScript中一点鲜为人知的特性：callee。<br /><br />         在任何方法执行过程中，你可以查看那些通过“arguments”数组传入的参数，这是众所周知的，但很少有人知道“arguments”数组包含一个名为“callee”的属性，它作为一个引用指向了当前正在被执行的function，而后通过“$”便可以方便的获得当前被执行function所在类的父类。这是非常重要的，因为它是获得此引用的唯一途径（通过“this”对象获得的function引用总是指向被子类重载的function，而后者并非全是正在被执行的function）。<img src ="http://www.blogjava.net/zhhp1314520/aggbug/91181.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/zhhp1314520/" target="_blank">捕风</a> 2006-12-31 15:55 <a href="http://www.blogjava.net/zhhp1314520/articles/js_child_parent.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>Ajax应用详解－－图像网站的xml动态更新</title><link>http://www.blogjava.net/zhhp1314520/articles/ajax_xml.html</link><dc:creator>捕风</dc:creator><author>捕风</author><pubDate>Fri, 03 Nov 2006 03:31:00 GMT</pubDate><guid>http://www.blogjava.net/zhhp1314520/articles/ajax_xml.html</guid><wfw:comment>http://www.blogjava.net/zhhp1314520/comments/78883.html</wfw:comment><comments>http://www.blogjava.net/zhhp1314520/articles/ajax_xml.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/zhhp1314520/comments/commentRss/78883.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/zhhp1314520/services/trackbacks/78883.html</trackback:ping><description><![CDATA[&nbsp;&nbsp;&nbsp;&nbsp; 摘要: 1.客户端页面：showPic.html&lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312"&gt;&lt;SCRIPT LANGUAGE="JavaScript" src="prototype-1.4.0.js"&gt;&lt;/SCRIPT&gt;&lt;SC...&nbsp;&nbsp;<a href='http://www.blogjava.net/zhhp1314520/articles/ajax_xml.html'>阅读全文</a><img src ="http://www.blogjava.net/zhhp1314520/aggbug/78883.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/zhhp1314520/" target="_blank">捕风</a> 2006-11-03 11:31 <a href="http://www.blogjava.net/zhhp1314520/articles/ajax_xml.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>javascript读取xml工具XmlReader.js源代码</title><link>http://www.blogjava.net/zhhp1314520/articles/xmlReader.html</link><dc:creator>捕风</dc:creator><author>捕风</author><pubDate>Thu, 02 Nov 2006 09:20:00 GMT</pubDate><guid>http://www.blogjava.net/zhhp1314520/articles/xmlReader.html</guid><wfw:comment>http://www.blogjava.net/zhhp1314520/comments/78729.html</wfw:comment><comments>http://www.blogjava.net/zhhp1314520/articles/xmlReader.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/zhhp1314520/comments/commentRss/78729.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/zhhp1314520/services/trackbacks/78729.html</trackback:ping><description><![CDATA[
		<p>XmlReader.js源代码：<br /><br />//RSS是目前流行的网络信息发布标准,有了标准后数据传播和共享变的更加容易。<br />//常见的RSS信息如博客、新闻、技术文档等。<br />//本人编写了javascript读取RSS数据的代码<br />/**<br />/*操作示例<br />var xmlReader = new XmlReader();<br />var xmlDoc = xmlReader.createXmlDoc()<br />if(xmlDoc!=null)<br />{<br /> //读取包含xml的字符串<br /> xmlDoc.loadXML(xmlStr); <br /> //读取xml文件<br /> xmlDoc.load(xmlFile); <br /> //读取节点，返回包含节点的数组<br /> var tabs = xmlDoc.selectNodes("NewDataSet/TableName");  <br /> for(var i=0; i&lt;tabs.length; i++)  <br /> {  <br />   var txt = tabs.item(i).getElementsByTagName("TableName").item(0).text;  <br />    var val = tabs.item(i).getElementsByTagName("TableID").item(0).text; <br />    //运用到下拉列表中<br />    var opt = new Option(txt,val,true,true);  <br />    sel.options[sel.options.length] = opt;  <br /> }<br /> xmlDoc=null;<br /> xmlReader.close();<br />**/</p>
		<p>function XmlReader()<br />{<br /> this.xmlDoc=null;<br /> this.createXmlDoc=getXmlDoc;<br /> this.close=closeXmlDoc;<br />}<br />function getXmlDoc()<br />{<br /> if (window.ActiveXObject)<br />  {<br />    //document.write("Microsoft.XMLDOM");<br />   this.xmlDoc = new ActiveXObject("Microsoft.XMLDOM");<br />  }<br />  else if (document.implementation &amp;&amp; document.implementation.createDocument)<br />  {<br />   //document.write("document.implementation.createDocument");<br />   this.xmlDoc= document.implementation.createDocument("","doc",null);<br />  }<br />  if (typeof this.xmlDoc!="undefined")<br />  {<br />   return this.xmlDoc;<br />  }else{<br />   return null;<br />  }<br />}<br />function closeXmlDoc()<br />{<br /> this.xmlDoc=null<br />}<br />   </p>
<img src ="http://www.blogjava.net/zhhp1314520/aggbug/78729.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/zhhp1314520/" target="_blank">捕风</a> 2006-11-02 17:20 <a href="http://www.blogjava.net/zhhp1314520/articles/xmlReader.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>最近用javascript制作rss2.0阅读器的心得 </title><link>http://www.blogjava.net/zhhp1314520/articles/javascript_rss_reader.html</link><dc:creator>捕风</dc:creator><author>捕风</author><pubDate>Wed, 01 Nov 2006 09:29:00 GMT</pubDate><guid>http://www.blogjava.net/zhhp1314520/articles/javascript_rss_reader.html</guid><wfw:comment>http://www.blogjava.net/zhhp1314520/comments/78518.html</wfw:comment><comments>http://www.blogjava.net/zhhp1314520/articles/javascript_rss_reader.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/zhhp1314520/comments/commentRss/78518.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/zhhp1314520/services/trackbacks/78518.html</trackback:ping><description><![CDATA[&nbsp;&nbsp;&nbsp;&nbsp; 摘要: 最近用javascript制作rss2.0阅读器的心得								思路还是很清晰的，虽然只是实现了样本功能，但是其它的也都是大同小异。				 				有这么几个地方值得以后借鉴：				 				1。特殊的for循环：																		Code highlighting produced by Actipro CodeHighlighte...&nbsp;&nbsp;<a href='http://www.blogjava.net/zhhp1314520/articles/javascript_rss_reader.html'>阅读全文</a><img src ="http://www.blogjava.net/zhhp1314520/aggbug/78518.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/zhhp1314520/" target="_blank">捕风</a> 2006-11-01 17:29 <a href="http://www.blogjava.net/zhhp1314520/articles/javascript_rss_reader.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>用javascript读取RSS数据</title><link>http://www.blogjava.net/zhhp1314520/articles/javascript_rss.html</link><dc:creator>捕风</dc:creator><author>捕风</author><pubDate>Wed, 01 Nov 2006 09:25:00 GMT</pubDate><guid>http://www.blogjava.net/zhhp1314520/articles/javascript_rss.html</guid><wfw:comment>http://www.blogjava.net/zhhp1314520/comments/78517.html</wfw:comment><comments>http://www.blogjava.net/zhhp1314520/articles/javascript_rss.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/zhhp1314520/comments/commentRss/78517.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/zhhp1314520/services/trackbacks/78517.html</trackback:ping><description><![CDATA[
		<tr bgcolor="#f8f8f8" _base_href="http://blog.sanhaostreet.com/user1/119564/archives/2006/522.asp">
				<td _base_href="http://blog.sanhaostreet.com/user1/119564/archives/2006/522.asp">
						<font size="4">
								<strong>用<a name="baidusnap0" _base_href="http://blog.sanhaostreet.com/user1/119564/archives/2006/522.asp"></a><b style="COLOR: black; BACKGROUND-COLOR: rgb(255,255,102)">javascript</b>读取<a name="baidusnap1" _base_href="http://blog.sanhaostreet.com/user1/119564/archives/2006/522.asp"></a><b style="COLOR: black; BACKGROUND-COLOR: rgb(160,255,255)">RSS</b>数据</strong>
						</font>
						<br />庆祝申奥成功 发表于 2006-5-13 16:50:46 </td>
		</tr>
		<tr bgcolor="#ffffff" _base_href="http://blog.sanhaostreet.com/user1/119564/archives/2006/522.asp">
				<td _base_href="http://blog.sanhaostreet.com/user1/119564/archives/2006/522.asp" height="0">
						<table cellspacing="0" cellpadding="0" width="100%" border="0" _base_href="http://blog.sanhaostreet.com/user1/119564/archives/2006/522.asp">
								<tbody _base_href="http://blog.sanhaostreet.com/user1/119564/archives/2006/522.asp">
										<tr _base_href="http://blog.sanhaostreet.com/user1/119564/archives/2006/522.asp">
												<td _base_href="http://blog.sanhaostreet.com/user1/119564/archives/2006/522.asp">
														<p>
																<b style="COLOR: black; BACKGROUND-COLOR: rgb(160,255,255)">RSS</b>是目前流行的网络信息发布标准,有了标准后数据传播和共享变的更加容易。常见的<b style="COLOR: black; BACKGROUND-COLOR: rgb(160,255,255)">RSS</b>信息如博客、新闻、技术文档等。本人编写了<b style="COLOR: black; BACKGROUND-COLOR: rgb(255,255,102)">javascript</b>读取<b style="COLOR: black; BACKGROUND-COLOR: rgb(160,255,255)">RSS</b>数据的代码。<br /></p>
														<p>&lt;html&gt;<br /> &lt;head&gt;<br />      &lt;title&gt;<b style="COLOR: black; BACKGROUND-COLOR: rgb(255,255,102)">javascript</b>读取<b style="COLOR: black; BACKGROUND-COLOR: rgb(160,255,255)">RSS</b>数据&lt;/title&gt;<br />  &lt;META content="text/html; charset=utf-8" http-equiv=Content-Type /&gt;</p>
														<p> &lt;/head&gt;<br /> &lt;body  leftmargin="0" topmargin="0"&gt; <br /> &lt;font&gt;&lt;h3 align="center"&gt;<b style="COLOR: black; BACKGROUND-COLOR: rgb(255,255,102)">javascript</b>读取<b style="COLOR: black; BACKGROUND-COLOR: rgb(160,255,255)">RSS</b>数据&lt;/h3&gt;&lt;/font&gt;<br /> &lt;br&gt;  <br /> &lt;table width="90%" align="center" border="0" cellpadding=0 cellspacing=0&gt;<br />  &lt;tr&gt;<br />   &lt;td bgcolor=White&gt;&lt;b&gt;新闻中心&lt;/b&gt;&lt;font size="-1"&gt;(摘自新浪网)&lt;/font&gt;&lt;hr&gt;&lt;/td&gt;<br />  &lt;/tr&gt;<br />  &lt;tr&gt;<br />   &lt;td  bgcolor=White&gt;<br />    &lt;div id="container" &gt;News Loading...&lt;/div&gt;<br />   &lt;/td&gt;<br />  &lt;/tr&gt;<br /> &lt;/table&gt;<br />&lt;script language="<b style="COLOR: black; BACKGROUND-COLOR: rgb(255,255,102)">JavaScript</b>1.2"&gt;<br /> //Container for ticker. Modify its STYLE attribute to customize style:<br /> var tickercontainer=''<br /> var xmlsource="<a href="http://rss.sina.com.cn/news/marquee/ddt.xml" _base_href="http://blog.sanhaostreet.com/user1/119564/archives/2006/522.asp">http://<b style="COLOR: black; BACKGROUND-COLOR: rgb(160,255,255)">rss</b>.sina.com.cn/news/marquee/ddt.xml</a>";<br /> var root;<br /> var title;<br /> var link; <br /> var items;<br /> var item;<br /> var images;<br /> var image;<br /> var description;<br /> if (window.ActiveXObject)<br /> {<br />  //document.write("Microsoft.XMLDOM");<br />  var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");<br /> }<br /> else if (document.implementation &amp;&amp; document.implementation.createDocument)<br /> {<br />  //document.write("document.implementation.createDocument");<br />  var xmlDoc= document.implementation.createDocument("","doc",null);<br /> }<br /> if (typeof xmlDoc!="undefined")<br /> {<br />  //document.write(tickercontainer)<br />  xmlDoc.load(xmlsource)<br /> }  <br /> function fetchxml()<br /> {<br />  if (xmlDoc.readyState==4)<br />   output()<br />  else<br />   setTimeout("fetchxml()",10)<br /> }<br /> function output()<br /> {  <br />  var temp="";<br />  root = xmlDoc.getElementsByTagName("channel")[0];<br />  title =root.getElementsByTagName("title")[0];<br />  //temp = title.firstChild.nodeValue +"&lt;br&gt;";<br />  items=root.getElementsByTagName("item");<br />  for(i=0;i&lt;=items.length-1;i++)<br />  {<br />   item=items[i];<br />   title=item.getElementsByTagName("title")[0]; <br />   link=item.getElementsByTagName("link")[0];<br />   description=item.getElementsByTagName("description")[0];<br />   temp = temp + "&lt;font size=-1&gt;&lt;a href=" + link.firstChild.nodeValue+ " target='_bank'&gt;" + title.firstChild.nodeValue +"&lt;/a&gt;&lt;/font&gt;&lt;br&gt;&lt;br&gt;";<br />   //temp = temp +"&lt;font size=-1&gt;" + description.firstChild.nodeValue + "&lt;/font&gt;&lt;br&gt;&lt;br&gt;";<br />   document.getElementById("container").innerHTML = temp;<br />  }<br /> }<br /> if (window.ActiveXObject)<br />  fetchxml()<br /> else if (typeof xmlDoc!="undefined")<br />  xmlDoc.onload=output<br /> &lt;/script&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</p>
												</td>
										</tr>
								</tbody>
						</table>
				</td>
		</tr>
<img src ="http://www.blogjava.net/zhhp1314520/aggbug/78517.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/zhhp1314520/" target="_blank">捕风</a> 2006-11-01 17:25 <a href="http://www.blogjava.net/zhhp1314520/articles/javascript_rss.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>实现图片和flash的混合切换</title><link>http://www.blogjava.net/zhhp1314520/articles/css_pic.html</link><dc:creator>捕风</dc:creator><author>捕风</author><pubDate>Tue, 31 Oct 2006 07:10:00 GMT</pubDate><guid>http://www.blogjava.net/zhhp1314520/articles/css_pic.html</guid><wfw:comment>http://www.blogjava.net/zhhp1314520/comments/78279.html</wfw:comment><comments>http://www.blogjava.net/zhhp1314520/articles/css_pic.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/zhhp1314520/comments/commentRss/78279.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/zhhp1314520/services/trackbacks/78279.html</trackback:ping><description><![CDATA[
		<p>&lt;html&gt;<br />&lt;head&gt;</p>
		<p>&lt;script language='javascript'&gt;<br />function showitem(itemname,itemsrc,itemtype)<br />{<br /> this.itemname=itemname;<br /> this.itemsrc=itemsrc;<br /> this.itemtype=itemtype;<br /> <br /> this.play=showplay;<br />}<br />function showplay()<br />{<br /> if(this.itemtype=='img'){<br />  <br /> }else{<br /> <br /> }<br />}<br />function itemlist(){<br />this.item1=new showitem("item1","1.gif","img");<br />this.item2=new showitem("item2","pixviewer.swf","fla");<br />this.item3=new showitem("item3","2.gif","img");<br />this.item4=new showitem("item4","1.gif","img");<br />this.item5=new showitem("item5","2.gif","img");<br />this.size=5;<br />}</p>
		<p>var mylist=new itemlist();<br />mysize=mylist.size;<br />count=1;</p>
		<p>
				<br />function change_item()<br />{<br />var myitem = mylist['item'+count];<br />var preitem ;<br />if(count&gt;1){<br /> preitem = mylist['item'+(count-1)];<br />}else{<br /> preitem = mylist['item'+count];<br />}</p>
		<p>if(myitem.itemtype=='img'){<br /> document.all('picdiv').style.backgroundImage='url('+preitem.itemsrc+')';<br /> <br /> document.pic.src=myitem.itemsrc;<br /> document.all('picdiv').style.display='';<br /> document.all('fladiv').style.display='none';</p>
		<p> pic.filters.revealTrans.Transition=6;<br /> pic.filters.item(0).apply()<br /> pic.style.visibility='visible'<br /> pic.filters.item(0).play()<br /> setTimeout("pic.style.visibility='hidden'",2000);<br />}else{ <br /> document.all('fladiv').style.backgroundImage='url('+preitem.itemsrc+')';<br /> <br /> document.all('picdiv').style.display='none';<br /> document.all('fladiv').style.display='';<br /> <br />}<br />count++;<br />if(count&gt;mysize) count=1<br />tt=setTimeout('change_item()',2000)<br />}</p>
		<p> </p>
		<p>&lt;/script&gt;</p>
		<p>&lt;/head&gt;<br />&lt;body onload="change_item();"&gt;<br />&lt;table width="120" height="90"&gt;&lt;tr&gt;&lt;td&gt;<br />&lt;div id="picdiv" name="picdiv" width="120" height="90"&gt;<br /> &lt;img src='1.gif' id="pic" name="pic" width="120" height="90"  style='visibility:hidden;filter:revealtrans(duration=2.0,transition=0)'&gt;<br /> <br />&lt;/div&gt;<br />&lt;div id="fladiv" name="fladiv" style="display:''" width="120" height="90"&gt;<br />&lt;object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='/swflash.cab#version=6,0,0,0' width='120' height='90'&gt;</p>
		<p>        &lt;param name=movie value='pixviewer.swf'&gt;</p>
		<p>        &lt;param name=quality value=high&gt;</p>
		<p>        &lt;embed src='pixviewer.swf' quality=high pluginspage=http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash type=application/x-shockwave-flash width='120' height='90'&gt;</p>
		<p>        &lt;/embed&gt;</p>
		<p>&lt;/object&gt;<br />&lt;/div&gt;<br />&lt;/td&gt;<br />&lt;/tr&gt;<br />&lt;/table&gt;</p>
		<p>&lt;/body&gt;<br />&lt;/html&gt;<br /></p>
<img src ="http://www.blogjava.net/zhhp1314520/aggbug/78279.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/zhhp1314520/" target="_blank">捕风</a> 2006-10-31 15:10 <a href="http://www.blogjava.net/zhhp1314520/articles/css_pic.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>CSS 滤镜应用集锦 -- 巧用CSS的 BlendTrans 滤镜</title><link>http://www.blogjava.net/zhhp1314520/articles/css_BlendTrans.html</link><dc:creator>捕风</dc:creator><author>捕风</author><pubDate>Mon, 30 Oct 2006 09:33:00 GMT</pubDate><guid>http://www.blogjava.net/zhhp1314520/articles/css_BlendTrans.html</guid><wfw:comment>http://www.blogjava.net/zhhp1314520/comments/78108.html</wfw:comment><comments>http://www.blogjava.net/zhhp1314520/articles/css_BlendTrans.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/zhhp1314520/comments/commentRss/78108.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/zhhp1314520/services/trackbacks/78108.html</trackback:ping><description><![CDATA[BlendTrans滤镜比起上一篇介绍的Revealtrans滤镜来要简单一些，它只有一个参数：Duration 变换时间，它的功能也比较单一，就是产生一种淡入淡出的效果，不过它的这种效果比起RevealTrans滤镜的淡入淡出效果来要精细的多，你看看下面也就不言而喻了。<br /><div align="center"><img src="http://www.it365cn.com/articleimg/34-1.gif" align="absMiddle" border="0" /></div><br />由于是动态转换，上面只是我抓的三张图片，只能帮助你了解其转换过程，真正的效果只有待你按我下面讲的方法动手做出来才能看到。使用BlendTrans滤镜也和Revealtrans滤镜一样，需要借助于Javascript来调用它的方法来实现，我们现在就以实现上面这种效果为例来看看如何使用 BlendTrans滤镜，首先你必须准备几张同样大小的图片。<br /><br />制作方法：<br />1、用老办法（前面的文章已介绍了多次）制作一个BlendTrans滤镜，取名为“myblen"，Duration设置为“3"（即转换时间为3秒），滤镜设置好后，在网页源代码的&lt; head &gt;与&lt; /head &gt;之间将有下面这样的代码：<br />&lt; style type="text/css" &gt;<br />&lt; !--<br />.myblen { filter:blendTrans(Duration=3)}<br />-- &gt;<br />&lt; /style &gt;<br />2、插入第一张图片，在图片的属性面板上给图片加个名称：myimg；<br />3、把BlendTrans滤镜加载到图片上；这时图片的“img"标记的代码是这样的：&lt; img src="image/cssp1.jpg" width="200" height="134" class="mybend" name="myimg"&gt;；<br />4、在网页的源代码&lt; head &gt;与&lt; /head &gt;之间插入下面这段Javascript程序：<br />&lt; script language="JavaScript" &gt;<br />&lt; !-- <br />// 获取数组记录数<br />function ImgArray(len)<br />{<br />this.length=len;<br />}<br />// 申明数组并给数组元素赋值，也就是把图片的相对路径保存起来，若是图片较多，可增加数组元素的个数，<br />// 我在这个例子中只用了三张图片，所以数组元素个数为“3"。<br />ImgName=new ImgArray(3);<br />ImgName[0]="image/cssp2.jpg"; <br />// 你在制作时要把这里的"image/cssp2.jpg"换成你的图片所在的路径和图片文件名；<br />ImgName[1]="image/cssp3.jpg"; <br />// 你在制作时要把这里的"image/cssp3.jpg"换成你的图片所在的路径和图片文件名；<br />ImgName[2]="image/cssp1.jpg"; <br />// 你在制作时要把这里的"image/cssp1.jpg"换成你的图片所在的路径和图片文件名；<br />var i=1;<br />// 演示变换效果<br />function playImg()<br />{<br />if (i==2)<br />{ i=0 ;}<br />else<br />{ i++; }<br />myimg.filters[0].apply(); // 这里的“myimg”是你在网页中插入的那张图片的代号，<br />myimg.src=ImgName[i]; // 当你改变了插入的图片代号时，这里也一定要改变，<br />myimg.filters[0].play(); // 否则，程序在变换时可就找不着北了。 <br />// 设置演示时间，这里是以毫秒为单位的，所以“6000"是指每张图片的演示时间是6秒钟，这个时间值要在于<br />// 滤镜中设置的转换时间值，这样当转换结束后还停留一段时间，让人看清楚图片。<br />mytimeout=setTimeout("playImg()",6000);<br />}<br />-- &gt; <br />&lt; /script &gt;<br />5、在网页源代码的&lt; body &gt;加入这样的一句代码：onload="playImg()"。<br />好了，快按F12欣赏你的杰作吧。 <br />若是想在图片上获得上一篇介绍的RevealTrans滤镜效果，只要把本例中的滤镜代码换一换就行了，动手试试吧！<img src ="http://www.blogjava.net/zhhp1314520/aggbug/78108.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/zhhp1314520/" target="_blank">捕风</a> 2006-10-30 17:33 <a href="http://www.blogjava.net/zhhp1314520/articles/css_BlendTrans.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>CSS 滤镜应用集锦 -- 巧用CSS的 RevealTrans 滤镜</title><link>http://www.blogjava.net/zhhp1314520/articles/css_Transition_12.html</link><dc:creator>捕风</dc:creator><author>捕风</author><pubDate>Mon, 30 Oct 2006 09:29:00 GMT</pubDate><guid>http://www.blogjava.net/zhhp1314520/articles/css_Transition_12.html</guid><wfw:comment>http://www.blogjava.net/zhhp1314520/comments/78101.html</wfw:comment><comments>http://www.blogjava.net/zhhp1314520/articles/css_Transition_12.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/zhhp1314520/comments/commentRss/78101.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/zhhp1314520/services/trackbacks/78101.html</trackback:ping><description><![CDATA[CSS的RevealTrans动态滤镜是一个神奇的滤镜，它能产生23种动态效果，更为奇妙的是它还能在23种动态效果中随机抽用其中的一种。用它来进行网页之间的动态切换，简直方便极了，你只要在网页源代码的&lt; head &gt;与&lt; /head &gt;之间插入这样一行代码：&lt; Meta content=revealTrans(Transition=14,Duration=3.0) http-equiv=Page-enter &gt;，当你进入这个页面时，网页将象拉幕一样从中间向两边拉开，是不是别具一格？！<br />RevealTrans滤镜只有两个参数，Duration：是切换时间，以秒为单位；Transition：是切换方式，它有24种方式，详见下表： <br /><div align="center"><img src="http://www.it365cn.com/articleimg/33-1.gif" align="absMiddle" border="0" /></div><br />因此，你只要改变RevealTrans滤镜的“Transition"的值，就能获得不同的网页切换效果，是不是太方便了点？但很遗憾，要把 RevealTrans滤镜用于网页中的某个对象就没有这么简单了，它必须借助于Javascript来调用其方法，才能实现，这就是说要动手编程序了。但也不是太难，下面我将通过一个制作动态字幕变换的例子来说明其使用方法。<br /><br /><font color="#000066"><b>渐淡字幕变换效果</b></font><br />这个例子演示了利用Javascript程序控制Revealtrans滤镜来实现字幕逐渐淡出和渐进的效果，请看下面的效果图：<br /><div align="center"><img src="http://www.it365cn.com/articleimg/33-2.gif" align="absMiddle" border="0" /></div><br />上面的效果看起来好象不好，是吗？实际效果看起来比这漂亮多了。由于是动态转换，上面只是我抓的三张图片，只能帮助你了解其转换过程，真正的效果只有待你按我下面讲的方法动手做出来才能看到。请看制作方法：<br />1、制作一个Revealtrans滤镜，取名为“mytrans"，其制作方法与前面介绍的静态滤镜相同，参数值为Transition=12, Duration=2。设置好后，在网页源代码的&lt; head &gt;与&lt; /head &gt;之间将有下面这样的代码：<br />&lt; style type="text/css" &gt;<br />&lt; !--<br />.mytrans { filter:revealTrans(Transition=12,Duration=2)}<br />-- &gt;<br />&lt; /style &gt;<br />2、插入一个层，我们把层的“Layer ID”改为“div1”（可直接在层的属性面板上加入即可），并设置好层的背景和调整好层的大小，并把Revealtrans滤镜加载到到层上，这时你看到的层的标记代码是这样的：&lt; div id="div1" style="position:absolute; width:680px; height:30px; z-index:37; background: #FFFFCC; layer-background-color: #FFFFCC; border: 1px none #000000" class="mytrans" &gt;&lt; /div &gt;<br />3、在网页源代码的&lt; head &gt;与&lt; /head &gt;之间插入下面这段Javascript程序：<br />&lt; script language="JavaScript" &gt;<br />&lt; !-- <br />function HelpArray(len)<br />{<br />this.length=len;<br />}<br />// 建立一个数组，存放转换的内容。<br />HelpText=new HelpArray(5);<br />HelpText[0]="在一个文档使用动态转换的滤镜（Revealtrans）其实是很容易的。";<br />HelpText[1]="首先，为对象的样式表单建立一个需要转换的“Revaltrans"滤镜，";<br />HelpText[2]="然后，使用“apply()"方法防止错误，";<br />HelpText[3]="现在，你可以改变任何你想改变的东西，";<br />HelpText[4]="最后，“play()"方法开始进行转换。";<br />ScriptText=new HelpArray(5);<br />var i= -1;<br />// 显示转换效果<br />function playHelp()<br />{<br />if (i==4)<br />{ i=0 ;}<br />else<br />{ i++; }<br />div1.filters[0].apply();<br />div1.innerText=HelpText[i];<br />div1.filters[0].play();<br />// 设置每段字幕演示的时间，以毫秒计。这里的时间要长于滤镜中的时间，以保证在转换结束后能停留一段时间。<br />// 以方便看清楚字幕内容。在本例中字幕演示的时间是6秒，滤镜中设置的转换时间是2秒。<br />mytimeout=setTimeout("playHelp()",6000);<br />}<br />-- &gt; <br />&lt; /script &gt;<br />4、在网页的源代码的&lt; body &gt;中加入这样一句代码：onload="playHelp()"。<br />到此，可以按F12看效果了，好象也不是太难。你若是想看看其它的转换效果，只要改变一下Revealtrans滤镜中的Transition参数值就行了，其它什么也不用改动，你瞧多方便！用它来作广告条我想效果不会差。比起动画来可瘦小多了。<br />当然Revealtrans滤镜同样也可以用于图片，效果也不错，但要改动一下Javascript程序。由于CSS还有一个动态滤镜是 BlendTrans滤镜，用它做图片的淡入淡出效果相当不错，且这两个滤镜的使用方法有许多类似的地方，所以关于怎样在图片上用Revealtrans 滤镜来产生变换效果，我就一并放到下篇一起讲了。<img src ="http://www.blogjava.net/zhhp1314520/aggbug/78101.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/zhhp1314520/" target="_blank">捕风</a> 2006-10-30 17:29 <a href="http://www.blogjava.net/zhhp1314520/articles/css_Transition_12.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item></channel></rss>