最近打算了解一下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的方法，由于还没有看到后面所以暂时还不明确具体用处，所以只是在字面上先进行了注释。
有很多地方理解的不是很明确，应该有很多理解不对的地方。如果有高手能停下步伐看上一眼，并指点一二，小弟将不胜感激。
扫一扫
87
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
