prototype 1.5 & scriptaculous 1.6.1 学习笔记


Posted in Javascript onSeptember 07, 2006

最近做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方法返回值就是第一个参数被覆盖后的全部的值
不得不佩服,一段一句进行定义,同时有设置了默认值.
越看越有意思,继续看下去

Javascript 相关文章推荐
ExtJS实现文件下载的方法实例
Nov 09 Javascript
jquery插件开发之实现jquery手风琴功能分享
Mar 10 Javascript
JavaScript常用小技巧小结
Dec 29 Javascript
js数组依据下标删除元素
Apr 14 Javascript
jQuery左侧大图右侧小图焦点图幻灯切换代码分享
Aug 19 Javascript
js改变style样式和css样式的简单实例
Jun 28 Javascript
JS碰撞运动实现方法详解
Dec 15 Javascript
vue 中自定义指令改变data中的值
Jun 02 Javascript
Vue.js常用指令之循环使用v-for指令教程
Jun 27 Javascript
Node接收电子邮件的实例代码
Jul 21 Javascript
javascript将非数值转换为数值
Sep 13 Javascript
JavaScript实现队列结构过程
Dec 06 Javascript
彪哥1.1(智能表格)提供下载
Sep 07 #Javascript
日期函数扩展类Ver0.1.1
Sep 07 #Javascript
js脚本学习 比较实用的基础
Sep 07 #Javascript
prototype 的说明 js类
Sep 07 #Javascript
你的编程语言可以这样做吗?
Sep 07 #Javascript
音乐播放用的的几个函数
Sep 07 #Javascript
在网页中屏蔽快捷键
Sep 06 #Javascript
You might like
真正面向对象编程:PHP5.01发布
2006/10/09 PHP
php mssql 数据库分页SQL语句
2008/12/16 PHP
一个PHP缓存类代码(附详细说明)
2011/06/09 PHP
使用php 获取时间今天明天昨天时间戳的详解
2013/06/20 PHP
PHP实现提取多维数组指定一列的方法总结
2019/12/04 PHP
基于NodeJS的前后端分离的思考与实践(六)Nginx + Node.js + Java 的软件栈部署实践
2014/09/26 NodeJs
js获取元素相对窗口位置的实现代码
2014/09/28 Javascript
JavaScript onkeypress事件入门实例(按下或按住一个键盘按键)
2014/10/17 Javascript
js+css实现select的美化效果
2016/03/24 Javascript
基于jquery插件编写countdown计时器
2016/06/12 Javascript
jQuery简单倒计时效果完整示例
2016/09/20 Javascript
Javascript 创建类并动态添加属性及方法的简单实现
2016/10/20 Javascript
原生javascript实现读写CSS样式的方法详解
2017/02/20 Javascript
js获取隐藏元素的宽高
2017/02/24 Javascript
基于JavaScript实现移动端无限加载分页
2017/03/27 Javascript
基于 Bootstrap Datetimepicker 联动
2017/08/03 Javascript
JS计算输出100元钱买100只鸡问题的解决方法
2018/01/04 Javascript
Javascript实现秒表倒计时功能
2018/11/17 Javascript
JS开发常用工具函数(小结)
2019/07/04 Javascript
解决layer弹出层msg的文字不显示的问题
2019/09/11 Javascript
javascript设计模式 ? 原型模式原理与应用实例分析
2020/04/10 Javascript
vue 实现tab切换保持数据状态
2020/07/21 Javascript
[01:52]PWL S2开团时刻第四期——DOTA2成语故事
2020/12/03 DOTA
python利用插值法对折线进行平滑曲线处理
2018/12/25 Python
Python告诉你木马程序的键盘记录原理
2019/02/02 Python
HTML5拖拉上传文件的简单实例
2017/01/11 HTML / CSS
HTML5拍照和摄像机功能实战详解
2019/01/24 HTML / CSS
HTML5实现应用程序缓存(Application Cache)
2020/06/16 HTML / CSS
Notino希腊:购买香水和美容产品
2019/07/25 全球购物
.NET初级开发工程师面试题(包括Javascript)
2012/08/22 面试题
幼儿园父亲节活动方案
2014/03/11 职场文书
群众路线剖析材料范文
2014/10/09 职场文书
2019年学校消防安全责任书(2篇)
2019/10/09 职场文书
Pyhton模块和包相关知识总结
2021/05/12 Python
SQL之各种join小结详细讲解
2021/08/04 MySQL
PHP面试题 wakeup魔法 Ezpop pop序列化与反序列化
2022/04/11 PHP