类之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 动态参数判空操作
Dec 22 Javascript
JavaScript 动态将数字金额转化为中文大写金额
May 14 Javascript
sencha touch 模仿tabpanel导航栏TabBar的实例代码
Oct 24 Javascript
JS 去除Array中的null值示例代码
Nov 20 Javascript
javascript删除字符串最后一个字符
Jan 14 Javascript
js实现的四级左侧网站分类菜单实例
May 06 Javascript
搭建Bootstrap离线文档的方法
Dec 02 Javascript
JS字符串false转boolean的方法(推荐)
Mar 08 Javascript
vue2.0开发入门笔记之.vue文件的生成和使用
Sep 19 Javascript
js实现动态改变radio状态的方法
Feb 28 Javascript
Vue2.0结合webuploader实现文件分片上传功能
Mar 09 Javascript
JavaScript基于对象方法实现数组去重及排序操作示例
Jul 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
PHP调用VC编写的COM组件实例
2014/03/29 PHP
php中实现可以返回多个值的函数实例
2015/03/21 PHP
Laravel+jQuery实现AJAX分页效果
2016/09/14 PHP
PHP中strtr与str_replace函数运行性能简单测试示例
2019/06/22 PHP
提高代码性能技巧谈—以创建千行表格为例
2006/07/01 Javascript
encode脚本和normal脚本混用的问题与解决方法
2007/03/08 Javascript
打开超链需要“确认”对话框的方法
2007/03/08 Javascript
js 无提示关闭浏览器页面的代码
2010/03/09 Javascript
jquery ajax后台返回list,前台用jquery遍历list的实现
2016/10/30 Javascript
关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库
2016/11/30 Javascript
深入理解JavaScript中的预解析
2017/01/04 Javascript
Angularjs+bootstrap+table多选(全选)支持单击行选中实现编辑、删除功能
2017/03/27 Javascript
微信小程序开发之选项卡(窗口底部TabBar)页面切换
2017/04/12 Javascript
基于Bootstrap下拉框插件bootstrap-select使用方法详解
2018/08/07 Javascript
vuejs使用axios异步访问时用get和post的实例讲解
2018/08/09 Javascript
在VUE style中使用data中的变量的方法
2020/06/19 Javascript
Python中的Numeric包和Numarray包使用教程
2015/04/13 Python
最基础的Python的socket编程入门教程
2015/04/23 Python
python中协程实现TCP连接的实例分析
2018/10/14 Python
Python3爬虫之自动查询天气并实现语音播报
2019/02/21 Python
python 实现返回一个列表中出现次数最多的元素方法
2019/06/11 Python
Django 重写用户模型的实现
2019/07/29 Python
Anaconda之conda常用命令介绍(安装、更新、删除)
2019/10/06 Python
pytorch实现从本地加载 .pth 格式模型
2020/02/14 Python
Python+appium框架原生代码实现App自动化测试详解
2020/03/06 Python
关于Python3爬虫利器Appium的安装步骤
2020/07/29 Python
python定义具名元组实例操作
2021/02/28 Python
简单掌握CSS3中resize属性的用法
2016/04/01 HTML / CSS
英国领先的高街书籍专家:Waterstones
2018/02/01 全球购物
大学生大二自我鉴定
2013/10/28 职场文书
运动会广播稿200字
2014/01/15 职场文书
《小壁虎借尾巴》教学反思
2014/02/16 职场文书
2014大学生全国两会学习心得体会
2014/03/13 职场文书
实习单位评语
2014/04/26 职场文书
写求职信有哪些注意事项
2014/05/08 职场文书
计生专干事迹
2014/05/28 职场文书