07 | 2017/08 |  09

  1. 無料サーバー

User forum-FC2BLOG-Info-Edit Template-Post-Edit-Upload-LogOut

CSSやJavascript自習の苦闘史を綴っていきたい。恐縮ですがJavascriptを有効にしてご覧ください。
2005年12月から社会問題も掲載!

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

 

jquery.js におけるアニメーションコードの解読 ( 2 )

これから jquery.js のアニメーションコードに関わる各種のメソッドを解読していきます。

最初に、アニメーションコードの随所に登場し、アニメーションの登録/解除/実行をコントロールするメソッドを扱います。

このエントリイで解読するメソッドは、jQuery.queue、jQuery.dequeue、
jQuery().queue、及び jQuery().dequeue の 4 つで、このエントリイの末尾に 4 つのメソッドの全コードとその解説を掲載しました。

jQuery.queue( elem,type,data ) クラスメソッド

引数:要素ノード、タイプ名称、data(一般に関数)

返値:配列( data が配列ならばその各要素を要素とする配列、data が配列でないならば [data] )

機能:タグ要素に data を要素とする待ち行列を type 名で関連づけ、関連づけた配列を返します。具体的にはアニメーションメソッドを登録したり、登録を削除するために使用します

引数を使って説明すれば、elem 要素に type + "queue" 名で data を要素とする配列を関連づけ、かつその配列を返します。例えば data が animate メソッドなどの関数ならば、当該関数を要素とする配列が返されます。

なお、同一の elem に、同一の type 名で複数の data( data は同一でも異なっても可)を関連づけることも出来ますし、同一の elem に異なる type 名で、同一または別の data を関連づけることも可能です。

このメソッドを複数回起動すると、その回数個数の data が type 名でインスタンスに関連づけられます。

また data 引数なしでこのメソッドを起動すると、type 名で elem に関連づけられている配列があれば当該配列(空配列も含む)が返されます。

▲ToTop

jQuery.dequeue( elem.type ) クラスメソッド

引数:要素ノード、タイプ名

返値:なし

機能:インスタンスの各要素に関連づけられている待ち行列から、その要素を取り出して実行するメソッドで、具体的にはアニメーションメソッドを実行するために使用します。

正確に言えば、type 名がない場合とそれが fx の時には、配列の最初の要素を配列から削除した上で、配列の2番目の要素に登録されていた関数を実行し、type 名が fx ではない別の文字列の時には、最初の要素を配列から削除した上で、削除した要素を実行します。

なお、関連づけられているデータが関数でない場合には何もしません。

例:
$.queue($("p").get(0),"te",function(){return alert("test")})
$.dequeue($("p").get(0),"te") // type!=="fx" だから test が alert される。

$.queue($("p").get(0),"fx",[function f1(){return alert("test1")},function f2(){return alert("test2")}])
$.dequeue($("p").get(0),"fx") // type=="fx" だから test2 が alert される。

$.queue($("p").get(0),"fx",function f3(){return alert("test3")},function f4(){return alert("test4")})
$.dequeue($("p").get(0),"fx") // test3 が alert される。(下記参照)
/* 2 番目の queue メソッドによって 2 つの関数が最初の paragraph 要素に関連づけられるが、
 * 2 番目の dequeue メソッドによって、関数 f1 は配列から除かれる。
 * そこで第 3 の queue メソッドを実行した時点において、 fx 名で最初の paragraph 要素に
 * 関連づけられている配列の要素は、f2 関数と、f3 関数の 2 つとなる。
 * ( 3 番目の queue メソッドの第 4 引数は queue メソッドの定義から無視される。)
 * その後に 3 番目の dequeue メソッドを実行すると、type =="fx" だから 配列の 2 番目の
 * 要素に登録されている関数 f3 を実行する。
 */

▲ToTop

jQuery().queue( type,data ) インスタンスメソッド

引数:タイプ名、data(一般には関数)

返値:配列またはjQueryインスタンス

