类之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 相关文章推荐
ExtJS Ext.MessageBox.alert()弹出对话框详解
Apr 02 Javascript
JavaScript经典效果集锦
Jul 06 Javascript
javascript-表格排序(降序/反序)实现介绍(附图)
May 30 Javascript
JS小游戏之象棋暗棋源码详解
Sep 25 Javascript
JavaScript字符串对象toUpperCase方法入门实例(用于把字母转换为大写)
Oct 17 Javascript
BAT及各大互联网公司2014前端笔试面试题--JavaScript篇
Oct 29 Javascript
JavaScript中使用Object.create()创建对象介绍
Dec 30 Javascript
javascript实现删除前弹出确认框
Jun 04 Javascript
Vue.js组件使用开发实例教程
Nov 01 Javascript
JavaScript对象封装的简单实现方法(3种方法)
Jan 03 Javascript
Vue v-model组件封装(类似弹窗组件)
Jan 08 Javascript
ES11屡试不爽的新特性,你用上了几个
Oct 21 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中获取时间的下一周下个月的方法
2014/03/18 PHP
ThinkPHP使用心得分享-上传类UploadFile的使用
2014/05/15 PHP
php中file_get_contents与curl性能比较分析
2014/11/08 PHP
php从字符串创建函数的方法
2015/03/16 PHP
ThinkPHP自定义函数解决模板标签加减运算的方法
2015/07/03 PHP
详解 PHP加密解密字符串函数附源码下载
2015/12/18 PHP
php封装的验证码类分享
2017/02/26 PHP
PHP自定义函数实现assign()数组分配到模板及extract()变量分配到模板功能示例
2018/05/23 PHP
Laravel中的chunk组块结果集处理与注意问题
2018/08/15 PHP
laravel 数据迁移与 Eloquent ORM的实现方法
2019/04/12 PHP
解决laravel(5.5)访问public报错的问题
2019/10/12 PHP
JavaScript Tips 使用DocumentFragment加快DOM渲染速度
2010/06/28 Javascript
jquery的ajax请求全面了解
2013/03/20 Javascript
javascript将异步校验表单改写为同步表单
2015/01/27 Javascript
javascript实现复选框超过限制即弹出警告框的方法
2015/02/25 Javascript
js为什么不能正确处理小数运算?
2015/12/29 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
2016/07/04 Javascript
jQuery中实现prop()函数控制多选框(全选,反选)
2016/08/19 Javascript
js 弹出虚拟键盘修改密码的简单实例
2016/10/10 Javascript
Vue中封装input组件的实例详解
2017/10/17 Javascript
Vue 实例中使用$refs的注意事项
2021/01/29 Vue.js
python3编码问题汇总
2016/09/06 Python
PyQt5 QSerialPort子线程操作的实现
2018/04/21 Python
python脚本监控Tomcat服务器的方法
2018/07/06 Python
Keras 数据增强ImageDataGenerator多输入多输出实例
2020/07/03 Python
python speech模块的使用方法
2020/09/09 Python
css3 background属性调整增强介绍
2010/12/18 HTML / CSS
html5 Canvas画图教程(8)—canvas里画曲线之bezierCurveTo方法
2013/01/09 HTML / CSS
美国知名女性服饰品牌:New York & Company
2017/03/23 全球购物
全球速卖通:AliExpress(国际版淘宝)
2017/09/20 全球购物
Nike瑞典官方网站:Nike.com (SE)
2018/11/26 全球购物
C面试题
2015/10/08 面试题
绿色城市实施方案
2014/03/19 职场文书
排查整治工作方案
2014/06/09 职场文书
毕业证明书
2015/06/19 职场文书
品德与社会教学反思
2016/02/24 职场文书