类之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 构造函数 实例分析
Nov 26 Javascript
什么是JavaScript
Aug 13 Javascript
tangram框架响应式加载图片方法
Nov 21 Javascript
JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果
Sep 18 Javascript
jquery拖拽效果完整实例(附demo源码下载)
Jan 14 Javascript
JS排序方法(sort,bubble,select,insert)代码汇总
Jan 30 Javascript
js添加绑定事件的方法
May 15 Javascript
angular2倒计时组件使用详解
Jan 12 Javascript
layui table 列宽百分比显示的实现方法
Sep 28 Javascript
package.json各个属性说明详解
Mar 11 Javascript
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
Jul 28 Javascript
vue完美实现el-table列宽自适应
May 08 Vue.js
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 5.3 下载时 VC9、VC6、Thread Safe、Non Thread Safe的区别分析
2011/03/28 PHP
使用PHP实现二分查找算法代码分享
2011/06/24 PHP
PHP循环遍历数组的3种方法list()、each()和while总结
2014/11/19 PHP
PHP获取用户客户端真实IP的解决方案
2016/10/10 PHP
PHP简单实现遍历目录下特定文件的方法小结
2017/05/22 PHP
一个很简单的办法实现TD的加亮效果.
2006/06/29 Javascript
instanceof和typeof运算符的区别详解
2014/01/06 Javascript
jquery判断元素是否隐藏的多种方法
2014/05/06 Javascript
原生JS实现美图瀑布流布局赏析
2015/09/07 Javascript
javascript新闻跑马灯实例代码
2020/07/29 Javascript
JQuery解析XML数据的几个简单实例
2016/05/18 Javascript
浅谈Nodejs应用主文件index.js
2016/08/28 NodeJs
利用jquery实现验证输入的是否是数字、小数,包含保留几位小数
2016/12/07 Javascript
一个可复用的vue分页组件
2017/05/15 Javascript
JavaScript中使用参数个数实现重载功能
2017/09/01 Javascript
微信小程序之swiper轮播图中的图片自适应高度的方法
2018/04/23 Javascript
2种在vue项目中使用百度地图的简单方法
2018/09/28 Javascript
javascript中的闭包概念与用法实践分析
2019/07/26 Javascript
vue Element左侧无限级菜单实现
2020/06/10 Javascript
[53:15]Newbee vs Pain 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python Queue模块详解
2014/11/30 Python
Python函数中参数是传递值还是引用详解
2019/07/02 Python
tensorflow自定义激活函数实例
2020/02/04 Python
浅谈keras中自定义二分类任务评价指标metrics的方法以及代码
2020/06/11 Python
基于HTML5陀螺仪实现ofo首页眼睛移动效果的示例
2017/07/31 HTML / CSS
HTML5 textarea高度自适应的两种方案
2020/04/08 HTML / CSS
Rodd & Gunn澳大利亚官网:新西兰男装品牌
2018/09/25 全球购物
简历中个人自我评价范文
2013/12/26 职场文书
五年级音乐教学反思
2014/02/06 职场文书
妇女工作先进事迹
2014/08/17 职场文书
活动费用申请报告
2015/05/15 职场文书
转正申请报告格式
2015/05/15 职场文书
毕业生就业推荐表自我鉴定
2019/06/20 职场文书
如何在pycharm中快捷安装pip命令(如pygame)
2021/05/31 Python
Pandas实现DataFrame的简单运算、统计与排序
2022/03/31 Python
Redis批量生成数据的实现
2022/06/05 Redis