﻿<?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-zkjbeyond-随笔分类-prototype.js</title><link>http://www2.blogjava.net/zkjbeyond/category/7038.html</link><description>原创专栏 开源学习</description><language>zh-cn</language><lastBuildDate>Wed, 28 Feb 2007 05:09:07 GMT</lastBuildDate><pubDate>Wed, 28 Feb 2007 05:09:07 GMT</pubDate><ttl>60</ttl><item><title>ajax blog 搬家</title><link>http://www.blogjava.net/zkjbeyond/archive/2006/08/21/64760.html</link><dc:creator>原创专栏 开源学习</dc:creator><author>原创专栏 开源学习</author><pubDate>Mon, 21 Aug 2006 04:52:00 GMT</pubDate><guid>http://www.blogjava.net/zkjbeyond/archive/2006/08/21/64760.html</guid><wfw:comment>http://www.blogjava.net/zkjbeyond/comments/64760.html</wfw:comment><comments>http://www.blogjava.net/zkjbeyond/archive/2006/08/21/64760.html#Feedback</comments><slash:comments>2</slash:comments><wfw:commentRss>http://www.blogjava.net/zkjbeyond/comments/commentRss/64760.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/zkjbeyond/services/trackbacks/64760.html</trackback:ping><description><![CDATA[BlogJava做为java的专业blog，偶在这老写javascript  ajax的东西，有些不合适。<br /><br />朋友给了个blog,专门放ajax的文章吧！以后这专门写关于java的东西吧。<br /><a href="http://zkj.wisekernel.net">http://zkj.wisekernel.net</a><br /><br />谢谢支持。<img src ="http://www.blogjava.net/zkjbeyond/aggbug/64760.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/zkjbeyond/" target="_blank">原创专栏 开源学习</a> 2006-08-21 12:52 <a href="http://www.blogjava.net/zkjbeyond/archive/2006/08/21/64760.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>再说说prototype.js的事件注册</title><link>http://www.blogjava.net/zkjbeyond/archive/2006/06/12/52083.html</link><dc:creator>原创专栏 开源学习</dc:creator><author>原创专栏 开源学习</author><pubDate>Sun, 11 Jun 2006 18:12:00 GMT</pubDate><guid>http://www.blogjava.net/zkjbeyond/archive/2006/06/12/52083.html</guid><wfw:comment>http://www.blogjava.net/zkjbeyond/comments/52083.html</wfw:comment><comments>http://www.blogjava.net/zkjbeyond/archive/2006/06/12/52083.html#Feedback</comments><slash:comments>5</slash:comments><wfw:commentRss>http://www.blogjava.net/zkjbeyond/comments/commentRss/52083.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/zkjbeyond/services/trackbacks/52083.html</trackback:ping><description><![CDATA[&nbsp;&nbsp;&nbsp;&nbsp; 摘要: 框架实现人员必看<br>关于prototype.js中 bind函数的问题  和  拖拉层代码的建议<br><br>&nbsp;&nbsp;<a href='http://www.blogjava.net/zkjbeyond/archive/2006/06/12/52083.html'>阅读全文</a><img src ="http://www.blogjava.net/zkjbeyond/aggbug/52083.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/zkjbeyond/" target="_blank">原创专栏 开源学习</a> 2006-06-12 02:12 <a href="http://www.blogjava.net/zkjbeyond/archive/2006/06/12/52083.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>跟我再深入啃啃prototype.js</title><link>http://www.blogjava.net/zkjbeyond/archive/2006/05/25/48069.html</link><dc:creator>原创专栏 开源学习</dc:creator><author>原创专栏 开源学习</author><pubDate>Thu, 25 May 2006 08:45:00 GMT</pubDate><guid>http://www.blogjava.net/zkjbeyond/archive/2006/05/25/48069.html</guid><wfw:comment>http://www.blogjava.net/zkjbeyond/comments/48069.html</wfw:comment><comments>http://www.blogjava.net/zkjbeyond/archive/2006/05/25/48069.html#Feedback</comments><slash:comments>9</slash:comments><wfw:commentRss>http://www.blogjava.net/zkjbeyond/comments/commentRss/48069.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/zkjbeyond/services/trackbacks/48069.html</trackback:ping><description><![CDATA[
		<p>
				<strong>以下有些观点有些偏激.关于事件注册的相关模式我相信会很快出现的,偶正在研究中.<br /><br />1、关于javascript的apply和call函数</strong>
		</p>
		<p>prototype.js中用了大量的apply和call函数，不注意会造成理解偏差。<br />官方解释：应用某一对象的一个方法，用另一个对象替换当前对象。<br />apply与call的区别是第二个参数不同。apply是  数组或者arguments 对象。而call是逗号隔开的任何类型。</p>
		<p>apply,call方法最让人混淆的地方也是apply,call的特色。但最好不要滥用。<br />能改变调用函数的对象。如下例，函数中用到this关键字，这时候this代表的是apply,call函数的第一个参数。<br /><br />&lt;script src="prototype1.3.1.js"&gt;&lt;/script&gt;<br />&lt;input type="text" id="myText"  value="input text"&gt;<br />&lt;script&gt;<br />   function Obj(){<br />       this.value="对象！";<br />   }<br />   var value="global 变量";<br />   function Fun1(){<br />       alert(this.value);<br />   }<br />   window.Fun1();<br />   Fun1.apply(window); <br />   Fun1.apply($('myText')); <br />   Fun1.apply(new Obj()); <br />&lt;/script&gt;</p>
		<p>
				<strong>2、关于闭包</strong>
				<br />prototype.js在Class.create,bind等中用到javascript的闭包特色。但整体上prototype.js对于强大的闭包特性用的不多。大家可以参阅我翻译的<a class="" title="" href="/zkjbeyond/archive/2006/05/23/47725.html" target="_blank">篇文章了解闭包</a>。<br /><strong>3、让我比较反感的两个方法</strong><br /><strong>（1）<br /></strong>var Class = {<br />  create: function() {<br />    return function() { <br />      this.initialize.apply(this, arguments);<br />    }<br />  }<br />}<br />很讨厌用别的语言的风格来写javascript。用这个方法构造自定义类  并没有觉得有多方便，减少代码行数，只会让人难理解，多定义一个initialize方法。<br />其实讨厌这条有些牵强，不过修改Object的原型对象就有点过分了。<br /><strong>（2）Object.prototype.extend</strong><br />  先不过你取个extend的名字会让熟悉java的人引起的歧义。修改Object的prototype就说不过去了。不知道作者是怎么考虑的。当你for in循环对象是，麻烦就来了。可能有人会问你for in干吗。 我一个项目中既用了DWR,也用了prototype.js，dwr返回的javascript对象都多了个exetend属性，还得特殊处理。<br />  以前我比较过<a class="" title="" href="/zkjbeyond/archive/2006/05/08/45108.html" target="_blank">dojo和prototype.js中继承的实现</a>，现在我明白个道理。对于javascript这种没有静态类型检查，语法宽松的语言来讲，如果你选择了某个js类库，那你也必须适应作者写javascript的风格。prototype.js的作者对extend的使用炉火纯青，如果我们不当它只是个属性拷贝的函数的话，多读读prototype.js的代码是好的。<br /><strong>4、关于函数的绑定</strong><br />  类库提供了Function.prototype.bind  Function.prototype.bindAsEventListener两个方法。首先我们从概念上解释一个这两个方法。<br />任何一个函数都可以调用这两个方法；参数的是javascript对象或网页上元素对象；返回类型是个函数对象。<br />本来我就是个函数，返回还是函数，到这两个函数有什么不同呢。看实现代码，关键还是apply\call函数的代码。其实这里只是转化了一下方法调用的对象。</p>
		<p>&lt;script src="prototype1.3.1.js"&gt;&lt;/script&gt;<br />&lt;input type=checkbox id=myChk name="asf" value=1&gt; Test<br />&lt;script&gt;<br />    var CheckboxWatcher = Class.create();<br />    CheckboxWatcher.prototype = {<br />       initialize: function(chkBox, message) {<br />            this.chkBox = $(chkBox);<br />            this.message = message;<br />            this.chkBox.onclick = this.showMessage.bindAsEventListener(this);<br />       },<br />       showMessage: function(evt) {<br />          alert(this.message + ' (' + evt.type + ')');<br />       }<br />    };<br />new CheckboxWatcher('myChk','message!!!!');<br />//$('myChk').onclick=function(){};<br />&lt;/script&gt;<br />这是 <a href="https://compdoc2cn.dev.java.net/">https://compdoc2cn.dev.java.net/</a> 上举的例子，个人感觉没什么意思，反而让我对bind,bindAsEventListener有些反感。（javascript就是这样，明明大家都知道的语法，但写出来的代码差别确很大）<br />看下面代码：</p>
		<p>&lt;script src="prototype1.3.1.js"&gt;&lt;/script&gt;<br />&lt;input type=checkbox id=myChk name="chk" value=1&gt; Test<br />&lt;script&gt;<br />function Class(){<br />    this.name="class";<br />}<br />Class.prototype.getName=function(){<br />    alert(this.name);<br />}<br />var obj=new Class();<br />//$('myChk').onclick=obj.getName;<br />$('myChk').onclick=obj.getName.bind(obj);<br />//$('myChk').onclick=obj.getName.bind($('myChk'));<br />&lt;/script&gt;</p>
		<p>从上面代码可以看出<font color="#ff0000">bind/bindAsEventListener只是包装了一下apply/call方法，改变方法的调用对象。</font>如例子，你可以把obj.getName方法转化成任何对象调用，并且把方法让表单元素触发。（bind和bindAsEventListener之间只是返回函数的参数不同）<br />这两个方法也可以用在对象之间的方法重用，实现类似继承方法的概念。看以下代码，其实是比较无聊的。</p>
		<p>&lt;script src="prototype1.3.1.js"&gt;&lt;/script&gt;<br />&lt;script&gt;<br />function Class1(name){<br />    this.name=name;<br />}<br />Class1.prototype.getName=function(){<br />    alert(this.name);<br />}<br />function Class2(name){<br />    this.name=name;<br />　　this.getName=Class1.prototype.getName.bind(this);<br />}<br />var obj1=new Class2("yql");<br />obj1.getName();<br />var obj2=new Object();<br />obj2.name="zkj";<br />obj2.fun=Class1.prototype.getName.bind(obj2);<br />obj2.fun();<br />&lt;/script&gt;</p>
		<p>
				<br />我从来没读过prototype.js的扩展项目代码，也不知道bind..的最佳实践，一起挖掘吧。但你绝对不要把bind/bindAsEventListener从绑定的词义上来理解，可能会让你更加迷惑。从apply/call理解本质。应用某一对象的一个方法，用另一个对象替换当前对象。</p>
		<p>
				<strong>5、关于事件的注册</strong>
		</p>
		<p>&lt;script src="prototype1.3.1.js"&gt;&lt;/script&gt;<br />&lt;input type=checkbox id=myChk name="chk" value=1&gt; Test<br />&lt;script&gt;<br />Event.observe(myChk, 'click', showMessage, false);<br />//$('myChk').onclick=showMessage;<br />//$('myChk').onclick=showMessage.bind();<br />$('myChk').onclick=showMessage.bind($('myChk'));<br />function showMessage() {<br />      alert(this.value);<br />}<br />&lt;/script&gt;</p>
		<p>执行上面代码，你就能明白Event.observe与bind/bindAsEventListener之间的区别：<br />（１） 显然Event.observe有限制，只能处理简单的函数，并函数中不能有this之类的东西。<br />（２）Event.observe内部用到addEventListener／attachEvent。能把多个函数加到一个触发事件（window.onload）。bind是覆盖。</p>
		<p>
				<strong>6、关于事件监听最佳实践</strong>
				<br />很显然prototype.js提供的事件注册方法不是很完善。那看看dojo的时间注册吧（<a class="" title="" href="http://ajaxcn.org/space/Ajax/Dojo/Event" target="_blank">中文版</a>），更加复杂，估计很多人像我一样，对于dojo暂时持观望态度。<br />如果你看过的前篇关于闭包的介绍，可能见过以下代码。<br />看以下代码前我想表述一个观点，任何网页中元素，浏览器都会为你创建一个对象（<a class="" title="" href="/zkjbeyond/archive/2006/04/23/42666.html" target="_blank">见</a>）。（我觉得）这些对象与你建立javascript对象区别是它们有事件监听，会响应鼠标键盘的事件。如果你用了以下代码，那么把事件监听代码很好的转化到你的javascript代码中。</p>
		<p>function associateObjWithEvent(obj, methodName){<br />    return (function(e){<br />        e = e||window.event;<br />        return obj[methodName](e, this);<br />    });<br />}<br />function DhtmlObject(elementId){<br />    var el = getElementWithId(elementId);<br />    if(el){<br />        el.onclick = associateObjWithEvent(this, "doOnClick");<br />        el.onmouseover = associateObjWithEvent(this, "doMouseOver");<br />        el.onmouseout = associateObjWithEvent(this, "doMouseOut");<br />    }<br />}<br />DhtmlObject.prototype.doOnClick = function(event, element){<br />    ... // doOnClick method body.<br />}<br />DhtmlObject.prototype.doMouseOver = function(event, element){<br />    ... // doMouseOver method body.<br />}<br />DhtmlObject.prototype.doMouseOut = function(event, element){<br />    ... // doMouseOut method body.<br />}</p>
		<p>有时间我想用以上思想实现一个网页浮动框拖拉的代码（其实已经有很多了），待续........</p>
		<p> </p>
		<p> </p>
		<p>引用：ajaxcn.org 链接。谢谢dlee<br /> </p>
<img src ="http://www.blogjava.net/zkjbeyond/aggbug/48069.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/zkjbeyond/" target="_blank">原创专栏 开源学习</a> 2006-05-25 16:45 <a href="http://www.blogjava.net/zkjbeyond/archive/2006/05/25/48069.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>prototype.js  dojo 中 javascript继承实现</title><link>http://www.blogjava.net/zkjbeyond/archive/2006/05/08/45108.html</link><dc:creator>原创专栏 开源学习</dc:creator><author>原创专栏 开源学习</author><pubDate>Mon, 08 May 2006 15:13:00 GMT</pubDate><guid>http://www.blogjava.net/zkjbeyond/archive/2006/05/08/45108.html</guid><wfw:comment>http://www.blogjava.net/zkjbeyond/comments/45108.html</wfw:comment><comments>http://www.blogjava.net/zkjbeyond/archive/2006/05/08/45108.html#Feedback</comments><slash:comments>4</slash:comments><wfw:commentRss>http://www.blogjava.net/zkjbeyond/comments/commentRss/45108.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/zkjbeyond/services/trackbacks/45108.html</trackback:ping><description><![CDATA[&nbsp;&nbsp;&nbsp;&nbsp; 摘要: 关于javascript的面向对象继承实现网上到处可见.<br><br>根据 prototpe.js  和 dojo 相关的继承实现说说我的观点.&nbsp;&nbsp;<a href='http://www.blogjava.net/zkjbeyond/archive/2006/05/08/45108.html'>阅读全文</a><img src ="http://www.blogjava.net/zkjbeyond/aggbug/45108.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/zkjbeyond/" target="_blank">原创专栏 开源学习</a> 2006-05-08 23:13 <a href="http://www.blogjava.net/zkjbeyond/archive/2006/05/08/45108.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>乱评prototype.js</title><link>http://www.blogjava.net/zkjbeyond/archive/2006/04/26/43155.html</link><dc:creator>原创专栏 开源学习</dc:creator><author>原创专栏 开源学习</author><pubDate>Tue, 25 Apr 2006 16:23:00 GMT</pubDate><guid>http://www.blogjava.net/zkjbeyond/archive/2006/04/26/43155.html</guid><wfw:comment>http://www.blogjava.net/zkjbeyond/comments/43155.html</wfw:comment><comments>http://www.blogjava.net/zkjbeyond/archive/2006/04/26/43155.html#Feedback</comments><slash:comments>11</slash:comments><wfw:commentRss>http://www.blogjava.net/zkjbeyond/comments/commentRss/43155.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/zkjbeyond/services/trackbacks/43155.html</trackback:ping><description><![CDATA[&nbsp;&nbsp;&nbsp;&nbsp; 摘要: 大名鼎鼎的Prototype.js  估计大家都知道,可能都已经用到了<br>&nbsp;&nbsp;<a href='http://www.blogjava.net/zkjbeyond/archive/2006/04/26/43155.html'>阅读全文</a><img src ="http://www.blogjava.net/zkjbeyond/aggbug/43155.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/zkjbeyond/" target="_blank">原创专栏 开源学习</a> 2006-04-26 00:23 <a href="http://www.blogjava.net/zkjbeyond/archive/2006/04/26/43155.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item></channel></rss>