类之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 相关文章推荐
表单的一些基本用法与技巧
Jul 15 Javascript
在html页面中包含共享页面的方法
Oct 24 Javascript
js中parseFloat(参数1,参数2)定义和用法及注意事项
Jan 27 Javascript
JS简单实现元素复制示例附图
Nov 19 Javascript
深入理解JavaScript系列(18):面向对象编程之ECMAScript实现
Mar 05 Javascript
Validform表单验证总结篇
Oct 31 Javascript
js实现定时进度条完成后切换图片
Jan 04 Javascript
利用node.js爬取指定排名网站的JS引用库详解
Jul 25 Javascript
全面介绍vue 全家桶和项目实例
Dec 27 Javascript
vue-router中的hash和history两种模式的区别
Jul 17 Javascript
javascript触发模拟鼠标点击事件
Jun 26 Javascript
JavaScript事件概念详解(区分静态注册和动态注册)
Feb 05 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
CPU步进是什么意思?i3-9100F B0步进和U0步进区别知识科普
2020/03/17 数码科技
php实现上传图片保存到数据库的方法
2015/02/11 PHP
WordPress中用于获取文章作者与分类信息的方法整理
2015/12/17 PHP
Yii2.0多文件上传实例说明
2017/07/24 PHP
tp框架(thinkPHP)实现三次登陆密码错误之后锁定账号功能示例
2018/05/24 PHP
Laravel-添加后台模板AdminLte的实现方法
2019/10/08 PHP
gearman管理工具GearmanManager的安装与php使用方法示例
2020/02/27 PHP
TP5框架model常见操作示例小结【增删改查、聚合、时间戳、软删除等】
2020/04/05 PHP
使用node.js半年来总结的 10 条经验
2014/08/18 Javascript
Egret引擎开发指南之视觉编程
2014/09/03 Javascript
基于jQuery实现复选框是否选中进行答题提示
2015/12/10 Javascript
js省市县三级联动效果实例
2020/04/15 Javascript
JS解决iframe之间通信和自适应高度的问题
2016/08/24 Javascript
JS简单判断函数是否存在的方法
2017/02/13 Javascript
3分钟掌握常用的JS操作JSON方法总结
2017/04/25 Javascript
vue-router相关基础知识及工作原理
2018/03/16 Javascript
vue-cli 如何打包上线的方法示例
2018/05/08 Javascript
解决vue一个页面中复用同一个echarts组件的问题
2020/07/19 Javascript
vue路由分文件拆分管理详解
2020/08/13 Javascript
[03:42]2014DOTA2西雅图国际邀请赛7月9日TOPPLAY
2014/07/09 DOTA
python实现获取Ip归属地等信息
2016/08/27 Python
用python简单实现mysql数据同步到ElasticSearch的教程
2018/05/30 Python
浅析python参数的知识点
2018/12/10 Python
解决pycharm的Python console不能调试当前程序的问题
2019/01/20 Python
opencv python在视屏上截图功能的实现
2020/03/05 Python
python里glob模块知识点总结
2021/01/05 Python
HTML5 Canvas基本线条绘制的实例教程
2016/03/17 HTML / CSS
门卫班长岗位职责
2013/12/15 职场文书
2014年预备党员学习两会心得体会
2014/03/17 职场文书
个人授权委托书范本格式
2014/10/12 职场文书
大三学生英语考试作弊检讨书
2015/01/01 职场文书
创建文明城市倡议书
2015/04/28 职场文书
毕业设计答辩开场白
2015/05/29 职场文书
欠条范文
2015/07/03 职场文书
2019年世界儿童日宣传标语
2019/11/22 职场文书
SpringBoot2 参数管理实践之入参出参与校验的方式
2021/06/16 Java/Android