From 2612dc17dae6ba790807049d2587e8a2910007cc Mon Sep 17 00:00:00 2001 From: itozyun Date: Mon, 15 Jun 2015 23:53:46 +0900 Subject: [PATCH] Version 0.6.160, fix X.Net. --- 0.6.x/js/01_core/01_X.js | 45 ++------------------------------------- 0.6.x/js/01_core/10_XCallback.js | 28 ++---------------------- 0.6.x/js/01_core/12_XEvent.js | 3 +-- 0.6.x/js/05_util/02_XJSON.js | 26 ++++++++++++++++++++-- 0.6.x/js/06_net/00_XNet.js | 27 +++++++++++------------ 0.6.x/js/06_net/01_XNetXHR.js | 6 +++--- 0.6.x/js/06_net/02_XNetJSONP.js | 12 +++-------- 0.6.x/js/06_net/03_XNetForm.js | 2 +- 0.6.x/js/06_net/04_XNetImage.js | 2 +- 0.6.x/js/06_net/05_XXHRGadget.js | 37 ++++---------------------------- 0.6.x/js/06_net/10_XOAuth2.js | 6 +++--- 0.6.x/js/07_audio/01_XWebAudio.js | 6 +++--- 12 files changed, 60 insertions(+), 140 deletions(-) diff --git a/0.6.x/js/01_core/01_X.js b/0.6.x/js/01_core/01_X.js index 98e7f4c..5c0ef3d 100644 --- a/0.6.x/js/01_core/01_X.js +++ b/0.6.x/js/01_core/01_X.js @@ -1,48 +1,7 @@ /** - *

はじめに:Web 開発の世界へようこそ！

- * DHTML と XHR 等を活用した Ajax によってその真価を発揮した javascript は、現在では RIA に SPA や 3D ゲームなど、あらゆるアプリケーションがブラウザ上で動きつつあります。 - * それらの素晴らしいデモに触れ、これから Web 開発に望む皆さんは、胸をときめかせていることでしょう。 - * そうです、今や Web ブラウザは、あなたの夢を何でも描くことの出来る自由なフロンティアです。 - * - * しかし、いざ Javascript を触り始め、初めての開発に着手すると、Web ブラウザというフロンティアは、少し雑草の茂るだけの荒野だと気付くでしょう。 - * ここに RIA や 3D ゲームといった素晴らしいテーマパークを築機上げるには、まずは測量に整地、地盤や土壌の改良といった膨大な作業をしなくてはいけません。 - * - * 簡素な物置小屋のための最初の柱を建てるのにも、それ以前に膨大な作業の必要なことに、あなたは唖然となるでしょう。 - * そのような基礎もそこそこに、勇んで建てた一本目の柱は傾き、または無残に朽ち果てるのを目撃し、あなたは深いため息をつくかもしれません。 - * - * Javascript は様々な問題を孕みつつも、今や最もあらゆるプラットフォームで動作する言語のひとつへと躍進しました。 - * これから、このフロンティアに如何に基礎を作り、その上にテーマパークを作るのか？一緒に考えていきましょう。 - * ようこそ、Web 開発の世界へ！ - * - *

pettanR フレームワーク API ドキュメントについて

- * このAPIドキュメントには、折に触れこのような長文が登場します。 - * Web 開発は今では、そのカジュアルなイメージとは裏腹に、膨大な知識と経験が必要なものになってしまっています。 - * どのようにして、それらの情報を、妥当な業務時間の間に継承していけばよいか？ - * - * この意識は常にありましたが、このたび pettanR フレームワークの API ドキュメントを作成するにあたり、それに付記していく形で取り組んでみようと思います。 - * - *

フレームワークのレイヤー構造について

- *
\core 以下:javascript の整地を行い大規模開発の基礎を整える
- *

ブラウザの種類とバージョンを調べ、続いて javascript 自体の差異を埋め、足りない関数を補います。 - *

続いて、ファーストオブジェクトとも呼ばれる function について、その能力を引き出しつつ安心して使えるように、再利用可能クロージャの生成・破棄ができるようにします。 - * ガベージコレクション周りが怪しいブラウザがあるため、クロージャを再利用可能にしておくことは重要です。 - *

javascript が大規模開発に使えるように、クラス定義関数を用意します。prototype 周りの差異やバグを吸収するためにも、クラス定義の共通化は有効です。 - *

このクラス定義関数を用いて EventDispatcher クラスを定義します。ブラウザの提供するイベントターゲットオブジェクトをラップしたり、単にアプリケーション独自のイベントを配信するためにも使えます。 - * フレームワークの各所でサブクラスや単にインスタンスを拡張して使われています。フレームワークの API 設計の性格を決めている、とても重要なクラスです。 - * 再利用可能クロージャや、タイマー(setTimeout のラッパー) とも密に結合しています。 - * - *

\dom 以下:DHTML の差異を吸収し、非同期化された仮想 Node を提供する
- *

jQuery ライクな構文で DOM ツリーの操作を行います。チェーンメソッドは速い、と聞きかじったのでこのデザインにしました。 - *

Real DOM の操作は非同期に行われるため高速です。Virtual DOM 時代のライバル達にひけをとることはありません。 - *

10 年後の変化に対応するため、確かな抽象化実装を行う。それを証明するために 10 年前の環境でも動作させます。 - * - *

\ui 以下:UI フレームワーク
- *

\dom までで吸収できなかった Web ブラウザの差異を最終的に吸収し、HTML 要素を UI 部品として利用するためのレイヤーです。 - *

この層で吸収できなかった差異に関する情報を提供して、アプリケーションに UI をグレースフルグラデーションするための情報を提供します。 - *

任意の UI を実現するための最適な HTML タグ構造がブラウザ毎に異なる場合に、その差異をカプセル化します。 - *

Web ブラウザ自体のレンダリングコストを最小にし、高速な UI 部品を提供するために、独自のレイアウトルールを持ちます。 - *

フォントサイズをベースとしたレイアウト指定のため、レスポンシブな画面作りを後押しします。 + *

API ドキュメントと併せて、その意図や背景を綴っていく副読本もご覧ください。 + * クラウド番外地 > ぺったんR API文書の副読本 * * @example // ライブラリは X という名前空間を使用します。 * //ショートハンド diff --git a/0.6.x/js/01_core/10_XCallback.js b/0.6.x/js/01_core/10_XCallback.js index 31c8a3c..781a255 100644 --- a/0.6.x/js/01_core/10_XCallback.js +++ b/0.6.x/js/01_core/10_XCallback.js @@ -48,32 +48,8 @@ var var listener; /** - *

クロージャについて

- * javascript 開発で多用されるクロージャですが、次の理由によりその使用は慎重になるべきです。 - *
    - *
  1. 正しく参照を切ってガベージコレクトされる条件を満たしたか？プログラマが見落としやすく、結果メモリリークを起こしやすい。特にコードがコールバック地獄になると目も当てられない。 - *
- * - * とくに次のようなページでは、クロージャの使用を極力避けるべきです。破棄が行われることが確実で即時関数によって新しい名前を追加したくない場合と、次項で紹介する絶対に必要なケース以外で使わないようにします。 - *
    - *
  1. ajax によりデータ取得がたびたび起こり、合わせて不要なデータの破棄も行う。 - *
  2. シングルページアプリケーションで画面の生成と破棄が繰り返される。 - *
  3. Web アプリケーションで、一度開いたら一日中操作し続けるユーザーも想定される。 - *
- * - *

クロージャが絶対に必要な場合

- * IE5 ～ IE8 の独自イベントモデルに於いて、イベントオブジェクトに event.currentTarget に相当するものがなく、現在どの HTML 要素でイベントが起こっているか分かりません。
- * そのため HTML 要素とコールバック関数を束縛するクロージャを使う必要があります。
- * 参照:『Javascript 第5版』 オライリー p430 17.3.6 attachEvent() と this キーワード
- * - * このほかに IE8 以下と Opera11 以下の XHR ではイベントオブジェクトが用意されないため、eventType が分からない問題があります。このために eventType とコールバック関数を束縛するクロージャが必要です。
- * - * このように、Web ブラウザと javascript の接点では、どうしてもクロージャが必要なケースがあります。
- * さて、クロージャの使用を最小限に留め、残った僅かなクロージャのメモリリークをチェックし、といくら慎重に開発を行っても、そもそもクロージャが破棄されるのか？ガベージコレクションの怪しいブラウザもあり問題はまだ続きます。 - * - *

再利用可能なクロージャ

- * クロージャの使用を最小限にしたうえで、なおかつクロージャがガベージコレクションされない可能性を考慮して、pettanR フレームワークでは再利用可能なクロージャを用意します。
- * 再利用可能クロージャはフレームワーク内で生成・破棄されるため、ユーザーが直接触ることはありません。しかし debug ツールのコールスタックには登場するため、知識を持っておくことは有益です。
+ *

クロージャに関するポリシーと再利用可能クロージャについて次の記事をご覧ください。 + * 再利用できるクロージャを使ったWebアプリケーション開発 * *

再利用可能クロージャの作成
* X_Callback_create() で再利用可能なクロージャの作成。次のパターンで呼び出します。
diff --git a/0.6.x/js/01_core/12_XEvent.js b/0.6.x/js/01_core/12_XEvent.js index 8b1c278..522959b 100644 --- a/0.6.x/js/01_core/12_XEvent.js +++ b/0.6.x/js/01_core/12_XEvent.js @@ -37,8 +37,7 @@ var X_Event_Rename = {}, 'touchcancel' : 'pointercancel', 'contextmenu' : 'contextmenu', 'dbclick' : 'dbclick', - 'click' : 'click', - 'tap' : 'click' + 'click' : 'click' } : { 'mousedown' : 'pointerdown', diff --git a/0.6.x/js/05_util/02_XJSON.js b/0.6.x/js/05_util/02_XJSON.js index 698927a..2046288 100644 --- a/0.6.x/js/05_util/02_XJSON.js +++ b/0.6.x/js/05_util/02_XJSON.js @@ -1,16 +1,38 @@ -var X_JSON = X[ 'JSON' ] = window.JSON || { + + +var X_JSON = X[ 'JSON' ] = + +// TODO ie8 は子フレームには JSON がいない…アクセス可能な親を探索 + + // JavaScriptでunicode文字列をunescapeする + // http://perutago.seesaa.net/article/202801583.html + + // http://blog.livedoor.jp/dankogai/archives/51503830.html + // Ajax - IE8にもJSON入ってます。使えるとは限らないけど + // Compatibility mode (別名Quirks mode) では、JSONオブジェクトは無効になります。iframeもだめです +X_UA[ 'IE8' ] ? { + 'stringify' : function( o ){ + return unescape( JSON.stringify( o ) ); + }, + + 'parse' : JSON.parse +} : + +window.JSON || { 'stringify' : X_JSON_stringify, 'parse' : X_String_parseTrustedJsonString }; + + function X_JSON_stringify( obj ){ var json = '', k, v; for( k in obj ){ if( json ) json += ','; v = obj[ k ]; v = v || v === 0 ? v : null; - json += '"' + k + '":' + ( X_Type_isObject( v ) ? X_NET_GIMR_toJSONString( v ) : X_Type_isString( v ) ? '"' + v + '"' : v ); + json += '"' + k + '":' + ( X_Type_isObject( v ) ? X_JSON_stringify( v ) : X_Type_isString( v ) ? '"' + v + '"' : v ); }; //console.log( json ); return '{' + json + '}'; diff --git a/0.6.x/js/06_net/00_XNet.js b/0.6.x/js/06_net/00_XNet.js index 6dbca99..fc5dc58 100644 --- a/0.6.x/js/06_net/00_XNet.js +++ b/0.6.x/js/06_net/00_XNet.js @@ -174,7 +174,7 @@ X[ 'Net' ] = X_EventDispatcher[ 'inherits' ]( X_Pair_create( this, opt ); - this[ 'listen' ]( [ X_EVENT_BEFORE_KILL_INSTANCE, X_EVENT_KILL_INSTANCE ], X_NET_proxyDispatch ); + this[ 'listen' ]( X_EVENT_KILL_INSTANCE, X_NET_proxyDispatch ); X_NET_QUEUE_LIST[ X_NET_QUEUE_LIST.length ] = this; !X_NET_currentQueue && X_NET_shiftQueue(); @@ -228,21 +228,20 @@ function X_NET_proxyDispatch( e ){ var i, flag, auth; switch( e.type ){ - case X_EVENT_BEFORE_KILL_INSTANCE : - if( this === X_NET_currentQueue && X_NET_completePhase ) return X_Callback_PREVENT_DEFAULT; - break; - case X_EVENT_KILL_INSTANCE : - i = X_NET_QUEUE_LIST.indexOf( this ); - - if( i !== -1 ){ - X_NET_QUEUE_LIST.splice( i, 1 ); - flag = true; + if( this === X_NET_currentQueue && X_NET_completePhase ){ + X_Pair_release( this ); + X_NET_shiftQueue(); + X_NET_completePhase = false; } else if( this === X_NET_currentQueue ){ X_NET_currentWrapper.cancel(); X_NET_shiftQueue(); flag = true; + } else + if( ( i = X_NET_QUEUE_LIST.indexOf( this ) ) !== -1 ){ + X_NET_QUEUE_LIST.splice( i, 1 ); + flag = true; }; if( flag ){ // flag が立つ場合、これは中断 @@ -263,18 +262,18 @@ function X_NET_proxyDispatch( e ){ }; case X_EVENT_SUCCESS : - case X_EVENT_TIMEOUT : X_NET_completePhase = true; this [ 'listenOnce' ]( X_EVENT_COMPLETE, X_NET_proxyDispatch ) - [ 'unlisten' ]( [ X_EVENT_BEFORE_KILL_INSTANCE, X_EVENT_KILL_INSTANCE ], X_NET_proxyDispatch ) [ 'asyncDispatch' ]( e ); this[ 'asyncDispatch' ]( 32, { type : X_EVENT_COMPLETE, 'lastEventType' : e.type } ); break; + case X_EVENT_COMPLETE : X_Pair_release( this ); X_NET_shiftQueue(); X_NET_completePhase = false; + this[ 'unlisten' ]( X_EVENT_KILL_INSTANCE, X_NET_proxyDispatch ); this[ 'kill' ](); break; }; @@ -286,7 +285,7 @@ function X_NET_shiftQueue(){ if( X_NET_currentQueue ){ if( X_NET_currentWrapper._busy ) return; X_NET_currentWrapper - [ 'unlisten' ]( [ X_EVENT_PROGRESS, X_EVENT_SUCCESS, X_EVENT_ERROR, X_EVENT_TIMEOUT ], X_NET_currentQueue, X_NET_proxyDispatch ) + [ 'unlisten' ]( [ X_EVENT_PROGRESS, X_EVENT_SUCCESS, X_EVENT_ERROR ], X_NET_currentQueue, X_NET_proxyDispatch ) .reset(); X_NET_currentQueue = X_NET_currentWrapper = X_NET_currentData = null; }; @@ -346,7 +345,7 @@ function X_NET_shiftQueue(){ break; }; - X_NET_currentWrapper[ 'listen' ]( [ X_EVENT_PROGRESS, X_EVENT_SUCCESS, X_EVENT_ERROR, X_EVENT_TIMEOUT ], X_NET_currentQueue, X_NET_proxyDispatch ); + X_NET_currentWrapper[ 'listen' ]( [ X_EVENT_PROGRESS, X_EVENT_SUCCESS, X_EVENT_ERROR ], X_NET_currentQueue, X_NET_proxyDispatch ); X_NET_currentWrapper.load( X_NET_currentData ); }; diff --git a/0.6.x/js/06_net/01_XNetXHR.js b/0.6.x/js/06_net/01_XNetXHR.js index dad1597..7e3bfe7 100644 --- a/0.6.x/js/06_net/01_XNetXHR.js +++ b/0.6.x/js/06_net/01_XNetXHR.js @@ -465,7 +465,7 @@ X_TEMP.X_Net_XHR_params = { break; }; - X_NET_XHRWrapper[ 'asyncDispatch' ]( 32, { type : X_EVENT_SUCCESS, status : status || 200, data : data, headers : headers || null } ); + X_NET_XHRWrapper[ 'asyncDispatch' ]( 32, { type : X_EVENT_SUCCESS, status : status || 200, response : data, headers : headers || null } ); } else { X_NET_XHRWrapper[ 'asyncDispatch' ]( 32, { type : X_EVENT_ERROR, status : raw.status || 0, 'percent' : 100, headers : headers || null } ); }; @@ -488,7 +488,7 @@ X_TEMP.X_Net_XHR_params = { case 'timeout' : // Gecko 12.0 https://developer.mozilla.org/ja/docs/XMLHttpRequest/Synchronous_and_Asynchronous_Requests X_NET_XHRWrapper._busy = false; X_NET_XHRWrapper._error = !!X_UA[ 'Gecko' ]; - X_NET_XHRWrapper[ 'asyncDispatch' ]( X_EVENT_TIMEOUT ); + X_NET_XHRWrapper[ 'asyncDispatch' ]( { type :X_EVENT_ERROR, 'timeout' : true } ); break; }; }, @@ -499,7 +499,7 @@ X_TEMP.X_Net_XHR_params = { if( live || raw.readyState < 3 ){ this._busy = false; - live && this[ 'asyncDispatch' ]( X_EVENT_TIMEOUT ); + live && this[ 'asyncDispatch' ]( { type : X_EVENT_ERROR, 'timeout' : true } ); }; this._timerID = 0; }, diff --git a/0.6.x/js/06_net/02_XNetJSONP.js b/0.6.x/js/06_net/02_XNetJSONP.js index 2c259c5..3fbcf77 100644 --- a/0.6.x/js/06_net/02_XNetJSONP.js +++ b/0.6.x/js/06_net/02_XNetJSONP.js @@ -33,8 +33,8 @@ X[ 'Net' ][ 'JSONP' ] = { X_NET_JSONPWrapper [ 'asyncDispatch' ]( { - type : jsonString ? X_EVENT_SUCCESS : X_EVENT_ERROR, - data : X_String_parseTrustedJsonString( jsonString ) + type : jsonString ? X_EVENT_SUCCESS : X_EVENT_ERROR, + response : X_String_parseTrustedJsonString( jsonString ) } ); X_Net_JSONP_errorTimerID && X_Timer_remove( X_Net_JSONP_errorTimerID ); @@ -104,17 +104,11 @@ X_TEMP.X_NET_JSONP_params = { } else if( X_UA[ 'IE8' ] ){ html = [ - // JavaScriptでunicode文字列をunescapeする - // http://perutago.seesaa.net/article/202801583.html - - // http://blog.livedoor.jp/dankogai/archives/51503830.html - // Ajax - IE8にもJSON入ってます。使えるとは限らないけど - // Compatibility mode (別名Quirks mode) では、JSONオブジェクトは無効になります。iframeもだめです '', '