DOMとブラウザのパターン

24

9月

2011

Javascriptパターン「DOMとブラウザのパターン」のメモ。

セレクタAPI

  • 新型ブラウザ、IE8以上で使うことができるAPI
  • 他のDOMメソッドで取得するよりも高速
document.querySelector("ul .selected");
document.querySelectorAll("#widget .class");

document.createDocumentFragment

  • ドキュメントの断片を作成することができる。
  • 要素追加毎にDOMアクセスするのではなく、断片を使用した「オフライン」で追加を行い、DOMアクセスは1回のみにする
var p, t, frag;
frag = document.createDocumentFragment();
p = document.createElement('p');
t = document.createTextNode('first paragraph');
p.appendChild(t);
frag.appendChild(p);
p = document.createElement('p');
t = document.createTextNode('second paragraph');
p.appendChild(t);
frag.appendChild(p);
document.body.appendChild(frag);

既存要素の更新

新規追加の場合は「createDocumentFragment」を、既存要素の更新にはcreateDocumentFragmentの代わりに「cloneNode」を使用する。

var oldnode = document.getElementById('result'),
clone = oldnode.cloneNode(true);
// クローンで作業する...
// 作業が完了したら:
oldnode.parentNode.replaceChild(clone, oldnode);

スクリプトをまとめる

Jqueryプラグイン等を使うと読み込むJavascriptファイルが増えるため、HTTPリクエストも増える。
これを解消するため、最終的にリリースする時にひとつのファイルのまとめた方が良い。

catでまとめる

$ cat jquery.js jquery.quickselect.js jquery.limit.js > all.js

デメリット

  • ブラウザキャッシュがなくなる。
  • ファイルの名前をall_110924.jsのように管理する必要がある

画像ビーコン

サーバにデータを送信するだけで、そのレスポンスは必要ない、というケースで使用

new Image().src = "http://example.org/some/page.php";
  • サイトへの来訪者の統計を取るなど、サーバに送信したデータをログに残したいときに便利
  • サーバからのレスポンスは1 × 1 のGIF 画像にするのが一般的なプラクティス(ただしアンチパターン)

Tags:Javascript

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

トラックバック:http://blog.orangemittoo.net/post/dom_browser_pattern/trackback/