Prototype.jsリーディングPart1
Prototype.jsを読んでみる。
バージョンは、1.6.1 (September 1st, 2009)を使用する。
ダウンロードはこちら→Prototype.js。
9~54行目:Prototypeオブジェクトの定義。
var Prototype = {
Version: '1.6.1',
Browser: (function(){
var ua = navigator.userAgent;
var isOpera = Object.prototype.toString.call(window.opera) == '[object Opera]';
return {
IE: !!window.attachEvent && !isOpera,
Opera: isOpera,
WebKit: ua.indexOf('AppleWebKit/') > -1,
Gecko: ua.indexOf('Gecko') > -1 && ua.indexOf('KHTML') === -1,
MobileSafari: /Apple.*Mobile.*Safari/.test(ua)
}
})(),
BrowserFeatures: {
XPath: !!document.evaluate,
SelectorsAPI: !!document.querySelector,
ElementExtensions: (function() {
var constructor = window.Element || window.HTMLElement;
return !!(constructor && constructor.prototype);
})(),
SpecificElementExtensions: (function() {
if (typeof window.HTMLDivElement !== 'undefined')
return true;
var div = document.createElement('div');
var form = document.createElement('form');
var isSupported = false;
if (div['__proto__'] && (div['__proto__'] !== form['__proto__'])) {
isSupported = true;
}
div = form = null;
return isSupported;
})()
},
ScriptFragment: ']*>([\\S\\s]*?)<\/script>',
JSONFilter: /^\/\*-secure-([\s\S]*)\*\/\s*$/,
emptyFunction: function() { },
K: function(x) { return x }
};
おそらく、ライブラリ、Prototypeとして持っておくべき何かをいろいろと定義している模様。
10行目:バージョンの定義。
Version: '1.6.1',
Prototype.Versionで使ってるprototype.jsのバージョンを取得できる。あまりないと思うけど、Prototype.jsに依存したライブラリを開発するときとかに使うかも。
12~22行目:Prototype.Browserの定義。
Browser: (function(){
var ua = navigator.userAgent;
var isOpera = Object.prototype.toString.call(window.opera) == '[object Opera]';
return {
IE: !!window.attachEvent && !isOpera,
Opera: isOpera,
WebKit: ua.indexOf('AppleWebKit/') > -1,
Gecko: ua.indexOf('Gecko') > -1 && ua.indexOf('KHTML') === -1,
MobileSafari: /Apple.*Mobile.*Safari/.test(ua)
}
})(),
Prototype.Browserは、無名関数を定義→実行している。JavaScriptでは、よく使う書き方。それぞれのブラウザの判別方法は、知らなくてもおよそかまわない。
このPrototype.Browserのおかげで、ブラウザ固有の処理は、
if (Prototype.Browser.IE) {
// IEだけの処理
}
等のようにかける。
.ちなみに、ここまでで、
!!window.attachEvent && !isOpera,
のように「!!(hoge)」という記述をよく見かけると思うが、これはJavaScriptで真偽値を評価するために使う手法。JavaScriptでは、自動でキャストされるため、!(hoge)と書くと、それは、真偽値として扱われるようになる。要するに、、”hoge”(文字列)→!(“hoge”)(真偽値false)→!!(“hoge”)(真偽値true)な感じ。
24~47行目:Prototype.BrowserFeaturesの定義。
BrowserFeatures: {
XPath: !!document.evaluate,
SelectorsAPI: !!document.querySelector,
ElementExtensions: (function() {
var constructor = window.Element || window.HTMLElement;
return !!(constructor && constructor.prototype);
})(),
SpecificElementExtensions: (function() {
if (typeof window.HTMLDivElement !== 'undefined')
return true;
var div = document.createElement('div');
var form = document.createElement('form');
var isSupported = false;
if (div['__proto__'] && (div['__proto__'] !== form['__proto__'])) {
isSupported = true;
}
div = form = null;
return isSupported;
})()
},
Prototype.BrowserFeaturesもPrototype.Browserと意味合い的にはほぼ同一。各機能を実装しているかどうかの判定を返す。
その他いろいろと定義されているが、今の段階では何に使っていくのかはちょっと不明。。
ちなみに、本記事のタイトルを「Prototype.jsリーディングPart1」としたけど、この先続くかどうかも不明。。。





