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 相关文章推荐
JQuery设置文本框和密码框得到焦点时的样式
Aug 30 Javascript
删除条目时弹出的确认对话框
Jun 05 Javascript
Javascript基础教程之JavaScript语法
Jan 18 Javascript
js焦点文字滚动效果代码分享
Aug 25 Javascript
javascript图片切换综合实例(循环切换、顺序切换)
Jan 13 Javascript
基于jQuery仿淘宝产品图片放大镜特效
Oct 19 Javascript
js操作浏览器的参数方法
Jan 21 Javascript
用move.js库实现百叶窗特效
Feb 08 Javascript
Vue2.x中的父组件传递数据至子组件的方法
May 01 Javascript
微信小程序自定义toast的实现代码
Nov 16 Javascript
深入理解react 组件类型及使用场景
Mar 07 Javascript
详解JavaScript 作用域
Jul 14 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
增加反向链接的101个方法 站长推荐
2007/01/31 PHP
PHP处理excel cvs表格的方法实例介绍
2013/05/13 PHP
PHP语法小结之基础和变量
2015/11/22 PHP
php函数传值的引用传递注意事项分析
2016/06/25 PHP
Yii2中事务的使用实例代码详解
2016/09/07 PHP
php中让人头疼的浮点数运算分析
2016/10/10 PHP
windows下的WAMP环境搭建图文教程(推荐)
2017/07/27 PHP
javascript 验证日期的函数
2010/03/18 Javascript
jquery对表单操作2
2011/04/06 Javascript
JS操作select下拉框动态变动(创建/删除/获取)
2013/06/02 Javascript
js中的eventType事件及其浏览器支持性介绍
2013/11/29 Javascript
js中arguments,caller,callee,apply的用法小结
2014/01/28 Javascript
js 触发select onchange事件代码
2014/03/20 Javascript
JQuery CheckBox(复选框)操作方法汇总
2015/04/15 Javascript
Jquery 垂直多级手风琴菜单附源码下载
2015/11/17 Javascript
jQuery1.9.1源码分析系列(十六)ajax之ajax框架
2015/12/04 Javascript
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
2017/09/20 jQuery
webpack css加载和图片加载的方法示例
2018/09/11 Javascript
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
2019/03/13 Javascript
vue实现微信获取用户信息的方法
2019/03/21 Javascript
[02:56]《DAC最前线》之国外战队抵达上海备战亚洲邀请赛
2015/01/28 DOTA
python实现在字符串中查找子字符串的方法
2015/07/11 Python
pyhton列表转换为数组的实例
2018/04/04 Python
pycharm远程开发项目的实现步骤
2019/01/20 Python
使用python 写一个静态服务(实战)
2019/06/28 Python
django admin 添加自定义链接方式
2020/03/11 Python
使用OpenCV获取图片连通域数量,并用不同颜色标记函
2020/06/04 Python
matplotlib subplot绘制多个子图的方法示例
2020/07/28 Python
销售高级职员求职信
2013/10/29 职场文书
法学毕业生自我鉴定
2013/11/08 职场文书
爷爷追悼会答谢词
2014/01/24 职场文书
周年庆典主持词
2014/04/02 职场文书
《春雨》教学反思
2014/04/24 职场文书
格林童话读书笔记
2015/06/30 职场文书
Golang 切片(Slice)实现增删改查
2022/04/22 Golang
mysql如何查询连续记录
2022/05/11 MySQL