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操作select方法大全[新增、修改、删除、选中、清空、判断存在等]
Sep 26 Javascript
js 优化次数过多的循环 考虑到性能问题
Mar 05 Javascript
js操作iframe的一些方法介绍
Jun 25 Javascript
js 时间函数应用加、减、比较、格式转换的示例代码
Aug 23 Javascript
js jquery分别实现动态的文件上传操作按钮的添加和删除
Jan 13 Javascript
TypeError document.getElementById(...) is null错误原因
May 18 Javascript
详解javascript获取url信息的常见方法
Dec 19 Javascript
详解AngularJS中$filter过滤器使用(自定义过滤器)
Feb 04 Javascript
JavaScript验证知识整理
Mar 24 Javascript
vue2.x集成百度UEditor富文本编辑器的方法
Sep 21 Javascript
基于vue 实现表单中password输入的显示与隐藏功能
Jul 19 Javascript
vue把输入框的内容添加到页面的实例讲解
Nov 11 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带密码功能并下载远程文件保存本地指定目录 修改加强版
2010/05/16 PHP
解析PHP留言本模块主要功能的函数说明(代码可实现)
2013/06/25 PHP
详解PHP的Yii框架中组件行为的属性注入和方法注入
2016/03/18 PHP
详解PHP变量传值赋值和引用赋值变量销毁
2019/03/23 PHP
PHP代码覆盖率统计详解
2020/07/22 PHP
extjs3 combobox取value和text案例详解
2013/02/06 Javascript
$.getJSON在IE下失效的原因分析及解决方法
2013/06/16 Javascript
详解JavaScript中Hash Map映射结构的实现
2016/05/21 Javascript
详谈jQuery中的一些正则匹配表达式
2017/03/08 Javascript
JS实现问卷星自动填问卷脚本并在两秒自动提交功能
2020/06/17 Javascript
Vue工程模板文件 webpack打包配置方法
2017/12/26 Javascript
基于vue-cli 打包时抽离项目相关配置文件详解
2018/03/07 Javascript
详解多页应用 Webpack4 配置优化与踩坑记录
2018/10/16 Javascript
原生js实现抽奖小游戏
2019/06/27 Javascript
Layui动态生成select下拉选择框不显示的解决方法
2019/09/24 Javascript
jQuery实现消息弹出框效果
2019/12/10 jQuery
js实现无缝轮播图插件封装
2020/07/31 Javascript
Vue——前端生成二维码的示例
2020/12/19 Vue.js
vue实现可移动的悬浮按钮
2021/03/04 Vue.js
[05:43]VG.R战队教练Mikasa专访:为目标从未停止战斗
2016/08/02 DOTA
python排序函数sort()与sorted()的区别
2018/09/18 Python
Python可变和不可变、类的私有属性实例分析
2019/05/31 Python
Django中的模型类设计及展示示例详解
2020/05/29 Python
Python中如何添加自定义模块
2020/06/09 Python
如何利用python进行时间序列分析
2020/08/04 Python
Paul’s Boutique官网:英国时尚手袋品牌
2018/03/31 全球购物
俄罗斯GamePark游戏商店网站:购买游戏、游戏机和配件
2020/03/13 全球购物
学习党的群众路线教育实践活动心得体会
2014/03/01 职场文书
辞职信标准格式
2015/02/27 职场文书
自荐信怎么写
2015/03/04 职场文书
迎国庆主题班会
2015/08/17 职场文书
2016年九九重阳节活动总结
2016/04/01 职场文书
Python3中PyQt5简单实现文件打开及保存
2021/06/10 Python
Python+tkinter实现高清图片保存
2022/03/13 Python
Apache Hudi 加速传统的批处理模式
2022/04/24 Servers
Centos7 Shell编程之正则表达式、文本处理工具详解
2022/08/05 Servers