Browsing articles tagged with " ライブラリ"
9月
18
2009

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」としたけど、この先続くかどうかも不明。。。


Now loading...

PR

Flickr