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 相关文章推荐
javascript引导程序
Oct 26 Javascript
关于javascript中的parseInt使用技巧
Sep 03 Javascript
基于Jquery的开发个代阴影的对话框效果代码
Jul 28 Javascript
ie与ff下的event事件使用介绍
Nov 25 Javascript
Jquery选择器中使用变量实现动态选择例子
Jul 25 Javascript
详解JavaScript基于面向对象之继承
Dec 13 Javascript
基于jQuery实现Ajax验证用户名是否存在实例
Mar 30 Javascript
javascript 数组的定义和数组的长度
Jun 07 Javascript
jQuery简单倒计时效果完整示例
Sep 20 Javascript
纯JS实现只能输入数字的简单代码
Jun 21 Javascript
vue2.0 axios前后端数据处理实例代码
Jun 30 Javascript
分享8个JavaScript库可更好地处理本地存储
Oct 12 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
PHP和javascript常用正则表达式及用法实例
2014/07/01 PHP
Ajax和PHP正则表达式验证表单及验证码
2016/09/24 PHP
thinkphp自定义权限管理之名称判断方法
2017/04/01 PHP
javascript中创建对象的三种常用方法
2010/12/30 Javascript
jQuery调用WebService的实现代码
2011/06/19 Javascript
jquery 元素控制(追加元素/追加内容)介绍及应用
2013/04/21 Javascript
jquery判断输入密码两次是否相等
2020/04/22 Javascript
JS轮播图中缓动函数的封装
2020/11/25 Javascript
js省市区级联查询(插件版&无插件版)
2017/03/21 Javascript
Vue 2.0 服务端渲染入门介绍
2017/03/29 Javascript
在node中如何使用 ES6
2017/04/22 Javascript
JS中min函数实例讲解
2019/02/18 Javascript
jQuery实现颜色打字机的完整代码
2020/03/19 jQuery
解决VantUI popup 弹窗不弹出或无蒙层的问题
2020/11/03 Javascript
JavaScript实现原型封装轮播图
2020/12/27 Javascript
使用Python的urllib2模块处理url和图片的技巧两则
2016/02/18 Python
python实现批量修改文件名代码
2017/09/10 Python
Python numpy 常用函数总结
2017/12/07 Python
Python3 queue队列模块详细介绍
2018/01/05 Python
TensorFlow利用saver保存和提取参数的实例
2018/07/26 Python
Python3离线安装Requests模块问题
2019/10/13 Python
pytorch制作自己的LMDB数据操作示例
2019/12/18 Python
python安装及变量名介绍详解
2020/12/12 Python
装上这 14 个插件后,PyCharm 真的是无敌的存在
2021/01/11 Python
Reformation官网:美国女装品牌
2018/09/14 全球购物
给定一个时间点,希望得到其他时间点
2013/11/07 面试题
开门红主持词
2014/04/02 职场文书
诉讼代理人授权委托书
2014/04/08 职场文书
竞选学生会演讲稿
2014/04/25 职场文书
竞选班干部演讲稿600字
2014/08/20 职场文书
防汛工作情况汇报
2014/10/28 职场文书
银行催款通知书
2015/04/17 职场文书
python中Matplotlib绘制直线的实例代码
2021/07/04 Python
Win11筛选键导致键盘失灵怎么解决? Win11关闭筛选键的技巧
2022/04/08 数码科技
hive数据仓库新增字段方法
2022/06/25 数据库
python 镜像环境搭建总结
2022/09/23 Python