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 解析url的search方法
Feb 09 Javascript
IE event.srcElement和FF event.target 功能比较
Mar 01 Javascript
使用JQUERY进行后台页面布局控制DIV实现左右式
Jan 07 Javascript
javascript巧用eval函数组装表单输入项为json对象的方法
Nov 25 Javascript
javascript入门之window对象【新手必看】
Nov 22 Javascript
jQuery实现鼠标跟随效果
Feb 20 Javascript
js实现本地图片文件拖拽效果
Jul 18 Javascript
浅谈React和Redux的连接react-redux
Dec 04 Javascript
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 jQuery
layer 刷新某个页面的实现方法
Sep 05 Javascript
vue实现点击追加选中样式效果
Nov 01 Javascript
在Vue中使用CSS3实现内容无缝滚动的示例代码
Nov 27 Vue.js
彪哥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中上传大体积文件时需要的设置
2006/10/09 PHP
PHP提示Deprecated: mysql_connect(): The mysql extension is deprecated的解决方法
2014/08/28 PHP
实例讲解PHP表单处理
2019/02/15 PHP
laravel中的fillable和guarded属性详解
2019/10/23 PHP
JavaScript中的变量声明早于赋值分析
2012/03/01 Javascript
基于JavaScript 类的使用详解
2013/05/07 Javascript
javascript实现密码强度显示
2015/03/18 Javascript
JavaScript实现选择框按比例拖拉缩放的方法
2015/08/04 Javascript
JS+CSS实现类似QQ好友及黑名单效果的树型菜单
2015/09/22 Javascript
js图片轮播效果实现代码
2020/04/18 Javascript
从零开始学习Node.js系列教程五:服务器监听方法示例
2017/04/13 Javascript
BootStrap Fileinput上传插件使用实例代码
2017/07/28 Javascript
使用 vue.js 构建大型单页应用
2018/02/10 Javascript
Node.js使用MySQL连接池的方法实例
2018/02/11 Javascript
js中自定义react数据验证组件实例详解
2018/10/19 Javascript
vue+iview动态渲染表格详解
2019/03/19 Javascript
小程序实现日历左右滑动效果
2019/10/21 Javascript
关于JavaScript数组去重的一些理解汇总
2020/09/10 Javascript
Python使用jsonpath-rw模块处理Json对象操作示例
2018/07/31 Python
python实现一组典型数据格式转换
2018/12/15 Python
对Python中创建进程的两种方式以及进程池详解
2019/01/14 Python
Python异步操作MySQL示例【使用aiomysql】
2019/05/16 Python
学python安装的软件总结
2019/10/12 Python
在pycharm中文件取消用 pytest模式打开的操作
2020/09/01 Python
葡萄牙鞋子品牌:Fair
2016/12/10 全球购物
Can a struct inherit from another class? (结构体能继承类吗)
2014/07/22 面试题
临床医学应届生求职信
2013/11/06 职场文书
小学英语教学反思
2014/01/30 职场文书
环境工程专业自荐信范文
2014/03/18 职场文书
工厂车间标语
2014/06/19 职场文书
钳工实训报告总结
2014/11/04 职场文书
2016感恩母亲节校园广播稿
2015/12/17 职场文书
2016入党积极分子党课培训心得体会
2016/01/06 职场文书
2016简单的租房合同范本
2016/03/18 职场文书
祝福语集锦:给满月宝宝的祝福语
2019/11/20 职场文书
如何理解python接口自动化之logging日志模块
2021/06/15 Python