类之Prototype.js学习


Posted in Javascript onJune 13, 2007

Prototype.js作为javascript的成功的开源框架,封装了很多好用的功能,虽然官方没提供什么文档,不过在google上一搜,好多相关的文档,不过在学习使用的过程中还是碰到了一些问题,希望熟悉的朋友能多加指点,对于prototype.js学习我关注这么几点,同时针对每点也讲讲学习的结果和碰到的问题,^_^
   1、类的创建
     prototype.js已经封装好了,这个很简单。

var Person=Class.create();

 这样就创建了一个Person类,这个Person类必须提供initialize方法的实现:

Person.prototype={
                initialize:function(){
                }
     };

   对比java,Class.create相当于Class.forName(),initialize相当于构造器,和java的构造器一样,可以自定义为带参数性质的。
     可以看到在使用这样的方式定义class后,它和javascript原来的通过function方式来定义一个类就有明确的区分了,在这种情况下我们就可以用Class.create来定义类,用function来直接定义函数。
     类通常还涉及静态成员(static性质的)和实例成员(需要实例化才可调用)的定义。
     在javascript中这点也非常容易:
     静态成员:  

var Person={
               name:'person',
               getName:function(){return 'person'}
     };

实例成员: 

Person.prototype={
              childname:'child',
              eat:function()
     }

上面的Person.getName是可以直接这么调用的,但eat方法则需通过var person=new Person();person.eat();的方式来调用。
2、类的继承
     类的继承其实javascript本身就支持的,不过prototype提供了一种另外的方法。
     按照javascript的支持的实现:

var Student=Class.create();
     Student.prototype=new Person();

这样就实现了Student继承至Person。
     在使用prototype的情况下可以这么实现:

var Student=Class.create();
     Object.extend(Student.prototype,Person.prototype);
子类要增加方法时可使用  
Student.prototype.study=function(){};

Object.extend(Student.prototype,{
          study:function(){}
});

3、事件机制(对类方法执行的监听和观察)
     在事件机制上则碰到了一些疑惑,作为事件机制主要需要提供事件的定义,对于事件的监听以及对于事件的观察。
     在javascript中事件需要以on开头,也就是作为事件就需要采用onclick这样类似的命名:
     对上面的Student增加一个对外的事件,如:    

Student.prototype.study=function(){
            this.onstudy();
     }
     Student.prototype.onstudy=function(){};
这个onstudy就是交给相应的实例去实现的,例如实例采用这样的方式:  
function studyThis(){
         alert("study this");
     }
     var student=new Student();
     student.onstudy=studyThis();
对于事件通常都希望进行监听和观察,根据prototype提供的bindAsEventListener以及Observe,这么进行了尝试:
study.onstudy=watchStudy.bindAsEventListener(this);
     function watchStudy(event){
           alert("watch study");
     }

按照事件机制来说,在执行study的时候应该可以看到study this和watch study两个提示,但最后执行后只能看到watch study的提示,这是为什么呢?按照listener的概念的话,不应该覆盖原有方法的,不过我看了一下prototype.js的源代码,按照上面的编写方式确实会照成覆盖原方法。
     Observe是这么尝试的:
     Event.observe(study,'study',watchStudy,false);
     按照观察机制来说,应该在执行study的时候会看到两个提示,但最后执行后这行根本就没起到任何作用。
     这是为什么呢?

Javascript 相关文章推荐
List Information About the Binary Files Used by an Application
Jun 11 Javascript
jQuery Clone Bug解决代码
Dec 22 Javascript
js向上无缝滚动,网站公告效果 具体代码
Nov 18 Javascript
JS实现匀速运动的代码实例
Nov 29 Javascript
JavaScript数组函数unshift、shift、pop、push使用实例
Aug 27 Javascript
javascript实现禁止鼠标滚轮事件
Jul 24 Javascript
jQuery flip插件实现的翻牌效果示例【附demo源码下载】
Sep 20 Javascript
jQuery自定义插件详解及实例代码
Dec 29 Javascript
js es6系列教程 - 新的类语法实战选项卡(详解)
Sep 02 Javascript
浅谈Angularjs中不同类型的双向数据绑定
Jul 16 Javascript
vue实现文件上传读取及下载功能
Nov 17 Javascript
JS实现灯泡开关特效
Mar 30 Javascript
JavaScript语法着色引擎(demo及打包文件下载)
Jun 13 #Javascript
Apply an AutoFormat to an Excel Spreadsheet
Jun 12 #Javascript
Add Formatted Data to a Spreadsheet
Jun 12 #Javascript
excel操作之Add Data to a Spreadsheet Cell
Jun 12 #Javascript
List Installed Hot Fixes
Jun 12 #Javascript
List the UTC Time on a Computer
Jun 11 #Javascript
List the Codec Files on a Computer
Jun 11 #Javascript
You might like
推荐Discuz!5的PHP代码高亮显示与实现可运行代码
2007/03/15 PHP
基于php权限分配的实现代码
2013/04/28 PHP
PHP获取服务器端信息的方法
2014/11/28 PHP
js传值 判断
2006/10/26 Javascript
jquery1.4后 jqDrag 拖动 不可用
2010/02/06 Javascript
js对象之JS入门之Array对象操作小结
2011/01/09 Javascript
jquery isType() 类型判断代码
2011/02/14 Javascript
JS根据变量保存方法名并执行方法示例
2014/04/04 Javascript
Javascript无参数和有参数类继承问题解决方法
2015/03/02 Javascript
jQuery实现类似标签风格的导航菜单效果代码
2015/08/25 Javascript
详解Vue学习笔记进阶篇之列表过渡及其他
2017/07/17 Javascript
基于JavaScript中字符串的match与replace方法(详解)
2017/12/04 Javascript
详解webpack4升级指南以及从webpack3.x迁移
2018/06/12 Javascript
详解vue-video-player使用心得(兼容m3u8)
2019/08/23 Javascript
vue ssr+koa2构建服务端渲染的示例代码
2020/03/23 Javascript
JavaScript实现与web通信的方法详解
2020/08/07 Javascript
js实现表格单列按字母排序
2020/08/12 Javascript
[01:11:37]完美世界DOTA2联赛PWL S2 SZ vs FTD.C 第一场 11.19
2020/11/19 DOTA
python对象及面向对象技术详解
2016/07/19 Python
python八大排序算法速度实例对比
2017/12/06 Python
Python 循环语句之 while,for语句详解
2018/04/23 Python
Python异常处理知识点总结
2019/02/18 Python
python爬取内容存入Excel实例
2019/02/20 Python
Python在Matplotlib图中显示中文字体的操作方法
2019/07/29 Python
使用pytorch和torchtext进行文本分类的实例
2020/01/08 Python
Python autoescape标签用法解析
2020/01/17 Python
PyCharm刷新项目(文件)目录的实现
2020/02/14 Python
MVMT手表官方网站:时尚又实惠的高品质手表
2016/12/04 全球购物
亚马逊加拿大网站:Amazon.ca
2020/01/06 全球购物
Spotahome意大利:公寓和房间出租
2020/02/21 全球购物
2014新年寄语
2014/01/20 职场文书
数控技术专业毕业自荐书范文
2014/02/05 职场文书
2014年食品安全工作总结
2014/12/04 职场文书
2015年乡镇工会工作总结
2015/05/19 职场文书
Nginx搭建rtmp直播服务器实现代码
2021/03/31 Servers
java项目构建Gradle的使用教程
2022/03/24 Java/Android