类之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 相关文章推荐
不错的一个日期输入 动态
Nov 06 Javascript
JavaScript Date对象使用总结
May 14 Javascript
TextArea 控件的最大长度问题(js json)
Dec 16 Javascript
javascript学习笔记(九) js对象 设计模式
Jun 19 Javascript
理解JAVASCRIPT中hasOwnProperty()的作用
Jun 05 Javascript
jQuery列表拖动排列具体实现
Nov 04 Javascript
JS实现多物体缓冲运动实例代码
Nov 29 Javascript
javascript内置对象操作详解
Feb 04 Javascript
JSON相关知识汇总
Jul 03 Javascript
Jquery Easyui表单组件Form使用详解(30)
Dec 19 Javascript
JS简单获取当前年月日星期的方法示例
Feb 07 Javascript
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
Sep 23 jQuery
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
无数据库的详细域名查询程序PHP版(4)
2006/10/09 PHP
使用数据库保存session的方法
2006/10/09 PHP
php学习 函数 课件
2008/06/15 PHP
DEDE采集大师官方留后门的删除办法
2011/01/08 PHP
php 生成唯一id的几种解决方法
2013/03/08 PHP
基于ThinkPHP5框架使用QueryList爬取并存入mysql数据库操作示例
2019/05/25 PHP
javascript读取RSS数据
2007/01/20 Javascript
JavaScript 节点操作 以及DOMDocument属性和方法
2007/12/06 Javascript
jquery 屏蔽一个区域内的所有元素,禁止输入
2009/10/22 Javascript
jquery实现的美女拼图游戏实例
2015/05/04 Javascript
JS实现超精简响应鼠标显示二级菜单代码
2015/09/12 Javascript
JS+CSS3实现超炫的散列画廊特效
2016/07/16 Javascript
详解JavaScript跨域总结与解决办法
2016/10/31 Javascript
实例解析jQuery工具函数
2016/12/01 Javascript
基于node.js实现微信支付退款功能
2017/12/19 Javascript
微信小程序项目实践之九宫格实现及item跳转功能
2018/07/19 Javascript
关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题
2020/01/16 Javascript
[01:43]3.19DOTA2发布会 三代刀塔人第三代
2014/03/25 DOTA
Python常用的文件及文件路径、目录操作方法汇总介绍
2015/05/21 Python
Python pickle模块用法实例分析
2015/05/27 Python
Python 基础教程之闭包的使用方法
2017/09/29 Python
Java分治归并排序算法实例详解
2017/12/12 Python
python+matplotlib绘制旋转椭圆实例代码
2018/01/12 Python
PySide和PyQt加载ui文件的两种方法
2019/02/27 Python
详解Python数据可视化编程 - 词云生成并保存(jieba+WordCloud)
2019/03/26 Python
Python实现朴素贝叶斯的学习与分类过程解析
2019/08/24 Python
Python函数的默认参数设计示例详解
2019/12/01 Python
Keras预训练的ImageNet模型实现分类操作
2020/07/07 Python
使用CSS3中的calc()属性来以算式表达尺寸数值
2016/06/06 HTML / CSS
线程问题:wait()方法是定义在哪个类里面
2015/07/07 面试题
大学生见习期满自我鉴定
2014/09/13 职场文书
乡镇镇长个人整改措施
2014/10/01 职场文书
学生抄袭作业的检讨书
2014/10/02 职场文书
2014财务年度工作总结
2014/11/11 职场文书
apache ftpserver搭建ftp服务器
2022/05/20 Servers
python可视化分析绘制带趋势线的散点图和边缘直方图
2022/06/25 Python