类之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 相关文章推荐
jQuery动态显示和隐藏datagrid中的某一列的方法
Dec 11 Javascript
标题过长使用javascript按字节截取字符串
Apr 24 Javascript
纯javascript实现简单下拉刷新功能
Mar 13 Javascript
JavaScript使用DeviceOne开发实战(二) 生成调试安装包
Dec 01 Javascript
javascript运动效果实例总结(放大缩小、滑动淡入、滚动)
Jan 08 Javascript
jQuery插件ajaxfileupload.js实现上传文件
Oct 23 Javascript
Bootstrap禁用响应式布局的实现方法
Mar 09 Javascript
js学习总结_轮播图之渐隐渐现版(实例讲解)
Jul 17 Javascript
JavaScript闭包原理与用法实例分析
Aug 10 Javascript
vue实现点击选中,其他的不选中方法
Sep 05 Javascript
ES6基础之默认参数值
Feb 21 Javascript
vue router返回到指定的路由的场景分析
Nov 10 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
Oracle Faq(Oracle的版本)
2006/10/09 PHP
浅析echo(),print(),print_r(),return之间的区别
2013/11/27 PHP
PHP字符串比较函数strcmp()和strcasecmp()使用总结
2014/11/19 PHP
thinkPHP下的widget扩展用法实例分析
2015/12/26 PHP
ZendFramework框架实现连接两个或多个数据库的方法
2016/12/08 PHP
在Ubuntu 18.04上安装PHP 7.3 7.2和7.0的方法
2019/04/09 PHP
javascript开发技术大全-第1章javascript概述
2011/07/03 Javascript
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
2013/04/24 Javascript
使用javascript创建快捷方式的简单实例
2013/08/09 Javascript
javascript预加载图片、css、js的方法示例介绍
2013/10/14 Javascript
Javascript正则控制文本框只能输入整数或浮点数
2014/09/02 Javascript
基于javascript实现样式清新图片轮播特效
2016/03/30 Javascript
JavaScript中的工厂函数(推荐)
2017/03/08 Javascript
jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
2017/03/09 Javascript
基于 flexible 的 Vue 组件:Toast -- 显示框效果
2017/12/26 Javascript
node.js使用免费的阿里云ip查询获取ip所在地【推荐】
2018/09/03 Javascript
微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能
2019/12/06 Javascript
有关wxpython pyqt内存占用问题分析
2014/06/09 Python
python求解水仙花数的方法
2015/05/11 Python
python中map()与zip()操作方法
2016/02/27 Python
对python文件读写的缓冲行为详解
2019/02/13 Python
python自动化测试之DDT数据驱动的实现代码
2019/07/23 Python
Python异常模块traceback用法实例分析
2019/10/22 Python
python中图像通道分离与合并实例
2020/01/17 Python
python调用jenkinsAPI构建jenkins,并传递参数的示例
2020/12/09 Python
使用phonegap克隆和删除联系人的实现方法
2017/03/31 HTML / CSS
美国汽车交易网站:Edmunds
2016/08/17 全球购物
后勤人员自我鉴定
2013/10/20 职场文书
七匹狼男装广告词
2014/03/21 职场文书
《窗前的气球》教学反思
2014/04/07 职场文书
参观邀请函范文
2015/02/02 职场文书
学校运动会简讯
2015/07/20 职场文书
Nginx域名转发https访问的实现
2021/03/31 Servers
Python实战之实现康威生命游戏
2021/04/26 Python
详解mysql三值逻辑与NULL
2021/05/19 MySQL
SQL实现LeetCode(196.删除重复邮箱)
2021/08/07 MySQL