機能:第 2 引数 data を与えた場合には、インスタンスに登録されている各要素毎に data を要素とする配列を関連づけ、或る条件下では関連づけた関数を実行します。一方、data を与えない場合には、要素に関連づけられた配列があればその配列を返します。
以上を一言にまとめれば、「dataを配列に格納してその配列を要素に関連づけ、場合によっては配列を返すか、配列要素である関数を実行する」と言ったところでしょうか。

  1. type が文字列型でない場合(引数が全く存在しない場合、つまり type == undefined の場合も含む)には、それを data に代入して、type には fx を代入します。つまり引数で与えた data は type に置き換えられます。
    その上で data が undefined の場合、つまり引数が全くない場合には、最初のインスタンスに type 名で関連づけられた配列があればそれを返し、関連づけられた配列がなければ空配列を返します。
    特徴的なことは返値がインスタンスではなく配列であることです。
  2. type が文字列でない場合で、data (それは既に type に置き換えられている)があれば、インスタンスの各要素毎に data を要素とする配列を type 名で関連づけ、各要素毎に待ち行列配列を作成します。このとき (1)type 名が fx で、かつ(2)待ち行列の要素数が 1 で、(3)当該要素が関数ならば、当該関数を実行した上で、インスタンスを返します。
    他方、type 名が fx でないか、あるいは配列の要素数が0か2以上の場合には関数を全く実行せず、単にインスタンスを返します。
  3. type が文字列で data がなければ 1.のケースと同様に配列を返します。
  4. type が文字列で data があれば、待ち行列を作成します。しかし当該の文字列が "fx" でなければ、要素に type 名で data を要素とする配列を関連づけるだけでこのメソッドを終了します。他方、当該文字列が "fx" ならば、登録された配列要素数が1でその要素が関数の時だけ、その関数を実行します。

具体的には animate メソッド内で jQuery().queue メソッドが利用されますが、その際の引数は唯一の関数しかないので、当該関数が data に代入され、type=="fx" となります。こうして、インスタンスの各要素に関連づけられた当該関数が 1 つだけの場合には、当該関数が実行されます。

なお、登録されている関数が既に 1 つ以上ある場合には、関数は実行されず配列内に登録されるだけです。

また、jquery.js には空配列だけを引数として jQuery().queue メソッドが利用されるシーンもあります。この場合には、上記 3. から type="fx"、data=[] となり、待ち行列の要素数はゼロですから、何も実行されません。但し、このときにはタグ要素に fx 名で関連づけられている配列は空配列となります。つまり、 jQuery().queue([]) を実行すると登録メソッドが削除されてなくなります。

▲ToTop

jQuery().dequeue( type ) インスタンスメソッド

引数:type

返値:インスタンスの個々の要素毎に jQuery.dequeue(this,type) を実行します。

機能:type 名がないか、それが fx の時には、配列の最初の要素を削除した上で、新たに最初の要素となった関数(それは削除前には配列の2番目の要素に登録されていた)を実行し、type 名が fx でない場合には、最初の要素を配列から削除した上で、その関数を実行します。なお、関連づけられているデータが関数でない場合にはこのメソッドは何もしません。

