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 相关文章推荐
js window.onload 加载多个函数的方法
Nov 02 Javascript
JavaScript 开发规范要求(图文并茂)
Jun 11 Javascript
Jquery拖拽并简单保存的实现代码
Nov 28 Javascript
JavaScript之自定义类型
May 04 Javascript
JS执行删除前的判断代码
Feb 18 Javascript
用javascript关闭本窗口技巧小结
Sep 05 Javascript
JavaScript使用yield模拟多线程的方法
Mar 19 Javascript
js实现跨域的4种实用方法原理分析
Oct 29 Javascript
浅析Bootstrap组件之面板组件
May 04 Javascript
JavaScript中数组的各种操作的总结(必看篇)
Feb 13 Javascript
原生JS京东轮播图代码
Mar 22 Javascript
JavaScript实现班级抽签小程序
May 19 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 in_array 函数使用说明与in_array需要注意的地方说明
2010/04/13 PHP
如何用phpmyadmin设置mysql数据库用户的权限
2012/01/09 PHP
PHP版本常用的排序算法汇总
2015/12/20 PHP
jQuery 研究心得 取得属性的值
2007/11/30 Javascript
NodeJS学习笔记之网络编程
2014/08/03 NodeJs
jquery动态导航插件dynamicNav用法实例分析
2015/09/06 Javascript
jQuery实现的自定义弹出层效果实例详解
2016/09/04 Javascript
jQuery实现选项卡功能(两种方法)
2017/03/08 Javascript
vue 和vue-touch 实现移动端左右导航效果(仿京东移动站导航)
2017/04/22 Javascript
js图片轮播插件的封装
2017/07/21 Javascript
import与export在node.js中的使用详解
2017/09/28 Javascript
浅谈AngularJs 双向绑定原理(数据绑定机制)
2017/12/07 Javascript
浅谈layer弹出层按钮颜色修改方法
2019/09/11 Javascript
[14:20]刀塔大凶女神互压各路奇葩屌丝
2014/05/16 DOTA
[44:40]Serenity vs Pain 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
分享几道你可能遇到的python面试题
2017/07/24 Python
不同版本中Python matplotlib.pyplot.draw()界面绘制异常问题的解决
2017/09/24 Python
浅谈django model postgres的json字段编码问题
2018/01/05 Python
Python paramiko模块的使用示例
2018/04/11 Python
django表单实现下拉框的示例讲解
2018/05/29 Python
Sanic框架基于类的视图用法示例
2018/07/18 Python
详解pandas如何去掉、过滤数据集中的某些值或者某些行?
2019/05/15 Python
HTML5拖放效果的实现代码
2016/11/17 HTML / CSS
全球销量第一生发产品:Viviscal
2017/12/21 全球购物
Furla官网:意大利著名的皮革品牌
2019/08/06 全球购物
意大利时尚奢侈品店:D’Aniello Boutique
2021/01/19 全球购物
JAVA代码查错题
2014/10/10 面试题
开业庆典策划方案
2014/02/18 职场文书
保护地球的标语
2014/06/17 职场文书
党的群众路线批评与自我批评发言稿
2014/10/16 职场文书
婚前协议书标准版
2014/10/19 职场文书
工伤事故赔偿协议书
2014/10/27 职场文书
12.4全国法制宣传日活动方案
2014/11/02 职场文书
2015年校长新年寄语
2014/12/08 职场文书
诚信考试主题班会
2015/08/17 职场文书
mybatis调用sqlserver存储过程返回结果集的方法
2021/05/08 SQL Server