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的烟花效果(运动相关)点击屏幕出烟花
Jun 14 Javascript
浅谈javascript中字符串String与数组Array
Dec 31 Javascript
jQuery选择器源码解读(四):tokenize方法的Expr.preFilter
Mar 31 Javascript
基于Bootstrap的Java开发问题汇总(Spring MVC)
Jan 15 Javascript
angular实现form验证实例代码
Jan 17 Javascript
jQuery插件zTree实现获取一级节点数据的方法
Mar 08 Javascript
JavaScript+CSS相册特效实例代码
Sep 07 Javascript
Vue.js移动端左滑删除组件的实现代码
Sep 08 Javascript
解析Vue 2.5的Diff算法
Nov 28 Javascript
详解一个基于套接字实现长连接的express
Mar 28 Javascript
vue导航栏部分的动态渲染实例
Nov 01 Javascript
vue内置组件component--通过is属性动态渲染组件操作
Jul 28 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变量修饰符static的使用
2013/06/28 PHP
php获取当前时间的毫秒数的方法
2014/01/26 PHP
深入理解PHP JSON数组与对象
2016/07/19 PHP
PHP实现动态获取函数参数的方法示例
2018/04/02 PHP
php解决安全问题的方法实例
2019/09/19 PHP
laravel 框架执行流程与原理简单分析
2020/02/01 PHP
脚本吧 - 幻宇工作室用到js,超强推荐share.js
2006/12/23 Javascript
从零开始学习jQuery (三) 管理jQuery包装集
2011/02/23 Javascript
基于JavaScript自定义构造函数的详解说明
2013/04/24 Javascript
JS检测图片大小的实例
2013/08/21 Javascript
JQuery中dataGrid设置行的高度示例代码
2014/01/03 Javascript
javascript实现阻止iOS APP中的链接打开Safari浏览器
2014/06/12 Javascript
jQuery焦点图轮播特效代码分享(3款)
2015/09/05 Javascript
简述Matlab中size()函数的用法
2016/03/20 Javascript
JavaScript实现复制或剪切内容到剪贴板功能的方法
2016/05/23 Javascript
js实现漫天星星效果
2017/01/19 Javascript
在javascript中,null>=0 为真,null==0却为假,null的值详解
2017/02/22 Javascript
详解angularjs 关于ui-router分层使用
2017/06/12 Javascript
vue中keep-alive的用法及问题描述
2018/05/15 Javascript
fetch 如何实现请求数据
2018/12/20 Javascript
layer弹窗在键盘按回车将反复刷新的实现方法
2019/09/25 Javascript
layer弹出层倒计时关闭的实现方法
2019/09/27 Javascript
JavaScript实现答题评分功能页面
2020/06/24 Javascript
python中bs4.BeautifulSoup的基本用法
2019/07/27 Python
PyQt 图解Qt Designer工具的使用方法
2019/08/06 Python
Python爬虫:Request Payload和Form Data的简单区别说明
2020/04/30 Python
python+opencv3.4.0 实现HOG+SVM行人检测的示例代码
2021/01/28 Python
Python爬虫爬取微博热搜保存为 Markdown 文件的源码
2021/02/22 Python
纬创Java面试题笔试题
2014/10/02 面试题
经理管理专业自荐信范文
2013/12/31 职场文书
活动总结格式
2014/08/30 职场文书
党的群众路线对照检查材料思想汇报
2014/09/25 职场文书
在职证明格式样本
2015/06/15 职场文书
国家助学金受助感言
2015/08/01 职场文书
idea 在springboot中使用lombok插件的方法
2021/08/02 Java/Android
mysql使用 not int 子查询隐含陷阱
2022/04/12 MySQL