prototype.js 源码解读(01)

时间:2022-09-24 22:55:18

prototype.js是一个设计的非常优雅且很有实用价值的js基础类库,其源码非常值得研究。研究它的源码不仅能提升个人水平,而且对你打下坚实的js基础也很有帮助。因本人技术水平有限,该解读仅供参考。


定义全局对象Prototype,包括属性版本号,属性版本号的定义有利于版本号的检测
9 var Prototype = {
10 Version: '1.5.0',
11 BrowserFeatures: {
12 XPath: !!document.evaluate
13 },
14
15 ScriptFragment: '(?:<script.*?>)((\n|\r|.)*?)(?:<\/script>)',
16 emptyFunction: function() {},
17 K: function(x) { return x }
18 };

evaluate() 方法用来计算一个 XPath 表达式。

ScriptFragment是正则表达式,用于捕获字符串中的<script>标记及其中的内容

emptyFunction:是一个空函数,在后面经常会有用到

K:返回参数自身的函数,后面会有应用


20  var Class = {
21 create: function() {
22 return function() {
23 this.initialize.apply(this, arguments);
24 }
25 }
26 };

用字面量的方法定义一个Class类,可以用来创建类。使用此模式创建的类能够实现构造函数。注意,这里的Class是大写,所以不是js的保留字,也不是构造函数。

creat()方法:属性 create 是一个方法,返回一个构造函数。

一般使用如下:

   var X = Class.create();

返回的构造函数会执行名为 initialize 的方法,此时的initialize方法还没有定义。


28    var Abstract = new Object();//表示命名空间或者抽象类的东西
29
30 Object.extend = function(destination, source) {
31 for (var property in source) {
32 destination[property] = source[property];//将source的所有属性复制到destination
33 }
34 return destination;
35 };

Abstract 的定义更多是为了保持命名空间清晰的考虑,也就是说,我们可以给 Abstract 这个对象实例添加新的对象定义。 Object其实是一个函数,他没有任何成员,所以是一个空类,所以Abstract也就没有任何成员。

通过一个静态函数Object.extend(destination, source)实现了js中的继承。

var a = new ObjectA(), b = new ObjectB();
var c = a.extend(b);

此时 c 对象同时拥有 a 和 b 对象的属性和方法。但是与多重继承不同的是,c instanceof ObjectB 将返回false


37  Object.extend(Object, {
38 inspect: function(object) {// 一个静态方法, 传入一个对象, 返回对象的字符串表示
39 try {
40 if (object === undefined) return 'undefined'; // 处理undefined情况
41 if (object === null) return 'null'; // 处理null情况
42 return object.inspect ? object.inspect() :
43 object.toString();
44 } catch (e) {
45 if (e instanceof RangeError) return '...';// 处理异常情况
46 throw e;
47 }
48 },
49 keys: function(object) { // 一个静态方法, 传入一个对象, 返回该对象中所有的属性, 构成数组返回
50 var keys = [];//定义空数组,用来保存数据
51 for (var property in object)
52 keys.push(property); // 将每个属性压入到一个数组中
53 return keys;
54 },
55
56 values: function(object) {//同上
57 var values = [];
58 for (var property in object)
59 values.push(object[property]);
60 return values;
61 },
62
63 clone: function(object) { // 一个静态方法, 传入一个对象, 克隆一个新对象并返回
64 return Object.extend({}, object);
65 }
66 });

PrototypeObject类进行的扩展主要是通过静态函数Object.extend实现扩展。inspect主要是将对象转换为字符串做的一个检查,用到了try…catch语句。三目运算符中,如果对象定义了inspect方法(true), 则调用该方法返回(object.inspect()), 否则返回对象的toString()值。


Function.prototype.bind = function() {
var __method = this, args = $A(arguments), object = args.shift();
return function() {
return __method.apply(object, args.concat($A(arguments)));
}
}

将函数绑定到某个对象运行,可在绑定的时候添加参数,例如:

var obj1={p:"obj1"};
var obj2={
p:"obj2",
method:function(args){
alert(args+this.p);
}
}
obj2.method("this is ");//显示“this is obj2”;
obj2.method.bind(obj1,"now this is ");//显示“now this is obj1”;

Function.prototype.bindAsEventListener = function(object) {
var __method = this, args = $A(arguments), object = args.shift();
return function(event) {
return __method.apply(object, [( event || window.event)].concat(args).concat($A(arguments)));
}
}

bind一样,不过这个方法一般用做html控件对象的事件处理。所以要传递event对象
假设有节点node1,则:

node1.onclick=function(){
clickHandler.bindAsEventListener(this)(event||window.event);
}

所有的数字类型都是Number类的实例,下面就是给Number类定义一些方法:

Object.extend(Number.prototype, {
/*
将数字转换为颜色的形式
*/
toColorPart: function() {
var digits = this.toString(16);
if (this < 16) return '0' + digits;
return digits;
}, succ: function() {
return this + 1;
}, times: function(iterator) {
$R(0, this, true).each(iterator);
return this;
}
});

