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给基本控件的取值、赋值示例
May 23 Javascript
浅析javascript操作 cookie对象
Dec 26 Javascript
JS实现的网页背景闪电闪烁效果代码
Oct 17 Javascript
JavaScript类的写法
Sep 17 Javascript
Bootstrap基本布局实现方法详解
Nov 25 Javascript
JavaScript之创意时钟项目(实例讲解)
Oct 23 Javascript
Vue 组件(component)教程之实现精美的日历方法示例
Jan 08 Javascript
vue组件横向树实现代码
Aug 02 Javascript
layui中使用jquery控制radio选中事件的示例代码
Aug 15 jQuery
Vue项目中使用jquery的简单方法
May 16 jQuery
JavaScript中BOM对象原理与用法分析
Jul 09 Javascript
使用layer弹窗提交表单时判断表单是否输入为空的例子
Sep 26 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中“简单工厂模式”实例代码讲解
2012/09/04 PHP
关于ob_get_contents(),ob_end_clean(),ob_start(),的具体用法详解
2013/06/24 PHP
ThinkPHP3.1新特性之动态设置自动完成和自动验证示例
2014/06/19 PHP
php中get_defined_constants函数用法实例分析
2015/05/12 PHP
PHP Beanstalkd消息队列的安装与使用方法实例详解
2020/02/21 PHP
php设计模式之享元模式分析【星际争霸游戏案例】
2020/03/23 PHP
发一个自己用JS写的实用看图工具实现代码
2008/07/26 Javascript
js Date自定义函数 延迟脚本执行
2010/03/10 Javascript
三级下拉菜单的js实现代码
2011/05/23 Javascript
js打开windows上的可执行文件示例
2014/05/27 Javascript
JavaScript 对象深入学习总结(经典)
2015/09/29 Javascript
不想让浏览器运行javascript脚本的方法
2015/11/20 Javascript
jQuery.ajax 跨域请求webapi设置headers的解决方案
2016/08/08 Javascript
RequireJs的使用详解
2017/02/19 Javascript
从零学习node.js之文件操作(三)
2017/02/21 Javascript
详解使用JS如何制作简单的ASCII图与单极图
2017/03/31 Javascript
jQuery实现的简单前端搜索功能示例
2017/10/28 jQuery
Vue 页面跳转不用router-link的实现代码
2018/04/12 Javascript
vue中,在本地缓存中读写数据的方法
2018/09/21 Javascript
js实现翻牌小游戏
2020/07/31 Javascript
Python基于pygame实现的font游戏字体(附源码)
2015/11/11 Python
Django Rest framework权限的详细用法
2019/07/25 Python
Django Rest framework频率原理与限制
2019/07/26 Python
如何在django中添加日志功能
2020/02/06 Python
Django media static外部访问Django中的图片设置教程
2020/04/07 Python
Python中实现输入一个整数的案例
2020/05/03 Python
可视化pytorch 模型中不同BN层的running mean曲线实例
2020/06/24 Python
法国家具及室内配件店:home24
2017/01/21 全球购物
航空大学应届生求职信
2013/11/10 职场文书
幽默自我介绍演讲稿
2014/08/21 职场文书
2014年学生会主席工作总结
2014/11/07 职场文书
培训督导岗位职责
2015/04/10 职场文书
驻村工作简报
2015/07/20 职场文书
python基于scrapy爬取京东笔记本电脑数据并进行简单处理和分析
2021/04/14 Python
mysql事务对效率的影响分析总结
2021/10/24 MySQL
Nginx使用ngx_http_upstream_module实现负载均衡功能示例
2022/08/05 Servers