本文是转载,关于prototype.js的一些技术说明说明,比如关于javascript的apply和call函数,关于闭包,关于函数的绑定,关于事件的注册,关于事件监听最佳实践等等,很难得的一篇文章,从dnew.cn转载而来。
关于闭包
prototype.js在Class.create,bind等中用到javascript的闭包特色。但整体上prototype.js对于强大的闭包特性用的不多。大家可以参阅我翻译的篇文章了解闭包。
3、让我比较反感的两个方法
(1)
var Class = {
create: function() {
return function() {
this.initialize.apply(this, arguments);
}
}
}
很讨厌用别的语言的风格来写javascript。用这个方法构造自定义类 并没有觉得有多方便,减少代码行数,只会让人难理解,多定义一个initialize方法。
其实讨厌这条有些牵强,不过修改Object的原型对象就有点过分了。
(2)Object.prototype.extend
先不过你取个extend的名字会让熟悉java的人引起的歧义。修改Object的prototype就说不过去了。不知道作者是怎么考虑的。当你for in循环对象是,麻烦就来了。可能有人会问你for in干吗。 我一个项目中既用了DWR,也用了prototype.js,dwr返回的javascript对象都多了个exetend属性,还得特殊处理。
以前我比较过dojo和prototype.js中继承的实现,现在我明白个道理。对于javascript这种没有静态类型检查,语法宽松的语言来讲,如果你选择了某个js类库,那你也必须适应作者写javascript的风格。prototype.js的作者对extend的使用炉火纯青,如果我们不当它只是个属性拷贝的函数的话,多读读prototype.js的代码是好的。
关于事件的注册
<script src="prototype1.3.1.js"></script>
<input type=checkbox id=myChk name="chk" value=1> Test
<script>
Event.observe(myChk, 'click', showMessage, false);
//$('myChk').onclick=showMessage;
//$('myChk').onclick=showMessage.bind();
$('myChk').onclick=showMessage.bind($('myChk'));
function showMessage() {
alert(this.value);
}
</script>
执行上面代码,你就能明白Event.observe与bind/bindAsEventListener之间的区别:
(1) 显然Event.observe有限制,只能处理简单的函数,并函数中不能有this之类的东西。
(2)Event.observe内部用到addEventListener/attachEvent。能把多个函数加到一个触发事件(window.onload)。bind是覆盖。
关于函数的绑定
类库提供了Function.prototype.bind Function.prototype.bindAsEventListener两个方法。首先我们从概念上解释一个这两个方法。
任何一个函数都可以调用这两个方法;参数的是javascript对象或网页上元素对象;返回类型是个函数对象。
本来我就是个函数,返回还是函数,到这两个函数有什么不同呢。看实现代码,关键还是apply\call函数的代码。其实这里只是转化了一下方法调用的对象。
<script src="prototype1.3.1.js"></script>
<input type=checkbox id=myChk name="asf" value=1> Test
<script>
var CheckboxWatcher = Class.create();
CheckboxWatcher.prototype = {
initialize: function(chkBox, message) {
this.chkBox = $(chkBox);
this.message = message;
this.chkBox.onclick = this.showMessage.bindAsEventListener(this);
},
showMessage: function(evt) {
alert(this.message + ' (' + evt.type + ')');
}
};
new CheckboxWatcher('myChk','message!!!!');
//$('myChk').onclick=function(){};
</script>
这是 https://compdoc2cn.dev.java.net/ 上举的例子,个人感觉没什么意思,反而让我对bind,bindAsEventListener有些反感。(javascript就是这样,明明大家都知道的语法,但写出来的代码差别确很大)
看下面代码:
<script src="prototype1.3.1.js"></script>
<input type=checkbox id=myChk name="chk" value=1> Test
<script>
function Class(){
this.name="class";
}
Class.prototype.getName=function(){
alert(this.name);
}
var obj=new Class();
//$('myChk').onclick=obj.getName;
$('myChk').onclick=obj.getName.bind(obj);
//$('myChk').onclick=obj.getName.bind($('myChk'));
</script>
从上面代码可以看出bind/bindAsEventListener只是包装了一下apply/call方法,改变方法的调用对象。如例子,你可以把obj.getName方法转化成任何对象调用,并且把方法让表单元素触发。(bind和bindAsEventListener之间只是返回函数的参数不同)
这两个方法也可以用在对象之间的方法重用,实现类似继承方法的概念。看以下代码,其实是比较无聊的。
<script src="prototype1.3.1.js"></script>
<script>
function Class1(name){
this.name=name;
}
Class1.prototype.getName=function(){
alert(this.name);
}
function Class2(name){
this.name=name;
this.getName=Class1.prototype.getName.bind(this);
}
var obj1=new Class2("yql");
obj1.getName();
var obj2=new Object();
obj2.name="zkj";
obj2.fun=Class1.prototype.getName.bind(obj2);
obj2.fun();
</script>
我从来没读过prototype.js的扩展项目代码,也不知道bind..的最佳实践,一起挖掘吧。但你绝对不要把bind/bindAsEventListener从绑定的词义上来理解,可能会让你更加迷惑。从apply/call理解本质。应用某一对象的一个方法,用另一个对象替换当前对象。
关于事件监听最佳实践
很显然prototype.js提供的事件注册方法不是很完善。那看看dojo的时间注册吧(中文版),更加复杂,估计很多人像我一样,对于dojo暂时持观望态度。
如果你看过的前篇关于闭包的介绍,可能见过以下代码。
看以下代码前我想表述一个观点,任何网页中元素,浏览器都会为你创建一个对象(见)。(我觉得)这些对象与你建立javascript对象区别是它们有事件监听,会响应鼠标键盘的事件。如果你用了以下代码,那么把事件监听代码很好的转化到你的javascript代码中。
function associateObjWithEvent(obj, methodName){
return (function(e){
e = e||window.event;
return obj[methodName](e, this);
});
}
function DhtmlObject(elementId){
var el = getElementWithId(elementId);
if(el){
el.onclick = associateObjWithEvent(this, "doOnClick");
el.onmouseover = associateObjWithEvent(this, "doMouseOver");
el.onmouseout = associateObjWithEvent(this, "doMouseOut");
}
}
DhtmlObject.prototype.doOnClick = function(event, element){
... // doOnClick method body.
}
DhtmlObject.prototype.doMouseOver = function(event, element){
... // doMouseOver method body.
}
DhtmlObject.prototype.doMouseOut = function(event, element){
... // doMouseOut method body.
}
分享到:
相关推荐
"Prototype.js(v1.6)带中文chm手册" 指的是一个关于 Prototype.js 库的资源,版本为1.6,并且提供了中文版的CHM帮助文档。Prototype.js 是一个JavaScript框架,它扩展了JavaScript语言,提供了许多实用的功能,以...
4. **实用工具**:Prototype.js还提供了一些通用的工具函数,如数组操作(`Array#each`)、字符串处理(`String#camelize`)等,这些都可以极大地提高开发效率。 5. **事件处理**: Prototype.js改进了事件处理,...
5. **文档更新**:最后,更新ecside2的文档,明确说明它不再依赖Prototype.js,用户无需再引入Prototype.js库,同时提供新的使用指南和示例。 通过以上步骤,我们可以成功地将ecside2与Prototype.js解耦,使其成为...
**prototype.js** 是一个由Sam Stephenson开发的JavaScript类库,它的主要目标是为Web开发者提供一套强大且灵活的工具,以简化JavaScript编程并增强网页的交互性。这个类库在Web2.0时代尤为流行,因为它使得创建具有...
Prototype.js 提供了对JavaScript对象和类的扩展,引入了一些概念,如类继承和模拟Ruby语言中的类。例如,它通过`Class.create()`方法支持类的创建,并且可以使用`Object.extend()`进行对象扩展。这些功能允许...
### prototype.js 1.4版开发者...通过以上总结可以看出,prototype.js 是一款功能全面且设计精良的 JavaScript 类库,对于希望利用 JavaScript 和 AJAX 技术简化 Web 开发流程的开发者来说,是一个非常有价值的工具。
在1.4中文手册中,你可以找到关于`Element`、`Selector`、`Ajax`等核心类的说明,以及如何利用Prototype进行Ajax通信的方法。1.5中文手册则可能包含了一些新特性,比如可能增加了对CSS选择器的支持或者改进了性能。...
**Prototype 1.6 中文版CHM**是JavaScript开发者的重要参考资料,它是Prototype.js库的中文版帮助文档。Prototype.js是一个强大的JavaScript库,它为Web开发提供了许多实用的功能,简化了DOM操作,增强了对象和数组...
《Prototype 1.6.0.3 中文参考手册》是一部深入浅出的JavaScript库学习资料,特别适合JavaScript初学者及对Ajax技术有需求的开发者。Prototype库是JavaScript的一个强大扩展,它提供了一系列实用的函数,简化了DOM...
这个压缩包可能包含了一个使用 Prototype.js JavaScript 库实现的拖动拖影效果的示例代码。Prototype.js 是一个广泛使用的JavaScript框架,它提供了许多便利的DOM操作和事件处理功能,简化了前端开发。 首先,我们...
总结来说,"flotr 0.2 Prototype 曲线图插件.zip" 提供了一种基于JavaScript和CSS3的技术解决方案,用于在网页上绘制曲线图。通过集成这个插件,开发者可以轻松地将动态、交互式的数据可视化功能引入他们的项目,...
prototype 服务端**:这些标签代表了文档涉及的主题范围,即NodeJS(服务器端JavaScript运行时环境)、JavaScript(编程语言)、前端(客户端Web开发)、prototype(原型)和服务端(指NodeJS作为服务器端技术的应用...
Jquery是继prototype之后又一个优秀的Javascrīpt框架,它是轻量级的js库,它兼容CSS3,还兼容各种浏览器。jQuery使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互。jQuery...
Prototype是JavaScript库,它为浏览器环境提供了许多便利的功能,特别是在处理AJAX(异步JavaScript和XML)方面。AJAX允许Web应用程序在不刷新整个页面的情况下与服务器交换数据并更新部分网页,极大地提升了用户...
这一功能需要配合特定的JavaScript文件实现,包括`autocomplete.js`、`prototype.js`和(在本地模式下)`data.js`。 2. 相关说明: - `url`:在Ajax模式下,用于获取提示信息的服务器端接口地址。 - `parent.$('...
1. **prototype.js** - 这是Prototype库的核心JavaScript文件,包含了所有Prototype的函数和方法。通过阅读和分析这个文件,可以学习到Prototype是如何实现AJAX请求、DOM操作和其他JavaScript功能的。 2. **...
- 主要下载地址:`http://www.prototypejs.org/download`,这是 Prototype 官方网站提供的下载入口,用户可以在这里获取最新版本或特定版本的框架。 - SVN 存储库:对于需要完整开发包(包括单元测试)的开发者,...
6. **使用须知.txt**:这个文件可能是实现代码的使用指南,包含了如何引入Prototype库、如何调用提示窗口函数、以及可能的参数和配置说明等内容。 要学习和使用这段代码,你需要了解基本的JavaScript和HTML知识,对...
6. **使用说明.txt**:这是一份简要的指南,可能包含了如何部署和使用这套登录系统的步骤和注意事项。 7. **ASP编程网----中国最好的ASP专业编程网站.url**:这是一个书签,指向一个ASP编程资源网站,可能是开发这...
"说明.htm"和"readme.txt"通常包含关于压缩包的使用说明、版权信息或作者的提示,对于理解"JavaScript技术讲座.chm"的具体内容和使用可能有所帮助。在学习过程中,查阅这些文件能提供额外的指导。 总的来说,...