tanaka's Programming Memo

プログラミングについてのメモ。

パーフェクトJavaScript勉強メモ(12)

JavaScript Web 書籍

前へ | 次へ

12章 ライブラリ

ライブラリを使うべき利用

jQueryの特徴

jQueryの基本

記述例
メソッドチェーン
  • p313 jQueryオブジェクトのほとんどのメソッドはjQueryオブジェクトを返す
  • 処理結果のjQueryオブジェクトが返ることで、続けてメソッドを記述していけるのがメソッドチェーン
  • 元のjQueryオブジェクトと、メソッドの返り値のjQueryオブジェクトは同一とは限らない
  • 初めに一回取得したjQueryオブジェクトを変数に代入して、その変数を都度アクセスしていては正しく動作しない。戻り値を操作すること
  • end()メソッドを呼び出すと、メソッドチェーンのjQueryオブジェクトをひとつ前の状態に戻すことができる

メソッドチェーンのデメリット

$関数

セレクタにマッチする要素を抽出する
  • $関数にCSSセレクタを渡すと、それにマッチする要素を抽出。第2引数にCSSセレクタやHTMLElementオブジェクトを指定すると、第2引数の要素の範囲から、第1引数を検索する
  • ブラウザのCSS対応は無関係に利用可能
新しくDOM要素を作成する
  • $関数にhtmlのタグとして解釈できる文字列を渡すと、その要素を作成できる
既存のDOM要素をjQueryオブジェクトに変換する
  • p315 $関数に既存のDOM要素を渡す
DOM構築後のイベントリス名を設定する
  • $関数に、関数オブジェクトを渡すと、その関数がDOM構築後に実行される
  • documentのreadyイベントと同等

jQueryによるDOM操作

要素の選択
要素の作成・追加・置換・削除
  • 要素の作成には$関数
  • append()で要素の追加と作成を同時に行う
  • 置換はreplaceWith()など
  • remove()で削除
  • p318 操作一覧

jQueryによるイベント処理

イベントリスナの登録・削除
  • bind()/unbind()で、設定でき、一括設定もできる
  • オブジェクトで複数の要素を並べると、1つの要素に一括で複数のイベントを設定できる
  • p319 live()/die()も、bind()とunbind()と同様にイベントを設定できるのに加え、設定後に追加された要素にもイベントが設定され続ける。documentオブジェクトにイベントリスナが設定され、パブリングしてきたイベントをチェックして必要な時に処理を行う。live()の動作を無効にするのがdie()
  • delegate()/undelegate()は、live()に似ており、documentオブジェクト以外のオブジェクトに対してイベントリスナを設定する。条件が絞られるのでこちらの方がパフォーマンスがよい
  • p320 one()はbind()の特殊系。一度だけ実行される
イベント専用のイベントリスナ登録メソッド
  • 標準的なイベントには専用のメソッドが用意されている
  • DOM Level3で定義されているイベント一覧 10-6-2にも記載
  • 第1引数にイベントリスナに渡すデータのマップ（省略可）、第2引数にイベントリスナを指定。イベント発火時の処理用のデータがあれば、第1引数のオブジェクトで渡せばよい
  • 引数を省略すると、そのイベントを発火させることができる
p321 ready()メソッド

jQueryによるスタイル操作

基本的なスタイル操作
  • p321 スタイル操作メソッド一覧
  • p322 '+=10'や'-=20'などの指定が可能
アニメーション
  • p323 durationはアニメ時間のミリ秒
  • easingのswingは、最初ゆっくり中間速く終わりゆっくり。linearは等速
  • callbackはアニメーション完了時に呼ばれる関数。引数はなし。thisはアニメーションしているDOM要素。bindの関数は使えるか？
  • アニメに使える関数一覧
  • p324 jQuery.fx.intervalは、アニメーションのフレーム間隔。デフォルトは13ミリ秒
  • jQuery.fx.offにtrueを設定すると、すべてのアニメーション効果が無効になる。モバイルなどの遅い処理系で利用

