类之Prototype.js学习

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的时候会看到两个提示，但最后执行后这行根本就没起到任何作用。
     这是为什么呢？

赞 (0)

相关推荐

  • 基础的prototype.js常用函数及其用法

    prototype.js 常用函数 :   Element.toggle     交替隐藏或显示    Element.toggle(''div1'',''div2'')   Element.hide     隐藏    Element.hide(''div1'',''div2'')   Element.show   显示    Element.show(''div1'',''div2'')   Element.remove     删除    Element.remove(''div1'','

  • prototype 源码中文说明之 prototype.js

    /**   * 定义一个全局对象, 属性 Version 在发布的时候会替换为当前版本号   */  var Prototype = {   Version: '@@VERSION@@'  } /**   * 创建一种类型,注意其属性 create 是一个方法,返回一个构造函数.   * 一般使用如下   * var X = Class.create(); 返回一个类型,类似于 java 的一个Class实例.   * 要使用 X 类型,需继续用 new X()来获取一个实例,如同 java 的

  • 使用prototype.js 的时候应该特别注意的几个问题.

    1. String.prototype.camelize    BUG 这个方法用来返回字符串的骆驼写法.用js 控制元素的 style的时候经常使用 比如  var ss="font-color"   ss=ss.camelize()    // fontColor 通常情况下 camelize 会工作得很好,但是有一个特列,那就是浮动定位  float var ss="float"   obj.style[ss.camelize()]="right&q

  • prototype.js简单实现ajax功能示例

    本文实例讲述了prototype.js简单实现ajax功能.分享给大家供大家参考,具体如下: 原本不知道prototype.js是一个框架,只当其是一个再普通不过的JS文件.随手拿着用了用,写了一个JSP页面,单纯的用prototype.js来实现AJAX效果.用了之后发现超好用,自己再也不用写那么大一堆代码了,哦耶.言归正传,还是把今天写的那个小代码发上来. 一.JSP部分 这部分的代码,最为关键的是JS部分的改变.没有采用prototype.js的时候,生成一个AJAX效果,起码得有四大段.

  • prototype.js常用函数详解

    函数名  解释  举例  Element.toggle  交替隐藏或显示  Element.toggle(''div1'',''div2'')  Element.hide  隐藏  Element.hide(''div1'',''div2'')  Element.show 显示  Element.show(''div1'',''div2'')  Element.remove  删除  Element.remove(''div1'',''div2'')  Element.getHeight  取得

  • 使用prototype.js进行异步操作

    首先下载prototype.js这个类包,然后包含在你的<html>页面中 <script src='prototype.js'></script> 创建XMLHttpRequest对象并且异步的跟踪它的进程, 然后解析出响应 然后处理它可能这是ajax的根本意义,它最具威力的地方,但你能出兼容各种不同浏览器的代码,可能会令你痛苦不堪,但幸好救苦救难的prototype.js提供Ajax.Request 类,让你摆脱这些困扰. 假如你有一个应用程序可以通过url htt

  • prototype.js的Ajax对象

    我想prototype.js里的ajax对象肯定吸引了不少人,大量封装好的ajax逻辑的类,对于我们这些初学者使用ajax有很大的帮助. 以下用一个我的具体使用例子来解释:效果看这里 1. Ajax.Request 你可以这样创建它 复制代码 代码如下: var url = 'http://yoursever/your/your'; var pars = 'id=xxx'; var myAjax = new Ajax.Request(                     url,      

  • 类之Prototype.js学习

    Prototype.js作为javascript的成功的开源框架,封装了很多好用的功能,虽然官方没提供什么文档,不过在google上一搜,好多相关的文档,不过在学习使用的过程中还是碰到了一些问题,希望熟悉的朋友能多加指点,对于prototype.js学习我关注这么几点,同时针对每点也讲讲学习的结果和碰到的问题,^_^    1.类的创建      prototype.js已经封装好了,这个很简单. var Person=Class.create(); 这样就创建了一个Person类,这个Pers

  • js学习总结_基于数据类型检测的四种方式(必看)

    1.typeof 用来检测数据类型的运算符 console.log(typeof 12)//Number 使用typeof检测数据类型,首先返回的都是字符串 ,其次字符串中包含了对应的数据类型 例如:"number"."string"."boolean"."undefined"."function"."object" console.log(typeof typeof function(

  • Three.js学习之文字形状及自定义形状

    Three.js学习之文字形状及自定义形状

    1.文字形状 说起3d文字想起了早年word里的一些艺术字: 那么TextGeometry可以用来创建三维的文字形状. 使用文字形状需要下载和引用额外的字体库.这里,我们以 helvetiker字体为例. 引用: <script type="text/javascript" src="你的路径/helvetiker_regular.typeface.json"></script> TextGeometry的构造函数是: THREE.TextG

  • Three.js学习之Lamber材质和Phong材质

    Three.js学习之Lamber材质和Phong材质

    前言 材质(Material)是独立于物体顶点信息之外的与渲染效果相关的属性.通过设置材质可以改变物体的颜色.纹理贴图.光照模式等. MeshBasicMaterial:对光照无感,给几何体一种简单的颜色或显示线框. MeshLambertMaterial:这种材质对光照有反应,用于创建暗淡的不发光的物体. MeshPhongMaterial:这种材质对光照也有反应,用于创建金属类明亮的物体. 1.基本材质 使用基本材质(BasicMaterial)的物体,渲染后物体的颜色始终为该材质的颜色,而

  • js学习阶段总结(必看篇)

    typeof操作符:返回字符串,可能是"undefined","boolean"," string","number","object","function"中的一种,所以不能判断数组. NaN(Not a Number):用法NaN(val)如果val能被转化成一个数就返回false,否则返回true. parseInt(val,way)其中way可以是2,4...就是要按照这个进制来

随机推荐