--------------------------------------------------------
■$.queue & $.dequeue メソッドコード解読
1271:jQuery.extend({ // jQuery オブジェクトの拡張
・・・・・・・・・・・・・
    // これは、ノードに data を要素とする配列を関連づけ、、かつ関連づけられた 
    // 配列を返すメソッドである。dataは関数であることを暗黙の前提としているが、
    // このメソッドではその関数を実行することはない。あくまでも登録するだけである。
1339: queue: function( elem, type, data ) {
1340:  if ( elem ){
1341: 
1342:   type = (type || "fx") + "queue"; // ex."fxqueue"
1343:   // 要素 elem に type 名で関連づけられた値を返す。
1344:   var q = jQuery.data( elem, type ); // 返値は配列または未定義値となる。
1345:   // q が 未定義か、または 第 3 引数 data が配列ならば
1346:   if ( !q || jQuery.isArray(data) )
       // elem に type 名で jQuery.makeArray(data) を関連づける
       // q には jQuery.makeArray(data) が代入される。
1347:    q = jQuery.data( elem, type, jQuery.makeArray(data) );
1348:   else if( data ) // q が存在するか、配列ではない第 3 引数 data が
1349:    q.push( data ); // ある場合には配列 q に data を格納する。
1350:   // 以上の結果 q は必ず配列型の変数となる。
1351:  }
1352:  return q; // elem があろうがなかろうが、兎に角 q を返す。
     // data が未定義の時には q は空配列となる。
     // なお、elem がないときには明らかに return q; がエラーを引き起こす。
     // (Error:ReferenceError: q is not defined)
1353: },
1354: // $.queue により elem に関連づけられた data(関数)を実行するメソッド
    // 但し、type が fx の時などには、2番目の data を実行することに留意。
1355: dequeue: function( elem, type ){
1356:  var queue = jQuery.queue( elem, type ), // queue = [data] or []
1357:    fn = queue.shift(); // queue の最初の要素を削除し、それを fn に返す。
1358:    // 最初の要素がない場合には fn は false となる。
1359:  if( !type || type === "fx" ) // type がないか "fx" ならば、
1360:   fn = queue[0]; // 1356行の変数 queue の2番目の要素
1361:   
1362:  if( fn !== undefined ) // fn が定義されていれば fn を実行する。
1363:   fn.call(elem); // fn が未定義ならば何もしない。
1364: }
1365:});
■$().queue & $().dequeue インスタンスメソッドコード解読
1367:jQuery.fn.extend({ // jQuery インスタンスのプロトタイプを拡張する
・・・・・・・・・・・・・
1392: queue: function(type, data){ // このメソッドは条件によっては関数を実行する。
1393:  if ( typeof type !== "string" ) { // type が文字列でないならば
1394:   data = type; // type 値を data に代入し
1395:   type = "fx"; // type 値を "fx" とする。
1396:  }
1397:  // (1)data が未定義の場合
1398:  if ( data === undefined )
      // type 名で最初のインスタンスに関連づけられている配列を返す。
      // 既に関連づけられている待ち行列配列がない場合には空配列が返される。
1399:   return jQuery.queue( this[0], type );
1400:  // (2)data が定義されている場合
1401:  return this.each(function(){ // jQuery インスタンスを返す。
      // jQuery インスタンスの個々の要素毎に待ち行列配列 queue を作成する。
1402:   var queue = jQuery.queue( this, type, data );
1403:   // もし type が fx で配列 queue の要素数が 1 ならば
1404:   if( type == "fx" && queue.length == 1 )
1405:    queue[0].call(this); // 関数 queue[0] を実行する。
      // type 名が fx でないか、待ち行列 queue の要素数が 0 か 2 以上の場合には
      // 何もせずに jQuery インスタンスが返される。
1406:  });
1407: },
1408: dequeue: function(type){
1409:  return this.each(function(){ // jQueryインスタンスの個々の要素毎に
1410:   jQuery.dequeue( this, type ); // type 名で登録されている関数 data を実行する。
1411:  });
1412: }
1413:});

 

■ コメントの投稿 ■

管理者にだけ表示を許可する

●トラックバック●

■トラックバックURLはこちら■
http://hkom.blog1.fc2.com/tb.php/719-18d7067d

●参照元一覧●

<provided Fc2>
<provided i2i>

▲ToTop

 90%近いシェアを握っているインターネットエクスプローラの描画エンジンを利用したタブbrowser。沢山のタブbrowserがあるが、多機能、カスタマイズフリー、スクリプト利用等で一日の長がある。Gekkoエンジンへの対応も行われ、IEからの自立独立の方向に向かっている。2005年7月にはIE7が登場する見通しの中で、今後の発展が望まれる。

 多様なCSS作成支援機能を備えた、タグ入力式 HTML&CSS作成支援エディタ。スキンデザインもすっきりしている。テキストエディター上で作成するよりも確実で安全にタグ打ちが出来る。
