prototype 1.5 & scriptaculous 1.6.1 学习笔记_prototype

最近做otalk,开始是基于prototype1.4的,后来因为我加上了scriptaculous 1.6.1,她要求prototype的版本是1.5的,所以就升级到了1.5,看着demo学习起了scriptaculous的用法.
用法稍后整理,因为在使用过程中很多次效果都不让自己满意,想看代码又看不明白,经过一次折磨,我下定决心,一定要把scriptaculous和prototype的代码看明白!

这里作为我的学习笔记,可能没有什么顺序了逻辑,等到学习完,最后整理

首先是定义类  看着笑笑老师的一些介绍,自己看是试验起来,往往很多东西看了觉着明白,其实还是差很多的

var Class = {
  create: function() {
    return function() {
      this.initialize.apply(this, arguments);
    }
  }
}

定义了一个class函数作为创建类的模版或者说是原型
使用方法
var llinzzi= Class.create();
llinzzi.prototype = {
    initialize:function(){
          document.write('实例被创建');
    },
    fun1:function(){document.write('方法被实例调用');}
}

var linChild = new llinzzi();
运行,输出'实例被创建'说明initialize是创建实例的时候被调用的
回顾 Class代码中
    return function() {
      this.initialize.apply(this, arguments);
    }
看出,当执行create方法时,就开始调用.
linChild.fun1();
输出'方法被实例调用',fun1方法被成功调用
就是当采用了prototype的Class.create();方法创建对象的时候,initialize作为特殊的方法,在创建实例的时候被执行,用以初始化.

续承
Object.extend = function(destination, source) {
  for (var property in source) {
    destination[property] = source[property];
  }
  return destination;
}

用法
Object.extend(目标,源);
让我产生奇怪的是scriptaculous中的一段代码
    var options = Object.extend({
      greedy:     true,
      hoverclass: null,
      tree:       false
    }, arguments[1] || {});
既然是定义一个options为什么还要用Object.extend方法
直接
var options ={
      greedy:     true,
      hoverclass: null,
      tree:       false
}
不就行了么?等等,出现问题了.后面还有arguments[1] || {},这应该是目标,目标是函数的参数,分析下,获取参数,如果没有这个参数的时候则为{}就是恐,如果有的话,相比也是{hoverclass:'xx'}的格式,哦,原来定义options也不是这么简单的,先看有没有参数,无论有没有,利用Object.extend方法,把参数中的对象追加或覆盖到前面的{     greedy:     true,      hoverclass: null,      tree:       false}中,如果参数是无,则相当简单的上面的 var options = {};了但,如果参数中有{hoverclass:'abc'}呢?这时候覆盖了原来的hoverclass的值null,然后看Object.extend方法返回值就是第一个参数被覆盖后的全部的值
不得不佩服,一段一句进行定义,同时有设置了默认值.
越看越有意思,继续看下去

时间: 2024-10-14 10:18:00

prototype 1.5 & scriptaculous 1.6.1 学习笔记_prototype的相关文章

prototype 1.5相关知识及他人笔记_prototype

一直没有没有时间看prototype,现在好了,已经更新到了1.5 pre1,呵呵,强大的功能不得不学习啊,这个是提升自己JS能力的又一个捷径. 1. Prototype是什么? 或许你还没有用过它, prototype.js 是一个由Sam Stephenson写的JavaScript包.这个构思奇妙编写良好的一段兼容标准的一段代码将承担创造胖客户端, 高交互性WEB应用程序的重担.轻松加入Web 2.0特性. 如果你最近体验了这个程序包,你很可能会发现文档并不是它的强项之一.像所有在我之前的

Javascript学习笔记9 prototype封装继承_基础知识

好,那就让我们一步步打造,首先让我们来看下继承原本的写法: 复制代码 代码如下: <script> var Person = function(name, age) { this.name = name; this.age = age; } Person.prototype.SayHello = function () { alert(this.name + "," + this.age); }; var Programmer = function (name, age,

设计模式学习笔记(十一)—Prototype原型模式

Prototype模式的意图是: 通过给出一个原型对象来指明所要创建的对象类型,然后用复制这个原型对象的办法创建出更多的同类型对象. 在java的类库中已经实现了这一模式,只要你定义的类实现了Cloneable接口,用这个类所创建的对象可以做为原型对象进而克隆出更多的同类型的对象.下面举个例子,来介绍简单的介绍一下它的使用. import java.io.ByteArrayInputStream; import java.io.ByteArrayOutputStream; import java

javascript学习笔记(九)javascript中的原型(prototype)及原型链的继承方式_基础知识

在使用面向对象编程时,对象间的继承关系自然少不了!而原型正是实现javascript继承的很重要的一种方法! 我们首先来看以下代码: 复制代码 代码如下: function person(name, age) { this.name = name; this.age = age; } person.prototype.getInfo = function() { alert("My name is "+this.name+", and I have "+this.a

php Prototype原型模式学习笔记

待解决的问题:我们能否减少new的使用,同时避免需要新增对象的时候,了解对象的类名. 思路:php5提供了克隆方法,我们可以新增一个对象,然后每次需要新增和她同类的对象,克隆他就可以了. 原型(Prototype)模式示例:  代码如下 复制代码 <?php //机兵类 class Marine {   //所属的用户ID   public $playerID   //构造函数,参数为用户的id   public function __construct($id)   {   $this->p

prototype Element学习笔记(篇一)_prototype

先说一下Element对DOM扩展的技术思路,我也是看了一天的代码,这才有了点心得. 使用prototype,我们最常用的莫过于$('div1')之类的代码.从而获得扩展后的element对象,然后,我们就可以用它的各种扩展出来的方法了,如: $('div1').addClassName('loading').show(); 所以,我们研究Element的扩展正应当以此为入口. function $(element) { if (arguments.length > 1) { for (var

Prototype 学习 工具函数学习($方法)_prototype

$ $$ $A $F $H $R $w Try.these document.getElementsByClassName $方法--被成为瑞士军刀(Swiss Army knife) If provided with a string, returns the element in the document with matching ID; otherwise returns the passed element. Takes in an arbitrary number of argume

[转]prototype 源码解读 超强推荐第1/3页_prototype

复制代码 代码如下: Prototype is a JavaScript framework that aims to ease development of dynamic web applications. Featuring a unique, easy-to-use toolkit for class-driven development and the nicest Ajax library around, Prototype is quickly becoming the codeb

prototype 学习笔记整理_prototype

var Class = { create: function() { return function() { this.initialize.apply(this, arguments); } } } 定义了一个class函数作为创建类的模版或者说是原型 使用方法 复制代码 代码如下: <html> <title>Test Class.create()</title> <head> <script language="JavaScript&q