prototype.js 源码解读(01)的更多相关文章

  1. prototype&period;js 源码解读(02)

    如果你想研究一些比较大型的js框架的源码的话,本人建议你从其最初的版本开始研读,因为最初的版本东西少,易于研究,而后的版本基本都是在其基础上不断扩充罢了,所以,接下来我不准备完全解读prototype ...

  2. js便签笔记(10) - 分享:json2&period;js源码解读笔记

    1. 如何理解“json” 首先应该意识到,json是一种数据转换格式,既然是个“格式”,就是个抽象的东西.它不是js对象,也不是字符串,它只是一种格式,一种规定而已. 这个格式规定了如何将js对象转 ...

  3. js便签笔记(10) - 分享:json&period;js源码解读笔记

    1. 如何理解“json” 首先应该意识到,json是一种数据转换格式,既然是个“格式”,就是个抽象的东西.它不是js对象,也不是字符串,它只是一种格式,一种规定而已. 这个格式规定了如何将js对象转 ...

  4. fastclick&period;js源码解读分析

    阅读优秀的js插件和库源码,可以加深我们对web开发的理解和提高js能力,本人能力有限,只能粗略读懂一些小型插件,这里带来对fastclick源码的解读,望各位大神不吝指教~! fastclick诞生 ...

  5. json2&period;js源码解读记录

    相关内容:json详细用法.js语法.unicode.正则   json特点--最简单.最小巧的经典js库.   json作者:道克拉斯.克劳福德(Douglas Crockford)--js大牛 出 ...

  6. require&period;js 源码解读——配置默认上下文

    首先,我们先来简单说一下,require.js的原理: 1.载入模块
 2.通过模块名解析出模块信息,以及计算出URL
 3.通过创建SCRIPT的形式把模块加载到页面中.
 4.判断被加载的脚本,如 ...

  7. 亚马逊左侧菜单延迟z三角 jquery插件jquery&period;menu-aim&period;js源码解读

    关于亚马逊的左侧菜单延迟,之前一直不知道它的实现原理.梦神提到了z三角,我也不知道这是什么东西.13号那天很有空,等领导们签字完我就可以走了.下午的时候,找到了一篇博客:http://jayuh.co ...

  8. 前端编译原理 parser&period;js源码解读

    前面已经介绍了一个jison的使用,在正常开发中其实已经够用下,下面主要是看了下parser.js代码解读下,作为一些了解. 下面以最简单的文法产生的parser做一些代码注释 下面是一些注释,标示了 ...

  9. prototype&period;js源码

    prototype 1.3.1 版本和之前的 1.2.0 版本有了不少改进,并增加了新的功能: 1. 增加了事件注册管理2. 增加了空间定位的常用函数3. 改善了 xmlhttp 的封装4. 移除了 ...

随机推荐

  1. 基于Ajax&plus;div的&OpenCurlyDoubleQuote;左边菜单、右边内容”页面效果实现

    效果演示: ①默认页面(index.jsp): ②:点击左侧 用户管理 标签下的 用户列表 选项后,右边默认页面内容更新为用户列表页(userList.jsp)的内容 : ③:同理,点击 产品管理.订 ...

  2. 关于GreenOdoo的一个Bug

    动态创建字段的时候,虽然字段已经创建,但是显示的时候会报没有新创建的字段错误: 但是原版是没有任何问题的,记录一下.

  3. BZOJ-2929 洞穴攀岩 最大流Dinic&lpar;傻逼题&rpar;

    竟然没有1A真羞耻...1分钟不到读完题,10分钟不到打完....MD没仔细看...WA了一遍,贱! 2929: [Poi1999]洞穴攀行 Time Limit: 1 Sec Memory Limi ...

  4. Python实现SVM&lpar;支持向量机&rpar;

    Python实现SVM(支持向量机) 运行环境 Pyhton3 numpy(科学计算包) matplotlib(画图所需,不画图可不必) 计算过程 st=>start: 开始 e=>end ...

  5. Git入门简介

    ​1. Git 背景 Git 最初由Linus Torvalds编写,用于 Linux 内核开发的版本控制工具. Git 与常用的版本控制工具 CVS.Subversion 等不同,它采用了分布式版本 ...

  6. Android中的Surface和SurfaceView

    一.什么是Surface 简单的说Surface对应了一块屏幕缓冲区,每个window对应一个Surface,任何View都要画在Surface的Canvas上(后面有原因解释).传统的view共享一 ...

  7. NeralJS需求整理及思路

    NeralJs希望通过解析json数据,动态创建和渲染报表,每个报表呈现一定时间范围的数据,通过使用表格图表等不同的方式,使数据的呈现不死板,且更容易看出规律. 说通俗点,就是动态在一个区域内生成多张 ...

  8. Windows 怎么知道我已连线到网际网络&quest; 原来当中大有文章&excl;

    原文 Windows 怎么知道我已连线到网际网络? 原来当中大有文章! 标题这个问题好像很简单, 但原来深入研究起来还真的不是”因为我能看到网页嘛”这样简单的答案. 研究这个课题是由于公司内部的防火墙 ...

  9. Hibernate与Jpa的关系(2)

    [转自:http://blog.163.com/hero_213/blog/static/398912142010312024809/ ] 近年来ORM(Object-Relational Mappi ...

  10. asp&period;net mvc 使用 Autocomplete 实现类似百度,谷歌动态搜索条提示框。

    Autocomplete是一个Jquery的控件,用法比较简单. 大家先看下效果: 当文本框中输入内容,自动检索数据库给出下拉框进行提示功能. 需要用此控件大家先到它的官方网站进行下载最新版本: ht ...