メモ。
// GETメソッドで通信を行う。送信データ、成功時コールバック関数、レスポンスデータタイプを指定可能 get(url, data, success, dataType); // POSTメソッドで通信を行う。引数は上記get()と同様 post(url, data, success, dataType); // JSONデータをGETメソッドで取得する。送信データ、成功時コールバック関数を指定可能 getJSON(url, data, success); // JavascriptをGETメソッドで取得し、実行する。成功時のコールバック関数を指定可能 getScript(url, success);
ajaxSetup()関数を用いるとajax()関数で指定可能なオプションの初期値をセットできる。
ajaxSetup()でイニシャライズを済ませておき、実際の通信はラッパー関数で行えば非常にスマートなコードにできそう。
めも。
// 言語情報やユーザーエージェントなどの情報が格納されている window.navigator // URLに関する情報が格納されている window.location // ブラウザ履歴を戻るback()メソッドや進めるforward()メソッドなど、履歴操作に纏わるメソッドが格納されている window.history // 表示している画面の幅、高さ、色数などの情報が格納されている window.screen // 画面内に複数のフレームが存在している場合、そのフレームへの参照が格納される window.frames // レンダリングされているDOMが全て格納される window.document
たとえば。
> window.navigator.userAgent "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1599.101 Safari/537.36" > window.screen.width 1440
といった具合に情報を取り出すことが出来る。
めも。
console.profile()、console.profileEnd()を用いると各関数の実行回数、合計の実行時間などを計測し、コンソールへ詳細に吐き出してくれる。
上記関数にはそれぞれ同一のキーを引数として渡し、同じキーが指定されたものをペアとしてその区間の計測結果を出力してくれる。
例えば下記のようなjQueryを用いたコードのパフォーマンスを詳細に計測したい場合。
<script>
var obj = {};
obj.test = function(){
console.log('ok');
}
$(function(){
for(var i = 0; i < 100; i++){
for(var j = 0; j < 10; j++){
obj.test();
}
}
})
</script>
下記のようにconsole.profile()、console.profileEnd()を挿入してみる。
<script>
var obj = {};
obj.test = function(){
console.log('ok');
}
$(function(){
console.profile('key');
for(var i = 0; i < 100; i++){
for(var j = 0; j < 10; j++){
obj.test();
}
}
console.profileEnd('key');
})
</script>
そして、これを実行すると下記のようなデバッグ結果が出力される。
※下記はChromeで実行した場合のデバッグコンソール。
パフォーマンスを極限まで追及する際に欠かせない非常に強力な機能だね。
めも。
console.trace();
変数のデバッグ時はconsole.log()関数を用いるが、その関数がどこから呼ばれたのかを詳細に表示したい場合は、console.trace()関数を用いるとよい。
console.trace()はトリガーになったイベントがどのオブジェクトのものであるかまで判明するため、イベントドリブン形式でプログラムを記述している場合は非常に有用。
めも。
<script src="//example.com/hoge.js"></script> <script src="//example.com/fuga.js" defer></script>
上記2行目のようにscriptタグに対しdefer属性を追加してやると、そのscriptタグの評価を他全てのscriptタグの評価終了後に遅延させることが出来る。
逆に非同期で外部JSファイルを読み込み逐次評価させたい場合は下記のように、async属性を追加してやればよい。
<script src="//example.com/hoge.js"></script> <script src="//example.com/fuga.js" async></script>
まぁ普通にjQueryの$(function(){…})でやればいいことなんだけれども。