0.6.x/js/01_core/01_X.js

   1 /**\r
   2  * <h4>はじめに:Web 開発の世界へようこそ！</h4>\r
   3  * DHTML と XHR 等を活用した Ajax によってその真価を発揮した javascript は、現在では RIA に SPA や 3D ゲームなど、あらゆるアプリケーションがブラウザ上で動きつつあります。\r
   4  * それらの素晴らしいデモに触れ、これから Web 開発に望む皆さんは、胸をときめかせていることでしょう。\r
   5  * そうです、今や Web ブラウザは、あなたの夢を何でも描くことの出来る自由なフロンティアです。\r
   6  * \r
   7  * しかし、いざ Javascript を触り始め、初めての開発に着手すると、Web ブラウザというフロンティアは、少し雑草の茂るだけの荒野だと気付くでしょう。\r
   8  * ここに RIA や 3D ゲームといった素晴らしいテーマパークを築機上げるには、まずは測量に整地、地盤や土壌の改良といった膨大な作業をしなくてはいけません。\r
   9  * \r
  10  * 簡素な物置小屋のための最初の柱を建てるのにも、それ以前に膨大な作業の必要なことに、あなたは唖然となるでしょう。\r
  11  * そのような基礎もそこそこに、勇んで建てた一本目の柱は傾き、または無残に朽ち果てるのを目撃し、あなたは深いため息をつくかもしれません。\r
  12  * \r
  13  * Javascript は様々な問題を孕みつつも、今や最もあらゆるプラットフォームで動作する言語のひとつへと躍進しました。\r
  14  * これから、このフロンティアに如何に基礎を作り、その上にテーマパークを作るのか？一緒に考えていきましょう。\r
  15  * ようこそ、Web 開発の世界へ！\r
  16  * \r
  17  * <h4>pettanR フレームワーク API ドキュメントについて</h4>\r
  18  * このAPIドキュメントには、折に触れこのような長文が登場します。\r
  19  * Web 開発は今では、そのカジュアルなイメージとは裏腹に、膨大な知識と経験が必要なものになってしまっています。\r
  20  * どのようにして、それらの情報を、妥当な業務時間の間に継承していけばよいか？\r
  21  * \r
  22  * この意識は常にありましたが、このたび pettanR フレームワークの API ドキュメントを作成するにあたり、それに付記していく形で取り組んでみようと思います。\r
  23  * \r
  24  * <h4>フレームワークのレイヤー構造について</h4>\r
  25  * <h5>\core 以下:javascript の整地を行い大規模開発の基礎を整える</h5>\r
  26  * <p>ブラウザの種類とバージョンを調べ、続いて javascript 自体の差異を埋め、足りない関数を補います。\r
  27  * <p>続いて、ファーストオブジェクトとも呼ばれる function について、その能力を引き出しつつ安心して使えるように、再利用可能クロージャの生成・破棄ができるようにします。\r
  28  * ガベージコレクション周りが怪しいブラウザがあるため、クロージャを再利用可能にしておくことは重要です。\r
  29  * <p>javascript が大規模開発に使えるように、クラス定義関数を用意します。prototype 周りの差異やバグを吸収するためにも、クラス定義の共通化は有効です。\r
  30  * <p>このクラス定義関数を用いて EventDispatcher クラスを定義します。ブラウザの提供するイベントターゲットオブジェクトをラップしたり、単にアプリケーション独自のイベントを配信するためにも使えます。\r
  31  * フレームワークの各所でサブクラスや単にインスタンスを拡張して使われています。フレームワークの API 設計の性格を決めている、とても重要なクラスです。\r
  32  * 再利用可能クロージャや、タイマー(setTimeout のラッパー) とも密に結合しています。\r
  33  * \r
  34  * <h5>\dom 以下:DHTML の差異を吸収し、非同期化された仮想 Node を提供する</h5>\r
  35  * <p>jQuery ライクな構文で DOM ツリーの操作を行います。チェーンメソッドは速い、と聞きかじったのでこのデザインにしました。\r
  36  * <p>Real DOM の操作は非同期に行われるため高速です。Virtual DOM 時代のライバル達にひけをとることはありません。\r
  37  * <p>10 年後の変化に対応するため、確かな抽象化実装を行う。それを証明するために 10 年前の環境でも動作させます。\r
  38  * \r
  39  * <h5>\ui 以下:UI フレームワーク</h5>\r
  40  * <p>\dom までで吸収できなかった Web ブラウザの差異を最終的に吸収し、HTML 要素を UI 部品として利用するためのレイヤーです。\r
  41  * <p>この層で吸収できなかった差異に関する情報を提供して、アプリケーションに UI をグレースフルグラデーションするための情報を提供します。\r
  42  * <p>任意の UI を実現するための最適な HTML タグ構造がブラウザ毎に異なる場合に、その差異をカプセル化します。\r
  43  * <p>Web ブラウザ自体のレンダリングコストを最小にし、高速な UI 部品を提供するために、独自のレイアウトルールを持ちます。\r
  44  * <p>フォントサイズをベースとしたレイアウト指定のため、レスポンシブな画面作りを後押しします。\r
  45  * \r
  46  * @example // ライブラリは X という名前空間を使用します。\r
  47  * //ショートハンド\r
  48  * X( func ) == X.ViewPort.listenOnce(X.Event.XDOM_READY, func);\r
  49  * X('#mydiv') == X.Doc.find('#mydiv');\r
  50  * @namespace X\r
  51  */ \r
  52 function X( v ){\r
  53         if( X_Type_isFunction( v ) ){\r
  54                 X.ViewPort.listenOnce( X_Event[ 'XDOM_READY' ], v );\r
  55         } else\r
  56         if( X_shortcutFunction ){\r
  57                 return X_shortcutFunction.apply( X_shortcutContext || X, arguments );\r
  58         };\r
  59 };\r
  60 \r
  61 //{+DEV\r
  62 if( !window['console'] || ( window.parent && window.parent.log ) )\r
  63         console = { log : function(a){\r
  64                 var win, elm;\r
  65                 //alert(a);\r
  66                 if( window.parent ){\r
  67                         elm = parent.document.all ? parent.document.all.log : parent.log || parent.document.getElementById( 'log' );\r
  68                         elm && ( elm.innerHTML = a + '<br>' + elm.innerHTML );\r
  69                 };\r
  70         } };\r
  71 //+DEV}\r
  72 \r
  73 //{-AUDIO\r
  74 //-AUDIO}\r
  75 \r
  76 var undefined,\r
  77         X_EMPTY_OBJECT = {},\r
  78         X_TEMP = { onSystemReady : [] },\r
  79         X_shortcutFunction,\r
  80         X_shortcutContext;\r
  81 \r
  82 /**\r
  83  * バージョン文字列:"0.6.123"\r
  84  * @type {string} */\r
  85 X.VERSION = '0.6.127';\r
  86 \r
  87 /**\r
  88  * ブートタイム ms\r
  89  * @type {number} */\r
  90 X.bootTime = + new Date;\r
  91 \r
  92 /**\r
  93  * 空の関数\r
  94  * @type {Function} */\r
  95 X.emptyFunction = new Function;\r
  96 \r
  97 /**\r
  98  * このscriptはheadタグの中にあるか？\r
  99  *  @type {boolean} */\r
 100 // TODO defer の場合もあるので、document.readyState を見る\r
 101 // MacIE で false\r
 102 X.inHead = (function( s ){\r
 103         if( !s ) return false;\r
 104         if( !s.length ) return false; // Safari1.3 312.8 でerror\r
 105         s = s[ s.length - 1 ];\r
 106         // Dom0 || Dom1\r
 107         s = s.parentElement || s.parentNode || s;// s is for opera7.11\r
 108         return s.tagName.toLowerCase() === 'head';// opera7.23 s.tagName is 'HTML'\r
 109 })( document.scripts || document.getElementsByTagName && document.getElementsByTagName( 'script' ) || document.all && document.all.tags( 'script' ) );\r
 110 \r