文字コードを選べないのが欠点。

 StyleNote同様のタグ入力式 HTML&CSS 作成支援エディタ。長年使用してきたが現在StyleNoteに乗り換えつつある。

 クリップボード履歴情報を活用する為のソフト。画像まで履歴を取ってくれるのが嬉しい。このソフトを使わない日は絶対ない程に重宝し、愛用している。

 起動中のウィンドウの「コピーできない」説明文などの文字列を取得し、コピー可能な文字データにするツール。何かと便利。

 ストリーミングデータを保存することが出来るソフト。動画利用には不可欠なソフトだ。

 無料ながらレイヤー機能を有し、スクリプトによる拡張も可能な、sleipnir作者が提供している優れもの画像編集ソフト。

 画面キャプチャソフトと言えばこれに勝るものなし、ではないだろうか? 様々な取得方法を有しており、ブログ作成にもHomepage作成に不可欠だ。Jtrimと並んでWoodyBellsの作品。

 複数ファイルの同時編集は出来ないが、透過pngも作れる画像編集ソフト。
(以下当該サイトから抜粋)初心者にも簡単に操作が出来るフォトレタッチソフトです。多くの加工機能で画像に様々な効果を与えることができます。非常に軽快に動作するため、ストレスなく操作できます。

 Animation Gifファイルを作れる無料ソフト。

 キャプチャソフト。画面内にサイト全体が表示しきれない場合でも、これを使えば全体をキャプチャすることが出来る。

 画像処理。画像のフォーマット変換のみならず、色数やサイズ、圧縮率の変更まで一括処理できてしまう『BatchGOO!』は、大量の画像をまとめて処理したいときに大変便利なソフト。BMP, TIFF, JPEG, PCX, PNG の相互変換をはじめ、色数・サイズ・解像度の統一、JPEG圧縮率の調節など、ホームページ用の画像や携帯電話用の壁紙を揃えるのに抜群の相性を見せる。(Vectorの当該ソフト紹介頁より抜粋引用)

 名前から直ぐに想像が付くように画像のサイズを測るためのソフトだ。Homepage作成には欠かせない。2カラム、3カラムのレイアウトを行う場合に大変重宝する。

 ランチャーソフトは沢山あるが、中でもこれが一押しだ。2年以上使ってきたがその操作性には毎日満足している。これを使い始めてからデスクトップには一切のアイコンを表示することをやめてしまった。

 AdobeReader7によって、起動時間が長すぎるという長年のユーザーの不満はある程度解消した。そのためこの高速化ソフトは存在価値が低下してしまったかもしれない。AdobeReader6迄はこのソフトによる起動高速化で恩恵を受けてきた。

 IE専用が難点だが、様々なサイト内でIDやパスワードを入力するのに重宝するソフト。コンテキストメニューから簡単に起動できるのがGood! sleipnir等のIEの描画エンジンを利用しているブラウザでも使える。

 利用しているパソコンの諸元値を取得するには、このソフトがベストだ。インストール済みソフトの一覧が取得できるのも嬉しい。

 WMPは機能が豊富なだけ重い。RealPlayerも同様だ。そこでMedia Player Classicを使いたい。動作が軽快なだけではなく、対応しているファイル形式もすこぶる多く、これひとつで、wmvもrmも表示できてしまうのだから凄い! 数多あるMedia Playerの王様と言えるだろう。

 自宅でPCを起動しているときには必ず起動しているメディアプレーヤー。何かと過剰なWinampよりも、起動も速くスキンはシンプルだ。

 DivX, Xvid, Mov, Vob, Mpeg, Mpeg4, avi, wmv, dv, などの動画をDVD-Video形式に変換できるフリーソフト。クリックするとDVD関連ソフト紹介サイト=「DVDなToolたち」なるHomepageが開きます。

----------
200907200154
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。