jQueryによるAJAX

AJAX()関数
  • p325 ajax()関数に指定可能なプロパティ一覧
AJAX()のラッパー関数
  • p326 よく使われるラッパー関数。get,post,getJSON,getScriptがある
  • ajaxSetup()でajax()のオプションのデフォルト値を設定できる。これで設定してから、ラッパー関数を利用することもできる
グローバルイベント
  • ajax()関数を使うと、自動的にいくつかのイベントが発火する。これらをグローバルイベントという
  • これらをオフにするには、globalプロパティをfalseにする
  • グローバルイベントに対するイベントリスナを登録するためのメソッド一覧
    • ajaxStart / ajaxSend / ajaxSuccess / ajaxError / ajaxComplete / ajaxStop

Deferred

  • 非同期処理を直列に記述、実行する仕組み
Deferredの基本
  • p327 $.Deferred()オブジェクトを作成
  • 処理が終わったら、Deferredオブジェクトのresolve()を呼び出す
  • 処理を開始する関数の戻り値に、Deferredオブジェクトのpromise()オブジェクトをreturnする
  • 以上でメソッドチェーンを作成する
  • Deferredオブジェクト
    • unresolved,resolved,rejectedのいずれかの状態を持つオブジェクト。初期状態はunresolved
    • resolvedかrejectedになったら後続処理が実行される
  • Promiseオブジェクト
    • Deferredオブジェクトから状態遷移する機能を削除したもの
状態遷移
  • p328 Deferredオブジェクトの状態は、resolve()でresolvedに、reject()でrejectedになる。これが後続関数の引数になる
  • resolveWith()やrejectWith()を使うと、後続関数のthisを第1引数に、第2引数以降に後続関数に渡す引数を並べることができる
  • isResolved()やisRejected()で状態を調べられる
後続関数
  • p329 done()は状態がresolvedになった場合に実行する処理を指定
  • fail()は状態がrejectedになった場合に実行する処理を指定
  • then()は第1引数にresolvedの時、第2引数にrejectedの時の関数を渡して両方に対応できる
  • always()はどちらでも実行
  • それぞれのメソッドを複数回実行することも可能。メソッドを実行した順番通りに後続関数は実行される
  • すでにresolvedになっている状態でdone()メソッドを実行すると、即座に後続処理が実行される
  • pipe()
    • resolvedとrejectedの両方の関数を設定するが、pipe()は後続関数に別の値を渡すことができる
    • p331 pipe()を使わない場合、done()を2つ定義すると、最初がresolvedになったタイミングで、1つ目に続けて2つ目のdone()も実行してしまう
    • 真ん中をpipe()にした場合は、後続に状態は引き継がず、pipe()の処理で新たにDeferredを発行できる
    • pipe()で指定した以降は、そのpipe()の状態が使われる
    • pipe()がnullを返すと、前の状態で実行される
並列処理
  • $.when()関数を使うと、複数の非同期処理がすべて完了するまで後続の処理を遅延させることができる
  • AJAX関数の戻り値もDeferredオブジェクト
  • $.when($.get('/foo'),$.get('/bar')).done(～).fail(～)など
  • p332 一つでもrejectedになったら、全て失敗する

jQueryプラグイン

jQueryプラグインの利用
p333 jQueryプラグインの作成

他のライブラリとの共存

$オブジェクトの衝突
  • p334 多くのJavaScriptライブラリが$オブジェクトを利用する
$オブジェクトの衝突回避
  • p335 noConflict()メソッドを使って、window.$を削除して、もとの$に戻す
  • jQueryにはwindow.jQueryでアクセスするなど

ライブラリの利用方法

  • $関数による要素の追加と作成
  • イベントの第1引数で、イベントに利用するパラメータの指定が可能
  • Deferredで通信手順を簡易化
  • ライブラリはGoogle Libraries APIを利用

前へ | 次へ