类之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 相关文章推荐
createElement动态创建HTML对象脚本代码
Nov 24 Javascript
JQuery UI皮肤定制
Jul 27 Javascript
Js点击弹出下拉菜单效果实例
Aug 12 Javascript
写JQuery插件的基本知识
Nov 25 Javascript
jQuery实现点击该行即可删除HTML表格行
Oct 17 Javascript
AngularJS学习笔记之基本指令(init、repeat)
Jun 16 Javascript
JS实现alert中显示换行的方法
Dec 17 Javascript
开源免费天气预报接口API及全国所有地区代码(国家气象局提供)
Dec 26 Javascript
十个免费的web前端开发工具详细整理
Sep 18 Javascript
nginx+vue.js实现前后端分离的示例代码
Feb 12 Javascript
微信小程序静默登录的实现代码
Jan 08 Javascript
vue使用过滤器格式化日期
Jan 20 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
一个用于MySQL的PHP XML类
2006/10/09 PHP
PHP运行模式的深入理解
2013/06/03 PHP
php 获取xml接口数据的处理方法
2018/05/31 PHP
javascript 有趣而诡异的数组
2009/04/06 Javascript
下载站控制介绍字数显示的脚本 显示全部 隐藏介绍等功能
2009/09/19 Javascript
zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题
2015/08/27 Javascript
jquery实现初次打开有动画效果的网页TAB切换代码
2015/09/06 Javascript
基于slideout.js实现移动端侧边栏滑动特效
2016/11/28 Javascript
bootstrap table配置参数例子
2017/01/05 Javascript
jQuery实现判断控件是否显示的方法
2017/01/11 Javascript
jQuery实现淡入淡出的模态框
2017/02/09 Javascript
JavaScript正则表达式简单实用实例
2017/06/23 Javascript
node.js的exports、module.exports与ES6的export、export default深入详解
2017/10/26 Javascript
AngularJS基于http请求实现下载php生成的excel文件功能示例
2018/01/23 Javascript
JQuery扩展对象方法操作示例
2018/08/21 jQuery
微信小程序实现注册登录功能(表单校验、错误提示)
2019/12/10 Javascript
Python中不同进制互相转换(二进制、八进制、十进制和十六进制)
2015/04/05 Python
Python中常见的数据类型小结
2015/08/29 Python
关于Python中Inf与Nan的判断问题详解
2017/02/08 Python
Bottle框架中的装饰器类和描述符应用详解
2017/10/28 Python
详解Pytorch 使用Pytorch拟合多项式(多项式回归)
2018/05/24 Python
在PyTorch中使用标签平滑正则化的问题
2020/04/03 Python
详解css3 mask遮罩实现一些特效
2018/10/24 HTML / CSS
CSS3中伪元素::before和::after的用法示例
2017/09/18 HTML / CSS
兰蔻加拿大官方网站:Lancome加拿大
2016/08/05 全球购物
俄罗斯一家时尚女装商店:Charuel
2019/12/04 全球购物
J2EE是技术还是平台还是框架
2016/08/14 面试题
夜班门卫岗位职责
2013/12/09 职场文书
干部培训自我鉴定
2014/01/22 职场文书
《我的信念》教学反思
2014/02/15 职场文书
小学教学随笔感言
2014/02/26 职场文书
经典团队口号
2014/06/06 职场文书
学生检讨书怎么写?
2014/10/10 职场文书
小学见习报告
2014/10/31 职场文书
2014年客房服务员工作总结
2014/11/18 职场文书
win11无线投屏在哪设置? win11无线投屏功能的使用方法
2022/04/08 数码科技