prototype.js 源码学习笔记（一）
最近打算了解一下prototype，之前重来没有使用过，只用过jquery。早听说这两个框架各有所长，所以尝试着学习一下prototype的源码。预料到可能会遇到很多难题，所以在这里把学习的内容做一个笔记，一是由于水平很有限，暂时先把遇到的问题记录下来，以便以后水平提高后能够回过头来解决，二是希望有各位高人看到后能够直接赐教，感激不尽。三是希望借此养成一个良好的学习习惯。
源码的学习肯定是一个漫长的过程，所以打算一天看一点，希望能够长期坚持下去。。。。。。打开prototype.js的文件1.61的文件，发现内容还是很多的，任重而道远啊。
先贴出第一块的内容：
代码
var Prototype = {
//版本号
Version: '1.6.1',
//浏览器检测,应该是根据浏览器使用的引擎来判断的
Browser: (function(){
//浏览器信息
var ua = navigator.userAgent;
//检测浏览器是非为opera
var isOpera = Object.prototype.toString.call(window.opera) == '[object Opera]';
//返回一个对象，分别是各个浏览器的检测结果
return {
//如果拥有attachEvent方法，而且window.opera对象就认定为ie，貌似opera也支持attachEvent方法
IE: !!window.attachEvent && !isOpera,
//检查是否为opera
Opera: isOpera,
//chrome和safari
WebKit: ua.indexOf('AppleWebKit/') > -1,
//firfox
Gecko: ua.indexOf('Gecko') > -1 && ua.indexOf('KHTML') === -1,
//苹果手机的safari浏览器
MobileSafari: /Apple.*Mobile.*Safari/.test(ua)
}
})(),
//浏览器特征
BrowserFeatures: {
//是否支持w3c提供的元素选择器
XPath: !!document.evaluate,
//是否支持w3c提供的元素css模式查找功能
SelectorsAPI: !!document.querySelector,
//元素是否可以扩展
ElementExtensions: (function() {
//构造函数为element和HTMLElement,ie隐藏了HTMLElement这个类，不能通过代码访问
var constructor = window.Element || window.HTMLElement;
//检查当前浏览器是否支持对元素的原型的扩展
return !!(constructor && constructor.prototype);
})(),
//是否支持特定的元素扩展
SpecificElementExtensions: (function() {
//ie6和ie7不可访问HTMLDivElement，ie8和标准浏览器可以对这个类进行扩展，它继承自HTMLElement
if (typeof window.HTMLDivElement !== 'undefined')
return true;
//创建一个div元素
var div = document.createElement('div');
//创建一个form元素
var form = document.createElement('form');
//标志位
var isSupported = false;
//检查是否支持__proto__属性,firefox,safari,chrome提供了对prototype对象的访问
if (div['__proto__'] && (div['__proto__'] !== form['__proto__'])) {
//改变标志位
isSupported = true;
}
//释放创建出来的临时元素
div = form = null;
//返回结果
return isSupported;
})()
},
//匹配script标签的内容的正则字符串
ScriptFragment: '<script[^>]*>([\\S\\s]*?)<\/script>',
//json过滤
JSONFilter: /^\/\*-secure-([\s\S]*)\*\/\s*$/,
//空函数
emptyFunction: function() { },
K: function(x) { return x }
};
这一部分内容主要应该就是浏览器判断和prototype版本号的体现。先来先分析一下浏览器判断这块的内容。
Browser是浏览器检测，应该是通过浏览器使用的引擎进行判断的。opera浏览器为window定义了一个window.opera的属性，可以通过它来判断浏览器是否为opera。而ie浏览器是通过对attachEvent这个私有的事件绑定方法的判断来实现的，由于opera也支持attachEvent，所以又进行了!isOpera的判断。后面几个浏览器的判断有点意思，因为ie和opera分别用的不同的引擎。firefox用的是gecko,safari用的是webkit，chrome则是在webkit和gecko基础上开发的。safari和chrome可以通过浏览器信息查找到字符串"KHTML"，firefox和chrome可以查找到字符串"gecko",所以可以通过"gecko","KHTML"这几个字符串来区分它们。
BrowserFeatures对象的Xpath属性是通过判断document.evaluate来获取当前浏览器是否支持通过属性查找元素的W3c方法，document.evaluate方法的参考见这里http://liudaoru.javaeye.com/blog/129748。jquery强大的选择器可以轻松的实现这个功能，重要的是对不支持此方法的浏览器的兼容，但是这种通过javascript遍历实现的方式效率上显然是没法和w3c提供的这个API相比拟的，可惜的是没有ie的版本支持这个方法。MobileSafari是我根据字面理解的，因为E文不好，无法参考国外资料，而且买不起iphone进行测试，所以暂时先这么理解了。
SelectorsAPI属性也是判断浏览器是否支持document.querySelector这个W3c提供的一个选择器方法，它是实现类似css选择器那样的元素选择方式，这个功能在jquery里也是有的。参考资料http://blog.darkthread.net/blogs/darkthreadtw/archive/2008/04/16/document-queryselector-in-ie8.aspx。ie家族只有ie8支持，firefox竟然都还没有支持。。。。这种情况说实话很少见。其他几个标准浏览器都支持。
ElementExtensions是检查浏览器是否可以访问Element或者HTMLElement类，Element除了ie6和ie7其他浏览器都支持（包括ie8），但一个诡异的问题就出了，因为HTMLElement是继承自Element(参考这里：http://www.cnblogs.com/LongWay/archive/2008/10/08/1305952.html)，按常理来说支持访问Element就应该也支持对HTMLElement的访问，但是ie8访问HTMLElement却返回"undefined",而后面将会提到的HTMLDivElement继承自HTMLElemnt，ie8却又可以访问它。到这里我真的有点无语。。。。。。这里的判断应该就是看一下个浏览器是否可以访问这些element类，以便对其进行原型扩展。
SpecificElementExtensions应该就是判断是否支持元素的扩展了，通过改变prototype添加方法来进行扩展。首先判断了浏览器对HTMLDivElement类的访问支持，除了ie6和ie7其他浏览器都支持对这个类的访问。后面检查的__proto__属性，一直不太明白是什么原因，因为支持这一属性的浏览器safari、chrome、firefox都已经在判断
if (typeof window.HTMLDivElement !== 'undefined') 时返回true了，所以大胆的猜测应该是对这几个浏览器较老版本的检查。ie6和ie7自然是返回false了。
后面的ScriptFragment和JSONFilter的方法，由于还没有看到后面所以暂时还不明确具体用处，所以只是在字面上先进行了注释。
有很多地方理解的不是很明确，应该有很多理解不对的地方。如果有高手能停下步伐看上一眼，并指点一二，小弟将不胜感激。
