类之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 相关文章推荐
在JavaScript中通过URL传递汉字的方法
Apr 09 Javascript
JS Array对象入门分析
Oct 30 Javascript
ExtJs grid行 右键菜单的两种方法
Jun 19 Javascript
JQuery的Ajax跨域请求原理概述及实例
Apr 26 Javascript
JQuery加载图片自适应固定大小的DIV
Sep 12 Javascript
window.onload绑定多个事件的两种解决方案
May 15 Javascript
解决jQuery ajax请求在IE6中莫名中断的问题
Jun 20 Javascript
js数字舍入误差以及解决方法(必看篇)
Feb 28 Javascript
解决Extjs下拉框不显示的问题
Jun 21 Javascript
node.js 核心http模块,起一个服务器,返回一个页面的实例
Sep 11 Javascript
详解weex默认webpack.config.js改造
Jan 08 Javascript
微信小程序获取当前时间及星期几的实例代码
Sep 20 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
php 中的str_replace 函数总结
2007/04/27 PHP
php 截取字符串并以零补齐str_pad() 函数
2011/05/07 PHP
PHP正则表达式 /i, /is, /s, /isU等介绍
2014/10/23 PHP
php截取html字符串及自动补全html标签的方法
2015/01/15 PHP
php+mysqli数据库连接的两种方式
2015/01/28 PHP
PHP反射机制原理与用法详解
2017/02/15 PHP
js中reverse函数的用法详解
2013/12/26 Javascript
javascript实例--教你实现扑克牌洗牌功能
2014/05/15 Javascript
浅析javascript操作 cookie对象
2014/12/26 Javascript
jQuery构造函数init参数分析续
2015/05/13 Javascript
Javascript中Array用法实例分析
2015/06/13 Javascript
jQuery编程中的一些核心方法简介
2015/08/14 Javascript
JavaScript实现非常简单实用的下拉菜单效果
2015/08/27 Javascript
jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码
2015/10/23 Javascript
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
2018/04/13 Javascript
vue实现搜索过滤效果
2019/05/28 Javascript
js模拟实现百度搜索
2020/06/28 Javascript
Vue切换div显示隐藏,多选,单选代码解析
2020/07/14 Javascript
解决父组件将子组件作为弹窗调用只执行一次created的问题
2020/07/24 Javascript
vue使用openlayers实现移动点动画
2020/09/24 Javascript
python基于itchat实现微信群消息同步机器人
2017/02/27 Python
基于Python中capitalize()与title()的区别详解
2017/12/09 Python
matplotlib绘图实例演示标记路径
2018/01/23 Python
django框架自定义模板标签(template tag)操作示例
2019/06/24 Python
django 框架实现的用户注册、登录、退出功能示例
2019/11/28 Python
实现Python3数组旋转的3种算法实例
2020/09/16 Python
美国便宜的横幅和标志印刷在线:Best of Signs
2019/05/29 全球购物
伦敦新晋轻奢耳饰潮牌:Tada & Toy
2020/05/25 全球购物
实习期自我鉴定
2013/10/11 职场文书
环保专项行动方案
2014/05/12 职场文书
师范生见习报告范文
2014/11/03 职场文书
实习协议书
2015/01/27 职场文书
2016消防宣传标语口号
2015/12/26 职场文书
电力培训学习心得体会
2016/01/11 职场文书
react 项目中引入图片的几种方式
2021/06/02 Javascript
Java时间工具类Date的常用处理方法
2022/05/25 Java/Android