随笔分类 - Prototype源码浅析
一个系列
摘要：个人觉得这个例子虽然可能不具有实际意义，但是可以很好的理解Sizzle选择的过程实例说明先看一个例子：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head> <meta http-equiv="Content-Type" content="text/html; charset
阅读全文
摘要：元素过滤是Sizzle中最复杂的一部分基本形式Sizzle.filter = function( expr, set, inplace, not ) {}expr 过滤表达式set 候选集合inplace 是否原地修改not 是否取补集说明：set传递的是一个集合(数组)，如果inplace为true，set会被修改；not的作用是用来取补集。还是用个例子来说明下：<li id="a1" class="test"></li><li id="a2" class="test"><
阅读全文
摘要：查找的入口对应的是Sizzle.find方法，Sizzle.find = function( expr, context) {}expr ：查找的表达式context ：查找的范围find的步骤第一步：判断主要集合，方法说过了，依次匹配，顺序就是ID --> NAME --> TAG第二步：（1）当有类型被匹配时，调用相应的方法，获取集合set。（2）当ID,NAME,TAG全部不匹配时，获取context范围内的全部元素集合set第三步：去除expr中已经匹配的部分，返回结果{expr : expr,set : set}因此，Sizzle.find的大致代码流程是Sizzle.f
阅读全文
摘要：主要流程与正则表达式分块var chunker = /((?:\((?:\([^()]+\)|[^()]+)+\)|\[(?:\[[^[\]]*\]|['"][^'"]*['"]|[^[\]'"]+)+\]|\\.|[^ >+~,(\[\\]+)+|[>+~])(\s*,\s*)?((?:.|\r|\n)*)/g;这个正则比较长，主要是用来分块和一步预处理。1、2、3、4、'div#test + p > a.tab' --> ['div#test','+
阅读全文
摘要：大家都知道，Sizzle是jQuery的御用选择器引擎，是jQuery作者John Resig写的DOM选择器引擎，速度号称业界第一。另外，Sizzle是独立的一部分，不依赖任何库，如果你不想用jQuery,可 以只用Sizzle。所以单独拿出来特别对待。在Prototype1.7中，选择器也采用了Sizzle，不过版本有点老，所以我去Sizzle网站搞了一份新的 下来，于是下面分析的时候使用的是最新版的Sizzle.js预先说明在分析初期为了保证各个浏览器的结果一致，不考虑原生getElementsByClass以及querySelectorAll的影响，同时忽略XML类型，因此作一下处..
阅读全文
摘要：简述 $方法是 Prototype 的基础，和jquery中的$作用差不多，不过功能却弱了很多。因为Prototype中还有一个$$方法，看名字就知道，和$相比，$$加了一倍的钱，功能肯定就丰富撒。本文主要是剖析$方法，1.7版本的$$方法使用的是Sizzle引擎，比较复杂，是后面的事情。基本原理 $方法其实比较简单，平时在个人的代码中见得也比较多。基本原理就是如果传入的是一个字符串，就执行document.getElementById方法，如果是一个DOM元素，就直接返回传入的元素，代码实现：function _$(element){ if(typeof element == ...
阅读全文
摘要：Date比较好理解，理解清楚了Number对象的toPaddedString方法就可以了。只有两个方法（toJSON和toISOString），而且这两个方法还一样，就是将日期转换为 JSON 字符串（遵循 ISO 格式）。代码很短，我直接贴上来： (function(proto) { function toISOString() { return this.getUTCFullYear() + '-' + (this.getUTCMonth() + 1).toPaddedString(2) + '-' + this.getUT...
阅读全文
摘要：Hash是Prototype作者扩展出来的一个数据类型。本质上他就是一个普通的javascript对象（注：不要纠结什么javascript变量都是对象，这里说new Object()那种），然后在这个对象上面扩展出来一些其他的方法。基本原理基本的原理的代码说明就是： function Hash(object){ this._object = object; } Hash.prototype = { constructor : Hash, method_1 : function(){//this._object}, me...
阅读全文
摘要：剩下的方法太多，于是分作两部分。亮点就是$break和$continue，以及grep方法的思想。 前面each方法中掉了一个方面没有说，就是源码中的$break和$continue。这两个变量是预定义的，其作用相当于普通循环里面的break和continue语句的作用。出于效率的考虑，在某些操作中并不需要完全遍历一个集合（不局限于一个数组），所以break和continue还是很必要的。对于一个循环来说，对比下面几种退出循环的方式： var array_1 = [1,2,3]; var array_2 = ['a','b','c']; (fun
阅读全文
摘要：在javascript中，根本找不到Enumerable的影子，因为这一块是Prototype作者从Ruby中借鉴过来的。并且Enumerable在实际中根本没有直接应用的机会，都是混入到其他的对象中，可以说是其他对象的一个“父类”（不过只是调用了Object的extend方法，进行了方法的直接拷贝而已）。 我并不熟悉Ruby，不过看Enumerable中的一些方法，倒是跟Python中的有几分相似。 Enumerable其中一个最重要的方法是each，each这个方法应该都比较熟悉，其作用便是遍历一个序列的所有元素，并进行相应的处理。不过多数是应用在数组上，比如原生数组的forEac...
阅读全文
摘要：Prototype在原生对象的基础上扩展，分别是Object，Function，String，Number，Array，Date，前面分析了Object，Function，String，还剩下Number，Array，Date。Number部分方法比较少，一共有8个： toColorPart: 将 Number 对象转换为具有两位数字的十六进制形式 succ: 返回当前 Number 对象的下一个值，即当前值加一 times: 采用 Ruby 的风格来封装一个标准的 [0...n] 循环 toPaddedString:将当前 Number 对象转换为...
阅读全文
摘要：替换interpolate|sub|scan|truncate | gsubinterpolate ：将字符串看作一个模板，并使用 object 的属性填充它。sub ：将字符串中前指定个个与 pattern 指定的模式匹配的子串用 replacement 替换scan ：遍历字符串中与参数 pattern 指定的模式匹配的所有子串。返回原始字符串本身。truncate ：将字符串截短为指定的长度（包含后缀部分）， 并添加一个后缀。gsub ：将字符串中所有与 pattern 指定的模式匹配的值全部用 replacement 替换掉上面的方法中，最重要的一个方法是gsub，具体说明参见《浅析P
阅读全文
摘要：HTML处理stripTags|escapeHTML|unescapeHTMLJSON处理unfilterJSON|isJSON|evalJSON|parseJSON脚本处理stripScripts|extractScripts|evalScripts 现在，String部分转入具体的关联应用，分别对应HTML字符串，JSON字符串和HTML中的脚本字符串。【乱入一句，有关JSON的一点东西，可以看看http://www.cnblogs.com/TomXu/archive/2012/01/11/2311956.html】下面分别叙述：一、HTML字符串stripTags ：移除字符串中所有的
阅读全文
摘要：添加到String.prototype中的方法比较多，不过归结起来，大致分为下面几类：分类方法名原始能力增强 strip| include |startsWith |endsWith| empty| blank格式camelize | capitalize| underscore| dasherize |inspect 变形toArray| succ |times替换interpolate |sub| scan| truncate | gsubHTML处理stripTags |escapeHTML| unescapeHTML参数序列化toQueryParamsJSON处理u...
阅读全文